/* --- */ /* Primary CTA, premium hover lift */ .hero-finder-cta{transition:transform var(--t-base) cubic-bezier(.22,1,.36,1),box-shadow var(--t-base)!important;will-change:transform} .hero-finder-cta:hover{transform:translateY(-1px) scale(1.015)!important;box-shadow:0 10px 30px rgba(45,155,111,.32)!important} .hero-finder-cta:active{transform:scale(.99)!important} /* City picker pulse on CTA trigger */ @media(prefers-reduced-motion:reduce){ .hero-finder-cta:hover{transform:none!important} } /* Status microcopy (Heute verfügbar / Termine diese Woche) */ /* Card entrance, slight upward fade (only on home hero card) */ .hero-right-picker .city-picker{animation:cp-fadeIn .7s .25s cubic-bezier(.22,1,.36,1) both} @keyframes cp-fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.hero-right-picker .city-picker{animation:none}} /* Mobile sticky CTA, home only */ @media(max-width:900px){ body:not(.on-subpage) .home-mobile-cta button:active{transform:scale(.98)} /* hide subpage mobile bar on home (already handled but reinforce) */ body:not(.on-subpage) .mobile-cta-bar{display:none!important} /* push footer up so sticky bar doesn't overlap last content */ body:not(.on-subpage) footer{padding-bottom:88px!important} } /* --- */ /* Primary WA CTA in hero */ .hero-wa-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:500px;background:#25D366;color:#fff;font-family:var(--font-sans);font-size:15.5px;font-weight:600;padding:15px 26px;border-radius:50px;text-decoration:none;border:none;cursor:pointer;letter-spacing:-.005em;box-shadow:0 4px 22px rgba(37,211,102,.34),0 1px 3px rgba(0,0,0,.04);transition:background var(--t-base) cubic-bezier(.22,1,.36,1),transform var(--t-fast),box-shadow var(--t-base);will-change:transform;position:relative;overflow:hidden} .hero-wa-cta svg{flex-shrink:0} .hero-wa-cta:hover{background:#1fbb5a;transform:translateY(-1px) scale(1.012);box-shadow:0 10px 32px rgba(37,211,102,.42),0 2px 8px rgba(0,0,0,.06)} .hero-wa-cta:active{transform:scale(.99)} /* Trust micro under CTA */ .hero-wa-trust{display:inline-flex;align-items:center;gap:7px;margin-top:11px;padding-left:4px;font-size:12px;color:#6B7280;font-family:var(--font-sans);font-weight:400} .hero-wa-dot{width:6px;height:6px;border-radius:50%;background:#25D366;flex-shrink:0;animation:pulse 2.4s ease infinite;box-shadow:0 0 0 0 rgba(37,211,102,.45);animation:wa-sonar 2.6s ease-out infinite} @keyframes wa-sonar{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 7px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} /* Mobile sticky CTA, WA */ @media(max-width:900px){ body:not(.on-subpage) .home-mobile-wa:active{transform:scale(.98);background:#1fbb5a} body:not(.on-subpage) footer{padding-bottom:88px!important} } @media(prefers-reduced-motion:reduce){.hero-wa-cta:hover{transform:none}.hero-wa-dot{animation:none;box-shadow:0 0 0 0 rgba(37,211,102,.4)}} /* --- */ /* Grid picker, static cards, all locations visible */ /* Flagship card, full width above grid */ .cp-card:active{transform:scale(.99)} /* Flagship */ /* 2-col grid */ @media(max-width:1024px){.hero-right-picker{padding:0;margin-top:24px}} /* --- */ /* ── CITY PICKER (hero-right) ── */ .hero-right-picker{display:flex;align-items:center;justify-content:center;padding:0 16px} @media(max-width:1024px){.hero-right-picker{padding:0;margin-top:24px}} /* ── WA SECTION CONCIERGE (replaces fake chat) ── */ .wa-concierge{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:24px;box-shadow:0 0 0 1px rgba(45,155,111,.08),0 12px 40px rgba(0,0,0,.22);font-family:var(--font-sans)} .wa-concierge-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)} .wa-concierge-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:4px} .wa-concierge-sub{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:12px;line-height:1.5} .wa-concierge-textarea{width:100%;font-family:var(--font-sans);font-size:14px;color:#fff;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;resize:vertical;min-height:80px;outline:none;line-height:1.6;transition:border-color var(--t-base),background var(--t-base),box-shadow var(--t-base)} .wa-concierge-textarea::placeholder{color:rgba(255,255,255,.32);font-style:italic} .wa-concierge-textarea:focus{border-color:rgba(45,155,111,.55);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(45,155,111,.14)} .wa-concierge-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .wa-pill{display:inline-flex;align-items:center;padding:6px 13px;border-radius:100px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font-family:var(--font-sans);font-size:12.5px;font-weight:500;color:rgba(255,255,255,.75);cursor:pointer;transition:all var(--t-fast);white-space:nowrap} .wa-pill:hover{border-color:rgba(45,155,111,.4);background:rgba(45,155,111,.12);color:#fff} .wa-pill:active{transform:scale(.97)} .wa-concierge-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;background:var(--blue);color:#fff;border:none;border-radius:100px;padding:14px 22px;font-family:var(--font-sans);font-size:14.5px;font-weight:600;cursor:pointer;transition:background var(--t-base),transform var(--t-fast),box-shadow var(--t-base);box-shadow:0 4px 22px rgba(45,155,111,.32);letter-spacing:.01em} .wa-concierge-submit:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 6px 28px rgba(45,155,111,.42)} .wa-concierge-submit:active{transform:scale(.98)} .wa-concierge-wa-alt{display:block;text-align:center;margin-top:11px;font-size:12px;font-weight:500;color:rgba(255,255,255,.42);text-decoration:none;transition:color var(--t-fast)} .wa-concierge-wa-alt:hover{color:rgba(255,255,255,.7)} @media(max-width:600px){.wa-concierge{padding:18px}} /* --- */ html:not(.ready){visibility:hidden} .page{display:none!important} .page.active{display:block!important} #home-content{display:block} @media(max-width:900px){ #sg-premium-hero.sg-active .sg-crumb, #sg-premium-hero.sg-active .sg-eyebrow, #sg-premium-hero.sg-active .sg-location, #sg-premium-hero.sg-active .sg-sub, #sg-premium-hero.sg-active .sg-support, #sg-premium-hero.sg-active .sg-urgency{display:none} #sg-premium-hero.sg-active .sg-mobile-brand{display:block;font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2D9B6F;margin:0 0 10px} #sg-premium-hero.sg-active .sg-title{max-width:50vw;font-size:clamp(24px,6.4vw,34px);line-height:1.1;margin:0 0 12px;letter-spacing:-.02em} #sg-premium-hero.sg-active .sg-title em{font-size:.92em;display:block;margin-top:4px} #sg-premium-hero.sg-active .sg-mobile-sub{display:block;margin-top:calc(95vw + 24px);font-family:var(--font-sans);font-size:15.5px;line-height:1.55;color:#3A3A3A;max-width:none;margin-bottom:18px} #sg-premium-hero.sg-active .sg-ctas{max-width:none;margin-top:0} #sg-premium-hero.sg-active .sg-trust{max-width:none} } @media(max-width:900px){ #sg-premium-hero.sg-active{background-image:none !important;background-color:#fff !important;min-height:auto !important;padding:0 !important} #sg-premium-hero.sg-active .sg-city-banner{margin:0 0 4px !important} #sg-premium-hero.sg-active .sg-inner{grid-template-columns:1fr !important;gap:0 !important;padding:0 20px 32px !important;align-items:stretch !important} #sg-premium-hero.sg-active .sg-text{display:flex !important;flex-direction:column !important;max-width:none !important;margin:0 !important} #sg-premium-hero.sg-active .sg-mobile-brand, #sg-premium-hero.sg-active .sg-crumb, #sg-premium-hero.sg-active .sg-location, #sg-premium-hero.sg-active .sg-sub, #sg-premium-hero.sg-active .sg-support, #sg-premium-hero.sg-active .sg-urgency, #sg-premium-hero.sg-active .sg-ctas, #sg-premium-hero.sg-active .sg-trust{display:none !important} #sg-premium-hero.sg-active .sg-eyebrow{display:inline-block !important;font-family:var(--font-sans);font-size:11.5px;letter-spacing:.12em;color:#2D9B6F;font-weight:700;text-transform:uppercase;margin:14px 0 10px} #sg-premium-hero.sg-active .sg-title{font-family:var(--font-sans);font-size:clamp(26px,7vw,34px);line-height:1.1;letter-spacing:-.025em;margin:0 0 10px;max-width:none;color:#111;font-weight:800} #sg-premium-hero.sg-active .sg-title em{color:#2D9B6F;font-style:italic;font-weight:700;display:inline} #sg-premium-hero.sg-active .sg-mobile-sub{display:block !important;font-family:var(--font-sans);font-size:15px;line-height:1.5;color:#4B5563;margin:0 0 14px;max-width:none} #sg-premium-hero.sg-active .sg-mobile-wa{display:flex !important;flex-direction:column;gap:14px;background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:18px;margin:0 0 12px;box-shadow:0 1px 2px rgba(16,24,40,.03)} #sg-premium-hero.sg-active .sg-mobile-wa-head{display:flex;gap:12px;align-items:flex-start} #sg-premium-hero.sg-active .sg-mobile-wa-icon{width:40px;height:40px;background:#2D9B6F;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff} #sg-premium-hero.sg-active .sg-mobile-wa-text strong{display:block;font-family:var(--font-sans);font-size:15px;font-weight:700;color:#111;margin:0 0 3px} #sg-premium-hero.sg-active .sg-mobile-wa-text span{display:block;font-family:var(--font-sans);font-size:13.5px;color:#4B5563;line-height:1.5} #sg-premium-hero.sg-active .sg-mobile-wa-cta{display:block !important;text-align:center;background:#2D9B6F;color:#fff;padding:14px 20px;border-radius:100px;font-family:var(--font-sans);font-size:15px;font-weight:700;text-decoration:none;letter-spacing:-.005em} #sg-premium-hero.sg-active .sg-mobile-secondary{display:block !important;width:100%;background:#fff;border:1.5px solid #2D9B6F;color:#2D9B6F;padding:13px 20px;border-radius:100px;font-family:var(--font-sans);font-size:15px;font-weight:700;cursor:pointer;margin:0 0 22px;letter-spacing:-.005em} #sg-premium-hero.sg-active .sg-media{display:block !important;width:100%;margin:0 0 12px;border-radius:18px;overflow:hidden;background:#f5f5f5} #sg-premium-hero.sg-active .sg-media img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:center 35%;border-radius:18px;display:block} #sg-premium-hero.sg-active .sg-mobile-trust{display:block !important;font-family:var(--font-sans);font-size:12.5px;color:#6B7280;text-align:center;line-height:1.6;margin:4px 0 0} #sg-premium-hero.sg-active .sg-mobile-trust .sg-tsep{color:#C4BFB3;margin:0 4px} } @media(max-width:900px){ #sg-premium-hero.sg-active .sg-inner{display:flex !important;flex-direction:column !important} #sg-premium-hero.sg-active .sg-text{display:contents !important} #sg-premium-hero.sg-active .sg-eyebrow{order:1} #sg-premium-hero.sg-active .sg-title{order:2} #sg-premium-hero.sg-active .sg-mobile-sub{order:3} #sg-premium-hero.sg-active .sg-media{order:4} #sg-premium-hero.sg-active .sg-mobile-wa{order:5} #sg-premium-hero.sg-active .sg-mobile-secondary{order:6;margin-bottom:10px} #sg-premium-hero.sg-active .sg-mobile-trust{order:7} } @media(max-width:900px){ #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach{background-image:none !important;background-color:#fff !important;min-height:auto !important;padding:0 !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-city-banner{margin:0 0 4px !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-inner{display:flex !important;flex-direction:column !important;grid-template-columns:1fr !important;gap:0 !important;padding:0 20px 32px !important;align-items:stretch !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-text{display:contents !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-crumb, #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-location, #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-sub, #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-ctas, #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-trust{display:none !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-eyebrow{order:1;display:inline-block !important;font-family:var(--font-sans);font-size:11.5px;letter-spacing:.12em;color:#2D9B6F;font-weight:700;text-transform:uppercase;margin:14px 0 10px} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-title{order:2;font-family:var(--font-sans);font-size:clamp(26px,7vw,34px);line-height:1.1;letter-spacing:-.025em;margin:0 0 10px;max-width:none;color:#111;font-weight:800} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-title em{color:#2D9B6F;font-style:italic;font-weight:700;display:inline} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-sub{order:3;display:block !important;font-family:var(--font-sans);font-size:15px;line-height:1.5;color:#4B5563;margin:0 0 14px;max-width:none} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-media{order:4;display:block !important;width:100%;margin:0 0 12px;border-radius:18px;overflow:hidden;background:#f5f5f5} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-media img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:center 35%;border-radius:18px;display:block} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa{order:5;display:flex !important;flex-direction:column;gap:14px;background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:18px;margin:0 0 12px;box-shadow:0 1px 2px rgba(16,24,40,.03)} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-head{display:flex;gap:12px;align-items:flex-start} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-icon{width:40px;height:40px;background:#2D9B6F;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-text strong{display:block;font-family:var(--font-sans);font-size:15px;font-weight:700;color:#111;margin:0 0 3px} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-text span{display:block;font-family:var(--font-sans);font-size:13.5px;color:#4B5563;line-height:1.5} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-cta{display:block !important;text-align:center;background:#2D9B6F;color:#fff;padding:14px 20px;border-radius:100px;font-family:var(--font-sans);font-size:15px;font-weight:700;text-decoration:none;letter-spacing:-.005em} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-secondary{order:6;display:block !important;width:100%;background:#fff;border:1.5px solid #2D9B6F;color:#2D9B6F;padding:13px 20px;border-radius:100px;font-family:var(--font-sans);font-size:15px;font-weight:700;cursor:pointer;margin:0 0 10px;letter-spacing:-.005em} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-trust{order:7;display:block !important;font-family:var(--font-sans);font-size:12.5px;color:#6B7280;text-align:center;line-height:1.6;margin:4px 0 0} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-trust .sg-tsep{color:#C4BFB3;margin:0 4px} } @media(max-width:900px){ #sg-premium-hero.sg-active .sg-city-banner, #generic-premium-hero.sg-active.sg-city-wil .sg-city-banner, #generic-premium-hero.sg-active.sg-city-rorschach .sg-city-banner{display:none !important} } @media(max-width:900px){ #sg-premium-hero.sg-active .sg-inner, #generic-premium-hero.sg-active.sg-city-wil .sg-inner, #generic-premium-hero.sg-active.sg-city-rorschach .sg-inner{padding:8px 20px 28px !important} #sg-premium-hero.sg-active .sg-eyebrow, #generic-premium-hero.sg-active.sg-city-wil .sg-eyebrow, #generic-premium-hero.sg-active.sg-city-rorschach .sg-eyebrow{margin:0 0 8px !important;font-size:10.5px !important} #sg-premium-hero.sg-active .sg-title, #generic-premium-hero.sg-active.sg-city-wil .sg-title, #generic-premium-hero.sg-active.sg-city-rorschach .sg-title{font-size:clamp(24px,6.4vw,30px) !important;margin:0 0 8px !important} #sg-premium-hero.sg-active .sg-mobile-sub, #generic-premium-hero.sg-active.sg-city-wil .sg-mobile-sub, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-sub{font-size:14.5px !important;margin:0 0 10px !important} #sg-premium-hero.sg-active .sg-media, #generic-premium-hero.sg-active.sg-city-wil .sg-media, #generic-premium-hero.sg-active.sg-city-rorschach .sg-media{margin:0 0 10px !important} #sg-premium-hero.sg-active .sg-media img, #generic-premium-hero.sg-active.sg-city-wil .sg-media img, #generic-premium-hero.sg-active.sg-city-rorschach .sg-media img{aspect-ratio:16/10 !important;object-position:center 32% !important} #sg-premium-hero.sg-active .sg-mobile-wa, #generic-premium-hero.sg-active.sg-city-wil .sg-mobile-wa, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa{padding:14px !important;gap:10px !important} } @media(max-width:900px){ #sg-premium-hero.sg-active .sg-inner, #generic-premium-hero.sg-active.sg-city-wil .sg-inner, #generic-premium-hero.sg-active.sg-city-rorschach .sg-inner{padding:6px 20px 24px !important} #sg-premium-hero.sg-active .sg-eyebrow, #generic-premium-hero.sg-active.sg-city-wil .sg-eyebrow, #generic-premium-hero.sg-active.sg-city-rorschach .sg-eyebrow{margin:0 0 6px !important;font-size:10px !important;letter-spacing:.1em !important} #sg-premium-hero.sg-active .sg-title, #generic-premium-hero.sg-active.sg-city-wil .sg-title, #generic-premium-hero.sg-active.sg-city-rorschach .sg-title{font-size:clamp(22px,5.8vw,28px) !important;margin:0 0 6px !important;line-height:1.08 !important} #sg-premium-hero.sg-active .sg-mobile-sub, #generic-premium-hero.sg-active.sg-city-wil .sg-mobile-sub, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-sub{font-size:13.5px !important;margin:0 0 8px !important;line-height:1.45 !important} #sg-premium-hero.sg-active .sg-media, #generic-premium-hero.sg-active.sg-city-wil .sg-media, #generic-premium-hero.sg-active.sg-city-rorschach .sg-media{margin:0 0 8px !important;border-radius:14px !important} #sg-premium-hero.sg-active .sg-media img, #generic-premium-hero.sg-active.sg-city-wil .sg-media img, #generic-premium-hero.sg-active.sg-city-rorschach .sg-media img{aspect-ratio:5/4 !important;object-position:center 30% !important;border-radius:14px !important} #sg-premium-hero.sg-active .sg-mobile-wa, #generic-premium-hero.sg-active.sg-city-wil .sg-mobile-wa, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa{padding:12px !important;gap:10px !important;border-radius:14px !important} #sg-premium-hero.sg-active .sg-mobile-wa-icon, #generic-premium-hero.sg-active.sg-city-wil .sg-mobile-wa-icon, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-icon{width:32px !important;height:32px !important} #sg-premium-hero.sg-active .sg-mobile-wa-text strong, #generic-premium-hero.sg-active.sg-city-wil .sg-mobile-wa-text strong, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-text strong{font-size:14px !important} #sg-premium-hero.sg-active .sg-mobile-wa-text span, #generic-premium-hero.sg-active.sg-city-wil .sg-mobile-wa-text span, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-text span{font-size:12.5px !important;line-height:1.4 !important} #sg-premium-hero.sg-active .sg-mobile-wa-cta, #generic-premium-hero.sg-active.sg-city-wil .sg-mobile-wa-cta, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-cta{padding:12px 20px !important;font-size:14.5px !important} } #sg-premium-hero .sg-m-eyebrow,#sg-premium-hero .sg-m-title,#sg-premium-hero .sg-m-primary{display:none} @media(max-width:900px){ #sg-premium-hero.sg-active .sg-eyebrow{display:none !important} #sg-premium-hero.sg-active .sg-title{display:none !important} #sg-premium-hero.sg-active .sg-m-eyebrow{order:1;display:inline-block !important;font-family:var(--font-sans);font-size:13px;letter-spacing:.08em;color:#2D9B6F;font-weight:700;text-transform:uppercase;margin:18px 0 8px} #sg-premium-hero.sg-active .sg-m-title{order:2;display:block !important;font-family:var(--font-sans);font-size:clamp(30px,9vw,40px);line-height:1.0;letter-spacing:-.025em;color:#0A0A0A;font-weight:900;margin:0 0 12px} #sg-premium-hero.sg-active .sg-m-title em{color:#2D9B6F;font-style:normal;font-weight:900} #sg-premium-hero.sg-active .sg-mobile-sub{order:3;font-size:17px !important;line-height:1.4 !important;color:#4B5563 !important;margin:0 0 16px !important} #sg-premium-hero.sg-active .sg-m-primary{order:4;display:block !important;width:100%;background:#2D9B6F;color:#fff;border:none;padding:0;height:54px;border-radius:100px;font-family:var(--font-sans);font-size:17px;font-weight:700;cursor:pointer;letter-spacing:-.005em;margin:0 0 12px;box-shadow:0 1px 2px rgba(45,155,111,.15)} #sg-premium-hero.sg-active .sg-mobile-trust{order:5;font-size:13px !important;color:#6B7280 !important;text-align:left !important;margin:0 0 14px !important;line-height:1.5 !important} #sg-premium-hero.sg-active .sg-mobile-wa{order:6;flex-direction:row !important;align-items:center !important;gap:12px !important;padding:12px 14px !important;border-radius:14px !important;background:#F8FAF9 !important;border:1px solid #E5E7EB !important;margin:0 0 16px !important;box-shadow:none !important} #sg-premium-hero.sg-active .sg-mobile-wa-head{flex:1;gap:10px !important} #sg-premium-hero.sg-active .sg-mobile-wa-icon{width:32px !important;height:32px !important} #sg-premium-hero.sg-active .sg-mobile-wa-text strong{font-size:13.5px !important;margin:0 !important} #sg-premium-hero.sg-active .sg-mobile-wa-text span{font-size:12px !important;line-height:1.35 !important;color:#6B7280 !important} #sg-premium-hero.sg-active .sg-mobile-wa-cta{flex-shrink:0;padding:9px 14px !important;font-size:13px !important;background:#2D9B6F !important;border-radius:100px} #sg-premium-hero.sg-active .sg-media{order:7;margin:8px 0 0 !important} #sg-premium-hero.sg-active .sg-media img{aspect-ratio:5/4 !important;max-height:260px !important;border-radius:24px !important;object-position:center 28% !important} #sg-premium-hero.sg-active .sg-mobile-secondary{display:none !important} } @media(max-width:900px){ #sg-premium-hero.sg-active .sg-m-eyebrow{margin:14px 0 6px !important} #sg-premium-hero.sg-active .sg-m-title{font-size:clamp(26px,7.5vw,34px) !important;margin:0 0 8px !important} #sg-premium-hero.sg-active .sg-mobile-sub{font-size:15.5px !important;margin:0 0 12px !important} #sg-premium-hero.sg-active .sg-media{order:4 !important;margin:0 0 14px !important;border-radius:20px !important;overflow:hidden} #sg-premium-hero.sg-active .sg-media img{aspect-ratio:16/10 !important;max-height:none !important;border-radius:20px !important;object-position:center 32% !important} #sg-premium-hero.sg-active .sg-m-primary{order:5 !important;height:52px !important;font-size:16.5px !important;margin:0 0 12px !important} #sg-premium-hero.sg-active .sg-mobile-trust{order:6 !important;text-align:center !important;margin:0 0 14px !important} #sg-premium-hero.sg-active .sg-mobile-wa{order:7 !important} } #generic-premium-hero .sg-m-eyebrow,#generic-premium-hero .sg-m-title,#generic-premium-hero .sg-m-primary{display:none} @media(max-width:900px){ #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-eyebrow{display:none !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-title{display:none !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-m-eyebrow{order:1;display:inline-block !important;font-family:var(--font-sans);font-size:13px;letter-spacing:.08em;color:#2D9B6F;font-weight:700;text-transform:uppercase;margin:14px 0 6px} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-m-title{order:2;display:block !important;font-family:var(--font-sans);font-size:clamp(26px,7.5vw,34px);line-height:1.0;letter-spacing:-.025em;color:#0A0A0A;font-weight:900;margin:0 0 8px} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-m-title em{color:#2D9B6F;font-style:normal;font-weight:900} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-sub{order:3;font-size:15.5px !important;line-height:1.4 !important;color:#4B5563 !important;margin:0 0 12px !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-media{order:4 !important;margin:0 0 14px !important;border-radius:20px !important;overflow:hidden} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-media img{aspect-ratio:16/10 !important;max-height:none !important;border-radius:20px !important;object-position:center 32% !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-m-primary{order:5 !important;display:block !important;width:100%;background:#2D9B6F;color:#fff;border:none;padding:0;height:52px;border-radius:100px;font-family:var(--font-sans);font-size:16.5px;font-weight:700;cursor:pointer;letter-spacing:-.005em;margin:0 0 12px;box-shadow:0 1px 2px rgba(45,155,111,.15)} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-trust{order:6 !important;font-size:13px !important;color:#6B7280 !important;text-align:center !important;margin:0 0 14px !important;line-height:1.5 !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa{order:7 !important;flex-direction:row !important;align-items:center !important;gap:12px !important;padding:12px 14px !important;border-radius:14px !important;background:#F8FAF9 !important;border:1px solid #E5E7EB !important;margin:0 0 16px !important;box-shadow:none !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-head{flex:1;gap:10px !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-icon{width:32px !important;height:32px !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-text strong{font-size:13.5px !important;margin:0 !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-text span{font-size:12px !important;line-height:1.35 !important;color:#6B7280 !important} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-wa-cta{flex-shrink:0;padding:9px 14px !important;font-size:13px !important;background:#2D9B6F !important;border-radius:100px} #generic-premium-hero.sg-active.sg-city-wil, #generic-premium-hero.sg-active.sg-city-rorschach .sg-mobile-secondary{display:none !important} } @media(max-width:900px){ #generic-premium-hero.sg-active{background-image:none !important;background-color:#fff !important;min-height:auto !important;padding:0 !important} #generic-premium-hero.sg-active .sg-city-banner{display:none !important} #generic-premium-hero.sg-active .sg-inner{display:flex !important;flex-direction:column !important;grid-template-columns:1fr !important;gap:0 !important;padding:0 20px 32px !important;align-items:stretch !important} #generic-premium-hero.sg-active .sg-text{display:contents !important} #generic-premium-hero.sg-active .sg-eyebrow, #generic-premium-hero.sg-active .sg-title, #generic-premium-hero.sg-active .sg-crumb, #generic-premium-hero.sg-active .sg-location, #generic-premium-hero.sg-active .sg-sub, #generic-premium-hero.sg-active .sg-ctas, #generic-premium-hero.sg-active .sg-trust, #generic-premium-hero.sg-active .sg-mobile-secondary{display:none !important} #generic-premium-hero.sg-active .sg-m-eyebrow{order:1;display:inline-block !important;font-family:var(--font-sans);font-size:13px;letter-spacing:.08em;color:#2D9B6F;font-weight:700;text-transform:uppercase;margin:14px 0 6px} #generic-premium-hero.sg-active .sg-m-title{order:2;display:block !important;font-family:var(--font-sans);font-size:clamp(26px,7.5vw,34px);line-height:1.0;letter-spacing:-.025em;color:#0A0A0A;font-weight:900;margin:0 0 8px} #generic-premium-hero.sg-active .sg-m-title em{color:#2D9B6F;font-style:normal;font-weight:900} #generic-premium-hero.sg-active .sg-mobile-sub{order:3;display:block !important;font-family:var(--font-sans);font-size:15.5px !important;line-height:1.4 !important;color:#4B5563 !important;margin:0 0 12px !important;max-width:none} #generic-premium-hero.sg-active .sg-media{order:4 !important;display:block !important;width:100%;margin:0 0 14px !important;border-radius:20px !important;overflow:hidden;background:#f5f5f5} #generic-premium-hero.sg-active .sg-media img{width:100%;height:auto;aspect-ratio:16/10 !important;max-height:none !important;object-fit:cover;border-radius:20px !important;object-position:center 32% !important;display:block} #generic-premium-hero.sg-active .sg-m-primary{order:5 !important;display:block !important;width:100%;background:#2D9B6F;color:#fff;border:none;padding:0;height:52px;border-radius:100px;font-family:var(--font-sans);font-size:16.5px;font-weight:700;cursor:pointer;letter-spacing:-.005em;margin:0 0 12px;box-shadow:0 1px 2px rgba(45,155,111,.15)} #generic-premium-hero.sg-active .sg-mobile-trust{order:6 !important;display:block !important;font-family:var(--font-sans);font-size:13px !important;color:#6B7280 !important;text-align:center !important;margin:0 0 14px !important;line-height:1.5 !important} #generic-premium-hero.sg-active .sg-mobile-trust .sg-tsep{color:#C4BFB3;margin:0 4px} #generic-premium-hero.sg-active .sg-mobile-wa{order:7 !important;display:flex !important;flex-direction:row !important;align-items:center !important;gap:12px !important;padding:12px 14px !important;border-radius:14px !important;background:#F8FAF9 !important;border:1px solid #E5E7EB !important;margin:0 0 16px !important;box-shadow:none !important} #generic-premium-hero.sg-active .sg-mobile-wa-head{flex:1;display:flex;align-items:center;gap:10px !important} #generic-premium-hero.sg-active .sg-mobile-wa-icon{width:32px !important;height:32px !important;background:#2D9B6F !important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff} #generic-premium-hero.sg-active .sg-mobile-wa-text strong{display:block;font-family:var(--font-sans);font-size:13.5px !important;font-weight:700;color:#111;margin:0 !important} #generic-premium-hero.sg-active .sg-mobile-wa-text span{display:block;font-family:var(--font-sans);font-size:12px !important;line-height:1.35 !important;color:#6B7280 !important} #generic-premium-hero.sg-active .sg-mobile-wa-cta{flex-shrink:0;display:block !important;text-align:center;background:#2D9B6F !important;color:#fff;padding:9px 14px !important;border-radius:100px;font-family:var(--font-sans);font-size:13px !important;font-weight:700;text-decoration:none} } /* === Tier 1 visual unification: SG page custom sections === */ #sg-premium-hero ~ section, #zh-premium-hero ~ section, #win-premium-hero ~ section, #standort-content section, .sg-loc, .sg-pzu, .sg-kk, .sg-event { padding: clamp(56px, 6vw, 80px) 0 !important; } .sg-pzu-card, .sg-loc-card { border-radius: var(--r) !important; } .sg-pzu-card h3, .sg-loc-card h3 { font-family:var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: var(--charcoal) !important; } .sg-pzu-card p, .sg-loc-card p { font-family:var(--font-sans); font-size: 13.5px; line-height: 1.55; color: var(--mid) !important; } /* === Tier 1.5: paragraph + card harmonization with main brand === */ .sg-loc, .sg-pzu, .sg-kk { font-family:var(--font-sans); } /* Paragraphs match .content-body p */ .sg-loc p, .sg-pzu p, .sg-kk p, .sg-loc-card p, .sg-pzu-card p, .sg-pzu-sub, .sg-loc-sub, .sg-kk-sub { font-family:var(--font-sans) !important; font-size: 15.5px !important; line-height: 1.7 !important; color: var(--mid) !important; font-weight: 400 !important; } /* H2, match .section-title */ .sg-loc h2, .sg-pzu h2, .sg-kk h2, .sg-pzu-h2, .sg-loc-h2, .sg-kk-h2 { font-family:var(--font-sans) !important; font-size: clamp(26px, 3.5vw, 40px) !important; letter-spacing: -.03em !important; line-height: 1.15 !important; margin: 0 0 14px !important; font-weight: 800 !important; color: var(--black) !important; } /* H3 / card titles, match .content-card .card-name */ .sg-loc h3, .sg-pzu h3, .sg-kk h3, .sg-pzu-card h3, .sg-loc-card h3, .sg-event-card-label { font-family:var(--font-sans) !important; font-size: 15px !important; font-weight: 700 !important; color: var(--black) !important; letter-spacing: -.015em !important; margin: 0 0 6px !important; line-height: 1.3 !important; text-transform: none !important; } /* Eyebrow labels, match .section-label */ .sg-pzu-eyebrow, .sg-loc-eyebrow, .sg-kk-eyebrow { font-family:var(--font-sans) !important; font-size: 11.5px !important; font-weight: 600 !important; color: var(--blue) !important; text-transform: uppercase !important; letter-spacing: 1.2px !important; margin: 0 0 10px !important; } /* Card primitive, match .content-card */ .sg-pzu-card, .sg-loc-card { background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--r) !important; padding: 22px 20px !important; box-shadow: none !important; transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base) !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .sg-pzu-card:hover, .sg-loc-card:hover { border-color: rgba(45,155,111,.3) !important; box-shadow: 0 4px 24px rgba(45,155,111,.1) !important; transform: translateY(-2px) !important; } /* Offer card outer (the wrapper), softer */ /* Lists, match .content-body li */ .sg-loc ul li, .sg-pzu ul li, .sg-kk ul li { font-size: 15.5px !important; line-height: 1.7 !important; color: var(--mid) !important; font-weight: 400 !important; } /* Strip excess shadows on Stallen-only event card variants */ .sg-event-card { background:#fff !important; box-shadow: var(--sh-md) !important; border-radius: var(--r) !important; } /* === Tier 1.5b: target actual offer/loc class names === */ /* ── standort offer polish, match #s-offer design ── */ .sg-loc{background:var(--surface) !important;padding:clamp(56px,6vw,80px) 24px !important} /* Über die Praxis card */ .up-sec{background:var(--surface);padding:clamp(56px,6vw,80px) 24px} .up-wrap{max-width:920px;margin:0 auto} .up-h2{font-family:var(--font-sans);font-weight:800;font-size:clamp(28px,4vw,42px);line-height:1.15;color:#0d0d0d;margin:0 0 28px} .up-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 32px;margin-bottom:28px} .up-item{display:flex;gap:14px;align-items:flex-start} .up-ico{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(45,155,111,.08);border-radius:10px} .up-body{min-width:0} .up-label{font-size:14.5px;font-weight:700;color:#0d0d0d;margin-bottom:3px;line-height:1.3} .up-val{font-size:14.5px;color:#4a4a4a;line-height:1.55;text-decoration:none} a.up-val:hover{color:var(--blue)} .up-val > div{line-height:1.55} .up-soon{font-weight:600;color:var(--blue)} .up-map{margin-top:8px;border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06)} .up-transit{margin-top:24px;padding-top:24px;border-top:1px solid var(--border)} .up-transit-h{font-family:var(--font-sans);font-weight:700;font-size:17px;color:#0d0d0d;margin:0 0 10px} .up-transit-area{font-size:14.5px;color:#4a4a4a;line-height:1.55;margin:0 0 14px} .up-transit-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .up-transit-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#4a4a4a;line-height:1.55} .up-transit-list li svg{flex:0 0 18px;margin-top:2px;color:var(--blue)} @media (max-width:640px){ .up-grid{grid-template-columns:1fr;gap:22px} .up-sec{padding:48px 20px} } .sg-loc-eyebrow{font-size:11.5px !important;font-weight:600 !important;color:var(--blue) !important;text-transform:uppercase !important;letter-spacing:1.2px !important;margin:0 0 10px !important} .sg-loc h2, .sg-loc-h2{font-family:var(--font-sans) !important;font-size:clamp(26px,3.5vw,40px) !important;letter-spacing:-.03em !important;font-weight:800 !important;color:var(--black) !important} .sg-loc p, .sg-loc-sub{font-size:15.5px !important;line-height:1.7 !important;color:var(--mid) !important} .sg-loc-card{background:#fff !important;border:1px solid var(--border) !important;border-radius:var(--r) !important;padding:22px 20px !important;box-shadow:none !important} #zh-premium-hero .sg-m-eyebrow,#zh-premium-hero .sg-m-title,#zh-premium-hero .sg-m-primary,#zh-premium-hero .sg-mobile-sub,#zh-premium-hero .sg-mobile-wa,#zh-premium-hero .sg-mobile-trust, #win-premium-hero .sg-m-eyebrow,#win-premium-hero .sg-m-title,#win-premium-hero .sg-m-primary,#win-premium-hero .sg-mobile-sub,#win-premium-hero .sg-mobile-wa,#win-premium-hero .sg-mobile-trust{display:none} @media(max-width:900px){ #zh-premium-hero.sg-active, #win-premium-hero.sg-active{background-image:none !important;background-color:#fff !important;min-height:auto !important;padding:0 !important} #zh-premium-hero.sg-active .sg-city-banner, #win-premium-hero.sg-active .sg-city-banner{display:none !important} #zh-premium-hero.sg-active .sg-inner, #win-premium-hero.sg-active .sg-inner{display:flex !important;flex-direction:column !important;grid-template-columns:1fr !important;gap:0 !important;padding:0 20px 32px !important;align-items:stretch !important} #zh-premium-hero.sg-active .sg-text, #win-premium-hero.sg-active .sg-text{display:contents !important} #zh-premium-hero.sg-active .sg-eyebrow, #win-premium-hero.sg-active .sg-eyebrow, #zh-premium-hero.sg-active .sg-title, #win-premium-hero.sg-active .sg-title, #zh-premium-hero.sg-active .sg-crumb, #win-premium-hero.sg-active .sg-crumb, #zh-premium-hero.sg-active .sg-location, #win-premium-hero.sg-active .sg-location, #zh-premium-hero.sg-active .sg-sub, #win-premium-hero.sg-active .sg-sub, #zh-premium-hero.sg-active .sg-ctas, #win-premium-hero.sg-active .sg-ctas, #zh-premium-hero.sg-active .sg-trust, #win-premium-hero.sg-active .sg-trust{display:none !important} #zh-premium-hero.sg-active .sg-m-eyebrow, #win-premium-hero.sg-active .sg-m-eyebrow{order:1;display:inline-block !important;font-family:var(--font-sans);font-size:13px;letter-spacing:.08em;color:#2D9B6F;font-weight:700;text-transform:uppercase;margin:14px 0 6px} #zh-premium-hero.sg-active .sg-m-title, #win-premium-hero.sg-active .sg-m-title{order:2;display:block !important;font-family:var(--font-sans);font-size:clamp(26px,7.5vw,34px);line-height:1.0;letter-spacing:-.025em;color:#0A0A0A;font-weight:900;margin:0 0 8px} #zh-premium-hero.sg-active .sg-m-title em, #win-premium-hero.sg-active .sg-m-title em{color:#2D9B6F;font-style:normal;font-weight:900} #zh-premium-hero.sg-active .sg-mobile-sub, #win-premium-hero.sg-active .sg-mobile-sub{order:3;display:block !important;font-family:var(--font-sans);font-size:15.5px !important;line-height:1.4 !important;color:#4B5563 !important;margin:0 0 12px !important;max-width:none} #zh-premium-hero.sg-active .sg-media, #win-premium-hero.sg-active .sg-media{order:4 !important;display:block !important;width:100%;margin:0 0 14px !important;border-radius:20px !important;overflow:hidden;background:#f5f5f5} #zh-premium-hero.sg-active .sg-media img, #win-premium-hero.sg-active .sg-media img{width:100%;height:auto;aspect-ratio:16/10 !important;max-height:none !important;object-fit:cover;border-radius:20px !important;object-position:center 32% !important;display:block} #zh-premium-hero.sg-active .sg-m-primary, #win-premium-hero.sg-active .sg-m-primary{order:5 !important;display:block !important;width:100%;background:#2D9B6F;color:#fff;border:none;padding:0;height:52px;border-radius:100px;font-family:var(--font-sans);font-size:16.5px;font-weight:700;cursor:pointer;letter-spacing:-.005em;margin:0 0 12px;box-shadow:0 1px 2px rgba(45,155,111,.15)} #zh-premium-hero.sg-active .sg-mobile-trust, #win-premium-hero.sg-active .sg-mobile-trust{order:6 !important;display:block !important;font-family:var(--font-sans);font-size:13px !important;color:#6B7280 !important;text-align:center !important;margin:0 0 14px !important;line-height:1.5 !important} #zh-premium-hero.sg-active .sg-mobile-trust .sg-tsep, #win-premium-hero.sg-active .sg-mobile-trust .sg-tsep{color:#C4BFB3;margin:0 4px} #zh-premium-hero.sg-active .sg-mobile-wa, #win-premium-hero.sg-active .sg-mobile-wa{order:7 !important;display:flex !important;flex-direction:row !important;align-items:center !important;gap:12px !important;padding:12px 14px !important;border-radius:14px !important;background:#F8FAF9 !important;border:1px solid #E5E7EB !important;margin:0 0 16px !important;box-shadow:none !important} #zh-premium-hero.sg-active .sg-mobile-wa-head, #win-premium-hero.sg-active .sg-mobile-wa-head{flex:1;display:flex;align-items:center;gap:10px !important} #zh-premium-hero.sg-active .sg-mobile-wa-icon, #win-premium-hero.sg-active .sg-mobile-wa-icon{width:32px !important;height:32px !important;background:#2D9B6F !important;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff} #zh-premium-hero.sg-active .sg-mobile-wa-text strong, #win-premium-hero.sg-active .sg-mobile-wa-text strong{display:block;font-family:var(--font-sans);font-size:13.5px !important;font-weight:700;color:#111;margin:0 !important} #zh-premium-hero.sg-active .sg-mobile-wa-text span, #win-premium-hero.sg-active .sg-mobile-wa-text span{display:block;font-family:var(--font-sans);font-size:12px !important;line-height:1.35 !important;color:#6B7280 !important} #zh-premium-hero.sg-active .sg-mobile-wa-cta, #win-premium-hero.sg-active .sg-mobile-wa-cta{flex-shrink:0;display:block !important;text-align:center;background:#2D9B6F !important;color:#fff;padding:9px 14px !important;border-radius:100px;font-family:var(--font-sans);font-size:13px !important;font-weight:700;text-decoration:none} } @media(max-width:900px){.drw-footer{display:none !important}} .drw-body{overflow-y:hidden !important} .drw-body::-webkit-scrollbar{display:none} @media(max-width:900px){ .drw-body{overflow-y:auto !important;-webkit-overflow-scrolling:touch;padding-bottom:calc(env(safe-area-inset-bottom) + 80px) !important} } .drw-plain-links .drw-link-arrow{display:none !important} @media(min-width:901px){ #sg-premium-hero .sg-m-eyebrow, #sg-premium-hero .sg-m-title, #sg-premium-hero .sg-m-primary, #sg-premium-hero .sg-mobile-sub, #sg-premium-hero .sg-mobile-wa, #sg-premium-hero .sg-mobile-secondary, #sg-premium-hero .sg-mobile-trust, #sg-premium-hero .sg-mobile-brand, #generic-premium-hero .sg-m-eyebrow, #generic-premium-hero .sg-m-title, #generic-premium-hero .sg-m-primary, #generic-premium-hero .sg-mobile-sub, #generic-premium-hero .sg-mobile-wa, #generic-premium-hero .sg-mobile-secondary, #generic-premium-hero .sg-mobile-trust, #zh-premium-hero .sg-m-eyebrow, #zh-premium-hero .sg-m-title, #zh-premium-hero .sg-m-primary, #zh-premium-hero .sg-mobile-sub, #zh-premium-hero .sg-mobile-wa, #zh-premium-hero .sg-mobile-secondary, #zh-premium-hero .sg-mobile-trust, #win-premium-hero .sg-m-eyebrow, #win-premium-hero .sg-m-title, #win-premium-hero .sg-m-primary, #win-premium-hero .sg-mobile-sub, #win-premium-hero .sg-mobile-wa, #win-premium-hero .sg-mobile-secondary, #win-premium-hero .sg-mobile-trust{display:none !important} } /* --- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* ── CARE SYSTEM LAYER, hero label ── */ body{font-family:var(--font-sans);background:var(--white);color:var(--charcoal);-webkit-font-smoothing:antialiased;overflow-x:hidden} /* ── UTILS ── */ .wrap{max-width:var(--max);margin:0 auto;padding:0 40px;width:100%} .section{padding:96px 0} /* ── REVIEW CARDS (Patient:innen berichten) ── */ .cp-reviews{margin:28px 0 22px} .cp-reviews-title{font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue);margin-bottom:14px} .cp-review-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:10px} .cp-review-stars{color:#f5a623;font-size:14px;margin-bottom:6px;letter-spacing:1px} .cp-review-text{font-size:14px;color:var(--charcoal);line-height:1.65;font-style:italic;margin-bottom:8px} .cp-review-meta{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px} .cp-review-avatar{width:26px;height:26px;border-radius:50%;background:var(--blue-light);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--blue);flex-shrink:0} /* ── COMPLAINT PAGE COMPONENTS (shared across symptom pages) ── */ .cp-alert{background:#fff8f0;border:1px solid #f5c5a0;border-radius:10px;padding:14px 18px;margin-bottom:28px;display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#5a3a1a;line-height:1.55} .cp-alert-icon{flex-shrink:0;margin-top:1px;color:#e07a30} .cp-blick{background:var(--blue-light);border:1px solid rgba(45,155,111,.2);border-radius:14px;padding:22px 24px;margin-bottom:32px} .cp-blick-label{font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue);margin-bottom:16px} .cp-blick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cp-blick-item{background:#fff;border-radius:10px;padding:14px 16px;border:1px solid rgba(45,155,111,.12)} .cp-blick-item-label{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:5px} .cp-blick-item-text{font-size:13.5px;color:var(--charcoal);line-height:1.55} .cp-sx-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:16px 0 22px} .cp-sx-item{display:flex;align-items:flex-start;gap:9px;padding:10px 13px;background:#fff;border:1px solid var(--border);border-radius:8px;font-size:13.5px;font-weight:500;color:var(--charcoal);line-height:1.4} .cp-sx-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:5px} .cp-cta-card{background:var(--blue-light);border:1px solid rgba(45,155,111,.2);border-radius:16px;padding:28px;text-align:center;margin:32px 0} .cp-cta-title{font-size:20px;font-weight:800;color:var(--black);margin-bottom:8px;letter-spacing:-.02em;line-height:1.2} .cp-cta-sub{font-size:15px;color:var(--mid);margin-bottom:20px;line-height:1.6;max-width:420px;margin-left:auto;margin-right:auto} .cp-cta-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .cp-faq-item{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden} .cp-faq-q{padding:14px 18px;font-size:14.5px;font-weight:600;color:var(--black);cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;transition:background var(--t-fast);background:none;border:none;width:100%;text-align:left;font-family:var(--font-sans)} .cp-faq-q:hover{background:var(--surface)} .cp-faq-q svg{flex-shrink:0;transition:transform var(--t-base);color:var(--muted);margin-left:10px} .cp-faq-item.open .cp-faq-q svg{transform:rotate(180deg)} .cp-faq-a{display:none;padding:0 18px 16px;font-size:14.5px;color:var(--mid);line-height:1.7} .cp-faq-item.open .cp-faq-a{display:block} .cp-local-tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px} .cp-local-tag{background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--charcoal)} @media(max-width:600px){.cp-blick-grid{grid-template-columns:1fr}.cp-cta-btns{flex-direction:column;align-items:center}} /* ── SYMPTOM CHIPS ── */ .sx-chips{display:flex;flex-wrap:wrap;gap:10px} @media(max-width:600px){ .sx-chips{gap:8px} } /* ── AVAILABILITY STRIP ── */ /* ── Each item:fixed width,two-row stacked layout ────────────────── The key architectural decision:items are FIXED WIDTH columns. No matter what text rotates in,the column does not move. City name (top) and status (bottom) live in separate rows,each truncating independently. Strip height is always 52px. ─────────────────────────────────────────────────────────────────── */ /* Primary rotating item, same fixed width,just with transition */ /* Compact at medium widths:shrink item columns before anything else */ /* Mobile:stack label above,hide dividers,keep 2 visible items */ .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.10);color:#374151;font-size:12.5px;font-weight:500;padding:6px 14px;border-radius:100px;width:fit-content;margin-bottom:20px} .eyebrow::before{content:'';width:6px;height:6px;background:currentColor;border-radius:50%;animation:pulse 2.4s ease infinite;opacity:.7} .eyebrow.dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.85)} .section-label{font-size:11.5px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px} .section-title{font-family:var(--font-sans);font-size:clamp(26px,3.5vw,40px);color:var(--black);letter-spacing:-.03em;line-height:1.15;margin-bottom:14px;font-weight:800} .section-title em{font-style:italic;color:var(--blue);font-weight:700} .section-sub{font-size:16px;font-weight:400;color:var(--mid);line-height:1.7;max-width:520px} /* ── BUTTONS ── */ .btn-primary{display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;padding:15px 26px;border-radius:100px;font-size:14.5px;font-weight:600;font-family:var(--font-sans);letter-spacing:0px;text-decoration:none;border:none;cursor:pointer;transition:background var(--t-base),transform var(--t-fast),box-shadow var(--t-base);box-shadow:0 4px 20px rgba(45,155,111,.35);white-space:nowrap} .btn-primary:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:none} .btn-secondary{display:inline-flex;align-items:center;gap:9px;background:#FFFFFF;color:#111827;border:1px solid #E5E7EB;padding:14px 24px;border-radius:100px;font-size:15px;font-weight:500;font-family:var(--font-sans);text-decoration:none;border:1.5px solid var(--border);cursor:pointer;transition:border-color var(--t-base),background var(--t-base),transform var(--t-fast);white-space:nowrap} .btn-secondary:hover{border-color:#bbb;background:var(--surface);transform:translateY(-1px)} .btn-white{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--charcoal);padding:15px 26px;border-radius:100px;font-size:15px;font-weight:500;font-family:var(--font-sans);text-decoration:none;border:none;cursor:pointer;transition:background var(--t-base),transform var(--t-fast);box-shadow:0 4px 20px rgba(0,0,0,.15);white-space:nowrap} .btn-white:hover{background:#f0f0f0;transform:translateY(-1px)} .btn-outline-white{display:inline-flex;align-items:center;gap:9px;background:transparent;color:#fff;padding:14px 24px;border-radius:100px;font-size:15px;font-weight:500;font-family:var(--font-sans);text-decoration:none;border:1.5px solid rgba(255,255,255,.4);cursor:pointer;transition:border-color var(--t-base),background var(--t-base);white-space:nowrap} .btn-outline-white:hover{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.08)} /* ── NAV ── */ nav{position:fixed;top:0;left:0;right:0;z-index:200;height:68px;display:flex;align-items:center;padding:0 40px;background:#fff;border-bottom:1px solid rgba(0,0,0,.06);box-shadow:0 2px 12px rgba(0,0,0,.06)} .nav-inner{width:100%;max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between}@media(min-width:769px){.logo{flex:0 0 533px}} .logo{display:flex;align-items:flex-start;gap:10px;text-decoration:none;cursor:pointer} .logo-text-group{display:flex;flex-direction:column;gap:4px} .logo-wm{font-family:'Nunito',sans-serif;font-weight:900;font-style:italic;font-size:22px;letter-spacing:-.5px;color:var(--black);line-height:1;display:flex;align-items:baseline} .logo-wm .ch{font-size:17px} .logo-sub{font-family:var(--font-sans);font-size:10px;font-weight:400;letter-spacing:.06em;color:#666;line-height:1;white-space:nowrap} .nav-links{display:flex;align-items:center;gap:24px;list-style:none} .nav-links a,.nav-links button{font-size:13.5px;font-weight:500;color:var(--mid);text-decoration:none;background:none;border:none;cursor:pointer;font-family:var(--font-sans);transition:color var(--t-base);padding:0} .nav-links a:hover,.nav-links button:hover{color:var(--black)} .nav-cta{background:var(--black)!important;color:#fff!important;padding:9px 18px!important;border-radius:100px!important;font-size:13.5px!important;font-weight:500!important} .nav-cta:hover{background:#333!important} /* ── NAV MENU TRIGGER ── */ .nav-menu-btn{display:flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:10px; background:none;border:1.5px solid var(--border); cursor:pointer;padding:0;flex-shrink:0; transition:border-color var(--t-base),background var(--t-base); margin-left:10px;} .nav-menu-btn:hover{border-color:#aaa;background:var(--surface)} .nav-menu-btn svg{display:block;transition:opacity var(--t-base)} /* ── DRAWER OVERLAY ── */ #drawerOverlay{position:fixed;inset:0;z-index:900; background:rgba(8,8,8,.48); opacity:0;pointer-events:none; transition:opacity var(--t-slow) cubic-bezier(.4,0,.2,1); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);} #drawerOverlay.open{opacity:1;pointer-events:all} /* ── DRAWER PANEL ── */ #siteDrawer{position:fixed;top:0;right:0;height:100vh;height:100dvh; width:min(420px,100vw);z-index:901; background:#f9f9f9; box-shadow:-1px 0 0 rgba(0,0,0,.05),-20px 0 60px rgba(0,0,0,.12); transform:translateX(102%); transition:transform var(--t-slow) cubic-bezier(.16,1,.3,1); display:flex;flex-direction:column;overflow:hidden;} #siteDrawer.open{transform:translateX(0)} /* ── DRAWER HEADER ── */ .drw-header{display:flex;align-items:center;justify-content:space-between; padding:20px 22px 18px; border-bottom:1px solid rgba(0,0,0,.07); flex-shrink:0;background:#fff; position:relative;} .drw-header::after{content:'';position:absolute;bottom:-1px;left:22px;right:22px; height:1px;background:linear-gradient(90deg,var(--blue) 0%,rgba(45,155,111,0) 100%); opacity:.3;} .drw-logo{display:flex;align-items:center;gap:10px; text-decoration:none;cursor:default;} .drw-logo-dot{width:8px;height:8px;border-radius:50%; background:var(--blue);flex-shrink:0; box-shadow:0 0 0 3px rgba(45,155,111,.14);} .drw-logo-text{display:flex;flex-direction:column;gap:2px} .drw-logo-wm{font-family:'Nunito',sans-serif;font-weight:900;font-style:italic; font-size:19px;letter-spacing:-.5px;color:var(--black);line-height:1;} .drw-logo-sub{font-family:var(--font-sans);font-size:9.5px;font-weight:600; letter-spacing:.1em;color:#aaa;line-height:1;text-transform:uppercase;} .drw-close{width:30px;height:30px;border-radius:50%; background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08); cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);color:#888;} .drw-close:hover{background:#e6e6e6;border-color:#ccc;color:var(--black);transform:scale(1.05)} /* ── DRAWER BODY ── */ .drw-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 0 0; -webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:#e2e2e2 transparent;} .drw-body::-webkit-scrollbar{width:3px} .drw-body::-webkit-scrollbar-track{background:transparent} .drw-body::-webkit-scrollbar-thumb{background:#e0e0e0;border-radius:4px} /* ── DRAWER SECTION ── */ .drw-section{border-bottom:1px solid rgba(0,0,0,.06); transition:opacity var(--t-base) ease;} .drw-section:last-child{border-bottom:none} /* When any section is open,dim siblings */ .drw-body.has-open .drw-section:not(.is-open){opacity:.55} .drw-body.has-open .drw-section.is-open{opacity:1} /* ── ACCORDION TRIGGER ── */ .drw-acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between; padding:14px 22px 13px;background:none;border:none;cursor:pointer; text-align:left;gap:12px; transition:background var(--t-base); position:relative;} .drw-acc-btn::before{content:'';position:absolute;left:0;top:6px;bottom:6px; width:2px;background:var(--blue);border-radius:0 2px 2px 0; opacity:0;transform:scaleY(.4); transition:opacity var(--t-base),transform var(--t-base) cubic-bezier(.34,1.56,.64,1);} .drw-acc-btn.open::before{opacity:1;transform:scaleY(1)} .drw-acc-btn-inner{display:flex;flex-direction:column;gap:2.5px;flex:1;min-width:0} .drw-acc-label{font-family:var(--font-sans);font-size:14px;font-weight:600; color:#2a2a2a;letter-spacing:-.015em;line-height:1.2; transition:color var(--t-base);} .drw-acc-desc{font-family:var(--font-sans);font-size:11px;font-weight:400; color:#b0b0b0;line-height:1.2;letter-spacing:.005em; transition:color var(--t-base);} .drw-acc-btn:hover .drw-acc-label{color:var(--black)} .drw-acc-btn:hover .drw-acc-desc{color:#888} .drw-acc-btn:hover{background:rgba(0,0,0,.018)} .drw-acc-btn.open{background:rgba(45,155,111,.04)} .drw-acc-btn.open .drw-acc-label{color:var(--blue-dark);font-weight:700} .drw-acc-btn.open .drw-acc-desc{color:#82a896} /* ── CHEVRON ── */ .drw-acc-chevron{flex-shrink:0;width:18px;height:18px; display:flex;align-items:center;justify-content:center; border-radius:50%; background:rgba(0,0,0,.05); transition:transform var(--t-slow) cubic-bezier(.4,0,.2,1),background var(--t-base),color var(--t-base); color:#bbb;} .drw-acc-btn.open .drw-acc-chevron{transform:rotate(180deg); background:rgba(45,155,111,.12); color:var(--blue);} .drw-acc-btn:hover .drw-acc-chevron{background:rgba(0,0,0,.09);color:#888} /* ── ACCORDION BODY, animated ── */ .drw-acc-body{max-height:0;overflow:hidden; opacity:0; transition:max-height var(--t-slow) cubic-bezier(.4,0,.2,1),opacity var(--t-base) ease;} .drw-acc-body.open{max-height:800px; opacity:1; transition:max-height var(--t-slow) cubic-bezier(.4,0,.2,1),opacity var(--t-slow) ease var(--t-fast);} /* ── SUBMENU LINKS ── */ .drw-links{list-style:none;padding:3px 0 6px} .drw-links li{opacity:0;transform:translateX(6px); transition:opacity var(--t-base) ease,transform var(--t-base) ease;} .drw-acc-body.open .drw-links li{opacity:1;transform:translateX(0)} .drw-acc-body.open .drw-links li:nth-child(1){transition-delay:.04s} .drw-acc-body.open .drw-links li:nth-child(2){transition-delay:.07s} .drw-acc-body.open .drw-links li:nth-child(3){transition-delay:.1s} .drw-acc-body.open .drw-links li:nth-child(4){transition-delay:.13s} .drw-acc-body.open .drw-links li:nth-child(5){transition-delay:.16s} .drw-acc-body.open .drw-links li:nth-child(6){transition-delay:.19s} .drw-acc-body.open .drw-links li:nth-child(7){transition-delay:.22s} .drw-acc-body.open .drw-links li:nth-child(8){transition-delay:.25s} .drw-acc-body.open .drw-links li:nth-child(9){transition-delay:.28s} .drw-acc-body.open .drw-links li:nth-child(10){transition-delay:.31s} .drw-acc-body.open .drw-links li:nth-child(11){transition-delay:.34s} .drw-acc-body.open .drw-links li:nth-child(12){transition-delay:.37s} .drw-links li a,.drw-links li button{display:flex;align-items:center;justify-content:space-between; width:100%;padding:8px 20px 8px 32px; background:none;border:none;cursor:pointer;text-align:left; font-family:var(--font-sans);font-size:13.5px;font-weight:500; color:#4a4a4a;text-decoration:none; transition:color var(--t-fast),background var(--t-fast),transform var(--t-fast); letter-spacing:-.01em;} .drw-links li a:hover,.drw-links li button:hover{color:var(--blue-dark);background:rgba(45,155,111,.05); transform:translateX(2px);} /* Flow link – last item in each section */ .drw-links .drw-flow-link a,.drw-links .drw-flow-link button{font-size:12px;font-weight:600;color:var(--blue); padding:10px 20px 4px 32px;letter-spacing:.005em; background:none;} .drw-links .drw-flow-link a:hover,.drw-links .drw-flow-link button:hover{color:var(--blue-dark);background:none;transform:translateX(3px);} .drw-link-arrow{flex-shrink:0;opacity:0; transition:opacity var(--t-fast),transform var(--t-fast) cubic-bezier(.34,1.2,.64,1); color:var(--blue);} .drw-links li a:hover .drw-link-arrow,.drw-links li button:hover .drw-link-arrow{opacity:1;transform:translateX(3px);} /* ── FINDER SECTION, special ── */ .drw-section--finder .drw-acc-btn{background:rgba(45,155,111,.025);} .drw-section--finder .drw-acc-btn .drw-acc-label{color:#1F7A54} .drw-section--finder .drw-acc-btn .drw-acc-desc{color:rgba(45,155,111,.55)} .drw-section--finder .drw-acc-btn:hover{background:rgba(45,155,111,.04)} /* ── FINDER CARDS ── */ .drw-finder-item{display:flex;align-items:center;gap:11px; margin:3px 14px;padding:10px 13px;border-radius:9px; background:#fff;border:1px solid rgba(0,0,0,.08); cursor:pointer;text-decoration:none; transition:border-color var(--t-base),box-shadow var(--t-base),background var(--t-base),transform var(--t-base);} .drw-finder-item:hover{border-color:rgba(45,155,111,.35); background:rgba(45,155,111,.03); box-shadow:0 3px 14px rgba(45,155,111,.1); transform:translateX(-1px);} .drw-finder-icon{width:28px;height:28px;border-radius:6px; background:rgba(45,155,111,.07); display:flex;align-items:center;justify-content:center; flex-shrink:0;color:var(--blue); transition:background var(--t-base);} .drw-finder-item:hover .drw-finder-icon{background:rgba(45,155,111,.14)} .drw-finder-text{flex:1;min-width:0} .drw-finder-label{font-size:13px;font-weight:600;color:#2a2a2a;line-height:1.2;letter-spacing:-.015em} .drw-finder-sub{font-size:10.5px;color:#b0b0b0;line-height:1.3;margin-top:2px} .drw-finder-arr{color:#ccc;flex-shrink:0;transition:transform var(--t-base) cubic-bezier(.34,1.2,.64,1),color var(--t-base)} .drw-finder-item:hover .drw-finder-arr{transform:translateX(3px);color:var(--blue)} /* ── SIMPLE LINK ROW ── */ .drw-plain-links{list-style:none;padding:4px 0} .drw-plain-links li a,.drw-plain-links li button{display:flex;align-items:center;gap:10px; width:100%;padding:11px 24px; background:none;border:none;cursor:pointer;text-align:left; font-family:var(--font-sans);font-size:14.5px;font-weight:500; color:var(--charcoal);text-decoration:none; transition:color var(--t-fast),background var(--t-fast);} .drw-plain-links li a:hover,.drw-plain-links li button:hover{color:var(--blue);background:rgba(45,155,111,.05)} /* ── DRAWER FOOTER CTA ── */ .drw-footer{flex-shrink:0; padding:14px 18px 18px; background:#fff; position:relative;} .drw-footer::before{content:'';position:absolute;top:-24px;left:0;right:0;height:24px; background:linear-gradient(to bottom,rgba(249,249,249,0),rgba(255,255,255,.9)); pointer-events:none;} .drw-footer-top{display:flex;align-items:center;justify-content:space-between; margin-bottom:11px;} .drw-footer-label{font-size:9.5px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:#bbb;} .drw-footer-hint{font-size:11px;color:#bbb;font-family:var(--font-sans);} .drw-cta-grid{display:flex;flex-direction:column;gap:7px} .drw-cta-primary{display:flex;align-items:center;justify-content:center;gap:8px; background:var(--blue);color:#fff;padding:12px 20px;border-radius:9px; font-family:var(--font-sans);font-size:14px;font-weight:600; text-decoration:none;border:none;cursor:pointer; transition:background var(--t-base),box-shadow var(--t-base),transform var(--t-fast); box-shadow:0 2px 10px rgba(45,155,111,.28); letter-spacing:-.01em;} .drw-cta-primary:hover{background:var(--blue-dark); box-shadow:0 4px 18px rgba(45,155,111,.38); transform:translateY(-1px);} .drw-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:7px} .drw-cta-secondary{display:flex;align-items:center;justify-content:center;gap:6px; padding:11px 14px;border-radius:9px; font-family:var(--font-sans);font-size:12.5px;font-weight:500; text-decoration:none;border:1px solid rgba(0,0,0,.11); cursor:pointer;background:#fff;color:#3a3a3a; transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);white-space:nowrap;} .drw-cta-secondary:hover{border-color:#bbb;background:#f4f4f4;transform:translateY(-1px)} .drw-cta-wa{color:#2D9B6F;border-color:rgba(37,211,102,.25)} .drw-cta-wa:hover{border-color:#25D366;background:rgba(37,211,102,.04)} @media(max-width:768px){.drw-acc-body.open{max-height:calc(100dvh - 260px);overflow-y:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(45,155,111,.5) transparent;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent)}.drw-acc-body.open::-webkit-scrollbar{width:5px}.drw-acc-body.open::-webkit-scrollbar-thumb{background:rgba(45,155,111,.5);border-radius:4px}.drw-acc-btn.open .drw-acc-btn-inner::after{content:'↕ scrollen';display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--blue);background:var(--blue-light);padding:3px 8px;border-radius:100px;margin-top:4px;width:fit-content;animation:scrollHint 2s ease-in-out infinite}@keyframes scrollHint{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}.drw-acc-body.open::-webkit-scrollbar{width:5px;-webkit-appearance:none}.drw-acc-body.open::-webkit-scrollbar-thumb{background:rgba(45,155,111,.5);border-radius:4px}.drw-acc-body.open::-webkit-scrollbar-track{background:rgba(0,0,0,.04)}} /* ── PAGE WRAPPER ── */ #app{padding-top:68px} .page{display:none} .page.active{display:block} /* ── HERO (home) ── */ .hero-bg{position:relative; min-height:calc(100vh - 68px); background-color:#ffffff; display:flex; align-items:center;} .hero-bg::before{display:none} .hero{min-height:calc(100vh - 68px); display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; padding:72px 40px 56px; max-width:var(--max); margin:0 auto; position:relative; z-index:2; width:100%;} .hero-left{display:flex;flex-direction:column;animation:fadeUp .7s ease both; min-width:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0; padding:0 48px 0 0; justify-content:center; border:none; box-shadow:none; margin-top:0; align-self:auto;} .hero-headline{font-family:var(--font-sans);font-size:clamp(32px,3.8vw,50px);line-height:1.05;color:#0A0A0A;text-shadow:0 1px 2px rgba(0,0,0,0.04);letter-spacing:-.02em;margin-bottom:6px;font-weight:800} .hero-headline em{display:block;font-style:italic;font-size:0.92em;font-weight:650;color:#2F3A45;margin-top:8px;letter-spacing:-.01em} .hero-sub{font-size:16.5px;font-weight:400;line-height:1.7;color:#374151;text-shadow:0 1px 2px rgba(0,0,0,0.04);max-width:420px;margin-bottom:32px;font-size:16px} .cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px} .hero-left .btn-primary{background:#2D9B6F;box-shadow:none} .hero-left .btn-primary:hover{background:#1F7A54;transform:translateY(-1px);box-shadow:none} .hero-left .btn-secondary{background:#fff} /* ── HERO COMPLAINT INPUT MODULE ── */ .hero-complaint-input{margin-top:20px; background:rgba(255,255,255,.55); border:1.5px solid rgba(0,0,0,.07); border-radius:14px; padding:14px 16px 16px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);} .hero-complaint-label{font-size:11px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#6B7280;opacity:1; margin-bottom:10px;} .hero-complaint-row{display:flex;gap:8px;align-items:center;} .hero-complaint-field{flex:1;min-width:0; font-family:var(--font-sans);font-size:13.5px;font-weight:400; color:var(--charcoal); background:rgba(255,255,255,.85); border:1.5px solid rgba(0,0,0,.1); border-radius:100px; padding:10px 16px; outline:none; transition:border-color var(--t-base),box-shadow var(--t-base); -webkit-appearance:none;} .hero-complaint-field::placeholder{color:#aaa;font-style:italic} .hero-complaint-field:focus{border-color:rgba(45,155,111,.45); box-shadow:0 0 0 3px rgba(45,155,111,.1); background:#fff;} .hero-complaint-btn{display:inline-flex;align-items:center;gap:6px;flex-shrink:0; font-family:var(--font-sans);font-size:13px;font-weight:600; color:#fff; background:var(--blue); border:none;border-radius:100px; padding:10px 16px; cursor:pointer; white-space:nowrap; transition:background var(--t-base),transform var(--t-fast),box-shadow var(--t-base); box-shadow:0 2px 12px rgba(45,155,111,.28);} .hero-complaint-btn:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 4px 16px rgba(45,155,111,.38)} .hero-complaint-btn:active{transform:scale(.98)} /* ── PRIVACY HINT (inline below complaint input) ── */ .hero-privacy-hint{display:flex;align-items:center;gap:6px; margin-top:10px; font-size:11px;color:var(--muted); line-height:1.4;} .hero-privacy-hint svg{flex-shrink:0;opacity:.6} .hero-privacy-link{background:none;border:none;padding:0;cursor:pointer; font-family:var(--font-sans);font-size:11px; color:#6B7280;font-weight:500;text-decoration:underline; text-underline-offset:2px;white-space:nowrap; transition:color var(--t-fast);} .hero-privacy-link:hover{color:#111827} /* ── PRIVACY POPUP ── */ .privacy-overlay.open{opacity:1;pointer-events:auto} .privacy-overlay.open .privacy-popup{transform:translateY(0) scale(1)} /* ── CTA RESPONSE-TIME SIGNAL ── */ /* ── COMPLAINT MODULE HEADER ROW ── */ /* ── CONCIERGE PRESENCE BLOCK ── */ @media(max-width:600px){.hero-complaint-row{flex-direction:column;gap:8px} .hero-complaint-btn{width:100%;justify-content:center;padding:12px 16px} } /* ── HERO RIGHT VISUAL ── */ /* ── HERO RIGHT:location network module ── */ /* ── HERO RIGHT:centered coverage signal ── */ .hero-right{animation:fadeUp .7s .15s ease both; position:relative; min-width:0; overflow:visible; /* city text is NEVER clipped here */ align-self:stretch; display:flex; align-items:center; justify-content:center; border-left:none; padding:0 16px 0 16px;} /* ── RING SYSTEM:hidden for clean white hero ── */ /* Ring 1, inner,most visible */ /* Ring 2, mid,slow breath */ /* Ring 3, outer,slower breath */ /* Ring 4, farthest edge suggestion */ /* Three network node dots on ring 2 */ /* Top */ /* Bottom-right */ /* Bottom-left */ /* Center node:slightly more present */ /* ── CONTENT:centered column ── */ /* City block, the integrated core unit */ /* Netzwerk aktiv */ /* Canton label */ /* ── CITY STAGE:the fixed safe container ── Fixed min-height prevents layout shift on rotation. Vertical padding protects umlauts (top) and descenders (bottom). No overflow:hidden, opacity animation makes clipping unnecessary. */ /* City name, sized by JS per name,anchored by stage */ /* Hidden elements */ /* Separator */ /* Towns */ /* Proof line */ /* Micro label, HILFE IN IHRER NÄHE */ /* Supporting clarity line below city */ /* ── City transition:mechanical counter, both flip downward ── */ @keyframes lm-city-in{0%{opacity:0;transform:rotateX(70deg) translateY(-12px)} 100%{opacity:1;transform:rotateX(0deg) translateY(0)} } .lm-city.c-in{animation:lm-city-in 320ms cubic-bezier(.22,1,.36,1) forwards} .hero-badge{position:absolute; display:flex;align-items:center;gap:10px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.8); border-radius:14px;padding:11px 15px; box-shadow:0 4px 24px rgba(0,0,0,.1); pointer-events:auto; animation:floatIn .9s ease both;} .hero-badge-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .hero-badge-top{top:10%;right:8%;animation-delay:.6s;} .hero-badge-bottom{bottom:8%;left:6%;animation-delay:.85s;} /* ── SO STARTEN SIE ── */ /* ── GRID CARDS ── */ .card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px} .card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px} .content-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px 20px;cursor:pointer;transition:all var(--t-base);display:flex;flex-direction:column;gap:10px;text-decoration:none} .content-card:hover{border-color:rgba(45,155,111,.3);box-shadow:0 4px 24px rgba(45,155,111,.1);transform:translateY(-2px)} .card-icon{font-size:26px;line-height:1} .card-name{font-size:15px;font-weight:600;color:var(--black)} .card-hint{font-size:13px;color:var(--muted);line-height:1.4} .card-cta{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--blue);padding-top:8px;border-top:1px solid var(--border);transition:gap var(--t-base)} .card-cta svg{width:13px;height:13px;transition:transform var(--t-base)} .content-card:hover .card-cta{gap:10px} .content-card:hover .card-cta svg{transform:translateX(2px)} /* Tag pills */ /* ── SUBPAGE HERO ── */ .sub-hero{background:linear-gradient(135deg,#f0f8f4 0%,#f4faf7 60%,#fff 100%);padding:48px 0 48px;border-bottom:1px solid var(--border)} .sub-hero .wrap{display:flex;flex-direction:column} /* ── SUBPAGE HERO VARIANTS, distinct identity per page type ── */ .sub-hero--symptom{background:linear-gradient(135deg,#f0f8f4 0%,#f4faf7 55%,#fff 100%); border-bottom:1px solid var(--border); border-top:3px solid var(--blue);} /* ── SUBPAGE HERO EYEBROW BADGE ── */ .sub-eyebrow{display:inline-flex;align-items:center;gap:7px; font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;padding:5px 13px; border-radius:100px;margin-bottom:18px;width:fit-content;} .sub-eyebrow::before{content:'';width:5px;height:5px;border-radius:50%; background:currentColor;opacity:.65;flex-shrink:0;} .sub-eyebrow--symptom{background:rgba(45,155,111,.08); border:1px solid rgba(45,155,111,.25); color:var(--blue-dark);} .breadcrumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:20px;flex-wrap:wrap} .breadcrumb a,.breadcrumb button{color:var(--blue);text-decoration:none;background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:12.5px;padding:0;transition:opacity var(--t-base)} .breadcrumb a:hover,.breadcrumb button:hover{opacity:.7} .breadcrumb-sep{color:var(--border)} .sub-title{font-family:var(--font-sans);font-size:clamp(32px,4vw,52px);letter-spacing:-.04em;line-height:1.08;color:var(--black);margin-bottom:18px;font-weight:800} .sub-title em{font-style:italic;color:var(--blue);font-weight:700} .sub-desc{font-size:17px;font-weight:400;color:var(--mid);line-height:1.7;max-width:600px;margin-bottom:28px} .sub-cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .sub-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)} .sub-meta-item{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mid)} .sub-meta-item svg{width:14px;height:14px;color:var(--blue);flex-shrink:0} /* ── RICH CONTENT ── */ .content-body{max-width:720px} .content-body h2{font-family:var(--font-sans);font-size:clamp(22px,2.5vw,30px);color:var(--black);letter-spacing:-.03em;margin:36px 0 14px;font-weight:700} .content-body h2:first-child{margin-top:0} .content-body h3{font-size:17px;font-weight:600;color:var(--black);margin:24px 0 10px} .content-body p{font-size:15.5px;color:var(--mid);line-height:1.8;margin-bottom:16px} .content-body ul{padding-left:20px;margin-bottom:16px} .content-body li{font-size:15.5px;color:var(--mid);line-height:1.8;margin-bottom:6px} .content-body strong{color:var(--charcoal);font-weight:600} /* ── RELATED SECTION ── */ .related-section{background:var(--surface);padding:72px 0} /* ── CITY GRID ── */ .city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px;align-items:stretch} .city-card{background:#fff;border:1px solid #ebebea;border-radius:14px;padding:0;cursor:pointer;transition:transform var(--t-slow) cubic-bezier(.25,.46,.45,.94),box-shadow var(--t-slow) cubic-bezier(.25,.46,.45,.94),border-color var(--t-slow) ease;display:flex;flex-direction:column;text-decoration:none;overflow:hidden;position:relative;min-height:172px} .city-card:hover{border-color:rgba(45,155,111,.22);box-shadow:0 6px 28px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);transform:translateY(-2px)} .city-card-body{padding:20px 20px 18px;display:flex;flex-direction:column;flex:1;min-height:0} .city-name{font-size:18px;font-weight:700;color:#0d0d0d;letter-spacing:-.025em;line-height:1.15;margin-bottom:3px;transition:color var(--t-base) ease} .city-card:hover .city-name{color:#1F7A54} .city-region{font-size:11px;color:#b0b0ae;font-weight:400;letter-spacing:.02em;margin-bottom:16px;text-transform:uppercase} .city-note{font-size:12px;font-weight:500;color:#555;margin-bottom:14px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .city-stats{display:flex;align-items:center;gap:6px;margin-bottom:0} .city-stat{font-size:11.5px;color:#bbb;display:flex;align-items:center;gap:3px} .city-stat strong{color:#666;font-weight:600} .city-stat-sep{color:#ddd;font-size:10px} .city-cta{margin-top:auto;padding-top:14px;font-size:12px;font-weight:600;color:rgba(45,155,111,.8);display:flex;align-items:center;gap:5px;letter-spacing:.015em;transition:color var(--t-base) ease,gap var(--t-base) ease} .city-cta svg{transition:transform var(--t-base) cubic-bezier(.25,.46,.45,.94);flex-shrink:0;opacity:.7} .city-card:hover .city-cta{color:#2D9B6F;gap:7px} .city-card:hover .city-cta svg{transform:translateX(2px);opacity:1} /* ── CLINIC CARDS ── */ .badge-open{background:#e8fdf2;color:#1F7A54;border:1px solid rgba(26,158,90,.2)} /* ── WA SECTION ── */ .wa-section{background:var(--black);color:#fff;position:relative;overflow:hidden;min-height:calc(100vh - 68px);display:flex;align-items:center;padding:96px 0} .wa-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 50%,rgba(45,155,111,.12) 0%,transparent 60%);pointer-events:none} .wa-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;width:100%} .wa-left .section-title{color:#fff;font-size:clamp(26px,3.5vw,40px);margin-bottom:12px;line-height:1.15} .wa-left .section-sub{color:rgba(255,255,255,.58);margin-bottom:18px;font-size:16px;line-height:1.7;max-width:none} .wa-reassurance{margin:18px 0 16px;padding:13px 15px;border-left:2px solid rgba(45,155,111,.4);background:rgba(255,255,255,.03);border-radius:0 8px 8px 0} .wa-reassure-main{font-size:14px;font-weight:600;color:rgba(255,255,255,.86);margin-bottom:5px;line-height:1.4;font-family:var(--font-sans)} .wa-reassure-sub{font-size:13px;font-weight:400;color:rgba(255,255,255,.36);line-height:1.6;font-family:var(--font-sans)} .wa-avatar{width:38px;height:38px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;flex-shrink:0} .wa-avatar svg{width:22px;height:22px;fill:#fff} .wa-chat-name{font-size:13px;font-weight:600;color:#fff;font-family:var(--font-sans)} .wa-chat-status{font-size:11.5px;color:rgba(255,255,255,.4);margin-top:2px;font-family:var(--font-sans)} .wa-online{display:inline-block;width:6px;height:6px;background:#25D366;border-radius:50%;margin-right:4px;animation:pulse 2.4s ease infinite} .wa-left .section-title em{color:rgba(45,155,111,.75);font-weight:600} .wa-value-points{display:flex;flex-direction:column;gap:8px;margin-top:14px} .wa-value-pt{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.55);font-weight:400;font-family:var(--font-sans);line-height:1.4} .wa-value-pt svg{color:var(--blue);flex-shrink:0;opacity:.85} /* Flow connector between mockup and input */ /* ── HOW GRID ── */ .step-num{font-family:var(--font-sans);font-size:40px;color:var(--border);line-height:1;font-weight:800;letter-spacing:-.04em} /* ── REVIEWS ── */ .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px} .review-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px} .review-stars{font-size:14px} .review-text{font-size:14.5px;line-height:1.65;color:var(--mid);font-weight:300;font-style:italic;flex:1} .review-author{display:flex;align-items:center;gap:10px} .review-avatar{width:36px;height:36px;border-radius:50%;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--blue);flex-shrink:0} .review-name{font-size:13.5px;font-weight:600;color:var(--black)} .review-city{font-size:12px;color:var(--muted)} /* ── STATS ── */ .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-radius:16px;overflow:hidden;margin-top:48px} .stat-block{background:#fff;padding:24px;text-align:center} .stat-num{font-family:var(--font-sans);font-size:36px;color:var(--black);letter-spacing:-.04em;line-height:1.1;font-weight:800} .stat-num span{color:var(--blue)} .stat-label{font-size:13px;color:var(--muted);margin-top:6px} /* ── CTA BAND ── */ /* ── INSURANCE / KRANKENKASSE SECTION ── */ .kk-section{padding:96px 0;background:var(--surface)} .kk-inner{max-width:760px;margin:0 auto} .kk-header{text-align:center;margin-bottom:48px} .kk-intro{font-size:16px;font-weight:400;color:var(--mid);line-height:1.78;margin:0 auto;text-align:center} .kk-intro strong{color:var(--charcoal);font-weight:600} .kk-faq{border:1px solid var(--border);border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--sh-sm)} .kk-item{border-bottom:1px solid var(--border)} .kk-item:last-child{border-bottom:none} .kk-q{width:100%;text-align:left;background:transparent;border:none;cursor:pointer; padding:20px 24px;font-size:15px;font-weight:600;color:var(--charcoal); display:flex;justify-content:space-between;align-items:center;gap:16px; font-family:var(--font-sans);line-height:1.4;transition:background var(--t-fast)} .kk-q:hover{background:var(--surface)} .kk-ico{width:26px;height:26px;border-radius:50%;background:var(--surface); display:flex;align-items:center;justify-content:center;flex-shrink:0; color:var(--muted);transition:transform var(--t-slow),background var(--t-base);font-size:18px;line-height:1} .kk-q.open .kk-ico{transform:rotate(45deg);background:var(--blue);color:#fff} .kk-a{display:none;padding:0 24px 20px;font-size:14.5px;color:var(--mid);line-height:1.75} .kk-a.open{display:block} .kk-a p+p{margin-top:8px} .kk-a strong{color:var(--charcoal);font-weight:600} .kk-more-wrap{text-align:center;margin-top:20px} .kk-more-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:none; cursor:pointer;font-family:var(--font-sans);font-size:14px;font-weight:500; color:var(--muted);padding:8px 0;transition:color var(--t-base)} .kk-more-btn:hover{color:var(--blue)} .kk-more-btn svg{transition:transform var(--t-slow)} .kk-more-btn.expanded svg{transform:rotate(180deg)} .kk-extra{overflow:hidden;max-height:0;transition:max-height var(--t-xl) cubic-bezier(.4,0,.2,1)} .kk-extra.open{max-height:1200px} .kk-extra .kk-faq{margin-top:12px} .kk-cta-card{margin-top:56px;background:linear-gradient(135deg,rgba(45,155,111,.07) 0%,rgba(45,155,111,.03) 100%); border-radius:24px;padding:44px 52px;display:flex;align-items:center; justify-content:space-between;gap:40px;border:1px solid rgba(45,155,111,.14)} .kk-cta-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase; color:var(--blue);margin-bottom:9px;display:block} .kk-cta-h{font-size:21px;font-weight:700;color:var(--charcoal);line-height:1.35;margin-bottom:9px} .kk-cta-sub{font-size:14.5px;color:var(--mid);line-height:1.68;max-width:440px} .kk-cta-actions{display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap;align-items:center} @media(max-width:800px){.kk-cta-card{flex-direction:column;align-items:flex-start;padding:32px 28px;gap:28px} .kk-cta-actions{width:100%} .kk-cta-actions a,.kk-cta-actions button{width:100%;justify-content:center} } @media(max-width:600px){.kk-section{padding:64px 0} .kk-q{padding:17px 18px;font-size:14px} .kk-a{padding:0 18px 17px;font-size:14px} .kk-cta-card{padding:28px 20px} .kk-header{margin-bottom:36px} .kk-intro{font-size:15px} } /* ── VISION / CATEGORY SECTION ── */ .vision-section{background:var(--surface);padding:96px 0} .vision-grid{display:grid;grid-template-columns:1fr 420px;gap:72px;align-items:center} .vision-eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b8b8b8;margin-bottom:24px} .vision-headline{font-family:var(--font-sans);font-size:clamp(24px,2.9vw,38px);font-weight:800;color:var(--black);letter-spacing:-.035em;line-height:1.12;margin-bottom:32px} .vision-body{display:flex;flex-direction:column;gap:0;max-width:520px} .vision-body p{font-size:15px;font-weight:400;color:#585858;line-height:1.74;margin-bottom:14px} .vision-body p:last-child{margin-bottom:0} .vision-we-not{font-size:15px!important;font-weight:600!important;color:var(--black)!important;margin-bottom:18px!important} .vision-kicker{display:flex;flex-direction:column;gap:0;margin-top:4px} .vision-kicker p{font-size:15px;font-weight:400;color:#383838;line-height:1.6;margin-bottom:0!important} .vision-kicker p + p{margin-top:3px!important;font-style:italic} .vision-closing{margin-top:36px;padding-top:28px;border-top:1px solid #ebebeb;font-size:15px;font-weight:700;color:var(--black);letter-spacing:-.015em;max-width:460px;line-height:1.45} .vision-visual{display:flex;align-items:center;justify-content:flex-start} .vision-svg{width:100%;max-width:420px;height:auto} @media(max-width:1160px){.vision-grid{grid-template-columns:1fr 360px;gap:56px} .vision-svg{max-width:360px} } @media(max-width:920px){.vision-grid{grid-template-columns:1fr;gap:56px} .vision-visual{justify-content:center} .vision-svg{max-width:340px} .vision-section{padding:64px 0} } @media(max-width:600px){.vision-section{padding:48px 0} .vision-headline{font-size:23px} .vision-svg{max-width:300px} .vision-closing{font-size:14.5px} } /* ── ECOSYSTEM DIAGRAM MOTION ── */ /* Respects prefers-reduced-motion. All timings are slow and offset to feel non-mechanical. */ @media(prefers-reduced-motion:no-preference){/* 1, Hub center dot:slow breath (scale + opacity) */ #hub-dot{animation:hubDotBreath 5.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center;} @keyframes hubDotBreath{0%,100%{opacity:.68;transform:scale(1)} 50%{opacity:.38;transform:scale(.84)} } /* Hub accent ring:very slow drift,offset from dot so it never syncs */ #hub-accent{animation:hubRingDrift 7.2s ease-in-out infinite; animation-delay:-2.8s;} @keyframes hubRingDrift{0%,100%{opacity:1} 50%{opacity:.38} } /* Hub outer aura:barely perceptible,slowest cycle */ #hub-aura{animation:hubAuraDrift 10s ease-in-out infinite; animation-delay:-4.5s;} @keyframes hubAuraDrift{0%,100%{opacity:1} 50%{opacity:.35} } /* 2, Node sparse activations:one brief blink,then long rest */ /* Anfrage, 11s cycle,starts mid-rest */ #node-anfrage-dot{animation:nodeBlink 11s ease-in-out infinite;animation-delay:-1.2s} /* Therapie, different duration,offset start */ #node-therapie-dot{animation:nodeBlink 14.5s ease-in-out infinite;animation-delay:-7s} /* Hwang.ch brand node, very long,barely noticed */ #node-hwang-dot{animation:nodeBlink 19s ease-in-out infinite;animation-delay:-11s} @keyframes nodeBlink{/* long rest → quick dim → recover → long rest */ 0%,13%,33%,100%{opacity:1} 21%{opacity:.15} } /* 3, Feedback line:dashes travel slowly from Lernen toward Anfrage */ #feedback-line{animation:feedbackDash 7s linear infinite;} @keyframes feedbackDash{from{stroke-dashoffset:12} to{stroke-dashoffset:0} } } /* ── /ECOSYSTEM MOTION ── */ /* ── /VISION ── */ .cta-band{background:var(--black);color:#fff;padding:72px 0;text-align:center;position:relative;overflow:hidden} .cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(45,155,111,.08) 0%,transparent 70%)} .cta-band h2{font-family:var(--font-sans);font-size:clamp(26px,3vw,40px);color:#fff;letter-spacing:-.03em;margin-bottom:14px;position:relative;font-weight:800} .cta-band p{font-size:16px;color:rgba(255,255,255,.7);margin-bottom:32px;position:relative;font-weight:300} .cta-band-btns{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;position:relative} /* ── FOOTER ── */ footer{background:#0d0d0d;color:rgba(255,255,255,.6);padding:56px 0 36px;position:relative;z-index:1010} .footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:28px} .footer-logo-wm{font-family:'Nunito',sans-serif;font-weight:900;font-style:italic;font-size:20px;color:#fff;display:flex;align-items:baseline} .footer-logo-wm .ch{font-size:16px} .footer-tagline{font-size:13px;line-height:1.65;color:rgba(255,255,255,.4);max-width:220px;margin:10px 0 20px} .footer-social{display:flex;gap:10px} .social-btn{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--t-base);text-decoration:none} .social-btn:hover{background:rgba(255,255,255,.15)} .social-btn svg{width:15px;height:15px;color:rgba(255,255,255,.6)} .footer-col h4{font-size:13px;font-weight:600;color:rgba(255,255,255,.9);margin-bottom:14px} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px} .footer-col ul a,.footer-col ul button{font-size:13px;color:rgba(255,255,255,.4);text-decoration:none;background:none;border:none;cursor:pointer;font-family:var(--font-sans);text-align:left;transition:color var(--t-base);padding:0} .footer-col ul a:hover,.footer-col ul button:hover{color:rgba(255,255,255,.8)} .footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px} .footer-copy{font-size:12px;color:rgba(255,255,255,.3)} .footer-legal{display:flex;gap:16px} .footer-legal a,.footer-legal button{font-size:12px;color:rgba(255,255,255,.3);text-decoration:none;background:none;border:none;cursor:pointer;font-family:var(--font-sans);transition:color var(--t-base);padding:0} .footer-legal a:hover,.footer-legal button:hover{color:rgba(255,255,255,.6)} /* ── MOBILE STICKY CTA (subpages) ── */ .mobile-cta-bar{display:none; position:fixed;bottom:0;left:0;right:0;z-index:100; background:#fff;border-top:1px solid var(--border); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -4px 24px rgba(0,0,0,.12); gap:10px; align-items:center;} .mobile-cta-bar .btn-primary{flex:1;min-width:0;font-size:14px;font-weight:600; padding:13px 14px;justify-content:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; box-shadow:none;} .mobile-cta-bar .btn-secondary{flex-shrink:0;font-size:13px;padding:12px 14px; white-space:nowrap;border-radius:100px;} .mobile-cta-bar .btn-call{flex-shrink:0; display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:50%; background:var(--surface);border:1.5px solid var(--border); font-size:20px;text-decoration:none; transition:background var(--t-base);flex-shrink:0;} .mobile-cta-bar .btn-call:hover{background:var(--blue-light)} @media(max-width:900px){.mobile-cta-bar{display:flex} footer{padding-bottom:80px} .cta-band{padding-bottom:80px} /* home has its own hero CTAs */ } @media(max-width:380px){.mobile-cta-bar .btn-primary{font-size:13px;padding:12px 10px} .mobile-cta-bar .btn-secondary{font-size:12px;padding:11px 10px} } /* ── CONTACT FORM MODAL ── */ .modal-overlay.open{display:flex;animation:fadeIn .22s ease} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} .form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:12px} .form-label{font-size:12.5px;font-weight:600;color:var(--charcoal);letter-spacing:.2px} .form-input,.form-select,.form-textarea{font-family:var(--font-sans);font-size:14px;color:var(--charcoal); background:var(--surface);border:1.5px solid var(--border); border-radius:10px;padding:11px 14px;outline:none;width:100%; transition:border-color var(--t-base),background var(--t-base);} .form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--blue);background:#fff;} .form-input::placeholder,.form-textarea::placeholder{color:#bbb} .form-textarea{resize:none;min-height:76px} .form-select{appearance:none;cursor:pointer; background-image:url(" xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:36px} .form-submit{width:100%;justify-content:center;font-size:15px;padding:15px;border-radius:14px;font-weight:600} /* ── TAP FIX:prevent child elements stealing click events ── */ .content-card *,.city-card *,.review-card{pointer-events:none } /* Re-enable on elements that need their own interaction */ .content-card,.city-card{pointer-events:auto } /* Concierge card:re-enable everything so clicks register */ .city-card-contact,.city-card-contact *{pointer-events:auto !important } /* Tags inside cards need their own pointer events */ /* Sidebar therapy/symptom rows */ .sidebar-row *{pointer-events:none } .sidebar-row{pointer-events:auto; cursor:pointer } /* ── MIN TAP TARGETS:44×44px minimum (iOS HIG) ── */ .nav-links a,.nav-links button{min-height:44px; padding:0 8px !important; display:inline-flex; align-items:center;} .nav-cta{min-height:44px !important; padding:0 18px !important; min-width:174px !important; justify-content:center !important;} #navCtaLabel{transition:opacity var(--t-fast) ease; pointer-events:none;} .breadcrumb a,.breadcrumb button{min-height:36px; padding:6px 4px !important; display:inline-flex; align-items:center;} .footer-col ul a,.footer-col ul button{min-height:44px; padding:4px 0 !important; display:inline-flex; align-items:center;} .footer-legal a,.footer-legal button{min-height:44px; padding:6px 0 !important; display:inline-flex; align-items:center;} .btn-primary,.btn-secondary,.btn-white,.btn-outline-white{min-height:48px;} .form-submit{min-height:52px } /* ── TOUCH FEEDBACK ── */ @media(hover:none){.content-card:active{transform:scale(.98); opacity:.85 } .city-card:active{transform:scale(.98); opacity:.85 } .entry-card:active{transform:scale(.98) } .btn-primary:active{transform:scale(.97) } .btn-secondary:active{transform:scale(.97) } } /* ── REMOVE :hover transforms on touch devices (they stick) ── */ @media(hover:none){.content-card:hover,.city-card:hover{transform:none } } /* ── INLINE CONTACT FORM ── */ .contact-inline-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start} .contact-methods-mini{display:flex;flex-direction:column;gap:10px;margin-top:8px} .contact-method-mini{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid var(--border);border-radius:14px;text-decoration:none;transition:all var(--t-base);cursor:pointer} .contact-method-mini:hover{border-color:rgba(45,155,111,.25);background:#f4faf7;transform:translateX(3px)} .contact-method-mini *{pointer-events:none} .cm-icon-mini{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .cm-wa{background:#25D366} .cm-phone{background:var(--charcoal)}.cm-mail{background:var(--blue)} .contact-method-mini strong{display:block;font-size:13.5px;font-weight:600;color:var(--black)} .contact-method-mini span{font-size:12.5px;color:var(--muted)} .inline-form-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px;box-shadow:var(--sh-md)} .inline-form-header{margin-bottom:20px} .inline-form-title{font-family:var(--font-sans);font-size:20px;color:var(--black);margin-bottom:4px;font-weight:700;letter-spacing:-.02em} .inline-form-sub{font-size:13.5px;color:var(--muted)} .inline-form{display:flex;flex-direction:column;gap:0} .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} @media(max-width:1024px){.contact-inline-grid{grid-template-columns:1fr;gap:36px}} @media(max-width:900px){.contact-inline-grid > div:first-child{display:none}} @media(max-width:600px){.form-row-2{grid-template-columns:1fr}} /* ════════════════════════════════════════ DESKTOP ENHANCEMENTS ════════════════════════════════════════ */ /* Hero:richer gradient bg */ .hero-bg,.hero{background:#ffffff!important;background-image:none!important;} /* Hero:larger,more breathing room */ .hero{min-height:calc(100vh - 64px); padding:88px 40px 72px; gap:72px;} /* Sub-hero:more presence */ .sub-hero{padding:72px 0 56px; background:linear-gradient(135deg,#f0f8f4 0%,#f4faf7 55%,#fff 100%);} .sub-hero .wrap{max-width:900px;} .sub-title{font-size:clamp(36px,4.5vw,58px); letter-spacing:-1.5px;} .sub-desc{font-size:18px; max-width:640px;} /* Entry panel:refined card */ /* Section spacing */ .related-section{padding:96px 0;} /* Cards:more shadow depth */ .content-card:hover{box-shadow:0 8px 32px rgba(45,155,111,.12); transform:translateY(-4px);} /* ── Contact card, animated green border ── */ /* spin-border removed */ .city-card-contact{border:1.5px dashed #d0d0ce;background:#fafaf8} .city-card-contact:hover{border-color:rgba(45,155,111,.3)} /* Sidebar:proper sticky */ .subpage-sidebar-sticky{position:sticky; top:80px;} /* Clinic cards:bigger */ /* Review cards:more depth */ .review-card{border-radius:24px; padding:28px; transition:box-shadow var(--t-base),transform var(--t-base);} .review-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.08); transform:translateY(-3px);} /* Stats row:bigger numbers */ .stat-block{padding:32px 28px;} .stat-num{font-size:44px;} /* How steps:more padding */ /* CTA band:more padding */ .cta-band{padding:96px 0;} /* Inline form card:more presence */ .inline-form-card{border-radius:24px; padding:40px; box-shadow:0 8px 40px rgba(0,0,0,.09);} /* Contact method mini:hover effect */ .contact-method-mini{border-radius:16px; padding:16px 20px;} /* Footer:clean */ footer{padding:80px 0 56px; position:relative; z-index:1010;} .footer-inner{gap:56px;} /* Nav:bigger */ nav{height:68px;} #app{padding-top:68px;} /* Logo:slightly bigger on desktop */ .logo-wm{font-size:24px;} .logo-wm .ch{font-size:19px;} /* Content body:better typography */ .content-body{max-width:680px;} .content-body h2{font-size:clamp(24px,2.8vw,34px); margin:42px 0 16px;} .content-body p{font-size:16px; line-height:1.8;} .content-body li{font-size:16px; line-height:1.8;} /* City grid:4 col with hover */ .city-grid{grid-template-columns:repeat(4,1fr); gap:14px; align-items:stretch;} .city-card{border-radius:14px;} /* Tag pills:desktop */ /* Therapy tags on content cards */ /* Float proof:bigger */ /* WA chat:bigger */ /* Breadcrumb:more spacing */ .breadcrumb{margin-bottom:28px; gap:10px; font-size:13px;} .breadcrumb a,.breadcrumb button{font-size:13px;} /* Sub-meta:more spacing */ .sub-meta{gap:28px; margin-top:28px; padding-top:28px;} .sub-meta-item{font-size:14px; gap:8px;} .sub-meta-item svg{width:16px; height:16px;} /* Section label */ .section-label{font-size:12.5px; margin-bottom:14px;} /* Eyebrow */ .eyebrow{font-size:13px; padding:7px 16px;} /* Form inputs:comfortable */ .form-input,.form-select,.form-textarea{font-size:15px; padding:13px 16px; border-radius:12px;} .form-label{font-size:13px;} /* Modal:desktop sizing bump */ /* Mobile bar:hidden on desktop (already handled) */ /* Inline grid:balanced */ .contact-inline-grid{gap:72px; align-items:start;} @media(min-width:1025px){.subpage-content-grid{display:grid !important;grid-template-columns:1fr 360px !important;gap:64px !important;align-items:start !important} .subpage-sidebar{position:sticky !important;top:84px !important} .contact-inline-grid{grid-template-columns:1fr 1.2fr !important} .contact-inline-grid > div:first-child{display:block !important} .mobile-cta-bar{display:none !important} } /* ── SUBPAGE REVIEWS ── */ .subpage-reviews{background:var(--surface); padding:72px 0;} .reviews-header{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:40px;} .google-badge{display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border); border-radius:100px; padding:8px 16px 8px 12px; font-size:13px; font-weight:500; color:var(--charcoal); box-shadow:var(--sh-sm);} .google-badge svg{flex-shrink:0;} .google-stars{color:#FBBC04; font-size:14px;} .google-score{font-weight:700; color:var(--black);} .google-count{color:var(--muted); font-size:12px;} .subpage-reviews .reviews-grid{grid-template-columns:repeat(3,1fr); margin-top:0;} @media(max-width:900px){.subpage-reviews .reviews-grid{grid-template-columns:1fr;} } @media(max-width:600px){.reviews-header{flex-direction:column; align-items:flex-start;} } /* ── SCHEMA / JSON-LD placeholder ── */ /* ── ANIMATIONS ── */ @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes floatIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}} .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--t-xl) ease,transform var(--t-xl) ease;pointer-events:none} .reveal.visible{opacity:1;transform:translateY(0);pointer-events:auto} /* ── RESPONSIVE ── */ @media(max-width:1100px){.card-grid{grid-template-columns:repeat(2,1fr)} .city-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:1024px){.wa-inner{grid-template-columns:1fr;gap:32px} .wa-section{min-height:auto;padding:64px 0} .footer-inner{grid-template-columns:1fr 1fr;gap:28px} .hero{grid-template-columns:1fr;gap:0;padding:32px 0 40px}.hero-left{padding:28px 24px 24px;border-radius:20px;background:rgba(255,255,255,.9)}.hero-right{border-left:none;border-top:1px solid #EAECEF;padding:32px 24px}.hero-bg{background-position:50% 25%} .reviews-grid{grid-template-columns:1fr 1fr} #extraReviewsGrid{grid-template-columns:1fr 1fr!important} .stats-row{grid-template-columns:repeat(2,1fr)} /* subpage detail:collapse sidebar below content */ .subpage-content-grid{grid-template-columns:1fr !important} .subpage-sidebar{position:static !important} } @media(max-width:900px){nav{padding:0 20px} .nav-links{display:none} .wrap{padding:0 20px} .section{padding:72px 0} .hero-left{padding:24px 20px} .sub-hero{padding:48px 0 36px} .sub-title{font-size:clamp(28px,7vw,42px)} .sub-meta{gap:12px} /* standort inline grid fix */ .subpage-content-grid{grid-template-columns:1fr !important;gap:32px !important} .subpage-sidebar{position:static !important;top:auto !important} } @media(max-width:600px){.card-grid,.card-grid-3{grid-template-columns:1fr 1fr} .city-grid{grid-template-columns:1fr 1fr} .reviews-grid{grid-template-columns:1fr} #extraReviewsGrid{grid-template-columns:1fr!important} .stats-row{grid-template-columns:1fr 1fr} .footer-inner{grid-template-columns:1fr} .cta-row,.sub-cta-row{flex-direction:column;align-items:stretch} .btn-primary,.btn-secondary,.btn-white{justify-content:center;width:100%} .footer-bottom{flex-direction:column;align-items:flex-start} .sub-hero{padding:36px 0 28px} .sub-title{font-size:clamp(26px,8vw,38px);letter-spacing:-.5px} .sub-desc{font-size:15px} .breadcrumb{font-size:12px} .content-body h2{font-size:clamp(18px,5vw,24px);margin:28px 0 12px} .content-body p,.content-body li{font-size:14.5px} .sub-meta{flex-direction:column;gap:10px} .subpage-content-grid{grid-template-columns:1fr !important;gap:24px !important} .subpage-sidebar{position:static !important} } @media(max-width:440px){.card-grid,.card-grid-3,.city-grid{grid-template-columns:1fr} .city-stats{flex-wrap:wrap;gap:8px} } .card-icon svg{width:22px;height:22px;display:block} /* ═══════════════════════════════════════════════ PAIN → RELIEF, subtle card hover interaction Hover-capable devices only. No layout shift. ═══════════════════════════════════════════════ */ @media(hover:hover){.content-card,.city-card{transition:border-color var(--t-slow) cubic-bezier(.25,.46,.45,.94),box-shadow var(--t-slow) cubic-bezier(.25,.46,.45,.94),transform var(--t-slow) cubic-bezier(.25,.46,.45,.94);} .content-card .card-hint,.city-card .city-region,.city-card .city-stats{opacity:.72; transition:opacity var(--t-slow) cubic-bezier(.25,.46,.45,.94);} .city-card .city-cta{opacity:.7; transition:opacity var(--t-slow) cubic-bezier(.25,.46,.45,.94);} .content-card:hover .card-hint,.city-card:hover .city-region,.city-card:hover .city-stats{opacity:1;} .city-card:hover .city-cta{opacity:1;} } @media(prefers-reduced-motion:reduce){.content-card,.city-card{transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast) !important;} } /* ── WA LIVE ROTATOR ── */ .wa-rotator-item.active{opacity:.7;transform:translateY(0)} /* ── WA LIVE ROTATOR ── */ .wa-rotator-item.active{opacity:.7;transform:translateY(0)} /* ── HERO BREATHE ── Ambient vertical drift on the hero card. Starts 0.9s after page load so the fadeUp entrance completes first. Uses ease-in-out for a natural swell. prefers-reduced-motion:stripped to entrance only. */ @keyframes hero-breathe{0%,100%{transform:translateY(0px)} 50%{transform:translateY(-3.5px)} } .hero-left{animation:fadeUp .7s ease both,hero-breathe 8s ease-in-out .9s infinite; will-change:transform;} @media(prefers-reduced-motion:reduce){.hero-left{animation:fadeUp .7s ease both !important;} } /* ══════════════════════════════════════════════════ TRUST ELEMENT LIVELINESS, one refined visual language Ambient:staggered icon breath on hero trust bar Hover:quiet lift on stats,badges,google badge Pulse:soft availability signal on .badge-open ══════════════════════════════════════════════════ */ /* Icon breath, extremely slow,low amplitude. Each trust icon exhales and inhales once per ~9s,offset so they never peak together. */ /* Green blink, tiny,slow,unmistakably alive */ /* Hero trust bar */ /* ── USP SPARKLES ── removed */ /* Hover:icon wakes up,animation pauses so it stays bright */ /* Sub-page meta items, same hover language,no ambient */ .sub-meta-item{cursor:default;} .sub-meta-item svg{opacity:.7; transition:transform var(--t-slow) cubic-bezier(.25,.46,.45,.94),opacity var(--t-slow) cubic-bezier(.25,.46,.45,.94);} .sub-meta-item:hover svg{transform:scale(1.12); opacity:1;} /* Stat blocks, quiet hover lift */ .stat-block{transition:box-shadow var(--t-slow) cubic-bezier(.25,.46,.45,.94),transform var(--t-slow) cubic-bezier(.25,.46,.45,.94); cursor:default;} .stat-block:hover{box-shadow:0 6px 24px rgba(45,155,111,.1); transform:translateY(-2px);} /* ── FLAGSHIP ZÜRICH STYLES ── */ /* Availability strip – Zürich flagship emphasis */ /* .avail-flagship-badge removed from strip, Zürich identity conveyed via green city name + status text */ /* Empfohlene Praxis flagship section */ /* City card – flagship variant */ /* Standorte page flagship block */ /* Standort detail – flagship premium layer */ .standort-flagship-banner{background:linear-gradient(135deg,#f0f8f4 0%,#e8f5ef 100%);border:1.5px solid rgba(45,155,111,.2);border-radius:16px;padding:22px 28px;margin-bottom:28px} .standort-flagship-banner-tag{display:inline-flex;align-items:center;gap:5px;background:#2D9B6F;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:100px;margin-bottom:12px} .standort-flagship-banner-title{font-family:var(--font-sans);font-size:17px;font-weight:800;color:#0d0d0d;letter-spacing:-.03em;margin:0 0 10px} .standort-flagship-banner-bullets{display:flex;flex-wrap:wrap;gap:4px 16px} .standort-flagship-banner-bullet{font-size:12.5px;color:#2a2a2a;display:flex;align-items:center;gap:4px} .standort-flagship-banner-bullet svg{color:#2D9B6F} /* Hero review hero card */ /* Lm-subline flagship state */ /* Badge-open, soft ambient availability pulse. Reads as "currently live" without alerting. */ @keyframes availability-alive{0%,65%,100%{opacity:1;} 32%{opacity:.72;} } .badge-open{animation:availability-alive 7s ease-in-out infinite;} /* Google badge, hover lift */ .google-badge{transition:box-shadow var(--t-slow) ease,transform var(--t-slow) ease;} .google-badge:hover{box-shadow:0 4px 18px rgba(0,0,0,.11); transform:translateY(-1px);} /* Stripped for reduced motion */ @media(prefers-reduced-motion:reduce){.badge-open{animation:none !important; opacity:1 !important;} .sub-meta-item svg,.stat-block,.google-badge{transition:none !important; transform:none !important;} } /* ══════════════════════════════════════════════════ MERIDIAN ENERGY HOVER A narrow angled gradient sweeps left→right through primary CTAs on hover. Inspired by meridian flow, directional,precise,calm. One visual language,three surface variants. ══════════════════════════════════════════════════ */ /* Contain the sweep at rounded edges */ .btn-primary,.btn-secondary,.btn-white{position:relative; overflow:hidden;} /* The sweep element, off-screen left at rest */ .btn-primary::after,.btn-secondary::after,.btn-white::after{content:''; position:absolute; inset:0; /* Narrow 30% window,angled 105° = subtle meridian diagonal */ background:linear-gradient( 105deg,transparent 35%,rgba(255,255,255,.13) 50%,transparent 65% ); transform:translateX(-110%); pointer-events:none; /* No transition at rest, activates only on hover entry */ } /* Secondary (white/border) and WA alt:brand-green tint instead of white */ .btn-secondary::after{background:linear-gradient( 105deg,transparent 35%,rgba(45,155,111,.1) 50%,transparent 65% );} /* White button on dark bg:even lighter tint */ .btn-white::after{background:linear-gradient( 105deg,transparent 35%,rgba(45,155,111,.07) 50%,transparent 65% );} /* Hover:sweep fires once,travels fully through */ @media(hover:hover){.btn-primary:hover::after,.btn-secondary:hover::after,.btn-white:hover::after{transform:translateX(110%); transition:transform var(--t-xl) cubic-bezier(.4,0,.2,1);} } /* Reduced motion:no sweep at all */ @media(prefers-reduced-motion:reduce){.btn-primary::after,.btn-secondary::after,.btn-white::after{display:none !important;} } /* Start cards, same meridian sweep language */ /* ── QI DOTS, floating micro-circles in hero right ── */ .hero-right-visual{overflow:hidden;} /* ── SONAR RING, WA availability dot ── box-shadow expands outward like a ping,no HTML changes needed */ /* ════════════════════════════════════════════ DRAWER, standort / symptom / therapie popup Pages stay in the DOM; position:fixed turns them into a right-side drawer panel. ════════════════════════════════════════════ */ /* Backdrop */ #drawerBackdrop.visible{display:block; opacity:1;} /* Close button, fixed top-right,pill with label */ #drawerClose{display:none; position:fixed; top:16px; right:20px; z-index:402; height:44px; border-radius:100px; padding:0 18px 0 14px; background:rgba(255,255,255,.97); border:1px solid rgba(0,0,0,.10); box-shadow:0 4px 20px rgba(0,0,0,.14),0 1px 4px rgba(0,0,0,.06); cursor:pointer; align-items:center; justify-content:center; gap:7px; color:#1a1a1a; font-family:var(--font-sans); font-size:13.5px; font-weight:600; letter-spacing:.01em; transition:background var(--t-base),color var(--t-base),box-shadow var(--t-base),transform var(--t-fast); white-space:nowrap; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);} #drawerClose.visible{display:flex; animation:fadeIn .22s ease both;} #drawerClose:hover{background:#1a1a1a; color:#fff; box-shadow:0 6px 28px rgba(0,0,0,.22); transform:translateY(-1px);} #drawerClose svg{flex-shrink:0; transition:transform var(--t-base);} #drawerClose:hover svg{transform:rotate(90deg);} /* Drawer panel, full-screen overlay,applied to the .page element itself */ .page.is-drawer{position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; z-index:400 !important; overflow-y:auto !important; overflow-x:hidden !important; background:#fff !important; transform:translateY(32px) scale(.994) !important; opacity:0 !important; pointer-events:none !important; transition:transform var(--t-xl) cubic-bezier(.22,1,.36,1),opacity var(--t-slow) ease !important; display:block !important; padding-top:0 !important; scrollbar-width:thin; scrollbar-color:var(--border) transparent;} .page.is-drawer.is-open{transform:translateY(0) scale(1) !important; opacity:1 !important; pointer-events:auto !important;} /* Keep breadcrumb visible, useful for context in full-screen overlay */ .page.is-drawer .breadcrumb{display:flex !important;} .page.is-drawer .mobile-cta-bar{display:none !important;} /* Mobile:close button adapts */ @media(max-width:600px){#drawerClose{top:12px; right:12px; height:40px; font-size:13px; padding:0 14px 0 11px;} } /* Respect reduced motion */ @media (prefers-reduced-motion:reduce){.page.is-drawer{transition:none !important;} #drawerClose{animation:none !important;} } /* ════════════════════════════════════ TEAM SECTION ════════════════════════════════════ */ .team-section{background:#f8f8f6; padding:96px 0;} .team-header{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:52px;} .team-sub{font-size:15px; color:var(--mid); line-height:1.65; max-width:340px; text-align:right;} .team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} /* Card */ .team-card{border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 2px 16px rgba(0,0,0,.06); transition:box-shadow var(--t-slow) cubic-bezier(.25,.46,.45,.94),transform var(--t-slow) cubic-bezier(.25,.46,.45,.94); cursor:pointer;} .team-card:hover{box-shadow:0 12px 48px rgba(45,155,111,.15),0 2px 8px rgba(0,0,0,.06); transform:translateY(-6px);} /* Photo */ .team-photo-wrap{position:relative; aspect-ratio:3/4; overflow:hidden;} .team-photo{width:100%; height:100%; object-fit:cover; object-position:right top; display:block; transition:transform var(--t-xl) cubic-bezier(.25,.46,.45,.94); filter:grayscale(8%);} .team-card:hover .team-photo{transform:scale(1.04); filter:grayscale(0%);} /* Overlay, slides up on hover */ .team-overlay{position:absolute; inset:0; background:linear-gradient( to top,rgba(13,13,13,.88) 0%,rgba(13,13,13,.5) 35%,transparent 65% ); display:flex; align-items:flex-end; padding:24px; opacity:0; transition:opacity var(--t-slow) ease;} .team-card:hover .team-overlay{opacity:1;} .team-overlay-inner{transform:translateY(10px); transition:transform var(--t-slow) cubic-bezier(.25,.46,.45,.94);} .team-card:hover .team-overlay-inner{transform:translateY(0);} .team-spec{font-size:13px; color:rgba(255,255,255,.85); margin-bottom:12px; line-height:1.4;} .team-cta{display:inline-flex; align-items:center; gap:6px; background:var(--blue); color:#fff; padding:9px 16px; border-radius:100px; font-size:12.5px; font-weight:600; font-family:var(--font-sans); text-decoration:none; transition:background var(--t-base);} .team-cta:hover{background:var(--blue-dark);} /* Card bottom info */ .team-info{padding:16px 18px 18px;} .team-name{font-size:15px; font-weight:700; color:var(--black); margin-bottom:5px; letter-spacing:-.02em;} .team-loc{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:4px;} .team-loc svg{color:var(--blue); flex-shrink:0;} /* Staggered reveal */ .team-card:nth-child(1){transition-delay:.05s;} .team-card:nth-child(2){transition-delay:.12s;} .team-card:nth-child(3){transition-delay:.19s;} .team-card:nth-child(4){transition-delay:.26s;} .team-card:nth-child(5){transition-delay:.33s;} .team-card:nth-child(6){transition-delay:.40s;} /* Green accent bar on top of each card */ .team-photo-wrap::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--blue); z-index:2; transform:scaleX(0); transform-origin:left; transition:transform var(--t-slow) cubic-bezier(.25,.46,.45,.94);} .team-card:hover .team-photo-wrap::before{transform:scaleX(1);} /* Mobile */ @media(max-width:900px){.team-header{flex-direction:column; align-items:flex-start;} .team-sub{text-align:left; max-width:100%;} .team-grid{grid-template-columns:repeat(2,1fr); gap:14px;} } @media(max-width:560px){.team-grid{grid-template-columns:repeat(2,1fr); gap:10px;} .team-card{border-radius:14px;} .team-overlay{opacity:1;} .team-overlay-inner{transform:none;} .team-photo-wrap::before{transform:scaleX(1);} } /* ════════════════════════════════════ SERVICE CARDS, photo-based therapy grid ════════════════════════════════════ */ .svc-section{background:#fff; padding:96px 0;} .svc-header{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:40px;} .svc-sub{font-size:14.5px; color:var(--mid); line-height:1.65; max-width:320px; text-align:right;} /* Grid, 4 columns desktop */ .svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;} /* Card */ .svc-card{background:#fff; border:1px solid var(--border); border-radius:20px; overflow:hidden; cursor:pointer; transition:transform var(--t-slow) cubic-bezier(.25,.46,.45,.94),box-shadow var(--t-slow) cubic-bezier(.25,.46,.45,.94),border-color var(--t-base); outline:none; position:relative;} .svc-card:hover,.svc-card:focus-visible{transform:translateY(-5px); box-shadow:0 16px 48px rgba(45,155,111,.13),0 2px 8px rgba(0,0,0,.05); border-color:rgba(45,155,111,.3);} /* Green accent line sweeps across top on hover */ .svc-photo-top-bar{position:absolute; top:0; left:0; right:0; height:3px; background:var(--blue); z-index:3; transform:scaleX(0); transform-origin:left; transition:transform var(--t-slow) cubic-bezier(.25,.46,.45,.94);} .svc-card:hover .svc-photo-top-bar,.svc-card:focus-visible .svc-photo-top-bar{transform:scaleX(1);} /* Photo */ .svc-photo-wrap{position:relative; aspect-ratio:4/3; overflow:hidden;} .svc-photo{width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; display:block; transition:transform var(--t-xl) cubic-bezier(.25,.46,.45,.94),filter var(--t-slow) ease; filter:grayscale(6%) brightness(.97);} .svc-card:hover .svc-photo{transform:scale(1.05); filter:grayscale(0%) brightness(1.02);} /* Card body */ .svc-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px;} .svc-name{font-family:var(--font-sans); font-size:15.5px; font-weight:700; color:var(--black); letter-spacing:-.02em; line-height:1.2;} .svc-tagline{font-size:12.5px; color:var(--mid); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} /* Meta badges */ .svc-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;} .svc-badge{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500; font-family:var(--font-sans); padding:3px 9px; border-radius:100px;} .svc-badge--time{background:var(--blue-light); color:var(--blue);} .svc-badge--ins{background:var(--surface); color:var(--mid); border:1px solid var(--border);} /* Bottom CTA link */ .svc-cta{display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--blue); margin-top:6px; padding-top:10px; border-top:1px solid var(--border); transition:gap var(--t-base);} .svc-card:hover .svc-cta{gap:8px;} .svc-cta svg{flex-shrink:0; transition:transform var(--t-base);} .svc-card:hover .svc-cta svg{transform:translateX(2px);} /* Stagger reveals */ .svc-card:nth-child(1){transition-delay:.04s;} .svc-card:nth-child(2){transition-delay:.09s;} .svc-card:nth-child(3){transition-delay:.14s;} .svc-card:nth-child(4){transition-delay:.19s;} .svc-card:nth-child(5){transition-delay:.24s;} .svc-card:nth-child(6){transition-delay:.29s;} .svc-card:nth-child(7){transition-delay:.34s;} .svc-card:nth-child(8){transition-delay:.39s;} /* Responsive */ @media(max-width:1100px){.svc-grid{grid-template-columns:repeat(3,1fr);} } @media(max-width:768px){.svc-header{flex-direction:column; align-items:flex-start;} .svc-sub{text-align:left; max-width:100%;} .svc-grid{grid-template-columns:repeat(2,1fr); gap:12px;} .svc-section{padding:64px 0;} } @media(max-width:480px){.svc-grid{grid-template-columns:repeat(2,1fr); gap:10px;} .svc-body{padding:12px 14px 14px;} .svc-name{font-size:14px;} } /* ════════════════════════════════════ KRÄUTERTHERAPIE FEATURE CARD ════════════════════════════════════ */ .kt-wrap{padding:0 0 96px;} .kt-intro-label{font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--blue,#2D9B6F); margin-bottom:14px; display:block; opacity:.85;} .kt-feature{display:flex; align-items:stretch; border-radius:var(--r,16px); overflow:hidden; background:#F8FAF9; border:1px solid rgba(45,155,111,0.09); cursor:pointer; transition:box-shadow var(--t-slow) ease,transform var(--t-slow) ease,border-color var(--t-slow) ease;} .kt-feature:hover{box-shadow:0 6px 24px rgba(45,155,111,0.08); transform:translateY(-2px); border-color:rgba(45,155,111,0.16);} .kt-feature-img{flex:0 0 260px; min-height:0; overflow:hidden; position:relative; padding:10px 0 10px 10px; background:#EFF5F1;} .kt-feature-img img{width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block; border-radius:calc(var(--r,16px) - 6px) 0 0 calc(var(--r,16px) - 6px); transition:transform var(--t-xl) ease;} .kt-feature:hover .kt-feature-img img{transform:scale(1.02);} .kt-feature-body{flex:1 1 0; padding:28px 36px; display:flex; flex-direction:column; justify-content:center; gap:12px;} .kt-micro-badges{display:flex; gap:6px; flex-wrap:wrap;} .kt-micro-badge{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue,#2D9B6F); background:rgba(45,155,111,0.07); border-radius:30px; padding:3px 10px;} .kt-headline{font-size:clamp(20px,2.5vw,27px); font-weight:800; line-height:1.15; color:#111A14; letter-spacing:-.02em; margin:0;} .kt-desc{font-size:14.5px; line-height:1.6; color:#4B6559; max-width:380px; margin:0;} .kt-cta{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--blue,#2D9B6F); background:none; border:none; padding:0; cursor:pointer; font-family:inherit; letter-spacing:.01em; transition:gap var(--t-base) ease; align-self:flex-start;} .kt-cta:hover{gap:11px;} .kt-feature:hover .kt-cta{gap:11px;} /* Kräutertherapie Drawer */ #kt-modal.kt-open{visibility:visible; pointer-events:all;} #kt-modal.kt-open #kt-backdrop{opacity:1;} #kt-modal.kt-open #kt-panel{transform:translateY(0); opacity:1;} @media(max-width:768px){.kt-feature{flex-direction:column;} .kt-feature-img{flex:0 0 200px; min-height:200px; padding:10px 10px 0;} .kt-feature-img img{border-radius:calc(var(--r,16px) - 4px) calc(var(--r,16px) - 4px) 0 0;} .kt-feature-body{padding:24px 22px 28px;} .kt-headline{font-size:20px;} } @media(max-width:480px){.kt-feature-body{padding:20px 16px 24px;} .kt-intro-label{margin-bottom:10px;} } /* ════════════════════════════════════ BEHIND THE SCENES ════════════════════════════════════ */ .bts-section{background:#fff; padding:96px 0; position:relative; overflow:hidden;} .bts-inner{max-width:var(--max); margin:0 auto; padding:0 40px; display:flex; flex-direction:column; gap:56px;} /* Header */ .bts-header{text-align:center;} .bts-label{color:var(--blue) !important; margin-bottom:16px;} .bts-title{font-family:var(--font-sans); font-size:clamp(32px,4vw,56px); color:var(--black); line-height:1.15; letter-spacing:-.02em; font-weight:400;} .bts-title em{font-style:italic; color:var(--mid);} /* BTS 4-video grid */ .bts-video-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px;} .bts-col-item{border-radius:14px; overflow:hidden; aspect-ratio:9/16; background:#F1F2F3; position:relative;} .bts-col-item video,.bts-col-item img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;} .bts-video-badge{position:absolute; bottom:12px; right:12px; display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.85); color:var(--mid); font-family:var(--font-sans); font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:100px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);} @media(max-width:700px){.bts-video-grid{grid-template-columns:repeat(4,1fr);} } /* Pillars */ .bts-pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border-radius:16px; overflow:hidden;} .bts-pillar{padding:28px 24px; background:var(--surface); display:flex; flex-direction:column; gap:10px; transition:background var(--t-slow);} .bts-pillar:hover{background:#F1F2F3;} .bts-pillar-num{font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--blue);} .bts-pillar-title{font-family:var(--font-sans); font-size:14.5px; font-weight:700; color:var(--black); line-height:1.3;} .bts-pillar-text{font-size:13px; color:var(--mid); line-height:1.6;} /* Closing */ .bts-closing{text-align:center; padding:48px 0 16px; position:relative;} .bts-closing::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:40px; background:linear-gradient(to bottom,transparent,rgba(45,155,111,.4));} .bts-closing-line{font-family:var(--font-sans); font-size:clamp(26px,3.5vw,44px); font-style:italic; color:var(--black); letter-spacing:-.02em; line-height:1.2; margin-bottom:16px;} .bts-closing-sub{font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--muted); letter-spacing:.08em; text-transform:uppercase;} /* Mobile */ @media(max-width:900px){.bts-pillars{grid-template-columns:repeat(2,1fr);} .bts-inner{padding:0 20px; gap:40px;} } @media(max-width:560px){.bts-pillars{grid-template-columns:1fr;} .bts-section{padding:72px 0;} .bts-closing-line{font-size:26px;} } /* ════════════════════════════════════ FOUNDER NOTE, Simon's personal close ════════════════════════════════════ */ .founder-section{background:#f7f6f3; padding:96px 0;} .founder-inner{max-width:var(--max); margin:0 auto; padding:0 40px; display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;} .founder-photo-wrap{border-radius:20px; overflow:hidden; box-shadow:0 12px 48px rgba(0,0,0,.1);} .founder-photo-wrap img{width:100%; display:block; border-radius:20px;} .founder-text{display:flex; flex-direction:column; gap:20px;} .founder-label{display:inline-flex; align-items:center; gap:8px;} .founder-label::before{content:''; width:20px; height:1.5px; background:var(--blue); display:block;} .founder-title{margin-bottom:0;} .founder-title em{font-style:italic; color:var(--blue);} .founder-body{font-size:15.5px; color:var(--mid); line-height:1.75;} .founder-body p + p{margin-top:12px;} .founder-sig{font-family:var(--font-sans); font-size:22px; font-style:italic; color:var(--black); margin-top:4px;} .founder-cta{display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#fff; padding:14px 24px; border-radius:100px; font-family:var(--font-sans); font-size:14.5px; font-weight:600; text-decoration:none; width:fit-content; transition:background var(--t-base),transform var(--t-fast); box-shadow:0 4px 20px rgba(37,211,102,.3);} .founder-cta:hover{background:#1F7A54; transform:translateY(-1px);} @media(max-width:860px){.founder-inner{grid-template-columns:1fr; gap:36px;} } @media(max-width:560px){.founder-section{padding:72px 0;} .founder-inner{padding:0 20px;} } /* ════════════════════════════════════ BTS BUTTERFLIES ════════════════════════════════════ */ .bts-stage{position:relative;} /* Wing flap, rapid scaleX on the SVG */ /* Float paths, 5 distinct organic routes */ /* Hide on mobile, too cluttered on small screens */ /* Dragon body undulate, applied to the dragon's svg */ /* Tiger playful bounce */ /* ───────────────────────────────────── SIGNAL SECTION ───────────────────────────────────── */ .signal-section{background:#fafaf8; padding:96px 0; border-top:1px solid #eaeaea; overflow:hidden; position:relative;} /* Architectural background grid, ultra subtle */ .signal-section::before{content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(45,155,111,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(45,155,111,.025) 1px,transparent 1px); background-size:80px 80px; pointer-events:none;} .signal-inner{position:relative; max-width:var(--max); margin:0 auto; padding:0 40px;} .signal-overline{font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#2D9B6F; margin-top:0; margin-bottom:28px; display:flex; align-items:center; gap:10px;} .signal-overline::before{content:''; display:block; width:20px; height:1px; background:#2D9B6F; opacity:.6;} /* Strip, quiet flex */ /* Domain lockup, the visual flex */ /* ── Split layout:text left · CTA right ── */ @media(max-width:768px){.signal-section{padding:96px 0;} .signal-inner{padding:0 24px;} } /* ── Section break between signal rows ── */ /* ════════════════════════════════════════ CONCIERGE PANEL, full rebuild ════════════════════════════════════════ */ #concierge-modal.open{display:block !important;pointer-events:auto !important} #concierge-panel{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;overflow-y:auto !important;overflow-x:hidden !important;background:#fff !important;transform:none !important;opacity:1 !important;transition:none !important;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column} /* bar */ /* sections */ /* typography */ /* buttons */ /* how-it-works */ /* form */ /* prepp section */ /* benefits */ /* insurance note */ /* for whom */ /* faq */ .cp-faq-item{border-bottom:1px solid var(--border)} .cp-faq-item:last-child{border-bottom:none} .cp-faq-q{width:100%;text-align:left;background:#fff;border:none;cursor:pointer;padding:16px 20px;font-size:14px;font-weight:600;color:var(--black);display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--font-sans);transition:background var(--t-fast);line-height:1.4} .cp-faq-q:hover{background:var(--surface)} .cp-faq-q.open .cp-faq-ico{transform:rotate(45deg);background:var(--blue);color:#fff} .cp-faq-a{display:none;padding:0 20px 16px;font-size:13.5px;color:var(--mid);line-height:1.72} .cp-faq-a.open{display:block} /* trust strip */ /* final cta */ /* success state */ #cp-success{display:none;flex-direction:column;align-items:center;text-align:center;padding:72px 40px;gap:20px;flex:1} #cp-success.show{display:flex} #cp-main-content.hide{display:none} /* footer */ /* error state */ /* responsive */ @media(max-width:600px){ #cp-success{padding:52px 24px} } /* ── CONCIERGE FORM CARD ── */ /* ── INTAKE v3 SIMPLIFIED ── */ .intake-trust-row{display:flex;flex-direction:column;gap:8px;margin-top:16px;margin-bottom:24px} .intake-trust-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mid)} .intake-trust-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0;opacity:.65} .next-steps{margin-top:14px;display:flex;flex-direction:column;gap:5px;padding-top:14px;border-top:1px solid var(--border)} .next-steps-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .next-step-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mid)} .next-step-num{width:17px;height:17px;border-radius:50%;background:var(--blue-light);color:var(--blue-dark);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0} .form-wa-alt-new{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:10px;border:1.5px solid rgba(37,211,102,.3);color:#25D366;font-size:13px;font-weight:600;text-decoration:none;background:rgba(37,211,102,.03);transition:all var(--t-base);margin-top:8px} .form-wa-alt-new:hover{border-color:rgba(37,211,102,.55);background:rgba(37,211,102,.08)} .form-divider-quiet{text-align:center;font-size:11.5px;color:var(--muted);margin:14px 0 6px;position:relative} .form-divider-quiet::before,.form-divider-quiet::after{content:'';position:absolute;top:50%;width:38%;height:1px;background:var(--border)} .form-divider-quiet::before{left:0}.form-divider-quiet::after{right:0} .inline-form-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px;box-shadow:var(--sh-md)} .inline-form-header{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)} .inline-form-title{font-family:var(--font-sans);font-size:17px;color:var(--black);font-weight:700;letter-spacing:-.02em;margin-bottom:3px} .inline-form-sub{font-size:12.5px;color:var(--muted);line-height:1.5} .inline-form{display:flex;flex-direction:column} .form-submit{width:100%;justify-content:center;font-size:15px;padding:15px;border-radius:11px;letter-spacing:-.01em} .form-label{font-size:12.5px;font-weight:500;color:var(--mid);margin-bottom:5px;display:block} .form-input{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:9px;font-size:14px;font-family:var(--font-sans);color:var(--black);background:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast)} .form-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,155,111,.07);outline:none} .form-textarea{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:9px;font-size:14px;font-family:var(--font-sans);color:var(--black);resize:none;background:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast);min-height:62px} .form-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,155,111,.07);outline:none} .contact-method-mini{display:flex;align-items:center;gap:12px;padding:11px 14px;background:#fff;border:1px solid var(--border);border-radius:12px;text-decoration:none;transition:all var(--t-base);cursor:pointer} .contact-method-mini:hover{border-color:rgba(45,155,111,.25);background:#f4faf7} .contact-method-mini strong{display:block;font-size:13px;font-weight:600;color:var(--black)} .contact-method-mini span{font-size:12px;color:var(--muted)} .cm-icon-mini{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .cm-wa{background:#25D366}.cm-phone{background:var(--charcoal)} .contact-method-mini.phone-quiet{opacity:.7} .contact-method-mini.phone-quiet:hover{opacity:1} .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:600px){.form-row-2{grid-template-columns:1fr}} /* ════════════════════════════════════════ CARE OFFER™ SECTION ════════════════════════════════════════ */ /* 5-pillar grid */ /* footer row */ /* Responsive */ /* ── BACK BUTTON ── */ .back-btn-outer{max-width:var(--max); /* 1280px, matches main content grid */ margin:0 auto; padding:0 40px; width:100%; box-sizing:border-box;} .back-btn{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-sans); font-size:11.5px; font-weight:700; color:var(--mid); background:none; border:none; cursor:pointer; padding:0; margin-bottom:24px; margin-top:0; letter-spacing:.08em; text-transform:uppercase; transition:color var(--t-base),gap var(--t-base),opacity var(--t-base); line-height:1; align-self:flex-start; opacity:.7;} .back-btn svg{flex-shrink:0; transition:transform var(--t-base) cubic-bezier(.34,1.2,.64,1);} .back-btn:hover{color:var(--blue); gap:8px; opacity:1;} .back-btn:hover svg{transform:translateX(-3px);} @media(max-width:768px){.back-btn-outer{padding:0 20px;} .back-btn{font-size:11px; margin-bottom:18px;} } /* ── TRUST STRIP ── */ /* ── FALLBACK CTA ── */ .fallback-cta-section{background:var(--surface);padding:48px 0;border-top:1px solid var(--border)} .fallback-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap} .fallback-cta-text h3{font-family:var(--font-sans);font-size:clamp(20px,2.5vw,26px);font-weight:800;letter-spacing:-.03em;color:var(--black);margin-bottom:8px} .fallback-cta-text p{font-size:15px;color:var(--mid);line-height:1.6;max-width:480px} .fallback-cta-btns{display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap} @media(max-width:768px){.fallback-cta-inner{flex-direction:column;align-items:flex-start}.fallback-cta-btns{width:100%}.fallback-cta-btns .btn-primary,.fallback-cta-btns .btn-secondary{flex:1;justify-content:center}} /* ── ALSO-FOR / RECOMMENDED SECTION ── */ .also-for-section{padding:48px 0;background:var(--surface)} .sx-chip-link{display:inline-flex;align-items:center;padding:9px 18px;border-radius:100px;border:1.5px solid #d8d8d8;background:#fff;font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--black);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);white-space:nowrap;text-decoration:none} .sx-chip-link:hover{border-color:var(--blue);color:var(--blue-dark);box-shadow:0 4px 14px rgba(45,155,111,.14);transform:translateY(-2px)} /* body.on-subpage hides #home-content and any sections that escaped the wrapper */ /* Explicitly hide every home-only section by class, works regardless of nesting */ body.on-subpage .hero-bg{display:none !important;} /* ── KRANKENKASSE PAGE ── */ /* ── HERO ── */ #page-krankenkasse .hero-left{} #page-krankenkasse .hero-badge{display:inline-flex; align-items:center; gap:8px; background:var(--green-light); color:var(--green-dark); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:24px;} #page-krankenkasse .hero-badge::before{content:''; width:6px; height:6px; background:var(--green); border-radius:50%;} #page-krankenkasse .hero-sub{font-size:17px; color:var(--text-soft); margin-bottom:36px; line-height:1.65; font-weight:400; max-width:480px;} #page-krankenkasse .hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px;} /* hero trust points */ #page-krankenkasse .hero-trust-points{display:flex; flex-direction:column; gap:10px;} #page-krankenkasse .hero-trust-point{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-soft); font-weight:500;} #page-krankenkasse .hero-trust-point .htp-icon{width:28px; height:28px; border-radius:8px; background:var(--green-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--green);} /* hero RIGHT:trust card */ #page-krankenkasse .hero-card{background:white; border:1px solid var(--border); border-radius:20px; padding:32px; box-shadow:0 4px 40px rgba(45,155,111,0.08),0 1px 4px rgba(0,0,0,0.04);} #page-krankenkasse .hero-card-header{display:flex; align-items:center; gap:10px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--border);} #page-krankenkasse .hero-card-icon{width:36px; height:36px; border-radius:10px; background:var(--green); display:flex; align-items:center; justify-content:center; color:white; flex-shrink:0;} #page-krankenkasse .hero-card-title{font-size:13px; font-weight:700; letter-spacing:-0.1px; color:var(--text);} #page-krankenkasse .hero-card-sub{font-size:11px; color:var(--text-muted); margin-top:1px;} #page-krankenkasse .hero-card-steps{display:flex; flex-direction:column; gap:16px; margin-bottom:24px;} #page-krankenkasse .hero-card-cta{display:flex; align-items:center; gap:10px; background:var(--green); color:white; padding:13px 20px; border-radius:12px; font-size:14px; font-weight:600; text-decoration:none; transition:background var(--t-base); width:100%; justify-content:center;} #page-krankenkasse .hero-card-cta:hover{background:var(--green-dark);} #page-krankenkasse .hero-card-note{text-align:center; font-size:11px; color:var(--text-muted); margin-top:10px;} @media (max-width:900px){ #page-krankenkasse .hero-card{max-width:480px;} } /* trust pill (kept for compat) */ /* ── SECTIONS ── */ /* alt bg */ /* ── KURZE ANTWORT ── */ /* ── 30 SEKUNDEN ── */ /* ── EMR ── */ /* ── BEHANDLUNGEN GRID ── */ /* ── FAQ ── */ #page-krankenkasse .faq-item.open{border-color:var(--green-mid);} #page-krankenkasse .faq-item.open .faq-arrow{transform:rotate(180deg); background:var(--green); color:white;} #page-krankenkasse .faq-item.open .faq-a{display:block;} /* ── CONCIERGE BOX ── */ /* ── FINAL CTA ── */ /* ── DIVIDER ── */ /* ── RESPONSIVE ── */ /* ── KASSE MICRO-BLOCK (reusable across therapy / beschwerden / location pages) ── */ /* ── SCROLL REVEAL ── */ #page-krankenkasse .reveal.visible{opacity:1; transform:none;} /* ════════════════════════════════ PARTNER PAGE STYLES ════════════════════════════════ */ .sec-lbl{font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;display:block;width:fit-content} .sec-h{font-size:clamp(26px,3.5vw,42px);color:var(--black);letter-spacing:-.03em;line-height:1.12;margin-bottom:14px;font-weight:800} .sec-h em{font-style:italic;color:var(--blue)} .sec-sub{font-size:17px;font-weight:400;color:var(--mid);line-height:1.7;max-width:560px} /* ─── HERO ─── */ .hero-in{display:grid;grid-template-columns:1fr 460px;gap:64px;align-items:center;position:relative;z-index:1} .hero-l{animation:fadeUp .7s ease both;display:flex;flex-direction:column;align-items:flex-start} .hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(45,155,111,.08);border:1px solid rgba(45,155,111,.2);color:var(--blue-dark);font-size:11.5px;font-weight:700;padding:6px 14px;border-radius:100px;margin-bottom:28px;letter-spacing:.06em;text-transform:uppercase;width:fit-content;align-self:flex-start} .hero-h1{font-size:clamp(30px,4.2vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.06;color:var(--black);margin-bottom:22px} .hero-h1 em{font-style:italic;color:var(--blue);font-family:var(--font-sans);font-weight:400;font-size:1.05em} .hero-sub{font-size:16.5px;color:var(--mid);line-height:1.7;margin-bottom:24px;max-width:500px} .hero-core{font-size:16px;font-weight:700;color:var(--charcoal); margin-bottom:10px;padding:18px 22px; background:#fff; border-left:4px solid var(--blue); border-radius:0 12px 12px 0; box-shadow:0 2px 12px rgba(45,155,111,.1),0 1px 4px rgba(0,0,0,.05); max-width:500px;line-height:1.5; position:relative;} .hero-core-note{font-size:12.5px;color:var(--muted);font-weight:400;margin-top:4px;display:block} .hero-nocost{font-size:13px;font-weight:500;color:var(--muted);margin:20px 0 36px;display:flex;align-items:center;gap:18px;flex-wrap:wrap} .hero-nocost span{display:inline-flex;align-items:center;gap:5px} .hero-nocost span::before{content:'✓';color:var(--blue);font-weight:700} .hero-ctas{display:flex;gap:12px;flex-wrap:wrap} /* HERO CARD, upgraded */ .h-card{background:#fff;border-radius:22px;box-shadow:0 24px 72px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.06);padding:32px;border:1px solid rgba(45,155,111,.12);animation:fadeUp .7s .15s ease both;position:relative} .h-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),#3bc47e);border-radius:22px 22px 0 0} .hc-lbl{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:20px;display:flex;align-items:center;gap:8px} .hc-lbl span{background:var(--blue);color:#fff;padding:3px 9px;border-radius:100px;font-size:10px;letter-spacing:.1em} .hc-rows{display:flex;flex-direction:column} .hc-row{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.05)} .hc-row:last-child{border:none} .hc-chk{width:20px;height:20px;border-radius:50%;background:rgba(45,155,111,.12);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:11px;font-weight:700} .hc-main{font-size:14px;font-weight:700;color:var(--charcoal);line-height:1.3} .hc-detail{font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:2px} .hc-hl{background:linear-gradient(135deg,rgba(45,155,111,.1),rgba(45,155,111,.05)); border:1.5px solid rgba(45,155,111,.2); border-radius:12px;padding:16px 18px;margin-top:20px; text-align:center;} .hc-hl strong{display:block;font-size:28px;font-weight:800;color:var(--blue);letter-spacing:-.03em;line-height:1;margin-bottom:3px} .hc-hl-label{font-size:13px;font-weight:600;color:var(--blue-dark)} .hc-hl-note{font-size:11.5px;color:var(--muted);font-weight:400;margin-top:5px} .hc-pilot-badge{display:inline-flex;align-items:center;gap:8px; background:rgba(45,155,111,.07);border:1px solid rgba(45,155,111,.18); border-radius:8px;padding:8px 14px;margin-top:10px; font-size:12.5px;font-weight:700;color:var(--blue-dark); width:fit-content;} .hc-pilot-badge::before{content:'→';font-weight:700} /* ─── WHY ─── */ .why-s{background:var(--white);padding:96px 0} .why-g{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .why-vis{background:linear-gradient(135deg,#0d1f17,#0f2a1c);border-radius:20px;padding:40px;position:relative;overflow:hidden;min-height:320px} .why-vis::before{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(45,155,111,.25) 0%,transparent 70%)} .wv-lbl{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(45,155,111,.7);margin-bottom:24px} .wv-items{display:flex;flex-direction:column;gap:11px} .wv-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;font-size:13.5px;color:rgba(255,255,255,.75);display:flex;align-items:center;gap:12px;line-height:1.4} .wv-item svg{flex-shrink:0;opacity:.55} .wv-div{display:flex;align-items:center;gap:12px;margin:6px 0;font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.12em;text-transform:uppercase} .wv-div::before,.wv-div::after{content:'';flex:1;height:1px;background:rgba(45,155,111,.25)} .wv-sol{background:rgba(45,155,111,.14);border:1px solid rgba(45,155,111,.35);border-radius:10px;padding:16px;font-size:14px;font-weight:600;color:#2D9B6F;line-height:1.5;display:flex;align-items:center;gap:12px} .why-pts{display:flex;flex-direction:column;gap:22px;margin-top:32px} .wp-i{display:flex;gap:16px;align-items:flex-start} .wp-icon{width:40px;height:40px;border-radius:10px;background:var(--blue-light);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0} .wp-icon svg{width:18px;height:18px} .wp-t strong{font-size:15px;font-weight:700;color:var(--charcoal);display:block;margin-bottom:4px} .wp-t p{font-size:14px;color:var(--mid);line-height:1.65} .why-closer{margin-top:36px;padding:20px 24px;background:linear-gradient(135deg,var(--blue-light),rgba(232,245,238,.4));border-radius:12px;border-left:3px solid var(--blue);font-size:16px;font-weight:600;color:var(--blue-dark);line-height:1.5} /* ─── HOW ─── */ .how-s{background:var(--surface);padding:96px 0} .how-hd{text-align:center;max-width:600px;margin:0 auto 60px;display:flex;flex-direction:column;align-items:center} .how-st{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative} .how-st::before{content:'';position:absolute;top:36px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(45,155,111,.3),rgba(45,155,111,.3),rgba(45,155,111,.3),transparent);z-index:0} .hs-s{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 16px;position:relative;z-index:1} .hs-num{width:72px;height:72px;border-radius:50%;background:#fff;border:2px solid rgba(45,155,111,.2);display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 4px 16px rgba(0,0,0,.06);transition:border-color var(--t-base),box-shadow var(--t-base);position:relative} .hs-s:hover .hs-num{border-color:var(--blue);box-shadow:0 4px 20px rgba(45,155,111,.2)} .hs-num svg{width:26px;height:26px;color:var(--blue)} .hs-n{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center} .hs-ttl{font-size:14px;font-weight:700;color:var(--charcoal);margin-bottom:8px} .hs-desc{font-size:13px;color:var(--mid);line-height:1.6} /* ─── CITIES, upgraded ─── */ .city-s{background:var(--white);padding:96px 0} .city-hd{max-width:680px;margin-bottom:52px;display:flex;flex-direction:column;align-items:flex-start} .city-rollout{display:inline-flex;align-items:center;gap:8px; background:rgba(45,155,111,.08);border:1px solid rgba(45,155,111,.2); color:var(--blue-dark);font-size:12px;font-weight:700; padding:6px 14px;border-radius:100px;margin-bottom:20px; letter-spacing:.04em;width:fit-content;align-self:flex-start;} .city-rollout::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulse 2s infinite} .city-g{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:32px} .c-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:20px 18px;transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base);cursor:default} .c-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} .c-card.active{border-color:rgba(45,155,111,.35);background:rgba(45,155,111,.025)} .c-card.active:hover{border-color:var(--blue);box-shadow:0 6px 24px rgba(45,155,111,.12)} .c-card.review{border-color:rgba(234,164,27,.35);background:rgba(254,252,244,.7)} .c-card.open{border-color:rgba(45,155,111,.15);background:rgba(240,249,244,.5)} .c-card.open:hover{border-color:rgba(45,155,111,.35);box-shadow:0 6px 24px rgba(45,155,111,.08)} .cc-nm{font-size:15px;font-weight:700;color:var(--charcoal);margin-bottom:9px} .cc-b{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;letter-spacing:.02em} .b-a{background:rgba(45,155,111,.1);color:#1F7A54} .b-a::before{content:'';width:5px;height:5px;border-radius:50%;background:#2D9B6F} .b-r{background:rgba(234,164,27,.12);color:#8a5a00} .b-r::before{content:'';width:5px;height:5px;border-radius:50%;background:#EAA41B} .b-o{background:rgba(45,155,111,.08);color:var(--blue-dark)} .b-o::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue);animation:pulse 2.5s infinite} .cc-hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4} .cc-hint.early{color:var(--blue-dark);font-weight:600} .city-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px} .city-stat{background:var(--surface);border-radius:14px;padding:20px 24px;border:1px solid var(--border)} .cs-val{font-size:26px;font-weight:800;color:var(--charcoal);letter-spacing:-.03em;line-height:1;margin-bottom:4px} .cs-val em{font-style:normal;color:var(--blue)} .cs-label{font-size:13.5px;color:var(--mid);line-height:1.5} .city-note{background:linear-gradient(135deg,rgba(45,155,111,.06),rgba(45,155,111,.02));border:1px solid rgba(45,155,111,.15);border-radius:14px;padding:20px 24px} .city-note p{font-size:13.5px;color:var(--mid);line-height:1.7} .city-note p+p{margin-top:10px} .city-note strong{color:var(--charcoal);font-weight:700} /* ─── OFFER ─── */ .offer-s{background:linear-gradient(160deg,#0b1d12,#0f2618);padding:96px 0;position:relative;overflow:hidden} .offer-s::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(45,155,111,.15) 0%,transparent 65%)} .offer-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 400px;gap:64px;align-items:start} .offer-l .sec-lbl{color:rgba(45,155,111,.7)} .offer-l .sec-h{color:#fff} .offer-l .sec-h em{color:#2D9B6F} .offer-sub{font-size:16px;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:36px} .offer-items{display:flex;flex-direction:column} .o-item{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06)} .o-item:last-child{border:none} .o-chk{width:22px;height:22px;border-radius:6px;background:rgba(45,155,111,.2);color:#2D9B6F;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:700;margin-top:1px} .o-t{font-size:14.5px;color:rgba(255,255,255,.82);font-weight:500;line-height:1.4} .o-t strong{color:#fff;font-weight:700} .offer-hl{background:rgba(45,155,111,.12);border:1px solid rgba(45,155,111,.3);border-radius:14px;padding:20px 24px;margin-top:28px;font-size:16px;font-weight:700;color:#2D9B6F;line-height:1.5;text-align:center} .offer-hl span{display:block;font-size:12.5px;font-weight:400;color:rgba(255,255,255,.45);margin-top:6px} .offer-roi{margin-top:16px;padding:16px 20px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08); border-radius:10px; font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.6;font-style:italic;} /* PRICE CARD */ .pc-card{background:#fff;border-radius:22px;box-shadow:0 24px 72px rgba(0,0,0,.3);overflow:hidden;position:sticky;top:88px} .pc-top{background:var(--blue);padding:28px;text-align:center} .pc-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:10px} .pc-price{font-size:56px;font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1} .pc-pnote{font-size:13px;color:rgba(255,255,255,.65);margin-top:6px} .pc-body{padding:28px} .pc-pilot{background:rgba(45,155,111,.08);border:1.5px solid rgba(45,155,111,.25);border-radius:12px;padding:16px 18px;margin-bottom:22px;text-align:center} .pc-pval{font-size:18px;font-weight:800;color:var(--blue-dark);line-height:1.2} .pc-plbl{font-size:12px;color:var(--mid);margin-top:3px;line-height:1.4} .pc-rows{display:flex;flex-direction:column} .pc-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px} .pc-row:last-child{border:none} .pc-rk{color:var(--mid)} .pc-rv{font-weight:700;color:var(--charcoal)} .pc-rv.g{color:var(--blue-dark)} .pc-ctas{display:flex;flex-direction:column;gap:10px;margin-top:20px} .pc-trust{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.6} /* ─── PILOT ─── */ .pilot-s{background:var(--surface);padding:96px 0} .pilot-in{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .pil-card{background:#fff;border-radius:20px;border:1.5px solid rgba(45,155,111,.15);box-shadow:0 12px 48px rgba(45,155,111,.08);overflow:hidden} .pil-hd{background:var(--blue);padding:28px;display:flex;align-items:center;gap:16px} .pil-ico{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0} .pil-ico svg{width:22px;height:22px;color:#fff} .pil-ht strong{display:block;font-size:18px;font-weight:700;color:#fff;line-height:1.2} .pil-ht span{font-size:13px;color:rgba(255,255,255,.75)} .pil-body{padding:28px} .pil-items{display:flex;flex-direction:column;gap:12px} .pil-item{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--charcoal);line-height:1.5} .pil-item::before{content:'✓';width:22px;height:22px;border-radius:6px;background:var(--blue-light);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;margin-top:1px} .pil-div{height:1px;background:var(--border);margin:18px 0} .pil-note{font-size:13px;color:var(--mid);line-height:1.7} .pilot-cont .sec-h{max-width:440px} .pilot-q{margin-top:28px;padding:20px 24px; background:linear-gradient(135deg,var(--blue-light),rgba(232,245,238,.3)); border-radius:12px;font-size:15px;font-weight:500; color:var(--charcoal);line-height:1.65;font-style:italic;} .pilot-q::before{content:'"';font-size:32px;font-weight:700;color:var(--blue);line-height:0;position:relative;top:6px;margin-right:3px} .pilot-q::after{content:'"';font-size:32px;font-weight:700;color:var(--blue);line-height:0;position:relative;top:6px;margin-left:2px} .pilot-operator-note{margin-top:16px;font-size:13px;font-weight:600;color:var(--blue-dark);letter-spacing:.01em} /* ─── EXCLUSIVITY ─── */ .excl-s{background:#fff;padding:96px 0;border-top:1px solid var(--border)} .excl-in{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .excl-vis{background:linear-gradient(135deg,#0b1d12,#0f2618);border-radius:20px;padding:40px;position:relative;overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:center} .excl-vis::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(45,155,111,.2) 0%,transparent 60%)} .ev-in{position:relative;z-index:1} .ev-big{font-size:80px;font-weight:800;color:rgba(45,155,111,.12);letter-spacing:-.05em;line-height:1;margin-bottom:16px} .ev-city{display:flex;align-items:center;gap:14px;margin-bottom:8px} .ev-dot{width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px rgba(45,155,111,.6)} .ev-nm{font-size:20px;font-weight:700;color:#fff} .ev-st{margin-left:auto;font-size:11.5px;font-weight:700;background:rgba(45,155,111,.2);color:#2D9B6F;padding:4px 10px;border-radius:100px} .ev-arr{font-size:13px;color:rgba(255,255,255,.3);margin:4px 0 4px 24px} .ev-slash{height:1px;background:rgba(255,255,255,.08);margin:12px 0} .ev-open{display:flex;align-items:center;gap:14px;padding-left:24px;opacity:.4} .ev-note{font-size:12px;color:rgba(255,255,255,.35);padding-top:14px;border-top:1px solid rgba(255,255,255,.07);line-height:1.5;margin-top:16px} .excl-pils{display:flex;flex-direction:column;gap:22px;margin-top:32px} .ep-i{display:flex;gap:14px;align-items:flex-start} .ep-ico{width:36px;height:36px;border-radius:8px;background:var(--blue-light);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0} .ep-ico svg{width:16px;height:16px} .ep-t strong{font-size:14.5px;font-weight:700;color:var(--charcoal);display:block;margin-bottom:3px} .ep-t p{font-size:13.5px;color:var(--mid);line-height:1.65} /* ─── TRUST ─── */ .trust-s{background:var(--surface);padding:96px 0} .trust-hd{text-align:center;max-width:560px;margin:0 auto 56px;display:flex;flex-direction:column;align-items:center} .trust-g{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:20px} .tr-card{background:#fff;border-radius:16px;padding:28px 24px;border:1.5px solid var(--border);transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base)} .tr-card:hover{border-color:rgba(45,155,111,.25);box-shadow:var(--sh-md);transform:translateY(-3px)} .tr-ico{width:48px;height:48px;border-radius:12px;background:var(--blue-light);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;margin-bottom:18px} .tr-ico svg{width:22px;height:22px} .tr-ttl{font-size:16.5px;font-weight:700;color:var(--charcoal);margin-bottom:8px} .tr-desc{font-size:13.5px;color:var(--mid);line-height:1.7} .tr-hl{font-size:13px;font-weight:700;color:var(--blue-dark);margin-top:14px;padding-top:12px;border-top:1px solid var(--blue-light)} /* Fear-removal strip */ .fear-strip{background:#fff;border-radius:14px;padding:20px 28px; border:1.5px solid rgba(45,155,111,.12); margin-bottom:36px; display:flex;flex-direction:column;gap:10px;} .fear-strip-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);margin-bottom:4px} .fear-row{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--mid);line-height:1.5} .fear-row::before{content:'→';color:var(--blue);font-weight:700;flex-shrink:0;margin-top:1px} .fear-row strong{color:var(--charcoal);font-weight:600} .trust-bot{background:#fff;border-radius:16px;padding:24px 32px; border:1.5px solid rgba(45,155,111,.15); display:flex;align-items:center;justify-content:space-between;gap:24px;} .tb-line{font-size:16px;font-weight:600;color:var(--charcoal);line-height:1.5} .tb-line em{font-style:normal;color:var(--blue-dark)} /* ─── FIT ─── */ .fit-s{background:#fff;padding:96px 0} .fit-in{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .fit-cl{background:var(--surface);border-radius:20px;padding:36px;border:1.5px solid var(--border)} .fit-cl-ttl{font-size:13px;font-weight:700;color:var(--charcoal);margin-bottom:20px;text-transform:uppercase;letter-spacing:.06em} .fit-items{display:flex;flex-direction:column;gap:2px} .fit-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;transition:background var(--t-base)} .fit-item:hover{background:#fff} .fit-item::before{content:'✓';width:22px;height:22px;border-radius:6px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0} .fit-it{font-size:14px;color:var(--charcoal);font-weight:500} .fit-div{height:1px;background:var(--border);margin:16px 0} .nope-ttl{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px} .nope-items{display:flex;flex-direction:column;gap:2px} .nope-i{display:flex;align-items:center;gap:12px;padding:9px 14px;font-size:13.5px;color:var(--muted)} .nope-i::before{content:'–';width:20px;height:20px;border-radius:5px;background:#f2f2f2;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0} .fit-sel{margin-top:32px;padding:20px 24px;border:1.5px solid rgba(45,155,111,.2);border-radius:12px;background:rgba(45,155,111,.03);font-size:15.5px;font-weight:600;color:var(--charcoal);line-height:1.55} .fit-sel strong{color:var(--blue-dark)} /* ─── FAQ ─── */ .faq-s{background:var(--surface);padding:96px 0} .faq-hd{text-align:center;max-width:540px;margin:0 auto 48px;display:flex;flex-direction:column;align-items:center} .faq-g{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border);border-radius:16px;overflow:hidden;border:1.5px solid var(--border)} .faq-item{background:#fff;padding:0} .faq-q{width:100%;background:none;border:none;cursor:pointer;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--font-sans);text-align:left} .faq-qt{font-size:14.5px;font-weight:600;color:var(--charcoal);line-height:1.4} .faq-cv{width:28px;height:28px;border-radius:7px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--t-base),transform var(--t-slow)} .faq-cv svg{width:13px;height:13px;color:var(--mid)} .faq-item.open .faq-cv{background:var(--blue-light);transform:rotate(180deg)} .faq-item.open .faq-cv svg{color:var(--blue-dark)} .faq-a{max-height:0;overflow:hidden;transition:max-height var(--t-slow) cubic-bezier(.4,0,.2,1)} .faq-ai{padding:0 24px 22px;font-size:14px;color:var(--mid);line-height:1.75} .faq-ai strong{color:var(--charcoal)} /* ─── FINAL CTA ─── */ .final-s{background:linear-gradient(160deg,#0b1d12,#0f2618);padding:96px 0;position:relative;overflow:hidden} .final-s::before{content:'';position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(45,155,111,.15) 0%,transparent 60%)} .final-in{position:relative;z-index:1;text-align:center;max-width:680px;margin:0 auto} .final-lbl{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(45,155,111,.7);margin-bottom:20px} .final-h{font-size:clamp(28px,4vw,48px);font-weight:800;color:#fff;letter-spacing:-.04em;line-height:1.08;margin-bottom:20px} .final-h em{font-style:italic;color:#2D9B6F} .final-sub{font-size:17px;color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:16px} .final-core{background:rgba(45,155,111,.15);border:1px solid rgba(45,155,111,.3);border-radius:12px;padding:20px 28px;margin:0 auto 40px;max-width:560px;font-size:16px;font-weight:700;color:#2D9B6F;line-height:1.5} .final-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:32px} .final-trust{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin-bottom:20px} .ft-i{display:flex;align-items:center;gap:7px;font-size:13px;color:rgba(255,255,255,.45)} .ft-i::before{content:'✓';color:rgba(45,155,111,.7);font-weight:700} .ft-d{width:1px;height:14px;background:rgba(255,255,255,.15)} .reassure{font-size:13px;color:rgba(255,255,255,.3);font-style:italic;line-height:1.6} /* ─── MODAL ─── */ #pp-modal{position:fixed;inset:0;z-index:500;background:rgba(8,8,8,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity var(--t-slow) ease;outline:none} #pp-modal.open{opacity:1;pointer-events:all} .m-panel{background:#fff;border-radius:20px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 32px 96px rgba(0,0,0,.28),0 8px 32px rgba(0,0,0,.12);transform:translateY(20px);transition:transform var(--t-slow) cubic-bezier(.16,1,.3,1)} #pp-modal.open .m-panel{transform:translateY(0)} .m-hd{padding:28px 32px 20px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:16px;position:sticky;top:0;background:#fff;z-index:2;border-radius:20px 20px 0 0} .m-ttl{font-size:20px;font-weight:800;color:var(--charcoal);letter-spacing:-.02em;margin-bottom:4px} .m-sub{font-size:13px;color:var(--muted);line-height:1.5} .m-cls{width:34px;height:34px;border-radius:8px;border:1.5px solid var(--border);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--t-base),border-color var(--t-base)} .m-cls:hover{background:var(--surface);border-color:#bbb} .m-cls svg{width:14px;height:14px;color:var(--mid)} .m-body{padding:28px 32px 32px} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .f-full{margin-bottom:16px} .f-g{display:flex;flex-direction:column;gap:6px} label{font-size:13px;font-weight:600;color:var(--charcoal)} .f-g input,.f-g select,.f-g textarea{font-family:var(--font-sans);font-size:14.5px;border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--charcoal);background:#fff;transition:border-color var(--t-base),box-shadow var(--t-base);outline:none;width:100%} .f-g input:focus,.f-g select:focus,.f-g textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,155,111,.1)} .f-g textarea{resize:vertical;min-height:80px;line-height:1.5} .f-sub{width:100%;padding:16px;background:var(--blue);color:#fff;border:none;border-radius:100px;font-family:var(--font-sans);font-size:15.5px;font-weight:700;cursor:pointer;box-shadow:0 4px 20px rgba(45,155,111,.35);transition:background var(--t-base),transform var(--t-fast),box-shadow var(--t-base);margin-top:6px} .f-sub:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 6px 28px rgba(45,155,111,.45)} .f-note{font-size:12px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.6} .f-ok{display:none;text-align:center;padding:40px 20px} .fok-ico{width:64px;height:64px;border-radius:50%;background:var(--blue-light);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 20px} .fok-ico svg{width:28px;height:28px} .fok-ttl{font-size:22px;font-weight:800;color:var(--charcoal);margin-bottom:10px} .fok-sub{font-size:15px;color:var(--mid);line-height:1.7} /* partner page uses main site footer */ .foot-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .rv{opacity:0;transform:translateY(20px);transition:opacity var(--t-xl) ease,transform var(--t-xl) ease} .rv.in{opacity:1;transform:translateY(0)} @media(max-width:900px){.wrap{padding:0 24px} nav{padding:0 20px} .nav-links{display:none} .hero-in{grid-template-columns:1fr;gap:40px} .why-g,.pilot-in,.excl-in,.fit-in,.offer-in{grid-template-columns:1fr} .how-st{grid-template-columns:1fr 1fr;gap:24px} .how-st::before{display:none} .city-g{grid-template-columns:repeat(2,1fr)} .city-bottom{grid-template-columns:1fr} .trust-g{grid-template-columns:1fr 1fr} .faq-g{grid-template-columns:1fr} .trust-bot{flex-direction:column;text-align:center} .f-row{grid-template-columns:1fr} .fear-strip{display:none} } @media(max-width:560px){.hero-h1{font-size:30px} .hero-ctas,.final-ctas{flex-direction:column;align-items:flex-start} .final-ctas{align-items:center} .trust-g{grid-template-columns:1fr} .how-st{grid-template-columns:1fr} .m-body,.m-hd{padding-left:20px;padding-right:20px} .ft-d{display:none} } /* ══ CITY LANDING PAGE, unblock cloned sections ═══════════════════════ */ #standort-content .content-body{max-height:none}#standort-content .content-body p:nth-of-type(n+3){display:none} #standort-content .kk-section{display:block !important} #standort-content .kk-inner,#standort-content .kk-header{display:block !important} #standort-content .team-section{display:block !important} #standort-content .team-header{display:flex !important} #standort-content .team-grid{display:grid !important} /* ══ GREEN INTERRUPT SECTIONS, main page only ══════════════════════════ */ /* 1. Stats bar (home page trust strip) → green */ #stats-bar,#stats-bar .stat-cell{background:#FFFFFF !important;border-color:#E5E7EB !important} #stats-bar{border-radius:14px !important;border:1px solid #E5E7EB !important;box-shadow:0 2px 12px rgba(0,0,0,0.04) !important} /* 2. So starten wir → green */ /* 3. FAQ section → green background, content in white card */ /* ── So starten wir, leaner strip ── */ /* Fix start-card text on white cards inside green section */ /* ── ZH + WIN PREMIUM SPLIT HEROES (reuse SG styles) ── */ #zh-premium-hero,#win-premium-hero{display:none} #zh-premium-hero.sg-active,#win-premium-hero.sg-active{display:block;background:#FFFFFF;padding:clamp(72px,10vw,140px) 24px;position:relative;border-bottom:1px solid rgba(0,0,0,.05)} #zh-premium-hero .sg-inner,#win-premium-hero .sg-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center} #zh-premium-hero .sg-text,#win-premium-hero .sg-text{max-width:520px} #zh-premium-hero .sg-crumb,#win-premium-hero .sg-crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8A8A8A;margin-bottom:22px;flex-wrap:wrap;font-family:var(--font-sans)} #zh-premium-hero .sg-crumb button,#win-premium-hero .sg-crumb button{background:none;border:none;cursor:pointer;font:inherit;color:#2D9B6F;padding:0} #zh-premium-hero .sg-crumb button:hover,#win-premium-hero .sg-crumb button:hover{text-decoration:underline} #zh-premium-hero .sg-crumb span.sg-sep,#win-premium-hero .sg-crumb span.sg-sep{color:#C4BFB3} #zh-premium-hero .sg-eyebrow,#win-premium-hero .sg-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#2D9B6F;margin-bottom:22px;font-family:var(--font-sans)} #zh-premium-hero .sg-title,#win-premium-hero .sg-title{font-family:var(--font-sans);font-size:clamp(38px,4.2vw,58px);line-height:1.05;letter-spacing:-.025em;font-weight:800;color:#111;margin:0 0 14px} #zh-premium-hero .sg-title em,#win-premium-hero .sg-title em{font-style:italic;font-weight:700;color:#2D9B6F} #zh-premium-hero .sg-title .sg-brand,#win-premium-hero .sg-title .sg-brand{display:block;font-size:.28em;font-weight:700;letter-spacing:.1em;color:#2D9B6F;text-transform:uppercase;line-height:1;margin-bottom:8px;opacity:.9} #zh-premium-hero .sg-location,#win-premium-hero .sg-location{font-size:14px;line-height:1.4;color:#8A8A8A;margin:-4px 0 18px;font-weight:500;font-family:var(--font-sans)} #zh-premium-hero .sg-sub,#win-premium-hero .sg-sub{font-size:17px;line-height:1.6;color:#3A3A3A;margin:0 0 28px;font-weight:400;max-width:480px;font-family:var(--font-sans)} #zh-premium-hero .sg-ctas,#win-premium-hero .sg-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px} #zh-premium-hero .sg-btn,#win-premium-hero .sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:100px;font-size:14.5px;font-weight:600;text-decoration:none;transition:all var(--t-base) ease;white-space:nowrap;cursor:pointer;font-family:var(--font-sans);border:none} #zh-premium-hero .sg-btn-primary,#win-premium-hero .sg-btn-primary{background:#2D9B6F;color:#fff;box-shadow:0 4px 20px rgba(45,155,111,.32)} #zh-premium-hero .sg-btn-primary:hover,#win-premium-hero .sg-btn-primary:hover{background:#1F7A54;transform:translateY(-1px);box-shadow:0 6px 28px rgba(45,155,111,.42)} #zh-premium-hero .sg-btn-secondary,#win-premium-hero .sg-btn-secondary{background:#fff;color:#1A1A1A;border:1.5px solid #D9D5CC} #zh-premium-hero .sg-btn-secondary:hover,#win-premium-hero .sg-btn-secondary:hover{border-color:#1A1A1A;transform:translateY(-1px)} #zh-premium-hero .sg-trust,#win-premium-hero .sg-trust{font-size:14px;color:#3A3A3A;line-height:1.5;margin:20px 0 0;font-weight:500;font-family:var(--font-sans);display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(0,0,0,.07)} #zh-premium-hero .sg-trust-item,#win-premium-hero .sg-trust-item{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#8A8A8A;white-space:nowrap} #zh-premium-hero .sg-trust-dot,#win-premium-hero .sg-trust-dot{width:5px;height:5px;border-radius:50%;background:#2D9B6F;opacity:.65;flex-shrink:0} #zh-premium-hero .sg-media,#win-premium-hero .sg-media{display:block;width:100%;position:relative;border-radius:14px;overflow:hidden;background:#EAECEF} #zh-premium-hero .sg-media img,#win-premium-hero .sg-media img{width:100%;height:auto;border-radius:14px;object-fit:cover;aspect-ratio:5/3;display:block;position:relative} @media(max-width:900px){ #zh-premium-hero.sg-active,#win-premium-hero.sg-active{padding:48px 20px} #zh-premium-hero .sg-inner,#win-premium-hero .sg-inner{grid-template-columns:1fr;gap:40px} #zh-premium-hero .sg-text,#win-premium-hero .sg-text{order:1;max-width:none} #zh-premium-hero .sg-media,#win-premium-hero .sg-media{order:2} #zh-premium-hero .sg-media img,#win-premium-hero .sg-media img{aspect-ratio:16/10} #zh-premium-hero .sg-title,#win-premium-hero .sg-title{font-size:clamp(32px,8vw,44px)} #zh-premium-hero .sg-sub,#win-premium-hero .sg-sub{font-size:16px} } /* ── SYMPTOM PREMIUM SPLIT HERO (Beschwerde pages with s.img) ── */ #symptom-premium-hero{display:none} #symptom-premium-hero.sg-active{display:block;background:#FFFFFF;padding:clamp(72px,10vw,140px) 24px;position:relative;border-bottom:1px solid rgba(0,0,0,.05)} #symptom-premium-hero .sg-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center} #symptom-premium-hero .sg-text{max-width:520px} #symptom-premium-hero .sg-crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8A8A8A;margin-bottom:22px;flex-wrap:wrap;font-family:var(--font-sans)} #symptom-premium-hero .sg-crumb button{background:none;border:none;cursor:pointer;font:inherit;color:#2D9B6F;padding:0} #symptom-premium-hero .sg-crumb button:hover{text-decoration:underline} #symptom-premium-hero .sg-crumb span.sg-sep{color:#C4BFB3} #symptom-premium-hero .sg-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#2D9B6F;margin-bottom:22px;font-family:var(--font-sans)} #symptom-premium-hero .sg-title{font-family:var(--font-sans);font-size:clamp(38px,4.2vw,58px);line-height:1.05;letter-spacing:-.025em;font-weight:800;color:#111;margin:0 0 14px} #symptom-premium-hero .sg-title em{font-style:italic;font-weight:700;color:#2D9B6F} #symptom-premium-hero .sg-sub{font-size:17px;line-height:1.6;color:#3A3A3A;margin:0 0 28px;font-weight:400;max-width:480px;font-family:var(--font-sans)} #symptom-premium-hero .sg-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px} #symptom-premium-hero .sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:100px;font-size:14.5px;font-weight:600;text-decoration:none;transition:all var(--t-base) ease;white-space:nowrap;cursor:pointer;font-family:var(--font-sans);border:none} #symptom-premium-hero .sg-btn-primary{background:#2D9B6F;color:#fff;box-shadow:0 4px 20px rgba(45,155,111,.32)} #symptom-premium-hero .sg-btn-primary:hover{background:#1F7A54;transform:translateY(-1px);box-shadow:0 6px 28px rgba(45,155,111,.42)} #symptom-premium-hero .sg-btn-secondary{background:#fff;color:#1A1A1A;border:1.5px solid #D9D5CC} #symptom-premium-hero .sg-btn-secondary:hover{border-color:#1A1A1A;transform:translateY(-1px)} #symptom-premium-hero .sg-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(0,0,0,.07);margin-top:20px;font-family:var(--font-sans)} #symptom-premium-hero .sg-meta-item{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#8A8A8A;white-space:nowrap} #symptom-premium-hero .sg-meta-dot{width:5px;height:5px;border-radius:50%;background:#2D9B6F;opacity:.65;flex-shrink:0} #symptom-premium-hero .sg-media{display:block;width:100%;position:relative;border-radius:14px;overflow:hidden;background:#EAECEF} #symptom-premium-hero .sg-media img{width:100%;height:auto;border-radius:14px;object-fit:cover;aspect-ratio:5/3;display:block;position:relative} @media(max-width:900px){ #symptom-premium-hero.sg-active{padding:48px 20px} #symptom-premium-hero .sg-inner{grid-template-columns:1fr;gap:40px} #symptom-premium-hero .sg-text{order:1;max-width:none} #symptom-premium-hero .sg-media{order:2} #symptom-premium-hero .sg-media img{aspect-ratio:16/10} #symptom-premium-hero .sg-title{font-size:clamp(32px,8vw,44px)} #symptom-premium-hero .sg-sub{font-size:16px} } /* ── THERAPIE PREMIUM SPLIT HERO (all 8 therapy subpages) ── */ #therapie-premium-hero{display:none} #therapie-premium-hero.sg-active{display:block;background:#FFFFFF;padding:clamp(72px,10vw,140px) 24px;position:relative;border-bottom:1px solid rgba(0,0,0,.05)} #therapie-premium-hero .sg-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center} #therapie-premium-hero .sg-text{max-width:520px} #therapie-premium-hero .sg-crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8A8A8A;margin-bottom:22px;flex-wrap:wrap;font-family:var(--font-sans)} #therapie-premium-hero .sg-crumb button{background:none;border:none;cursor:pointer;font:inherit;color:#2D9B6F;padding:0} #therapie-premium-hero .sg-crumb button:hover{text-decoration:underline} #therapie-premium-hero .sg-crumb span.sg-sep{color:#C4BFB3} #therapie-premium-hero .sg-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#2D9B6F;margin-bottom:22px;font-family:var(--font-sans)} #therapie-premium-hero .sg-title{font-family:var(--font-sans);font-size:clamp(38px,4.2vw,58px);line-height:1.05;letter-spacing:-.025em;font-weight:800;color:#111;margin:0 0 14px} #therapie-premium-hero .sg-title em{font-style:italic;font-weight:700;color:#2D9B6F} #therapie-premium-hero .sg-sub{font-size:17px;line-height:1.6;color:#3A3A3A;margin:0 0 28px;font-weight:400;max-width:480px;font-family:var(--font-sans)} #therapie-premium-hero .sg-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px} #therapie-premium-hero .sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:100px;font-size:14.5px;font-weight:600;text-decoration:none;transition:all var(--t-base) ease;white-space:nowrap;cursor:pointer;font-family:var(--font-sans);border:none} #therapie-premium-hero .sg-btn-primary{background:#2D9B6F;color:#fff;box-shadow:0 4px 20px rgba(45,155,111,.32)} #therapie-premium-hero .sg-btn-primary:hover{background:#1F7A54;transform:translateY(-1px);box-shadow:0 6px 28px rgba(45,155,111,.42)} #therapie-premium-hero .sg-btn-secondary{background:#fff;color:#1A1A1A;border:1.5px solid #D9D5CC} #therapie-premium-hero .sg-btn-secondary:hover{border-color:#1A1A1A;transform:translateY(-1px)} #therapie-premium-hero .sg-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(0,0,0,.07);margin-top:20px;font-family:var(--font-sans)} #therapie-premium-hero .sg-meta-item{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#8A8A8A;white-space:nowrap} #therapie-premium-hero .sg-meta-dot{width:5px;height:5px;border-radius:50%;background:#2D9B6F;opacity:.65;flex-shrink:0} #therapie-premium-hero .sg-media{display:block;width:100%;position:relative;border-radius:14px;overflow:hidden;background:#EAECEF} #therapie-premium-hero .sg-media img{width:100%;height:auto;border-radius:14px;object-fit:cover;aspect-ratio:5/3;display:block;position:relative} @media(max-width:900px){ #therapie-premium-hero.sg-active{padding:48px 20px} #therapie-premium-hero .sg-inner{grid-template-columns:1fr;gap:40px} #therapie-premium-hero .sg-text{order:1;max-width:none} #therapie-premium-hero .sg-media{order:2} #therapie-premium-hero .sg-media img{aspect-ratio:16/10} #therapie-premium-hero .sg-title{font-size:clamp(32px,8vw,44px)} #therapie-premium-hero .sg-sub{font-size:16px} } /* ── GENERIC PREMIUM SPLIT HERO (all remaining standorts) ── */ #generic-premium-hero{display:none} #generic-premium-hero.sg-active{display:block;background:#FFFFFF;padding:clamp(72px,10vw,140px) 24px;position:relative;border-bottom:1px solid rgba(0,0,0,.05)} #generic-premium-hero .sg-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center} #generic-premium-hero .sg-text{max-width:520px} #generic-premium-hero .sg-crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8A8A8A;margin-bottom:22px;flex-wrap:wrap;font-family:var(--font-sans)} #generic-premium-hero .sg-crumb button{background:none;border:none;cursor:pointer;font:inherit;color:#2D9B6F;padding:0} #generic-premium-hero .sg-crumb button:hover{text-decoration:underline} #generic-premium-hero .sg-crumb span.sg-sep{color:#C4BFB3} #generic-premium-hero .sg-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#2D9B6F;margin-bottom:22px;font-family:var(--font-sans)} #generic-premium-hero .sg-title{font-family:var(--font-sans);font-size:clamp(38px,4.2vw,58px);line-height:1.05;letter-spacing:-.025em;font-weight:800;color:#111;margin:0 0 14px} #generic-premium-hero .sg-title em{font-style:italic;font-weight:700;color:#2D9B6F} #generic-premium-hero .sg-location{font-size:14px;line-height:1.4;color:#8A8A8A;margin:-4px 0 18px;font-weight:500;font-family:var(--font-sans)} #generic-premium-hero .sg-sub{font-size:17px;line-height:1.6;color:#3A3A3A;margin:0 0 28px;font-weight:400;max-width:480px;font-family:var(--font-sans)} #generic-premium-hero .sg-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px} #generic-premium-hero .sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:100px;font-size:14.5px;font-weight:600;text-decoration:none;transition:all var(--t-base) ease;white-space:nowrap;cursor:pointer;font-family:var(--font-sans);border:none} #generic-premium-hero .sg-btn-primary{background:#2D9B6F;color:#fff;box-shadow:0 4px 20px rgba(45,155,111,.32)} #generic-premium-hero .sg-btn-primary:hover{background:#1F7A54;transform:translateY(-1px);box-shadow:0 6px 28px rgba(45,155,111,.42)} #generic-premium-hero .sg-btn-secondary{background:#fff;color:#1A1A1A;border:1.5px solid #D9D5CC} #generic-premium-hero .sg-btn-secondary:hover{border-color:#1A1A1A;transform:translateY(-1px)} #generic-premium-hero .sg-trust{font-size:14px;color:#3A3A3A;line-height:1.5;margin:20px 0 0;font-weight:500;font-family:var(--font-sans);display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(0,0,0,.07)} #generic-premium-hero .sg-trust-item{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#8A8A8A;white-space:nowrap} #generic-premium-hero .sg-trust-dot{width:5px;height:5px;border-radius:50%;background:#2D9B6F;opacity:.65;flex-shrink:0} #generic-premium-hero .sg-media{display:block;width:100%;position:relative;border-radius:14px;overflow:hidden;background:#EAECEF} #generic-premium-hero .sg-media img{width:100%;height:auto;border-radius:14px;object-fit:cover;aspect-ratio:3/4;object-position:center top;display:block;position:relative} @media(max-width:900px){ #generic-premium-hero.sg-active{padding:48px 20px} #generic-premium-hero .sg-inner{grid-template-columns:1fr;gap:40px} #generic-premium-hero .sg-text{order:1;max-width:none} #generic-premium-hero .sg-media{order:2} #generic-premium-hero .sg-media img{aspect-ratio:16/10} #generic-premium-hero .sg-title{font-size:clamp(32px,8vw,44px)} #generic-premium-hero .sg-sub{font-size:16px} } /* ── STANDORTE PREMIUM SPLIT HERO ── */ #standorte-premium-hero{display:block;background:#FFFFFF;padding:clamp(72px,10vw,140px) 24px;position:relative;border-bottom:1px solid rgba(0,0,0,.05)} #standorte-premium-hero .sg-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center} #standorte-premium-hero .sg-text{max-width:520px} #standorte-premium-hero .sg-crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8A8A8A;margin-bottom:22px;flex-wrap:wrap;font-family:var(--font-sans)} #standorte-premium-hero .sg-crumb button{background:none;border:none;cursor:pointer;font:inherit;color:#2D9B6F;padding:0} #standorte-premium-hero .sg-crumb button:hover{text-decoration:underline} #standorte-premium-hero .sg-crumb span.sg-sep{color:#C4BFB3} #standorte-premium-hero .sg-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#2D9B6F;margin-bottom:22px;font-family:var(--font-sans)} #standorte-premium-hero .sg-title{font-family:var(--font-sans);font-size:clamp(38px,4.2vw,58px);line-height:1.05;letter-spacing:-.025em;font-weight:800;color:#111;margin:0 0 14px} #standorte-premium-hero .sg-title em{font-style:italic;font-weight:700;color:#2D9B6F} #standorte-premium-hero .sg-location{font-size:14px;line-height:1.4;color:#8A8A8A;margin:-4px 0 18px;font-weight:500;font-family:var(--font-sans)} #standorte-premium-hero .sg-sub{font-size:17px;line-height:1.6;color:#3A3A3A;margin:0 0 28px;font-weight:400;max-width:480px;font-family:var(--font-sans)} #standorte-premium-hero .sg-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px} #standorte-premium-hero .sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:100px;font-size:14.5px;font-weight:600;text-decoration:none;transition:all var(--t-base) ease;white-space:nowrap;cursor:pointer;font-family:var(--font-sans);border:none} #standorte-premium-hero .sg-btn-primary{background:#2D9B6F;color:#fff;box-shadow:0 4px 20px rgba(45,155,111,.32)} #standorte-premium-hero .sg-btn-primary:hover{background:#1F7A54;transform:translateY(-1px);box-shadow:0 6px 28px rgba(45,155,111,.42)} #standorte-premium-hero .sg-btn-secondary{background:#fff;color:#1A1A1A;border:1.5px solid #D9D5CC} #standorte-premium-hero .sg-btn-secondary:hover{border-color:#1A1A1A;transform:translateY(-1px)} #standorte-premium-hero .sg-trust{font-size:14px;color:#3A3A3A;line-height:1.5;margin:20px 0 0;font-weight:500;font-family:var(--font-sans);display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(0,0,0,.07)} #standorte-premium-hero .sg-trust-item{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#8A8A8A;white-space:nowrap} #standorte-premium-hero .sg-trust-dot{width:5px;height:5px;border-radius:50%;background:#2D9B6F;opacity:.65;flex-shrink:0} #standorte-premium-hero .sg-media{display:block;width:100%;position:relative;border-radius:14px;overflow:hidden;background:#EAECEF} #standorte-premium-hero .sg-media img{width:100%;height:auto;border-radius:14px;object-fit:cover;aspect-ratio:5/3;display:block;position:relative} @media(max-width:900px){ #standorte-premium-hero{padding:48px 20px} #standorte-premium-hero .sg-inner{grid-template-columns:1fr;gap:40px} #standorte-premium-hero .sg-text{order:1;max-width:none} #standorte-premium-hero .sg-media{order:2} #standorte-premium-hero .sg-media img{aspect-ratio:16/10} #standorte-premium-hero .sg-title{font-size:clamp(32px,8vw,44px)} #standorte-premium-hero .sg-sub{font-size:16px} } /* ── THERAPIEN PREMIUM SPLIT HERO ── */ #therapien-premium-hero{display:block;background:#FFFFFF;padding:clamp(72px,10vw,140px) 24px;position:relative;border-bottom:1px solid rgba(0,0,0,.05)} #therapien-premium-hero .sg-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center} #therapien-premium-hero .sg-text{max-width:520px} #therapien-premium-hero .sg-crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8A8A8A;margin-bottom:22px;flex-wrap:wrap;font-family:var(--font-sans)} #therapien-premium-hero .sg-crumb button{background:none;border:none;cursor:pointer;font:inherit;color:#2D9B6F;padding:0} #therapien-premium-hero .sg-crumb button:hover{text-decoration:underline} #therapien-premium-hero .sg-crumb span.sg-sep{color:#C4BFB3} #therapien-premium-hero .sg-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#2D9B6F;margin-bottom:22px;font-family:var(--font-sans)} #therapien-premium-hero .sg-title{font-family:var(--font-sans);font-size:clamp(38px,4.2vw,58px);line-height:1.05;letter-spacing:-.025em;font-weight:800;color:#111;margin:0 0 14px} #therapien-premium-hero .sg-title em{font-style:italic;font-weight:700;color:#2D9B6F} #therapien-premium-hero .sg-location{font-size:14px;line-height:1.4;color:#8A8A8A;margin:-4px 0 18px;font-weight:500;font-family:var(--font-sans)} #therapien-premium-hero .sg-sub{font-size:17px;line-height:1.6;color:#3A3A3A;margin:0 0 28px;font-weight:400;max-width:480px;font-family:var(--font-sans)} #therapien-premium-hero .sg-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px} #therapien-premium-hero .sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:100px;font-size:14.5px;font-weight:600;text-decoration:none;transition:all var(--t-base) ease;white-space:nowrap;cursor:pointer;font-family:var(--font-sans);border:none} #therapien-premium-hero .sg-btn-primary{background:#2D9B6F;color:#fff;box-shadow:0 4px 20px rgba(45,155,111,.32)} #therapien-premium-hero .sg-btn-primary:hover{background:#1F7A54;transform:translateY(-1px);box-shadow:0 6px 28px rgba(45,155,111,.42)} #therapien-premium-hero .sg-btn-secondary{background:#fff;color:#1A1A1A;border:1.5px solid #D9D5CC} #therapien-premium-hero .sg-btn-secondary:hover{border-color:#1A1A1A;transform:translateY(-1px)} #therapien-premium-hero .sg-trust{font-size:14px;color:#3A3A3A;line-height:1.5;margin:20px 0 0;font-weight:500;font-family:var(--font-sans);display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(0,0,0,.07)} #therapien-premium-hero .sg-trust-item{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#8A8A8A;white-space:nowrap} #therapien-premium-hero .sg-trust-dot{width:5px;height:5px;border-radius:50%;background:#2D9B6F;opacity:.65;flex-shrink:0} #therapien-premium-hero .sg-media{display:block;width:100%;position:relative;border-radius:14px;overflow:hidden;background:#EAECEF} #therapien-premium-hero .sg-media img{width:100%;height:auto;border-radius:14px;object-fit:cover;aspect-ratio:5/3;display:block;position:relative} @media(max-width:900px){ #therapien-premium-hero{padding:48px 20px} #therapien-premium-hero .sg-inner{grid-template-columns:1fr;gap:40px} #therapien-premium-hero .sg-text{order:1;max-width:none} #therapien-premium-hero .sg-media{order:2} #therapien-premium-hero .sg-media img{aspect-ratio:16/10} #therapien-premium-hero .sg-title{font-size:clamp(32px,8vw,44px)} #therapien-premium-hero .sg-sub{font-size:16px} } /* ── ST. GALLEN PREMIUM SPLIT HERO (scoped, standort subpage only) ── */ #sg-premium-hero{display:none} #sg-premium-hero.sg-active{display:block;background:#FFFFFF;padding:clamp(72px,10vw,140px) 24px;position:relative;border-bottom:1px solid rgba(0,0,0,.05)} #sg-premium-hero.sg-active,#zh-premium-hero.sg-active,#win-premium-hero.sg-active,#generic-premium-hero.sg-active,#standorte-premium-hero.sg-active,#therapien-premium-hero.sg-active{padding-top:0} .sg-city-banner{background:#0A0A0A;color:#fff;padding:14px 24px;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.08);margin:0 -24px 0} .sg-city-banner svg{flex-shrink:0;color:#2D9B6F} .sg-city-banner strong{color:#fff;font-weight:700} .sg-city-banner-sep{opacity:.35;margin:0 4px} .sg-city-banner-sub{font-weight:400;letter-spacing:.05em;text-transform:none;color:rgba(255,255,255,.7);font-size:12.5px} @media(max-width:600px){.sg-city-banner{flex-wrap:wrap;font-size:11.5px;padding:12px 20px}.sg-city-banner-sub{width:100%;text-align:center}} .sg-event{position:relative;max-width:1240px;margin:clamp(48px,7vw,88px) auto 0;background:linear-gradient(135deg,#0F4D38 0%,#1F7A54 60%,#2D9B6F 100%);border-radius:24px;padding:clamp(36px,5vw,56px);font-family:var(--font-sans);box-shadow:0 20px 60px -20px rgba(15,77,56,.4),0 8px 24px rgba(15,77,56,.15);overflow:hidden} .sg-event::before{content:"";position:absolute;top:-50%;right:-10%;width:60%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 60%);pointer-events:none} .sg-event-grid{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;position:relative;z-index:1} .sg-event-main{min-width:0} .sg-event-eyebrow{display:inline-flex;align-items:center;gap:8px;background:#FFD93D;color:#0F4D38;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin:0 0 22px;box-shadow:0 4px 12px rgba(255,217,61,.3)} .sg-event-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:#0F4D38;animation:sg-pulse 1.5s ease-in-out infinite} @keyframes sg-pulse{0%,100%{opacity:1}50%{opacity:.4}} .sg-event h3{font-family:var(--font-sans);font-size:clamp(26px,2.6vw,34px);line-height:1.2;letter-spacing:-.028em;font-weight:800;color:#fff;margin:0 0 18px} .sg-event-sub{font-size:16px;line-height:1.65;color:rgba(255,255,255,.85);margin:0 0 28px;font-weight:400;max-width:560px} .sg-event-list{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:14px} .sg-event-list li{font-size:15px;line-height:1.55;color:rgba(255,255,255,.92);padding-left:28px;position:relative;font-weight:500} .sg-event-list li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:#FFD93D} .sg-event-list li::after{content:"";position:absolute;left:4px;top:9px;width:6px;height:3px;border-left:2px solid #0F4D38;border-bottom:2px solid #0F4D38;transform:rotate(-45deg)} .sg-event-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 16px} .sg-event .sg-btn-primary{background:#FFD93D;color:#0F4D38;border:none;padding:14px 26px;border-radius:999px;font-weight:800;font-size:14.5px;cursor:pointer;font-family:inherit;box-shadow:0 6px 16px rgba(255,217,61,.35);transition:transform .2s ease,box-shadow .2s ease} .sg-event .sg-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,217,61,.45)} .sg-event .sg-btn-secondary{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);padding:14px 24px;border-radius:999px;font-weight:700;font-size:14.5px;cursor:pointer;text-decoration:none;display:inline-block;font-family:inherit;transition:background .2s ease,border-color .2s ease} .sg-event .sg-btn-secondary:hover{background:rgba(255,255,255,.1);border-color:#fff} .sg-event-note{font-size:13.5px;color:rgba(255,255,255,.7);margin:0;line-height:1.5} .sg-event-card{background:#fff;border:none;border-radius:16px;padding:32px 24px;text-align:center;box-shadow:0 12px 32px rgba(0,0,0,.18);position:relative} .sg-event-card::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#FFD93D;color:#0F4D38;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:999px;content:"Nur einmalig"} .sg-event-card-label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#2D9B6F;margin:8px 0 12px} .sg-event-card-day{font-size:80px;font-weight:800;color:#0F4D38;line-height:1;margin:0 0 8px;font-family:var(--font-sans);letter-spacing:-.03em} .sg-event-card-month{font-size:18px;font-weight:700;color:#0A0A0A;margin:0 0 20px} .sg-event-card-divider{height:1px;background:rgba(0,0,0,.08);margin:0 0 20px} .sg-event-cd{display:flex;justify-content:center;gap:8px;margin:0 0 18px} .sg-event-cd-u{background:#FFD93D;border-radius:10px;padding:8px 6px;min-width:50px;box-shadow:0 4px 10px rgba(255,217,61,.35)} .sg-event-cd-n{font-size:20px;font-weight:800;color:#0F4D38;line-height:1;font-family:var(--font-sans);letter-spacing:-.02em} .sg-event-cd-l{font-size:9px;font-weight:700;color:#0F4D38;letter-spacing:.1em;text-transform:uppercase;margin-top:3px;opacity:.85} .sg-event-card-loc{font-size:14px;color:#3A3A3A;line-height:1.5;margin:0} .sg-event-card-loc strong{display:block;font-weight:600;color:#0A0A0A;margin-bottom:2px} @media(max-width:840px){.sg-event-grid{grid-template-columns:1fr;gap:28px}.sg-event-card{order:-1;margin-top:8px}.sg-event{padding:36px 24px;border-radius:20px}.sg-event-card-day{font-size:64px}} #sg-premium-hero .sg-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center} #sg-premium-hero .sg-text{max-width:520px} #sg-premium-hero .sg-crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8A8A8A;margin-bottom:22px;flex-wrap:wrap;font-family:var(--font-sans)} #sg-premium-hero .sg-crumb button{background:none;border:none;cursor:pointer;font:inherit;color:#2D9B6F;padding:0} #sg-premium-hero .sg-crumb button:hover{text-decoration:underline} #sg-premium-hero .sg-crumb span.sg-sep{color:#C4BFB3} #sg-premium-hero .sg-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#2D9B6F;margin-bottom:22px;font-family:var(--font-sans)} #sg-premium-hero .sg-title{font-family:var(--font-sans);font-size:clamp(38px,4.2vw,58px);line-height:1.05;letter-spacing:-.025em;font-weight:800;color:#111;margin:0 0 14px} #sg-premium-hero .sg-title em{font-style:italic;font-weight:700;color:#2D9B6F} #sg-premium-hero .sg-location{font-size:14px;line-height:1.4;color:#8A8A8A;margin:-4px 0 18px;font-weight:500;font-family:var(--font-sans)} #sg-premium-hero .sg-sub{font-size:17px;line-height:1.6;color:#3A3A3A;margin:0 0 20px;font-weight:400;max-width:480px;font-family:var(--font-sans)} #sg-premium-hero .sg-support{font-size:14.5px;line-height:1.55;color:#5A5A5A;margin:0 0 28px;font-style:italic;font-family:var(--font-sans)} #sg-premium-hero .sg-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px} #sg-premium-hero .sg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:100px;font-size:14.5px;font-weight:600;text-decoration:none;transition:all var(--t-base) ease;white-space:nowrap;cursor:pointer;font-family:var(--font-sans);border:none} #sg-premium-hero .sg-btn-primary{background:#2D9B6F;color:#fff;box-shadow:0 4px 20px rgba(45,155,111,.32)} #sg-premium-hero .sg-btn-primary:hover{background:#1F7A54;transform:translateY(-1px);box-shadow:0 6px 28px rgba(45,155,111,.42)} #sg-premium-hero .sg-btn-secondary{background:#fff;color:#1A1A1A;border:1.5px solid #D9D5CC} #sg-premium-hero .sg-btn-secondary:hover{border-color:#1A1A1A;transform:translateY(-1px)} #sg-premium-hero .sg-urgency{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#5A5A5A;margin:4px 0 22px;font-weight:500;font-family:var(--font-sans)} #sg-premium-hero .sg-urgency::before{content:"";width:7px;height:7px;background:#2D9B6F;border-radius:50%;box-shadow:0 0 0 4px rgba(45,155,111,.15);animation:sgPulse 2s ease-in-out infinite;flex-shrink:0} @keyframes sgPulse{0%,100%{box-shadow:0 0 0 4px rgba(45,155,111,.15)}50%{box-shadow:0 0 0 6px rgba(45,155,111,.05)}} #sg-premium-hero .sg-trust{font-size:14px;color:#3A3A3A;line-height:1.5;margin:0;font-weight:500;font-family:var(--font-sans)} #sg-premium-hero .sg-trust strong{font-weight:600;color:#1A1A1A} #sg-premium-hero .sg-trust span.sg-tsep{color:#C4BFB3;margin:0 8px;font-weight:400} #sg-premium-hero .sg-media{display:block;width:100%;position:relative;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 50% 42%, #efece7 0%, #d7d4ce 65%, #cbc8c2 100%)} #sg-premium-hero .sg-media::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;background:radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 55%);mix-blend-mode:overlay} #sg-premium-hero .sg-media img{width:100%;height:auto;border-radius:14px;object-fit:cover;aspect-ratio:3/4;object-position:center top;display:block;position:relative} #sg-premium-hero .sg-mobile-brand,#sg-premium-hero .sg-mobile-sub{display:none} @media(max-width:900px){ #sg-premium-hero.sg-active{padding:0 20px 48px;background-image:url("/images/img-230299db5d2e.webp");background-size:contain;background-position:center 64px;background-repeat:no-repeat;background-color:#fff;min-height:100vh} #sg-premium-hero .sg-city-banner{margin-left:-20px;margin-right:-20px;margin-bottom:16px} #sg-premium-hero .sg-media{display:none} #sg-premium-hero .sg-inner{grid-template-columns:1fr;gap:0;padding-top:24px} #sg-premium-hero .sg-text{order:1;max-width:none} #sg-premium-hero .sg-title{font-size:clamp(32px,8vw,44px)} #sg-premium-hero .sg-sub{font-size:16px} } @media(max-width:900px){ #generic-premium-hero.sg-city-rorschach.sg-active, #generic-premium-hero.sg-city-wil.sg-active{padding:0 20px 48px;background-image:url("/images/img-230299db5d2e.webp");background-size:contain;background-position:center 64px;background-repeat:no-repeat;background-color:#fff;min-height:100vh} #generic-premium-hero.sg-city-rorschach .sg-city-banner, #generic-premium-hero.sg-city-wil .sg-city-banner{margin-left:-20px;margin-right:-20px;margin-bottom:16px} #generic-premium-hero.sg-city-rorschach .sg-media, #generic-premium-hero.sg-city-wil .sg-media{display:none} #generic-premium-hero.sg-city-rorschach .sg-inner, #generic-premium-hero.sg-city-wil .sg-inner{grid-template-columns:1fr;gap:0;padding-top:24px} #generic-premium-hero.sg-city-rorschach .sg-text, #generic-premium-hero.sg-city-wil .sg-text{order:1;max-width:none} #generic-premium-hero.sg-city-rorschach .sg-title, #generic-premium-hero.sg-city-wil .sg-title{font-size:clamp(32px,8vw,44px)} #generic-premium-hero.sg-city-rorschach .sg-sub, #generic-premium-hero.sg-city-wil .sg-sub{font-size:16px} } /* ── ST. GALLEN HERO COLOR OVERRIDES ── */ /* ── LOCATION INTRO + META ── */ .location-intro { font-size: 15px; color: #374151; margin-bottom: 20px; line-height: 1.5; max-width: 560px; } /* ── PLZ LOCATION CARD SYSTEM v2 ── */ .location-card { background: #FFFFFF; border: 1px solid #E8E8E8; border-radius: 14px; padding: 26px 24px 22px; transition: transform var(--t-base) ease, border-color var(--t-base) ease, background var(--t-base) ease; display: flex; flex-direction: column; cursor: pointer; position: relative; } .location-card:hover { transform: translateY(-6px); border-color: #111827; background: #FCFCFC; } .location-plz { font-size: 14px; line-height: 1.2; font-weight: 500; color: #6B7280; font-variant-numeric: tabular-nums; display: inline; } .loc-plz-dots { color: #CACACA; font-weight: 300; letter-spacing: 0.12em; font-size: 36px; } .location-city { font-size: 17px; line-height: 1.2; font-weight: 700; color: #0A0A0A; letter-spacing: -0.01em; display: inline; } .location-canton { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #9CA3AF; margin-bottom: 18px; } .location-desc { font-size: 14px; line-height: 1.45; color: #6B7280; margin-bottom: 22px; flex: 1; } .location-link { font-size: 13.5px; font-weight: 600; color: #111827; text-decoration: none; letter-spacing: 0; transition: color var(--t-fast); display: block; margin-top: auto; } .location-card:hover .location-link { color: #2D9B6F; } /* Featured / flagship, Zürich City */ /* Flagship badge */ /* Finder card */ .location-card--finder { background: #F9F9F9; border-style: dashed; border-color: #D1D5DB; } .location-card--finder:hover { border-color: #6B7280; background: #F5F5F5; transform: translateY(-2px); } .location-card--finder .location-plz { color: #CACACA; } .location-card--finder .location-city { color: #374151; } .location-card--finder .location-link { color: #6B7280; } .location-card--finder:hover .location-link { color: #2D9B6F; } /* Grid */ #standorte-grid.city-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; margin-top: 28px !important; align-items: stretch !important; } @media(max-width:1100px){ #standorte-grid.city-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media(max-width:768px){ #standorte-grid.city-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } } @media(max-width:480px){ #standorte-grid.city-grid { grid-template-columns: 1fr !important; } } /* Pointer events */ .location-card * { pointer-events: none !important; } .location-card { pointer-events: auto !important; } /* ═══════════════════════════════════════════════════════════ FARNER GLOBAL DESIGN SYSTEM, UNIFIED OVERRIDE 80% white · grey hierarchy · green = action only ═══════════════════════════════════════════════════════════ */ /* ── TYPOGRAPHY ── */ h1,h2,h3,h4{color:#0A0A0A;letter-spacing:-0.02em} p{color:#374151;line-height:1.6} .section-label,.sec-lbl,.kt-intro-label,.signal-overline,.bts-label{color:#6B7280!important;background:transparent!important;border:none!important} /* Section title italics: no green */ .section-title em,.sec-h em,.sub-title em,.hero-h1 em,.founder-title em,.tb-line em{color:#2F3A45!important} /* ── SECTION BACKGROUNDS ── */ .section{background:#FFFFFF} .section:nth-child(even){background:#FAFAFA} /* wa-section: keep original dark bg */ .why-closer{background:#F9FAFB!important;border:1px solid #E5E7EB!important} .pilot-q{background:#F9FAFB!important;border:1px solid #E5E7EB!important} /* ── CARD SYSTEM ── */ .review-card,.svc-card,.team-card,.city-card,.h-card,.c-card,.pc-top,.pil-hd{background:#FFFFFF;border:1px solid #E5E7EB!important;box-shadow:0 4px 20px rgba(17,24,39,0.04)!important} .pc-top{background:#F9FAFB!important;color:#0A0A0A!important} .pil-hd{background:#F9FAFB!important;color:#0A0A0A!important} .cp-blick,.cp-cta-card{background:#F9FAFB!important;border-color:#E5E7EB!important} /* ── ICON SYSTEM ── */ .review-avatar,.wp-icon,.ep-ico,.tr-ico,.drw-finder-icon,.cp-review-avatar,.hc-chk,.next-step-num{background:rgba(47,163,107,0.08)!important;color:#2D9B6F!important} /* ── GREEN TEXT → GREY ── */ .section-label,.card-cta,.svc-cta,.kt-cta,.team-cta,.bts-pillar-num,.kk-cta-eyebrow,.kt-intro-label,.signal-overline{color:#6B7280!important} .cp-blick-label,.cp-blick-item-label,.cp-reviews-title,.hc-lbl,.hc-hl-label,.pc-pval,.pil-item,.pilot-operator-note{color:#374151!important} /* ── BUTTONS ── */ .team-cta,.f-sub,.drw-cta-primary{background:#2D9B6F!important;color:#fff!important;border-radius:999px!important;box-shadow:none!important;border:none!important} .team-cta:hover,.f-sub:hover,.drw-cta-primary:hover{background:#1F7A54!important;box-shadow:none!important;transform:translateY(-1px)} .back-btn:hover{color:#2D9B6F!important} /* ── TOP ACCENT BARS ON CARDS ── */ .team-photo-wrap::before,.svc-photo-top-bar,.h-card::before{background:#2D9B6F!important;opacity:.6;height:2px} /* ── LINKS ── */ .breadcrumb a,.breadcrumb button,.kk-more-btn,.drw-links li a:hover,.drw-links li button:hover,.drw-plain-links li a:hover,.back-btn:hover{color:#374151!important} .breadcrumb a:hover{color:#111827!important} .drw-links .drw-flow-link a,.drw-links .drw-flow-link button{color:#374151!important} /* ── CHIPS & TAGS ── */ .sx-chip-link:hover{border-color:rgba(47,163,107,0.3)!important;color:#2D9B6F!important;background:#FAFAFA!important} .city-rollout,.kk-q.open .kk-ico,.b-o{background:rgba(47,163,107,0.07)!important;border-color:rgba(47,163,107,0.15)!important;color:#374151!important} /* ── BADGES ── */ .svc-badge--time,.kt-micro-badge,.hc-lbl span,.b-o{background:rgba(47,163,107,0.06)!important;color:#374151!important;border:1px solid rgba(47,163,107,0.15)!important} .hc-lbl span{background:#2D9B6F!important;color:#fff!important} /* ── DOTS & DECORATIVE ── */ .drw-logo-dot,.b-a::before{background:#2D9B6F!important} .ev-dot,.founder-label::before,.signal-overline::before{background:#2D9B6F!important;border-color:#2D9B6F!important} .cp-sx-dot,.drw-acc-btn::before,.drw-link-arrow{background:#2D9B6F!important;opacity:.6} /* ── FORM FOCUS ── */ .form-input:focus,.form-select:focus,.form-textarea:focus,.f-g input:focus,.f-g select:focus,.f-g textarea:focus{border-color:rgba(47,163,107,0.5)!important;box-shadow:0 0 0 3px rgba(47,163,107,0.06)!important} /* ── MISC HIGHLIGHTS ── */ .hc-hl strong{color:#2D9B6F!important} .pc-rv.g,.cc-hint.early,.cs-val em,.wa-value-pt svg,.stat-num span,.team-loc svg,.sub-meta-item svg,.hs-num svg{color:#2D9B6F!important} .hc-pilot-badge,.city-rollout{background:rgba(47,163,107,0.06)!important;border-color:rgba(47,163,107,0.15)!important} .faq-item.open .faq-cv,.kk-q.open .kk-ico,.cp-faq-q.open .cp-faq-ico{background:#2D9B6F!important;color:#fff!important} /* ── SO STARTEN WIR SECTION TEXT ── */ /* ── DRAWER ── */ .drw-acc-btn.open .drw-acc-label{color:#374151!important} .drw-acc-btn.open .drw-acc-chevron{background:rgba(47,163,107,0.08)!important;color:#2D9B6F!important} /* ── FAQ ── */ .faq-item{border-color:#E5E7EB!important} /* ── CITY/LOCATION CARDS ── */ .city-card:hover .city-cta{color:#2D9B6F!important} .c-card.active:hover{border-color:#2D9B6F!important;box-shadow:0 6px 24px rgba(47,163,107,0.1)!important} /* ═══════════════════════════════════════════════════════════ */ /* --- */ .hero-mobile-img{display:none} @media(max-width:1024px){ .hero-bg{ background-image:none!important; background-color:#fff!important; min-height:auto!important; align-items:flex-start!important; } .hero-mobile-img{ display:block!important; width:100%!important; height:178px!important; object-fit:cover!important; object-position:center 48%!important; border-radius:18px!important; margin:2px 0 12px!important; } .hero{ background:transparent!important; background-color:transparent!important; padding:4px 22px 24px!important; gap:0!important; } .hero-left .hero-eyebrow{display:none!important} .hero-left{ background:transparent!important; background-color:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; border:none!important; border-radius:0!important; padding:0!important; max-width:330px!important; align-items:flex-start!important; } .hero-left .care-hero-label{ font-size:10px!important; letter-spacing:.22em!important; color:#6B7280!important; margin-bottom:14px!important; text-shadow:none!important; } .hero-left .hero-headline{ font-family:var(--font-sans)!important; font-size:clamp(26px,7vw,34px)!important; line-height:1.1!important; letter-spacing:-.025em!important; color:#111!important; margin-bottom:14px!important; font-weight:800!important; text-shadow:none!important; max-width:none!important; } .hero-left .hero-headline em{ font-size:.92em!important; font-weight:700!important; font-style:italic!important; color:#3A4250!important; margin-top:10px!important; display:inline-block!important; } .hero-left .hero-sub{ font-size:14.5px!important; line-height:1.55!important; color:#374151!important; max-width:none!important; margin-bottom:18px!important; font-weight:400!important; text-shadow:none!important; } .hero-left .btn-primary{ padding:11px 22px!important; font-size:13.5px!important; border-radius:100px!important; width:auto!important; max-width:none!important; box-shadow:0 6px 18px rgba(45,155,111,.32)!important; align-self:flex-start!important; min-height:0!important; } .hero-left .btn-primary svg{width:14px!important;height:14px!important;} .hero-right, .hero-complaint-input{ background:rgba(255,255,255,.94)!important; } .hero-right{margin-top:24px!important;padding:0!important;border:none!important;} } /* --- */ .form-phone-alt{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;margin-top:8px;font-size:13px;font-weight:500;color:#6B7280;text-decoration:none;font-family:var(--font-sans);background:transparent;border:none;cursor:pointer;transition:color .2s;width:100%;} .form-phone-alt:hover{color:#111827;} .form-phone-alt strong{color:#111827;font-weight:600;letter-spacing:.01em;} .form-phone-alt svg{flex-shrink:0;opacity:.7;} /* --- */ @media(max-width:768px){ /* generic section vertical compression */ .section,.team-section,.svc-section,.bts-section, .founder-section,.signal-section,.related-section,.subpage-reviews, .kk-section,.cta-band{padding:48px 0!important;} /* large content cards */ .kk-cta-card{padding:24px 18px!important;gap:18px!important;border-radius:18px!important;} .standort-flagship-banner{padding:18px 18px!important;} .review-card{padding:18px!important;border-radius:16px!important;} .stat-block{padding:16px 12px!important;} .stat-num{font-size:26px!important;} /* footer compression */ footer{padding:40px 0 24px!important;} .footer-inner{padding-bottom:28px!important;margin-bottom:20px!important;gap:24px!important;} /* CTA band */ .cta-band h2{font-size:24px!important;margin-bottom:10px!important;} .cta-band p{margin-bottom:20px!important;} /* section title margins */ .section-title{margin-bottom:10px!important;} .reviews-grid,.team-grid,.svc-grid{margin-top:24px!important;} /* trim card bodies that have generous padding */ .inline-form-card{padding:22px 18px!important;border-radius:16px!important;} /* hero stats bar (4-col cells) */ #stats-bar .stat-cell{padding:14px 8px!important;} /* kt feature card */ .kt-feature-body{padding:18px 16px 22px!important;} /* team cards */ .team-card{border-radius:14px!important;} /* fallback CTA */ .fallback-cta-section{padding:28px 0!important;} } /* --- */ /* superseded by standorte-mobile-fix */ /* --- */ /* New location card visual system, pin + inline PLZ City */ /* City picker cards, pin before name */ .location-card .location-plz{font-size:14px;font-weight:500;color:#6B7280;letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1.2;margin:0;display:inline} .location-card .location-city{font-size:17px;font-weight:700;color:#0A0A0A;letter-spacing:-.01em;line-height:1.2;margin:0;display:inline} .location-card--finder .location-plz{color:#CACACA} .location-card--finder .location-city{color:#374151} /* --- */ @media(max-width:768px){ /* Section bottom safe-area for sticky CTA, applies to ANY section containing city cards */ #s-standorte,#page-standorte, section:has(.city-card), section:has(.location-card){ padding-bottom:calc(110px + env(safe-area-inset-bottom))!important; } /* Grid: single column wherever city cards live */ .city-grid{ grid-template-columns:1fr!important; gap:7px!important; margin-top:18px!important; align-items:start!important; } /* CARD, global styling */ .city-card,.location-card{ display:flex!important; flex-direction:column!important; align-items:stretch!important; padding:14px 18px!important; min-height:0!important; height:auto!important; border-radius:18px!important; gap:0!important; border:1px solid #ebebea!important; background:#fff!important; box-shadow:0 1px 2px rgba(0,0,0,.03)!important; cursor:pointer!important; overflow:hidden!important; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease!important; } .city-card:active,.location-card:active{ transform:scale(.99)!important; background:#fafafa!important; } /* If renderer uses inner body wrapper, let it pass-through */ .city-card-body{ display:flex!important; flex-direction:column!important; padding:0!important; min-height:0!important; flex:1!important; width:100%!important; } /* Hide decorative noise */ .location-canton, .city-region,.city-note,.city-stats{display:none!important;} /* PLZ inline with city, Swiss postal format */ .location-plz{font-size:14px!important;font-weight:500!important;color:#6B7280!important;letter-spacing:0!important;line-height:1.2!important;margin:0!important;display:inline!important} .location-plz:empty{display:none!important;} /* TITLE, bigger on mobile for tap target / scanability */ .location-city,.city-name{ font-size:20px!important;font-weight:800!important;color:#0d0d0d!important; margin:0!important;line-height:1.15!important;letter-spacing:-.02em!important; text-align:left!important;width:auto!important;display:inline!important; } /* SUBTITLE */ .location-desc{ font-size:15px!important;color:#6B7280!important;line-height:1.35!important; margin:0 0 6px 0!important;font-weight:400!important; white-space:normal!important;overflow:visible!important;text-overflow:clip!important;text-align:left!important; } /* CTA, bottom-right consistent */ .location-link,.city-cta{ display:inline-flex!important;align-items:center!important;gap:6px!important; font-size:15px!important;font-weight:700!important;color:#2D9B6F!important; padding:0!important;text-decoration:none!important; align-self:flex-end!important;border:none!important;background:none!important; pointer-events:none!important;margin:0!important;line-height:1!important; border-top:none!important;padding-top:0!important; } /* Flagship variants */ } /* --- */ #home-cities .location-desc{display:-webkit-box!important;-webkit-line-clamp:1!important;-webkit-box-orient:vertical!important;overflow:hidden!important;white-space:normal!important;text-overflow:ellipsis!important;min-height:1.35em}#home-cities .location-city{flex:0 0 100%!important;width:100%!important} /* --- */ /* Standorte cards (home #home-cities + #standorte-grid): identical size, aligned CTAs, all breakpoints. */ #home-cities,#standorte-grid{grid-auto-rows:1fr!important} #home-cities .city-card,#standorte-grid .city-card{display:flex!important;flex-direction:column!important;height:100%!important;padding:18px 16px!important;box-sizing:border-box} #home-cities .location-plz,#standorte-grid .location-plz{display:block!important;font-size:13px!important;font-weight:600!important;color:var(--muted)!important;line-height:1.2!important;margin:0 0 6px!important;font-variant-numeric:tabular-nums} #home-cities .location-city,#standorte-grid .location-city{display:block!important;width:100%!important;flex:none!important;font-size:16px!important;font-weight:700!important;color:var(--black)!important;line-height:1.25!important;min-height:2.5em!important;margin:0!important} #home-cities .location-canton,#standorte-grid .location-canton{display:none!important} #home-cities .location-desc,#standorte-grid .location-desc{display:block!important;-webkit-line-clamp:unset!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;min-height:0!important;font-size:13px!important;color:var(--mid)!important;line-height:1.3!important;margin:4px 0 0!important} #home-cities .location-link,#standorte-grid .location-link{margin-top:auto!important;padding-top:12px!important;font-size:13.5px!important;font-weight:700!important;color:var(--blue)!important} @media(max-width:600px){#home-cities.city-grid,#standorte-grid.city-grid{grid-template-columns:1fr 1fr!important}} /* --- */ /* Kräutertherapie feature card: show the FULL seed (no crop). object-fit:contain + the image's own dark-maroon frame bg so any letterbox blends seamlessly. */ .kt-feature-img{background:#2c0f1c!important} .kt-feature-img img{object-fit:contain!important;object-position:center!important;height:100%!important} /* --- */ @media(max-width:768px){ .kennst-section{padding:96px 18px !important;} .kennst-section .reveal{margin-bottom:28px!important;max-width:100%!important;} .kennst-section h2{font-size:26px!important;line-height:1.1!important;margin-bottom:12px!important;} .kennst-section .reveal>p{font-size:14.5px!important;line-height:1.5!important;} .kennst-grid{gap:10px!important;} .kennst-grid>div{padding:18px 18px!important;border-radius:14px!important;gap:8px!important;} .kennst-grid>div>div:first-child{width:36px!important;height:36px!important;border-radius:10px!important;margin-bottom:2px!important;} .kennst-grid>div>div:first-child svg{width:18px!important;height:18px!important;} .kennst-grid h3{font-size:15.5px!important;line-height:1.25!important;} .kennst-grid p{font-size:13.5px!important;line-height:1.5!important;} } /* --- */ @media(max-width:768px){ #s-reviews .stats-row{display:none!important;} } /* --- */ /* --- */ @media(max-width:768px){ .wa-section{min-height:0!important;padding:64px 0!important;} .wa-inner{gap:24px!important;} .wa-left .section-title{font-size:24px!important;line-height:1.15!important;margin-bottom:8px!important;} .wa-left .section-sub{font-size:14px!important;line-height:1.5!important;margin-bottom:14px!important;} .wa-reassurance{display:none!important;} .wa-value-points{display:none!important;} } /* --- */ /* --- */ /* ════════════════════════════════════════════ CARE SYSTEM SECTION ════════════════════════════════════════════ */ .care-system-section { background: #fafaf8; } /* ── Section header ── */ .care-sys-header { max-width: 600px; margin-bottom: 48px; } .care-sys-headline { font-family:var(--font-sans); font-size: clamp(30px, 3.8vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; color: #0a0a0a; margin-bottom: 16px; margin-top: 12px; } .care-sys-sub { font-size: 15px; font-weight: 400; color: #666; line-height: 1.7; max-width: 520px; } /* ── ENGINE: unified system container ── */ .care-engine { border: 1px solid #e3e3df; border-radius: 20px; overflow: hidden; /* Layered premium shadow */ box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05), 0 12px 40px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9); margin-bottom: 40px; position: relative; } /* Faint inner top highlight */ .care-engine::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,.8) 30%, rgba(255,255,255,.8) 70%, transparent 95%); z-index: 1; pointer-events: none; } /* ── FLOW ROW ── */ .care-flow-row { display: flex; align-items: flex-start; gap: 0; padding: 32px 40px; background: #fff; border-bottom: 1px solid #ECECEE; position: relative; overflow: hidden; } /* Directional sweep, very slow, very subtle */ .care-flow-row::after { content: ''; position: absolute; top: 0; bottom: 0; left: -50%; width: 40%; background: linear-gradient(90deg, transparent 0%, rgba(45,155,111,.03) 18%, rgba(45,155,111,.07) 50%, rgba(45,155,111,.03) 82%, transparent 100% ); animation: cs-flow-signal 11s linear infinite; pointer-events: none; will-change: transform; } @keyframes cs-flow-signal { from { transform: translateX(0%); } to { transform: translateX(380%); } } .care-flow-step { flex: 1; min-width: 0; } .care-flow-step--active .care-flow-label { color: #0d0d0d; } .care-flow-num { font-size: 9.5px; font-weight: 700; letter-spacing: .18em; color: #c8c8c4; margin-bottom: 8px; font-family:var(--font-sans); } .care-flow-num--active { color: #2D9B6F; } .care-flow-label { font-size: 14.5px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; letter-spacing: -.025em; } .care-flow-desc { font-size: 11.5px; font-weight: 400; color: #aaa; line-height: 1.5; max-width: 148px; } .care-flow-arrow { flex-shrink: 0; padding: 0 18px; margin-top: 24px; } /* ── ROUTING BRIDGE ── */ .care-bridge { display: flex; align-items: center; gap: 16px; padding: 0 40px; background: #f5f5f3; border-bottom: 1px solid #eaeae6; height: 42px; } .care-bridge-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #dededA 40%, #dededA 60%, transparent); } .care-bridge-label { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; color: #2D9B6F; white-space: nowrap; /* Gentle breathing pulse */ animation: cs-bridge-pulse 4.2s ease-in-out infinite; } @keyframes cs-bridge-pulse { 0%, 100% { opacity: .6; } 50% { opacity: .92; } } /* ── CARE PATHS ── */ .care-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: #fff; } .care-pillar { padding: 0 32px 32px; /* No top padding, top zone handles it */ display: flex; flex-direction: column; border-right: 1px solid #ECECEE; position: relative; transition: background var(--t-slow) ease, border-color .3s ease, box-shadow .3s ease; } .care-pillar:last-child { border-right: none; } /* Hover: tactile premium lift feel within container */ .care-pillar:hover { background: rgba(0,0,0,.012); } .care-pillar--tcm:hover { background: rgba(45,155,111,.04); } .care-pillar:hover .care-pillar-name { color: #000; } .care-pillar:hover .care-pillar-link { color: #1a1a1a; } .care-pillar--tcm:hover .care-pillar-link--primary { color: #1F7A54; } .care-pillar:hover .care-pillar-link svg { opacity: .7; } /* Fixed-height top zone, aligns brand names across all 3 cards */ .care-pillar-top { height: 52px; /* Badge height (24px) + 16px margin-bottom + 12px top breathing room */ display: flex; align-items: flex-end; padding-top: 28px; /* Push badge down from top of card */ margin-bottom: 4px; } .care-pillar-top--empty { /* Invisible spacer, no visual content */ } /* TCM: entry layer signal */ .care-pillar--tcm { background: rgba(45,155,111,.026); border-top: 2px solid rgba(45,155,111,.16); } .care-pillar-entry-badge { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #2D9B6F; background: rgba(45,155,111,.1); border-radius: 100px; padding: 3px 9px; width: fit-content; } /* Brand + name, consistent across all 3 */ .care-pillar-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .care-pillar-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .care-pillar-name { font-family: 'Nunito', sans-serif; font-weight: 900; font-style: italic; font-size: 20px; letter-spacing: -.3px; color: #0d0d0d; line-height: 1; transition: color var(--t-slow) ease; } .care-pillar-role { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #c0c0bc; margin-bottom: 16px; margin-top: 4px; } .care-pillar-desc { font-size: 13px; font-weight: 400; color: #666; line-height: 1.65; margin-bottom: 18px; flex: 1; } .care-pillar-facts { list-style: none; padding: 0; margin: 0 0 22px 0; display: flex; flex-direction: column; gap: 7px; } .care-pillar-facts li { font-size: 11.5px; font-weight: 500; color: #999; padding-left: 13px; position: relative; } .care-pillar-facts li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: #d0d0cc; } .care-pillar-link { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #555; text-decoration: none; letter-spacing: -.01em; transition: gap var(--t-slow) ease, color var(--t-slow) ease; margin-top: auto; } .care-pillar-link:hover { gap: 10px; } .care-pillar-link svg { opacity: .4; transition: opacity var(--t-slow) ease; } .care-pillar-link--primary { color: #2D9B6F; } .care-pillar-link--primary svg { opacity: .55; } /* ── FOOTER ── */ .care-sys-footer { display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 500; color: #bbb; text-align: center; flex-wrap: wrap; gap: 0; } .care-sys-footer-signal { font-weight: 600; color: #999; letter-spacing: .01em; } .care-sys-footer-dot { width: 3px; height: 3px; border-radius: 50%; background: #ddd; margin: 0 14px; flex-shrink: 0; } /* ── STAGGERED SCROLL REVEAL ── */ .cs-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-xl) ease, transform var(--t-xl) cubic-bezier(.22,1,.36,1); } .cs-reveal.cs-visible { opacity: 1; transform: translateY(0); } /* ── RESPONSIVE ── */ @media(max-width:900px){ .care-pillars { grid-template-columns: 1fr; } .care-pillar { border-right: none; border-bottom: 1px solid #ECECEE; padding: 0 24px 28px; } .care-pillar:last-child { border-bottom: none; } .care-flow-row { flex-wrap: wrap; gap: 24px; padding: 28px 24px; } .care-flow-arrow { display: none; } .care-flow-step { flex: 0 0 calc(50% - 12px); } .care-bridge { padding: 0 24px; } } @media(max-width:600px){ .care-sys-header { margin-bottom: 32px; } .care-flow-step { flex: 0 0 100%; } .care-flow-row { padding: 24px 20px; } } /* ── FLAGSHIP HERO (Zürich City) ── */ /* --- */ .care-system-section .signal-inner{max-width:1280px!important;margin:0 auto!important;padding:0 40px!important}.care-system-section .cs-reveal{opacity:1!important;transform:none!important} /* --- */ .inline-form-card,.contact-section-inline,#home-contact-form{scroll-margin-top:112px} /* --- */ .nav-inner{gap:16px} .logo{flex:0 0 auto} .nav-right{display:flex;align-items:center;flex-shrink:0} .nav-cta{white-space:nowrap} .nav-menu-btn{display:flex!important} .nav-links{display:none} @media(min-width:1024px){.nav-links{display:flex}} @media(max-width:520px){nav{padding:0 14px}.nav-cta{min-width:0!important;padding:0 12px!important;font-size:12px!important}.nav-menu-btn{margin-left:6px}.logo-sub{font-size:9px;letter-spacing:.14em}.logo-wm{font-size:20px}.logo-wm .ch{font-size:15px}} .drw-group + .drw-group{border-top:1px solid rgba(0,0,0,.09)} .drw-group--cta{padding:14px 18px 16px} .drw-group--cta .drw-cta-grid{display:flex;flex-direction:column;gap:7px} .drw-group--cta .drw-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:7px} .drw-group--cta .drw-cta-secondary{border:1px solid var(--border)} .nav-util{font-size:13px;font-weight:600;color:var(--mid);text-decoration:none;white-space:nowrap;margin-right:12px;transition:color .15s ease}.nav-util:hover{color:var(--blue)}@media(max-width:640px){.nav-util{display:none}} /* --- */ @media(min-width:1025px){ #home-content .hero-bg{background-image:url('/images/img-1ed25fa21254.webp')!important;background-size:cover!important;background-position:right center!important;background-repeat:no-repeat!important;background-color:transparent!important} #home-content .hero{background:transparent!important} } /* --- */ @media(max-width:1024px){#home-content .hero-right,#home-content .hero-right-picker,#home-content .hero-right-img{display:none !important}} @media(min-width:1025px){ #home-content .hero-bg{background-image:none !important;background-color:#fff !important;min-height:calc(100vh - 68px);height:calc(100vh - 68px);max-height:920px;display:flex;align-items:center} #home-content .hero{grid-template-columns:1.05fr 1fr !important;max-width:var(--max);margin:0 auto;gap:64px;padding:20px 40px;align-items:start;height:100%;width:100%} #home-content .hero-left{padding:0 !important;align-items:flex-start;max-width:540px;border:none !important;background:none !important;margin:0;display:flex;flex-direction:column;justify-content:flex-start;gap:0} #home-content .hero-eyebrow{margin-bottom:14px !important} #home-content .hero-headline{font-size:clamp(34px,3.2vw,48px) !important;letter-spacing:-.035em;line-height:1.03;margin-bottom:14px;font-weight:800} #home-content .hero-headline em{font-size:.92em;margin-top:6px} #home-content .hero-sub{font-size:16px !important;line-height:1.55;max-width:440px;margin-bottom:20px;color:#374151} #home-content .hero-cta-desktop{margin-bottom:14px} #home-content .hero-city-strip{margin-top:18px !important} #home-content .hero-right,#home-content .hero-right-picker{display:flex !important;align-items:center;justify-content:flex-end;padding:0 !important;border:none !important;background:none !important;height:100%;max-height:720px;border-radius:20px;overflow:hidden} #home-content .hero-right-img{width:100%;height:100%;max-height:720px;object-fit:cover;object-position:65% center;border-radius:20px;display:block;box-shadow:0 10px 40px rgba(0,0,0,.08)} #home-content .hero-headline{font-size:clamp(38px,3.6vw,54px) !important;letter-spacing:-.035em;line-height:1.02;margin-bottom:16px;font-weight:800} #home-content .hero-headline em{font-size:.92em;display:inline-block;margin-top:16px} #home-content .hero-sub{font-size:16.5px !important;line-height:1.5;max-width:420px;margin-bottom:16px;color:#374151} .hero-city-strip [aria-label*="Tag der offenen"]{display:none !important} } #home-content .hero-cta-desktop{display:flex !important;flex-direction:column;gap:10px;max-width:420px;width:100%} #home-content .hero-finder-cta{display:none !important} .hcd-primary{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 24px;border-radius:14px;background:#2D9B6F;color:#fff;border:none;font-size:15.5px;font-weight:700;font-family:var(--font-sans);cursor:pointer;box-shadow:0 6px 20px rgba(45,155,111,.32);transition:background .2s,transform .2s,box-shadow .2s;letter-spacing:-.01em} .hcd-primary:hover{background:#1F7A54;transform:translateY(-1px);box-shadow:0 8px 26px rgba(45,155,111,.4)} @media(max-width:1024px){ .hero-city-strip{display:none !important} } .hero-city-strip{display:flex;flex-wrap:wrap;gap:7px;margin-top:26px;align-items:center} .hero-city-strip .hcs-label{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8a9299;margin-right:6px;font-family:var(--font-sans)} .hero-city-strip .hcs-pill{position:relative;background:#fff;border:1px solid #e5e7eb;color:#374151;font-family:var(--font-sans);font-size:13px;font-weight:500;padding:7px 13px;border-radius:100px;cursor:pointer;transition:border-color .2s,color .2s,transform .15s;white-space:nowrap} .hero-city-strip .hcs-pill:hover{border-color:#2D9B6F;color:#1F7A54;transform:translateY(-1px)} .hero-city-strip .hcs-flag{background:rgba(45,155,111,.07);border-color:rgba(45,155,111,.28);color:#1F7A54;font-weight:600} .hero-city-strip .hcs-flag:hover{background:rgba(45,155,111,.12);border-color:#2D9B6F} /* --- */ /* Unified home inter-section rhythm — single source of truth. Targets every top-level content section in #home-content (the direct
s + the one testimonial band). Hero/stats/insurance cluster excluded. */ #home-content>section,#home-content>.home-band{padding-top:var(--section-py)!important;padding-bottom:var(--section-py)!important;margin-top:0!important;margin-bottom:0!important;border-top:0!important;border-bottom:0!important} /* --- */ @media(max-width:640px){ /* Forms: ≥16px prevents iOS focus-zoom (the "form overflow" cause) + ≥44px touch height */ #home-content input,#home-content select,#home-content textarea{font-size:16px!important} #home-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),#home-content select{min-height:46px!important} /* Stats bar: 4 uneven columns -> even 2x2 with a single row divider */ #home-content #stats-bar{grid-template-columns:1fr 1fr!important} #home-content #stats-bar .stat-cell{border-right:none!important;border-bottom:1px solid var(--border)!important} #home-content #stats-bar .stat-cell:nth-last-child(-n+2){border-bottom:none!important} /* Touch targets >=44px */ .faq-tab,.wa-pill,.form-wa-alt-new,.form-phone-alt,.wa-concierge-wa-alt,.kt-cta{min-height:44px} /* Body copy >=14px (uppercase eyebrows/badges stay as design micro-type) */ .svc-tagline,.svc-cta,.review-text,.review-city{font-size:14px!important} /* Fluid media safety net */ #home-content img,#home-content video{max-width:100%!important;height:auto} } /* --- */ .anav-link.active{ color:var(--fg); border-bottom-color:var(--fg); } /* --- */ @media(max-width:860px){.kennst-grid{grid-template-columns:1fr !important}} /* --- */ #s-offer{background:#FFFFFF;padding:clamp(64px,8vw,96px) 24px;border-bottom:1px solid #E5E7EB;font-family:var(--font-sans)} #s-offer .offer-card{max-width:1240px;margin:0 auto;background:linear-gradient(180deg,#EFF8F2 0%,#E8F5ED 100%);border:1px solid rgba(45,155,111,.12);border-radius:24px;padding:clamp(28px,4vw,40px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,56px);align-items:stretch;overflow:hidden}#s-offer .offer-side{display:block;align-self:stretch;min-height:100%}#s-offer .offer-img{width:100%;height:100%;min-height:420px;object-fit:cover;object-position:center;border-radius:16px;display:block;box-shadow:0 8px 32px rgba(0,0,0,.08)}#s-offer .offer-feats-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}#s-offer .offer-feat-pill{background:#fff;border:1px solid rgba(45,155,111,.15);border-radius:100px;padding:7px 14px;font-size:12.5px;font-weight:600;color:#1F7A54;display:inline-flex;align-items:center;gap:6px}#s-offer .offer-feat-pill strong{color:#2D9B6F;font-weight:800} #s-offer .offer-main{min-width:0} #s-offer .offer-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#2D9B6F;margin:0 0 22px;font-family:var(--font-sans)} #s-offer .offer-h2{font-family:var(--font-sans);font-size:clamp(28px,3.2vw,40px);line-height:1.15;letter-spacing:-.025em;font-weight:800;color:#0A0A0A;margin:0 0 20px} #s-offer .offer-h2 em{font-style:italic;font-weight:800;color:#2D9B6F} #s-offer .offer-sub{font-size:16px;line-height:1.65;color:#3A3A3A;margin:0 0 28px;font-weight:400;max-width:520px} #s-offer .offer-bullets{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:14px} .offer-bullets li{display:flex;align-items:center;gap:12px;font-size:15px;color:#374151;line-height:1.5} .offer-bullets li svg{flex-shrink:0} #s-offer .offer-bullets li{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;color:#2A2A2A;line-height:1.5;font-weight:500} #s-offer .offer-bullets svg{flex-shrink:0;margin-top:3px} #s-offer .offer-cta{background:#2D9B6F;color:#fff;border:none;border-radius:999px;padding:15px 28px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:var(--font-sans);transition:transform var(--t-base) ease,background var(--t-base) ease} #s-offer .offer-cta:hover{transform:translateY(-1px);background:#1F7A54} #s-offer .offer-side{display:flex;flex-direction:column;gap:14px} @media(max-width:840px){#s-offer{padding:48px 16px}#s-offer .offer-card{grid-template-columns:1fr;gap:24px;padding:28px 22px;border-radius:20px}#s-offer .offer-img{min-height:280px;aspect-ratio:4/3}} /* --- */ .home-cta-merged .hcm-split{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;text-align:left;max-width:1080px;margin:0 auto}.home-cta-merged .hcm-text{display:flex;flex-direction:column;align-items:flex-start}.home-cta-merged .hcm-text h2{text-align:left;margin-bottom:14px}.home-cta-merged .hcm-text > p{text-align:left;margin-left:0;margin-right:0;max-width:none}.home-cta-merged .cta-band-btns{justify-content:flex-start}.home-cta-merged .hcm-photo{width:100%;border-radius:20px;overflow:hidden;background:transparent}.home-cta-merged .hcm-photo img{width:auto;max-width:100%;height:auto;max-height:340px;object-fit:contain;object-position:right center;display:block;margin-left:auto}@media(max-width:900px){.home-cta-merged .hcm-split{grid-template-columns:1fr;gap:32px;text-align:center}.home-cta-merged .hcm-text{align-items:center}.home-cta-merged .hcm-text h2,.home-cta-merged .hcm-text > p{text-align:center}.home-cta-merged .cta-band-btns{justify-content:center}.home-cta-merged .hcm-photo{order:-1;max-width:380px;margin:0 auto}} /* --- */ .wissen-hero{background:linear-gradient(180deg,#fafbfc 0%,#fff 100%);padding:clamp(100px,12vw,160px) 24px clamp(60px,8vw,90px);border-bottom:1px solid var(--border)} .wissen-hero-inner{max-width:1180px;margin:0 auto;text-align:center} .wissen-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#2D9B6F;margin-bottom:20px;font-family:var(--font-sans)} .wissen-eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:#2D9B6F} .wissen-h1{font-family:var(--font-sans);font-size:clamp(38px,5vw,62px);line-height:1.05;letter-spacing:-.035em;font-weight:800;color:#0d0d0d;margin:0 0 22px} .wissen-h1 em{font-style:italic;font-weight:700;color:#2D9B6F} .wissen-sub{font-size:clamp(16px,1.4vw,18.5px);line-height:1.6;color:#545e6b;max-width:680px;margin:0 auto 8px;font-family:var(--font-sans)} .wissen-meta{display:inline-flex;gap:20px;margin-top:28px;font-size:13px;color:#8a9299;font-family:var(--font-sans);flex-wrap:wrap;justify-content:center} .wissen-meta span{display:inline-flex;align-items:center;gap:6px} .wissen-meta-dot{width:4px;height:4px;border-radius:50%;background:#2D9B6F} .wissen-section{padding:clamp(60px,8vw,100px) 24px;background:#fff} .wissen-wrap{max-width:1180px;margin:0 auto} .wissen-section-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#2D9B6F;margin-bottom:14px;font-family:var(--font-sans)} .wissen-section-title{font-family:var(--font-sans);font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-.025em;font-weight:800;color:#0d0d0d;margin:0 0 14px} .wissen-section-sub{font-size:16px;line-height:1.65;color:#545e6b;max-width:620px;margin:0 0 48px;font-family:var(--font-sans)} .wissen-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:80px} .wissen-pillar{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:18px;padding:32px 28px;transition:all var(--t-base) ease} .wissen-pillar:hover{border-color:rgba(45,155,111,.3);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.05)} .wissen-pillar-icon{width:44px;height:44px;border-radius:12px;background:rgba(45,155,111,.08);display:flex;align-items:center;justify-content:center;margin-bottom:18px} .wissen-pillar-icon svg{stroke:#2D9B6F} .wissen-pillar-name{font-family:var(--font-sans);font-size:17px;font-weight:700;color:#0d0d0d;margin:0 0 8px;letter-spacing:-.015em} .wissen-pillar-desc{font-size:14px;line-height:1.55;color:#545e6b;margin:0;font-family:var(--font-sans)} .wissen-articles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .wissen-article{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:18px;overflow:hidden;cursor:pointer;transition:all var(--t-base) ease;display:flex;flex-direction:column} .wissen-article:hover{border-color:rgba(45,155,111,.3);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.06)} .wissen-article-img{aspect-ratio:16/10;background:#f5f6f7;background-size:cover;background-position:center;position:relative} .wissen-article-cat{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);padding:6px 12px;border-radius:100px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#2D9B6F;font-family:var(--font-sans)} .wissen-article-body{padding:24px;display:flex;flex-direction:column;flex:1} .wissen-article-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:#8a9299;margin-bottom:12px;font-family:var(--font-sans);flex-wrap:wrap} .wissen-article-meta-dot{width:3px;height:3px;border-radius:50%;background:#c0c5cc} .wissen-article-date{color:inherit;font-weight:inherit} .wissen-article-title{font-family:var(--font-sans);font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.015em;color:#0d0d0d;margin:0 0 12px} .wissen-article-excerpt{font-size:14.5px;line-height:1.55;color:#545e6b;margin:0 0 18px;font-family:var(--font-sans);flex:1} .wissen-article-cta{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:#2D9B6F;font-family:var(--font-sans);letter-spacing:.01em} .wissen-article-cta svg{transition:transform var(--t-fast) ease} .wissen-article:hover .wissen-article-cta svg{transform:translateX(3px)} @media(max-width:920px){.wissen-pillars,.wissen-articles{grid-template-columns:1fr}} /* --- */ .wa-pullquote{margin:36px 0;padding:24px 28px;background:#fafbfc;border-left:3px solid #2D9B6F;border-radius:0 12px 12px 0;font-size:18px;line-height:1.55;color:#0d0d0d;font-weight:500;font-style:italic;letter-spacing:-.005em} .wa-callout{margin:32px 0;padding:22px 26px;background:rgba(45,155,111,.04);border:1px solid rgba(45,155,111,.18);border-radius:14px} .wa-callout-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#2D9B6F;margin-bottom:10px} .wa-callout p{font-size:15px;margin:0;color:#3a4452} .wa-faq-item.open .wa-faq-ico{transform:rotate(45deg);background:#2D9B6F;color:#fff} .wa-faq-item.open .wa-faq-a{display:block} /* --- */ /* ── BX: Beschwerden Flagship Page ── */ /* Hero */ .bx-hero{background:#fff;padding:56px 0 0;border-bottom:1px solid var(--border)} .bx-hero-inner{max-width:680px;margin:0 auto;text-align:center} /* Eyebrow */ .bx-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue);margin-bottom:16px} .bx-eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);animation:bx-pulse 2.8s ease-in-out infinite;flex-shrink:0} @keyframes bx-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}} /* Headline */ .bx-headline{font-size:clamp(30px,3.8vw,50px);font-weight:800;line-height:1.08;color:var(--black);margin-bottom:14px;letter-spacing:-.04em} .bx-headline em{font-style:italic;font-weight:700;color:var(--blue);font-family:inherit} /* Sub */ .bx-sub{font-size:16.5px;font-weight:400;line-height:1.75;color:var(--mid);margin-bottom:28px;max-width:560px;margin-left:auto;margin-right:auto} /* Stats */ .bx-stats-row{display:flex;gap:20px;justify-content:center;margin-bottom:28px;flex-wrap:wrap} .bx-stat{font-size:12.5px;font-weight:600;color:var(--mid);display:flex;align-items:center;gap:5px} .bx-stat-dot{width:4px;height:4px;border-radius:50%;background:var(--blue);flex-shrink:0} /* Search, command center */ .bx-search-label{display:none} .bx-search-wrap{margin-bottom:22px;position:relative} .bx-search-box{ position:relative;display:flex;align-items:center; background:#fff;border:2px solid #d0d0d0;border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.06); transition:border-color var(--t-base),box-shadow var(--t-base); } .bx-search-box:focus-within{ border-color:var(--blue); box-shadow:0 4px 32px rgba(45,155,111,.16),0 1px 4px rgba(0,0,0,.04); } .bx-search-icon{position:absolute;left:22px;color:#b8b8b8;flex-shrink:0;pointer-events:none;transition:color var(--t-base)} .bx-search-box:focus-within .bx-search-icon{color:var(--blue)} .bx-search-box input{ width:100%;border:none;outline:none; font-size:17px;font-weight:400;color:var(--black); padding:22px 56px 22px 58px;background:transparent;line-height:1.6; font-family:var(--font-sans); } .bx-search-box input::placeholder{color:#bbb} .bx-search-clear{position:absolute;right:18px;width:28px;height:28px;border-radius:50%;border:none;background:var(--surface);color:var(--muted);cursor:pointer;display:none;align-items:center;justify-content:center;transition:background var(--t-fast)} .bx-search-clear:hover{background:#e4e4e4} .bx-search-clear.visible{display:flex} .bx-search-results{display:none;background:#fff;border:1.5px solid var(--border);border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.05);margin-top:6px;overflow:hidden;text-align:left;max-height:320px;overflow-y:auto;position:relative;z-index:20} .bx-search-results.active{display:block} /* Chips */ .bx-hero-chips-wrap{padding-bottom:22px} .bx-hero-chips-label{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .bx-hero-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .bx-hchip{display:inline-flex;align-items:center;padding:8px 16px;border-radius:100px;border:1.5px solid #e0e0e0;background:#fff;font-size:13.5px;font-weight:600;color:var(--charcoal);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.04);transition:border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);white-space:nowrap} .bx-hchip:hover{border-color:var(--blue);color:var(--blue-dark);box-shadow:0 4px 14px rgba(45,155,111,.14);transform:translateY(-1px)} .bx-hchip.live{border-color:rgba(45,155,111,.35);background:var(--blue-light);color:var(--blue-dark)} /* A-Z strip, subtle utility bar */ .bx-hero-az{display:flex;align-items:center;border-top:1px solid var(--border);padding:10px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .bx-hero-az::-webkit-scrollbar{display:none} .bx-hero-az-label{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#bbb;margin-right:12px;white-space:nowrap;flex-shrink:0} .bx-hero-az-letters{display:flex;gap:1px;flex:1;justify-content:center} .bx-hero-az-l{min-width:24px;height:24px;border-radius:4px;border:none;background:transparent;font-size:12px;font-weight:600;color:#bbb;cursor:pointer;transition:background var(--t-fast),color var(--t-fast);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .bx-hero-az-l:hover{background:var(--blue-light);color:var(--blue-dark)} .bx-hero-az-l.dim{opacity:.18;cursor:default;pointer-events:none} /* Fallback row */ .bx-fallback-row{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 0 18px;font-size:13px;font-weight:400;color:var(--muted);flex-wrap:wrap} .bx-fallback-row a,.bx-fallback-row button{background:none;border:none;font-size:13px;font-weight:600;color:var(--blue);cursor:pointer;padding:0;transition:opacity var(--t-fast)} .bx-fallback-row a:hover,.bx-fallback-row button:hover{opacity:.7} .bx-fallback-sep{opacity:.3;margin:0 2px} .bx-popular{display:none} /* Category panels */ .bx-categories{padding:72px 0 64px;background:var(--surface)} .bx-sec-header{margin-bottom:36px} .bx-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} @media(max-width:700px){.bx-cat-grid{grid-template-columns:1fr;gap:10px}} .bx-cat-panel{background:#fff;border:1px solid #ebebeb;border-radius:14px;overflow:hidden;transition:border-color var(--t-base),box-shadow var(--t-base)} .bx-cat-panel:hover{border-color:rgba(45,155,111,.25);box-shadow:0 4px 24px rgba(45,155,111,.07)} .bx-cat-panel-head{ display:flex;align-items:flex-start;justify-content:space-between; padding:16px 18px 14px;border-bottom:1px solid #f0f0f0; } .bx-cat-panel-headleft{display:flex;align-items:flex-start;gap:11px} .bx-cat-panel-icon{ width:32px;height:32px;background:rgba(45,155,111,.09);border-radius:8px; display:flex;align-items:center;justify-content:center; color:var(--blue);flex-shrink:0;margin-top:1px; } .bx-cat-panel-info{display:flex;flex-direction:column;gap:2px} .bx-cat-panel-label{font-size:13.5px;font-weight:700;color:var(--black);letter-spacing:-.015em;line-height:1.3} .bx-cat-panel-desc{font-size:12px;font-weight:400;color:var(--muted);line-height:1.45} .bx-cat-panel-az{ display:inline-flex;align-items:center;gap:3px; font-size:11px;font-weight:600;color:#bbb; background:none;border:none;cursor:pointer;padding:2px 0 0; transition:color var(--t-fast);white-space:nowrap;flex-shrink:0; font-family:var(--font-sans); } .bx-cat-panel-az:hover{color:var(--blue)} .bx-cat-links{padding:6px 0} .bx-cat-link{ display:flex;align-items:center;justify-content:space-between; padding:10px 18px;cursor:pointer; transition:background var(--t-fast); text-decoration:none; } .bx-cat-link:hover{background:var(--blue-light)} .bx-cat-link-name{font-size:13.5px;font-weight:500;color:var(--charcoal);line-height:1.3} .bx-cat-link-name.is-live{font-weight:600;color:var(--black)} .bx-cat-link-arrow{color:#ddd;flex-shrink:0;transition:color var(--t-fast);margin-left:8px} .bx-cat-link:hover .bx-cat-link-arrow{color:var(--blue)} .bx-cat-expand-row{padding:10px 18px 14px;border-top:1px solid #f4f4f4} .bx-cat-expand-btn{ display:inline-flex;align-items:center;gap:5px; font-size:12px;font-weight:600;color:#aaa; background:none;border:none;cursor:pointer;padding:0; font-family:var(--font-sans); transition:color var(--t-fast); } .bx-cat-expand-btn:hover{color:var(--blue)} .bx-cat-hidden{display:none} .bx-cat-hidden.open{display:block} /* Directory, secondary utility layer */ .bx-directory{padding:56px 0 48px;background:#fff;border-top:1px solid var(--border)} .bx-az-nav{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:24px} .bx-az-btn{min-width:30px;height:30px;border-radius:5px;border:1px solid #eeeeee;background:transparent;font-size:12.5px;font-weight:600;color:#c0c0c0;cursor:pointer;transition:all var(--t-fast);display:inline-flex;align-items:center;justify-content:center;padding:0 3px} .bx-az-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)} .bx-az-btn.has-items{color:var(--mid);border-color:#e8e8e8} .bx-az-btn.disabled{opacity:.15;cursor:default;pointer-events:none} .bx-letter-group{margin-bottom:24px;scroll-margin-top:72px} .bx-letter-group.hidden{display:none} .bx-letter-heading{font-size:10.5px;font-weight:700;color:#bbb;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #f0f0f0;letter-spacing:1.4px;text-transform:uppercase} .bx-complaint-list{display:grid;grid-template-columns:repeat(3,1fr);gap:4px} @media(max-width:900px){.bx-complaint-list{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.bx-complaint-list{grid-template-columns:1fr}} .bx-complaint-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid #f0f0f0;border-radius:8px;background:#fff;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)} .bx-complaint-row:hover{border-color:rgba(45,155,111,.3);background:var(--blue-light)} .bx-cr-left{min-width:0;flex:1} .bx-cr-name{font-size:13.5px;font-weight:500;color:var(--charcoal);line-height:1.35} .bx-complaint-row.bx-live .bx-cr-name{font-weight:600;color:var(--black)} .bx-cr-badge{font-size:10px;font-weight:600;color:var(--blue);letter-spacing:.04em;margin-top:1px;display:block;opacity:.7} .bx-cr-arrow{color:#e0e0e0;transition:transform var(--t-fast),color var(--t-fast);flex-shrink:0;margin-left:8px} .bx-complaint-row:hover .bx-cr-arrow{transform:translateX(3px);color:var(--blue)} /* Not sure */ .bx-not-sure{padding:48px 0;background:var(--surface);text-align:center;border-top:1px solid var(--border)} .bx-not-sure h2{font-size:clamp(24px,3.2vw,38px);font-weight:800;color:var(--black);margin-bottom:10px;letter-spacing:-.03em;line-height:1.15} .bx-not-sure p{font-size:15.5px;font-weight:400;color:var(--mid);margin-bottom:24px;max-width:460px;margin-left:auto;margin-right:auto;line-height:1.7} .bx-not-sure-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} /* Trust footer */ .bx-trust-footer{padding:48px 0;background:#fff;border-top:1px solid var(--border)} .bx-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} @media(max-width:700px){.bx-trust-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:380px){.bx-trust-grid{grid-template-columns:1fr}} .bx-trust-item{text-align:center;padding:14px 10px;border:1px solid #f0f0f0;border-radius:10px;background:var(--surface)} .bx-trust-icon{width:26px;height:26px;margin:0 auto 7px;color:var(--blue)} .bx-trust-title{font-size:12.5px;font-weight:700;color:var(--black);margin-bottom:2px} .bx-trust-sub{font-size:11.5px;font-weight:400;color:var(--muted);line-height:1.5} /* Reveal */ .bx-reveal{opacity:0;transform:translateY(10px);transition:opacity var(--t-slow) ease,transform var(--t-slow) ease} .bx-reveal.visible{opacity:1;transform:translateY(0)} /* Filter bar */ /* Mobile */ @media(max-width:600px){ .bx-hero{padding:32px 0 0} .bx-stats-row{gap:10px} .bx-hchip{font-size:13px;padding:8px 14px} .bx-hero-chips{gap:7px} .bx-sub{font-size:15px} .bx-not-sure-btns{flex-direction:column;align-items:center} .bx-not-sure-btns .btn-primary,.bx-not-sure-btns .btn-secondary{width:100%;max-width:300px;justify-content:center;text-align:center} .bx-hero-az-l{min-width:20px;height:20px;font-size:10.5px} .bx-fallback-row{gap:4px} .bx-cat-link{padding:12px 16px} .bx-cat-link-name{font-size:14px} .bx-complaint-row{padding:11px 12px} .bx-categories{padding:48px 0 40px} .bx-directory{padding:40px 0 36px} } /* Legacy pills hidden */ .bx-pills{display:flex;flex-wrap:wrap;gap:9px} .bx-pill{display:none} /* --- */ /* ════════════════════════════════════════ KARRIERE, fully aligned to tcm.ch brand ════════════════════════════════════════ */ /* Wrap matches main .wrap exactly */ /* ── INNER NAV: matches main nav language ── */ /* ── SECTION SYSTEM: matches main .section rhythm ── */ /* ── TYPOGRAPHY: exact tcm.ch brand matches ── */ /* section-label */ /* section-title h1 (hero scale) */ /* section-title h2 */ /* section-sub */ /* body copy */ /* eyebrow pill */ /* ── HERO: matches main hero language ── */ /* Hero right: cards panel */ /* ── BUTTONS: exact clones of main site ── */ /* ── VISION SECTION ── */ /* ── WHY CARDS: matches .content-card language ── */ /* ── WHO WE'RE LOOKING FOR ── */ /* ── ROLE CARDS: matches .content-card ── */ /* ── GROWTH PATH ── */ /* ── WHY NOW (dark section): matches .wa-section ── */ /* ── LOCATIONS ── */ /* ── APPLY FORM ── */ /* Form card */ /* ── FINAL CTA: matches .wa-section / .cta-band language ── */ /* ── SCROLL REVEAL ── */ .kar-reveal.kar-visible{opacity:1;transform:translateY(0)} /* ── KAR-OVERLAY modal system ── */ #kar-overlay{ position:fixed;inset:0;z-index:9990; visibility:hidden;pointer-events:none; background:#fff; overflow-y:auto;overflow-x:hidden; opacity:0;transform:translateY(24px) scale(.996); transition:transform var(--t-slow) cubic-bezier(.22,1,.36,1),opacity var(--t-slow) ease,visibility 0s var(--t-slow); scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.08) transparent; } #kar-overlay.open{ visibility:visible;pointer-events:all; opacity:1;transform:translateY(0) scale(1); transition:transform var(--t-slow) cubic-bezier(.22,1,.36,1),opacity var(--t-slow) ease,visibility 0s 0s; } @media(prefers-reduced-motion:reduce){ #kar-overlay{transition:opacity var(--t-base) ease,visibility 0s var(--t-base)} #kar-overlay.open{transition:opacity var(--t-base) ease,visibility 0s 0s} } /* --- */ .kk-page{max-width:var(--max);margin:0 auto;padding:24px 32px 80px} .kk-page .breadcrumb{margin:18px 0 8px} .kk-page .sub-eyebrow{margin-top:14px} .kk-page .sub-title{margin:6px 0 0;font-size:32px} .kk-tldr{font-size:17px;line-height:1.6;color:var(--mid);background:var(--blue-light);border-radius:14px;padding:18px 20px;margin:18px 0} .kk-sec{margin-top:40px} .kk-sec h2{font-family:var(--font-sans);font-size:24px;font-weight:800;color:#0d0d0d;letter-spacing:-.02em;margin:0 0 12px} .kk-sec>p{color:var(--mid);line-height:1.6} .kk-hint{font-size:14px;color:var(--mid);font-style:italic;margin-top:12px} .kk-link{color:var(--blue);font-weight:600;text-decoration:none} .kk-link:hover{color:var(--blue-dark)} .kk-table-wrap{overflow-x:auto;margin:16px 0} .kk-table{width:100%;border-collapse:collapse;font-family:var(--font-sans);font-size:15px;min-width:560px} .kk-table th,.kk-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--mid)} .kk-table th{font-weight:700;color:#0d0d0d;background:var(--blue-light);font-size:12px;text-transform:uppercase;letter-spacing:.05em} .kk-table tr.kk-row{cursor:pointer;transition:background var(--t-base)} .kk-table tr.kk-row:hover{background:rgba(45,155,111,.06)} .kk-table tr.kk-grouprow td{background:#f2f7f4;font-family:var(--font-sans);font-weight:800;color:var(--blue-dark);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:11px 16px} .kk-table a{color:var(--blue);font-weight:600;text-decoration:none;white-space:nowrap} .kk-faq{margin-top:8px} .kk-faq-item{border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:10px} .kk-faq-item summary{cursor:pointer;font-family:var(--font-sans);font-weight:700;color:#0d0d0d;list-style:none} .kk-faq-item summary::-webkit-details-marker{display:none} .kk-faq-item[open] summary{margin-bottom:8px} .kk-faq-a{color:var(--mid);line-height:1.6} .kk-hero{position:relative} .kk-hero img{width:100%;height:auto;display:block;border-radius:16px} .kk-hero__copy{position:absolute;top:50%;left:5%;transform:translateY(-50%);max-width:42%} .kk-hero__copy h1{font-family:var(--font-sans);font-size:34px;font-weight:800;letter-spacing:-.02em;color:#0d0d0d;margin:0 0 10px;line-height:1.12} .kk-hero__copy p{font-size:18px;color:var(--mid);margin:0 0 18px} .kk-hero .cta{display:inline-flex;align-items:center;background:var(--blue);color:#fff;font-family:var(--font-sans);font-weight:700;font-size:15px;padding:12px 24px;border-radius:100px;text-decoration:none;transition:background var(--t-base)} .kk-hero .cta:hover{background:var(--blue-dark)} @media(max-width:640px){.kk-hero__copy{position:static;transform:none;max-width:100%;padding:1rem 0}.kk-hero__copy h1{font-size:26px}} .kk-hero .cta--ghost{background:transparent;color:var(--blue-dark);border:1.5px solid var(--blue);margin-left:10px;margin-top:8px} .kk-hero .cta--ghost:hover{background:var(--blue-light)} .kk-rechner{margin:28px 0 8px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:28px;scroll-margin-top:90px} .kk-rechner__head h2{font-family:var(--font-sans);font-size:24px;font-weight:800;color:#0d0d0d;letter-spacing:-.02em;margin:0 0 8px} .kk-rechner__head p{color:var(--mid);line-height:1.6;margin:0 0 20px;max-width:640px} .kk-rechner__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start} .kk-rechner__form{display:flex;flex-direction:column;gap:16px} .kkr-field{display:flex;flex-direction:column} .kkr-field label{font-family:var(--font-sans);font-weight:700;font-size:14px;color:#0d0d0d;margin-bottom:6px} .kkr-field select,.kkr-field input{font-family:var(--font-sans);font-size:15px;color:#0d0d0d;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:#fff;width:100%} .kkr-field select:focus,.kkr-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,155,111,.12)} .kkr-help{font-size:12.5px;color:var(--mid);margin:6px 0 0;line-height:1.5} .kkr-hint{font-size:13px;color:var(--blue-dark);background:var(--blue-light);border-radius:8px;padding:9px 12px;margin:8px 0 0;line-height:1.5} .kk-rechner__result{background:var(--blue-light);border-radius:14px;padding:22px;align-self:stretch} .kkr-out{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid rgba(31,122,84,.14)} .kkr-out-label{font-family:var(--font-sans);font-size:14px;color:var(--mid)} .kkr-out-val{font-family:var(--font-sans);font-size:20px;color:#0d0d0d;white-space:nowrap} .kkr-out-val strong{font-weight:800} .kkr-out--emph{border-bottom:none;padding-top:14px} .kkr-out--emph .kkr-out-label{color:#0d0d0d;font-weight:700} .kkr-out--emph .kkr-out-val{color:var(--blue);font-size:28px} .kkr-disclaimer{font-size:12.5px;color:var(--mid);font-style:italic;line-height:1.5;margin:14px 0 16px} .kkr-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .kkr-field-label{font-family:var(--font-sans);font-weight:700;font-size:14px;color:#0d0d0d;margin-bottom:6px} .kkr-fixed{font-family:var(--font-sans);font-size:16px;font-weight:800;color:#0d0d0d;padding:11px 13px;border:1px dashed var(--blue);border-radius:10px;background:#fafbfa} .kkr-fixed span{font-weight:500;font-size:13px;color:var(--mid)} .kkr-headline{font-family:var(--font-sans);font-size:17px;font-weight:700;color:#0d0d0d;line-height:1.45;margin:0 0 16px} .kkr-note{font-size:13px;color:#8a5a00;background:#fff6e6;border:1px solid #f0d9a8;border-radius:10px;padding:11px 13px;margin:12px 0 0;line-height:1.5} @media(max-width:760px){.kk-rechner__grid{grid-template-columns:1fr}.kk-rechner{padding:20px}.kkr-field input,.kkr-field select{padding:13px}} /* --- */ #page-longevity{ --lng-forest:#0a1d12; --lng-forest-2:#122922; --lng-cream:#faf7f2; --lng-cream-2:#f4efe6; --lng-champagne:#c9a96e; --lng-champagne-soft:rgba(201,169,110,.18); --lng-champagne-line:rgba(201,169,110,.28); --lng-text-dark:#1a1a1a; --lng-text-mid:#4a4a4a; --lng-text-muted:#8a8a85; --lng-text-light:#e8e2d4; --lng-text-light-muted:rgba(232,226,212,.65); --lng-text-light-dim:rgba(232,226,212,.38); --lng-hairline-light:rgba(10,29,18,.08); --lng-hairline-dark:rgba(232,226,212,.1); font-family:var(--font-sans);color:var(--lng-text-dark);background:var(--lng-cream); } #page-longevity .lng-hero{background:linear-gradient(160deg,var(--lng-forest) 0%,var(--lng-forest-2) 100%);color:var(--lng-text-light);padding:clamp(80px,12vw,140px) 32px clamp(70px,10vw,110px);position:relative;overflow:hidden} #page-longevity .lng-hero::before{content:"";position:absolute;top:-20%;right:-10%;width:60%;height:140%;background:radial-gradient(circle at center,rgba(201,169,110,.08) 0%,transparent 60%);pointer-events:none} #page-longevity .lng-hero-inner{max-width:1180px;margin:0 auto;position:relative;z-index:2} #page-longevity .lng-eyebrow{display:inline-flex;align-items:center;gap:10px;background:rgba(201,169,110,.1);border:1px solid var(--lng-champagne-line);border-radius:999px;padding:7px 16px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--lng-champagne);margin-bottom:32px} #page-longevity .lng-eyebrow::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lng-champagne)} #page-longevity .lng-h1{font-size:clamp(40px,6vw,76px);font-weight:300;letter-spacing:-.025em;line-height:1.05;color:#fff;margin:0 0 28px;max-width:920px} #page-longevity .lng-h1 em{font-style:italic;color:var(--lng-champagne);font-weight:300} #page-longevity .lng-lead{font-size:clamp(17px,1.6vw,21px);line-height:1.6;color:var(--lng-text-light-muted);font-weight:300;max-width:680px;margin:0 0 44px} #page-longevity .lng-hero-meta{display:flex;flex-wrap:wrap;gap:28px;padding-top:36px;border-top:1px solid var(--lng-hairline-dark)} #page-longevity .lng-meta-item{display:flex;flex-direction:column;gap:4px} #page-longevity .lng-meta-num{font-size:28px;font-weight:300;color:#fff;letter-spacing:-.02em} #page-longevity .lng-meta-label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--lng-text-light-dim)} #page-longevity .lng-section{padding:clamp(70px,9vw,110px) 32px;max-width:1180px;margin:0 auto} #page-longevity .lng-section-dark{background:var(--lng-forest);color:var(--lng-text-light);max-width:none;margin:0} #page-longevity .lng-section-dark .lng-section-inner{max-width:1180px;margin:0 auto} #page-longevity .lng-section-cream{background:var(--lng-cream-2)} #page-longevity .lng-section-label{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--lng-champagne);margin-bottom:18px;display:inline-flex;align-items:center;gap:8px} #page-longevity .lng-section-label::before{content:"";display:inline-block;width:18px;height:1px;background:var(--lng-champagne)} #page-longevity .lng-h2{font-size:clamp(30px,4vw,46px);font-weight:300;letter-spacing:-.02em;line-height:1.15;color:var(--lng-text-dark);margin:0 0 24px;max-width:780px} #page-longevity .lng-h2 em{font-style:italic;color:var(--lng-champagne);font-weight:300} #page-longevity .lng-section-dark .lng-h2{color:#fff} #page-longevity .lng-body{font-size:17px;line-height:1.7;color:var(--lng-text-mid);font-weight:300;max-width:680px;margin:0 0 24px} #page-longevity .lng-section-dark .lng-body{color:var(--lng-text-light-muted)} #page-longevity .lng-thesis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:56px} #page-longevity .lng-thesis-card{background:#fff;border:1px solid var(--lng-hairline-light);border-radius:18px;padding:36px 32px;transition:border-color var(--t-base),transform var(--t-base),box-shadow var(--t-base)} #page-longevity .lng-thesis-card:hover{border-color:var(--lng-champagne-line);transform:translateY(-3px);box-shadow:0 18px 60px rgba(10,29,18,.06)} #page-longevity .lng-thesis-num{font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--lng-champagne);margin-bottom:18px} #page-longevity .lng-thesis-title{font-size:21px;font-weight:400;letter-spacing:-.01em;line-height:1.3;color:var(--lng-text-dark);margin-bottom:14px} #page-longevity .lng-thesis-body{font-size:15px;line-height:1.65;color:var(--lng-text-mid);font-weight:300} #page-longevity .lng-pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border:1px solid var(--lng-champagne-line);border-radius:20px;overflow:hidden;background:var(--lng-forest-2)} #page-longevity .lng-pillar{padding:44px 36px;border-right:1px solid var(--lng-hairline-dark)} #page-longevity .lng-pillar:last-child{border-right:none} #page-longevity .lng-pillar-icon{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--lng-champagne);margin-bottom:20px;text-transform:uppercase} #page-longevity .lng-pillar-title{font-size:24px;font-weight:300;letter-spacing:-.01em;color:#fff;margin-bottom:14px;line-height:1.25} #page-longevity .lng-pillar-title em{font-style:italic;color:var(--lng-champagne);font-weight:300} #page-longevity .lng-pillar-body{font-size:14.5px;line-height:1.65;color:var(--lng-text-light-muted);font-weight:300} #page-longevity .lng-zh-feature{background:linear-gradient(135deg,var(--lng-forest) 0%,var(--lng-forest-2) 100%);border:1px solid var(--lng-champagne-line);border-radius:22px;padding:56px 52px;margin-top:56px;color:var(--lng-text-light);display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center} #page-longevity .lng-zh-tag{display:inline-flex;align-items:center;gap:8px;background:var(--lng-champagne-soft);border:1px solid var(--lng-champagne-line);border-radius:999px;padding:6px 14px;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--lng-champagne);margin-bottom:20px} #page-longevity .lng-zh-title{font-size:30px;font-weight:300;color:#fff;letter-spacing:-.02em;line-height:1.2;margin-bottom:16px} #page-longevity .lng-zh-title em{font-style:italic;color:var(--lng-champagne);font-weight:300} #page-longevity .lng-zh-body{font-size:15.5px;line-height:1.65;color:var(--lng-text-light-muted);font-weight:300;margin-bottom:24px} #page-longevity .lng-zh-cta{display:inline-flex;align-items:center;gap:10px;background:var(--lng-champagne);color:#1a1a1a;padding:15px 28px;border-radius:999px;font-size:14px;font-weight:600;border:none;cursor:pointer;letter-spacing:.01em;transition:filter var(--t-base),transform var(--t-base);box-shadow:0 6px 28px rgba(201,169,110,.22)} #page-longevity .lng-zh-cta:hover{filter:brightness(1.08);transform:translateY(-1px)} #page-longevity .lng-credibility{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px;padding:44px 0;border-top:1px solid var(--lng-hairline-light);border-bottom:1px solid var(--lng-hairline-light)} #page-longevity .lng-cred-item{text-align:left} #page-longevity .lng-cred-num{font-size:42px;font-weight:300;color:var(--lng-text-dark);letter-spacing:-.02em;line-height:1;margin-bottom:8px} #page-longevity .lng-cred-num em{font-style:italic;color:var(--lng-champagne);font-weight:300} #page-longevity .lng-cred-label{font-size:13px;font-weight:400;color:var(--lng-text-mid);line-height:1.45} #page-longevity .lng-cta-block{background:var(--lng-forest);color:var(--lng-text-light);border-radius:22px;padding:60px 52px;margin-top:64px;text-align:center} #page-longevity .lng-cta-block .lng-h2{color:#fff;margin:0 auto 18px;max-width:600px} #page-longevity .lng-cta-block .lng-body{color:var(--lng-text-light-muted);margin:0 auto 32px;max-width:520px} #page-longevity .lng-cta-row{display:inline-flex;gap:14px;flex-wrap:wrap;justify-content:center} #page-longevity .lng-cta-primary{display:inline-flex;align-items:center;gap:9px;background:var(--lng-champagne);color:#1a1a1a;padding:15px 30px;border-radius:999px;font-size:14px;font-weight:600;border:none;cursor:pointer;letter-spacing:.01em;transition:filter var(--t-base),transform var(--t-base)} #page-longevity .lng-cta-primary:hover{filter:brightness(1.08);transform:translateY(-1px)} #page-longevity .lng-cta-ghost{display:inline-flex;align-items:center;gap:9px;background:transparent;color:#fff;padding:15px 30px;border-radius:999px;font-size:14px;font-weight:500;border:1px solid var(--lng-champagne-line);cursor:pointer;letter-spacing:.01em;transition:border-color var(--t-base),background var(--t-base)} #page-longevity .lng-cta-ghost:hover{border-color:var(--lng-champagne);background:rgba(201,169,110,.08)} #page-longevity .lng-press-note{background:var(--lng-cream-2);border:1px solid var(--lng-hairline-light);border-left:3px solid var(--lng-champagne);border-radius:6px;padding:24px 28px;margin-top:48px;max-width:780px} #page-longevity .lng-press-label{font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--lng-champagne);margin-bottom:10px} #page-longevity .lng-press-text{font-size:15px;line-height:1.65;color:var(--lng-text-mid);font-weight:300} #page-longevity .lng-press-text a{color:var(--lng-text-dark);font-weight:500;text-decoration:none;border-bottom:1px solid var(--lng-champagne-line)} @media(max-width:880px){ #page-longevity .lng-thesis-grid, #page-longevity .lng-pillar-grid{grid-template-columns:1fr} #page-longevity .lng-pillar{border-right:none;border-bottom:1px solid var(--lng-hairline-dark)} #page-longevity .lng-pillar:last-child{border-bottom:none} #page-longevity .lng-zh-feature{grid-template-columns:1fr;padding:40px 32px} #page-longevity .lng-credibility{grid-template-columns:repeat(2,1fr)} #page-longevity .lng-cta-block{padding:44px 28px} } /* --- */ #page-zuerich-longevity .lng-wrap{max-width:1180px;margin:0 auto;padding:0 40px;width:100%} #page-zuerich-longevity .lng-wrap-narrow{max-width:920px;margin:0 auto;padding:0 40px;width:100%} #page-zuerich-longevity .lng-eyebrow{font-family:var(--font-sans);font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--lng-champagne);display:inline-flex;align-items:center;gap:10px} #page-zuerich-longevity .lng-eyebrow::before{content:'';display:inline-block;width:18px;height:1px;background:var(--lng-champagne);opacity:.7} #page-zuerich-longevity .lng-eyebrow-light{color:var(--lng-champagne)} /* ── HERO ── */ #page-zuerich-longevity .lng-hero{background:var(--lng-forest);color:var(--lng-text-light);padding:120px 0 96px;position:relative;overflow:hidden;border-bottom:1px solid var(--lng-champagne-soft)} #page-zuerich-longevity .lng-hero::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,110,.05) 0%,transparent 65%);pointer-events:none} #page-zuerich-longevity .lng-hero::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--lng-champagne-line) 30%,var(--lng-champagne-line) 70%,transparent)} #page-zuerich-longevity .lng-hero-crumb{font-size:11.5px;color:var(--lng-text-light-dim);margin-bottom:32px;display:flex;align-items:center;gap:8px} #page-zuerich-longevity .lng-hero-crumb button{background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:11.5px;color:var(--lng-text-light-muted);padding:0;transition:color .25s ease} #page-zuerich-longevity .lng-hero-crumb button:hover{color:var(--lng-champagne)} #page-zuerich-longevity .lng-hero-crumb-sep{opacity:.4} #page-zuerich-longevity .lng-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center;position:relative;z-index:1} #page-zuerich-longevity .lng-hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--lng-champagne);margin-bottom:30px} #page-zuerich-longevity .lng-hero-eyebrow::before{content:'';width:18px;height:1px;background:var(--lng-champagne);opacity:.7} #page-zuerich-longevity .lng-hero h1{font-family:var(--font-sans);font-size:clamp(38px,5.4vw,72px);font-weight:300;letter-spacing:-.035em;line-height:1.04;color:#fff;margin-bottom:26px} #page-zuerich-longevity .lng-hero h1 em{font-style:italic;color:var(--lng-champagne);font-weight:300} #page-zuerich-longevity .lng-hero-sub{font-size:17px;font-weight:300;line-height:1.7;color:var(--lng-text-light-muted);max-width:520px;margin-bottom:22px} #page-zuerich-longevity .lng-hero-meta{font-size:13px;font-weight:400;letter-spacing:.04em;color:var(--lng-text-light-dim);margin-bottom:40px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} #page-zuerich-longevity .lng-hero-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--lng-champagne);opacity:.7} #page-zuerich-longevity .lng-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px} #page-zuerich-longevity .lng-btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--lng-champagne);color:#1a1a1a;padding:17px 32px;border-radius:100px;font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:.02em;text-decoration:none;border:none;cursor:pointer;transition:background .3s ease,transform .2s ease,box-shadow .3s ease;box-shadow:0 4px 28px rgba(201,169,110,.22);white-space:nowrap} #page-zuerich-longevity .lng-btn-primary:hover{background:#b89757;transform:translateY(-1px);box-shadow:0 8px 36px rgba(201,169,110,.32)} #page-zuerich-longevity .lng-btn-secondary{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--lng-text-light);padding:16px 30px;border-radius:100px;font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:.02em;text-decoration:none;border:1px solid var(--lng-champagne-line);cursor:pointer;transition:border-color .25s ease,background .25s ease;white-space:nowrap} #page-zuerich-longevity .lng-btn-secondary:hover{border-color:var(--lng-champagne);background:rgba(201,169,110,.05)} #page-zuerich-longevity .lng-btn-dark{display:inline-flex;align-items:center;gap:10px;background:var(--lng-forest);color:#fff;padding:17px 32px;border-radius:100px;font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:.02em;text-decoration:none;border:1px solid var(--lng-forest);cursor:pointer;transition:background .3s ease,transform .2s ease;white-space:nowrap} #page-zuerich-longevity .lng-btn-dark:hover{background:var(--lng-forest-2);transform:translateY(-1px)} #page-zuerich-longevity .lng-btn-ghost{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--lng-text-dark);padding:16px 30px;border-radius:100px;font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:.02em;text-decoration:none;border:1px solid rgba(10,29,18,.18);cursor:pointer;transition:border-color .25s ease,background .25s ease;white-space:nowrap} #page-zuerich-longevity .lng-btn-ghost:hover{border-color:var(--lng-forest);background:rgba(10,29,18,.02)} #page-zuerich-longevity .lng-hero-trust{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;border-top:1px solid var(--lng-hairline-dark);padding-top:28px} #page-zuerich-longevity .lng-hero-trust-item{display:flex;align-items:flex-start;gap:11px;font-size:13px;color:var(--lng-text-light-muted);line-height:1.5} #page-zuerich-longevity .lng-hero-trust-item svg{flex-shrink:0;margin-top:2px;color:var(--lng-champagne);opacity:.85} #page-zuerich-longevity .lng-hero-visual{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:linear-gradient(160deg,var(--lng-forest-2) 0%,var(--lng-forest-3) 100%);border:1px solid var(--lng-champagne-soft);box-shadow:0 30px 80px rgba(0,0,0,.35)} #page-zuerich-longevity .lng-hero-visual::before{content:'';position:absolute;top:32px;left:32px;width:48px;height:48px;border-top:1px solid var(--lng-champagne);border-left:1px solid var(--lng-champagne);opacity:.55} #page-zuerich-longevity .lng-hero-visual::after{content:'';position:absolute;bottom:32px;right:32px;width:48px;height:48px;border-bottom:1px solid var(--lng-champagne);border-right:1px solid var(--lng-champagne);opacity:.55} #page-zuerich-longevity .lng-hero-visual-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:40px;color:var(--lng-text-light)} #page-zuerich-longevity .lng-hero-mark{font-family:'Nunito',sans-serif;font-style:italic;font-weight:900;font-size:34px;letter-spacing:-.02em;color:#fff;margin-bottom:6px} #page-zuerich-longevity .lng-hero-mark span{color:var(--lng-champagne);font-size:24px} #page-zuerich-longevity .lng-hero-mark-sub{font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--lng-champagne);opacity:.85} #page-zuerich-longevity .lng-hero-mark-divider{width:40px;height:1px;background:var(--lng-champagne);opacity:.5;margin:32px 0} #page-zuerich-longevity .lng-hero-mark-caption{font-size:14px;font-weight:300;line-height:1.7;color:var(--lng-text-light-muted);max-width:280px;font-style:italic} /* ── SECTION BASE ── */ #page-zuerich-longevity .lng-section{padding:120px 0;position:relative} #page-zuerich-longevity .lng-section-cream{background:var(--lng-cream)} #page-zuerich-longevity .lng-section-cream-2{background:var(--lng-cream-2)} #page-zuerich-longevity .lng-section-forest{background:var(--lng-forest);color:var(--lng-text-light)} #page-zuerich-longevity .lng-section-forest h2,#page-zuerich-longevity .lng-section-forest h3{color:#fff} #page-zuerich-longevity .lng-section-forest p{color:var(--lng-text-light-muted)} #page-zuerich-longevity .lng-section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--lng-champagne-line) 30%,var(--lng-champagne-line) 70%,transparent);max-width:1180px;margin:0 auto} #page-zuerich-longevity h2.lng-h2{font-family:var(--font-sans);font-size:clamp(28px,3.8vw,48px);font-weight:400;letter-spacing:-.035em;line-height:1.12;margin-bottom:24px;color:var(--lng-text-dark)} #page-zuerich-longevity h2.lng-h2 em{font-style:italic;color:var(--lng-champagne);font-weight:400} #page-zuerich-longevity .lng-section-forest h2.lng-h2{color:#fff} #page-zuerich-longevity .lng-section-forest h2.lng-h2 em{color:var(--lng-champagne)} #page-zuerich-longevity .lng-lede{font-size:17px;font-weight:300;line-height:1.75;color:var(--lng-text-mid);max-width:640px;margin-bottom:0} #page-zuerich-longevity .lng-section-forest .lng-lede{color:var(--lng-text-light-muted)} /* ── 2. PROBLEM ── */ #page-zuerich-longevity .lng-problem-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start} #page-zuerich-longevity .lng-problem-list{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 36px} #page-zuerich-longevity .lng-problem-list li{display:flex;align-items:center;gap:14px;font-size:14.5px;font-weight:400;color:var(--lng-text-mid);line-height:1.5;padding:14px 0;border-bottom:1px solid var(--lng-hairline-light)} #page-zuerich-longevity .lng-problem-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--lng-champagne);flex-shrink:0;opacity:.8} #page-zuerich-longevity .lng-problem-quote{margin-top:48px;padding:32px 0 0;border-top:1px solid var(--lng-champagne-line);font-family:var(--font-sans);font-size:20px;font-weight:300;font-style:italic;line-height:1.55;color:var(--lng-text-dark);letter-spacing:-.01em;max-width:640px} /* ── 3. BODYMAP ── */ #page-zuerich-longevity .lng-bodymap-header{max-width:720px;margin-bottom:64px} #page-zuerich-longevity .lng-bodymap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lng-champagne-soft);border:1px solid var(--lng-champagne-soft);border-radius:2px;overflow:hidden} #page-zuerich-longevity .lng-bodymap-card{background:var(--lng-cream);padding:36px 28px;display:flex;flex-direction:column;gap:14px;transition:background .35s ease;position:relative} #page-zuerich-longevity .lng-bodymap-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--lng-champagne);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)} #page-zuerich-longevity .lng-bodymap-card:hover{background:#fff} #page-zuerich-longevity .lng-bodymap-card:hover::before{transform:scaleX(1)} #page-zuerich-longevity .lng-bodymap-num{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--lng-champagne);text-transform:uppercase} #page-zuerich-longevity .lng-bodymap-card h3{font-family:var(--font-sans);font-size:18px;font-weight:600;color:var(--lng-text-dark);letter-spacing:-.015em;line-height:1.25;margin:0} #page-zuerich-longevity .lng-bodymap-card p{font-size:13.5px;color:var(--lng-text-muted);line-height:1.6;font-weight:400;margin:0} #page-zuerich-longevity .lng-bodymap-footer{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:48px;padding-top:36px;border-top:1px solid var(--lng-hairline-light)} #page-zuerich-longevity .lng-bodymap-spec{font-size:13.5px;color:var(--lng-text-muted);font-weight:400;letter-spacing:.01em;line-height:1.6} #page-zuerich-longevity .lng-bodymap-spec strong{color:var(--lng-text-dark);font-weight:600} /* ── 4. PROTOCOLS ── */ #page-zuerich-longevity .lng-proto-header{max-width:720px;margin-bottom:64px} #page-zuerich-longevity .lng-proto-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} #page-zuerich-longevity .lng-proto-card{background:var(--lng-forest-2);border:1px solid var(--lng-champagne-soft);border-radius:2px;padding:48px 44px;display:flex;flex-direction:column;gap:20px;transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease;position:relative;overflow:hidden;color:var(--lng-text-light)} #page-zuerich-longevity .lng-proto-card::after{content:'';position:absolute;top:0;right:0;width:64px;height:64px;border-top:1px solid var(--lng-champagne);border-right:1px solid var(--lng-champagne);opacity:0;transition:opacity .4s ease} #page-zuerich-longevity .lng-proto-card:hover{border-color:var(--lng-champagne-line);transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,.32)} #page-zuerich-longevity .lng-proto-card:hover::after{opacity:.4} #page-zuerich-longevity .lng-proto-tag{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--lng-champagne)} #page-zuerich-longevity .lng-proto-card h3{font-family:var(--font-sans);font-size:24px;font-weight:400;color:#fff;letter-spacing:-.02em;line-height:1.2;margin:0} #page-zuerich-longevity .lng-proto-card h3 em{font-style:italic;font-weight:300} #page-zuerich-longevity .lng-proto-desc{font-size:14.5px;color:var(--lng-text-light-muted);line-height:1.7;font-weight:300;margin:0} #page-zuerich-longevity .lng-proto-supports{display:flex;flex-direction:column;gap:8px;padding-top:18px;margin-top:auto;border-top:1px solid var(--lng-hairline-dark)} #page-zuerich-longevity .lng-proto-supports-label{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--lng-text-light-dim);margin-bottom:6px} #page-zuerich-longevity .lng-proto-supports-item{font-size:13px;color:var(--lng-text-light-muted);line-height:1.5;font-weight:400;display:flex;align-items:flex-start;gap:10px} #page-zuerich-longevity .lng-proto-supports-item::before{content:'';display:inline-block;width:14px;height:1px;background:var(--lng-champagne);flex-shrink:0;margin-top:9px;opacity:.6} #page-zuerich-longevity .lng-proto-cta{margin-top:24px;display:inline-flex;align-items:center;gap:10px;color:var(--lng-champagne);font-size:13.5px;font-weight:600;letter-spacing:.02em;text-decoration:none;background:none;border:none;cursor:pointer;padding:0;font-family:var(--font-sans);transition:gap .25s ease;align-self:flex-start;width:fit-content} #page-zuerich-longevity .lng-proto-cta:hover{gap:14px} #page-zuerich-longevity .lng-proto-cta svg{transition:transform .25s ease} #page-zuerich-longevity .lng-proto-cta:hover svg{transform:translateX(3px)} /* ── 5. EXPERIENCE ── */ #page-zuerich-longevity .lng-exp-header{max-width:720px;margin-bottom:64px} #page-zuerich-longevity .lng-exp-steps{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--lng-hairline-light)} #page-zuerich-longevity .lng-exp-step{display:grid;grid-template-columns:120px 1fr 1.5fr;gap:48px;align-items:start;padding:32px 0;border-bottom:1px solid var(--lng-hairline-light);transition:background .3s ease} #page-zuerich-longevity .lng-exp-step:hover{background:rgba(201,169,110,.02)} #page-zuerich-longevity .lng-exp-num{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--lng-champagne);text-transform:uppercase} #page-zuerich-longevity .lng-exp-title{font-family:var(--font-sans);font-size:19px;font-weight:500;color:var(--lng-text-dark);letter-spacing:-.015em;line-height:1.3} #page-zuerich-longevity .lng-exp-desc{font-size:14.5px;color:var(--lng-text-mid);line-height:1.7;font-weight:300} /* ── 6. TREATMENTS / CARE SYSTEM ── */ #page-zuerich-longevity .lng-care-header{max-width:720px;margin-bottom:64px} #page-zuerich-longevity .lng-care-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--lng-hairline-dark);border:1px solid var(--lng-hairline-dark);border-radius:2px;overflow:hidden} #page-zuerich-longevity .lng-care-card{background:var(--lng-forest);padding:36px 24px;display:flex;flex-direction:column;gap:14px;transition:background .35s ease;cursor:default;position:relative} #page-zuerich-longevity .lng-care-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--lng-champagne);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)} #page-zuerich-longevity .lng-care-card:hover{background:var(--lng-forest-2)} #page-zuerich-longevity .lng-care-card:hover::before{transform:scaleX(1)} #page-zuerich-longevity .lng-care-mark{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--lng-champagne);text-transform:uppercase} #page-zuerich-longevity .lng-care-card h3{font-family:var(--font-sans);font-size:15.5px;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.3;margin:0} #page-zuerich-longevity .lng-care-card p{font-size:13px;color:var(--lng-text-light-muted);line-height:1.6;font-weight:300;margin:0;flex:1} /* ── 7. WHO IT'S FOR ── */ #page-zuerich-longevity .lng-who-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start} #page-zuerich-longevity .lng-who-list{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--lng-hairline-light)} #page-zuerich-longevity .lng-who-list li{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--lng-hairline-light);font-size:15px;color:var(--lng-text-dark);font-weight:400;line-height:1.4} #page-zuerich-longevity .lng-who-list li::before{content:'';width:10px;height:1px;background:var(--lng-champagne);flex-shrink:0;opacity:.7} /* ── 8. ZÜRICH FLAGSHIP ── */ #page-zuerich-longevity .lng-flag{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} #page-zuerich-longevity .lng-flag-visual{aspect-ratio:5/6;background:linear-gradient(160deg,var(--lng-forest) 0%,var(--lng-forest-3) 100%);border:1px solid var(--lng-champagne-soft);border-radius:2px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:64px 40px;color:var(--lng-text-light)} #page-zuerich-longevity .lng-flag-visual::before{content:'';position:absolute;top:32px;left:32px;width:36px;height:36px;border-top:1px solid var(--lng-champagne);border-left:1px solid var(--lng-champagne);opacity:.5} #page-zuerich-longevity .lng-flag-visual::after{content:'';position:absolute;bottom:32px;right:32px;width:36px;height:36px;border-bottom:1px solid var(--lng-champagne);border-right:1px solid var(--lng-champagne);opacity:.5} #page-zuerich-longevity .lng-flag-overline{font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--lng-champagne);margin-bottom:24px} #page-zuerich-longevity .lng-flag-city{font-family:var(--font-sans);font-size:clamp(48px,5.5vw,68px);font-weight:300;letter-spacing:-.04em;line-height:.95;color:#fff;margin-bottom:18px} #page-zuerich-longevity .lng-flag-city em{font-style:italic;color:var(--lng-champagne);font-weight:300} #page-zuerich-longevity .lng-flag-tagline{font-size:13.5px;font-weight:400;color:var(--lng-text-light-muted);line-height:1.65;max-width:300px;font-style:italic;letter-spacing:.01em} #page-zuerich-longevity .lng-flag-divider{width:40px;height:1px;background:var(--lng-champagne);opacity:.5;margin:28px auto} #page-zuerich-longevity .lng-flag-points{margin-top:32px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--lng-hairline-light)} #page-zuerich-longevity .lng-flag-point{padding:22px 0;border-bottom:1px solid var(--lng-hairline-light);display:flex;flex-direction:column;gap:6px} #page-zuerich-longevity .lng-flag-point-label{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--lng-champagne)} #page-zuerich-longevity .lng-flag-point-text{font-size:14.5px;color:var(--lng-text-mid);line-height:1.6;font-weight:300} /* ── 9. ACCESS / PRICING ── */ #page-zuerich-longevity .lng-access-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;margin-top:48px} #page-zuerich-longevity .lng-access-card{background:#fff;border:1px solid var(--lng-hairline-light);border-radius:2px;padding:48px 44px;display:flex;flex-direction:column;gap:0;transition:border-color .35s ease,box-shadow .35s ease} #page-zuerich-longevity .lng-access-card:hover{border-color:var(--lng-champagne-line);box-shadow:0 12px 48px rgba(10,29,18,.06)} #page-zuerich-longevity .lng-access-card-tag{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--lng-champagne);margin-bottom:18px} #page-zuerich-longevity .lng-access-card h3{font-family:var(--font-sans);font-size:24px;font-weight:400;color:var(--lng-text-dark);letter-spacing:-.02em;line-height:1.2;margin-bottom:14px} #page-zuerich-longevity .lng-access-card h3 em{font-style:italic;color:var(--lng-champagne);font-weight:300} #page-zuerich-longevity .lng-access-price{font-family:var(--font-sans);font-size:22px;font-weight:300;color:var(--lng-text-dark);letter-spacing:-.015em;margin-bottom:8px} #page-zuerich-longevity .lng-access-price-note{font-size:13px;color:var(--lng-text-muted);line-height:1.6;margin-bottom:28px;font-weight:400} #page-zuerich-longevity .lng-access-includes{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--lng-hairline-light)} #page-zuerich-longevity .lng-access-includes li{font-size:14px;color:var(--lng-text-mid);line-height:1.55;font-weight:400;padding:14px 0;border-bottom:1px solid var(--lng-hairline-light);display:flex;align-items:flex-start;gap:14px} #page-zuerich-longevity .lng-access-includes li::before{content:'';width:14px;height:1px;background:var(--lng-champagne);flex-shrink:0;margin-top:10px;opacity:.7} #page-zuerich-longevity .lng-access-card .lng-btn-dark{align-self:flex-start;margin-top:auto} #page-zuerich-longevity .lng-access-note{margin-top:48px;padding:24px 28px;background:rgba(201,169,110,.05);border:1px solid var(--lng-champagne-soft);border-radius:2px;font-size:13.5px;color:var(--lng-text-mid);line-height:1.7;font-weight:400;max-width:780px} #page-zuerich-longevity .lng-access-note strong{color:var(--lng-text-dark);font-weight:600} /* ── 10. FAQ ── */ #page-zuerich-longevity .lng-faq-header{max-width:720px;margin-bottom:48px} #page-zuerich-longevity .lng-faq-list{max-width:880px;border-top:1px solid var(--lng-hairline-light)} #page-zuerich-longevity .lng-faq-item{border-bottom:1px solid var(--lng-hairline-light)} #page-zuerich-longevity .lng-faq-q{width:100%;background:none;border:none;cursor:pointer;padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--font-sans);text-align:left;transition:padding .3s ease} #page-zuerich-longevity .lng-faq-q:hover{padding-left:8px} #page-zuerich-longevity .lng-faq-qt{font-size:16px;font-weight:500;color:var(--lng-text-dark);letter-spacing:-.005em;line-height:1.35} #page-zuerich-longevity .lng-faq-icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--lng-champagne);transition:transform .4s cubic-bezier(.4,0,.2,1);font-size:18px;font-weight:300;line-height:1} #page-zuerich-longevity .lng-faq-item.lng-faq-open .lng-faq-icon{transform:rotate(45deg)} #page-zuerich-longevity .lng-faq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)} #page-zuerich-longevity .lng-faq-item.lng-faq-open .lng-faq-a{max-height:400px} #page-zuerich-longevity .lng-faq-ai{padding:0 0 28px;font-size:15px;color:var(--lng-text-mid);line-height:1.75;font-weight:300;max-width:760px} /* ── 11. FINAL CTA ── */ #page-zuerich-longevity .lng-final{padding:120px 0;background:var(--lng-forest);color:#fff;position:relative;overflow:hidden;text-align:center;border-top:1px solid var(--lng-champagne-line)} #page-zuerich-longevity .lng-final::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1000px;height:1000px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,110,.06) 0%,transparent 60%);pointer-events:none} #page-zuerich-longevity .lng-final-inner{position:relative;z-index:1;max-width:760px;margin:0 auto} #page-zuerich-longevity .lng-final-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--lng-champagne);margin-bottom:28px;display:inline-flex;align-items:center;gap:10px} #page-zuerich-longevity .lng-final-eyebrow::before,#page-zuerich-longevity .lng-final-eyebrow::after{content:'';display:inline-block;width:18px;height:1px;background:var(--lng-champagne);opacity:.7} #page-zuerich-longevity .lng-final h2{font-family:var(--font-sans);font-size:clamp(32px,4.5vw,56px);font-weight:300;letter-spacing:-.035em;line-height:1.08;color:#fff;margin-bottom:22px} #page-zuerich-longevity .lng-final h2 em{font-style:italic;color:var(--lng-champagne);font-weight:300} #page-zuerich-longevity .lng-final-sub{font-size:16.5px;color:var(--lng-text-light-muted);line-height:1.75;font-weight:300;margin-bottom:44px;max-width:580px;margin-left:auto;margin-right:auto} #page-zuerich-longevity .lng-final-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:36px} #page-zuerich-longevity .lng-final-meta{font-size:12.5px;color:var(--lng-text-light-dim);font-style:italic;letter-spacing:.02em} /* ── RESPONSIVE ── */ @media(max-width:1100px){ #page-zuerich-longevity .lng-bodymap-grid{grid-template-columns:1fr 1fr} #page-zuerich-longevity .lng-care-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:900px){ #page-zuerich-longevity .lng-wrap,#page-zuerich-longevity .lng-wrap-narrow{padding:0 24px} #page-zuerich-longevity .lng-section{padding:80px 0} #page-zuerich-longevity .lng-hero{padding:80px 0 64px} #page-zuerich-longevity .lng-hero-grid{grid-template-columns:1fr;gap:48px} #page-zuerich-longevity .lng-hero-visual{aspect-ratio:5/4;max-width:480px;margin:0 auto} #page-zuerich-longevity .lng-problem-grid,#page-zuerich-longevity .lng-who-grid,#page-zuerich-longevity .lng-flag{grid-template-columns:1fr;gap:40px} #page-zuerich-longevity .lng-problem-list{grid-template-columns:1fr} #page-zuerich-longevity .lng-proto-grid{grid-template-columns:1fr;gap:16px} #page-zuerich-longevity .lng-proto-card{padding:36px 28px} #page-zuerich-longevity .lng-exp-step{grid-template-columns:1fr;gap:8px;padding:24px 0} #page-zuerich-longevity .lng-exp-num{font-size:10.5px} #page-zuerich-longevity .lng-care-grid{grid-template-columns:1fr 1fr} #page-zuerich-longevity .lng-access-grid{grid-template-columns:1fr;gap:20px} #page-zuerich-longevity .lng-access-card{padding:36px 28px} #page-zuerich-longevity .lng-flag-visual{aspect-ratio:4/3;padding:48px 32px} #page-zuerich-longevity .lng-hero-trust{grid-template-columns:1fr;gap:14px} #page-zuerich-longevity .lng-final{padding:80px 0} } @media(max-width:560px){ #page-zuerich-longevity .lng-section{padding:64px 0} #page-zuerich-longevity .lng-hero{padding:56px 0 48px} #page-zuerich-longevity .lng-hero-ctas{flex-direction:column;align-items:stretch} #page-zuerich-longevity .lng-hero-ctas .lng-btn-primary,#page-zuerich-longevity .lng-hero-ctas .lng-btn-secondary{justify-content:center;text-align:center} #page-zuerich-longevity .lng-bodymap-grid,#page-zuerich-longevity .lng-care-grid{grid-template-columns:1fr} #page-zuerich-longevity .lng-final-ctas{flex-direction:column;align-items:stretch} #page-zuerich-longevity .lng-final-ctas .lng-btn-primary,#page-zuerich-longevity .lng-final-ctas .lng-btn-secondary{justify-content:center} #page-zuerich-longevity .lng-bodymap-footer{flex-direction:column;align-items:flex-start;gap:20px} } /* ── TYPOGRAPHY ALIGNMENT, match site design system (Figtree 800, italic-700 em accents). Colors preserved. ── */ #page-zuerich-longevity .lng-hero h1, #page-zuerich-longevity .lng-section-title, #page-zuerich-longevity .lng-protocol h3, #page-zuerich-longevity .lng-care-card h3, #page-zuerich-longevity .lng-final h2, #page-zuerich-longevity .lng-flagship h3, #page-zuerich-longevity .lng-experience h2, #page-zuerich-longevity .lng-who h2, #page-zuerich-longevity .lng-access h2, #page-zuerich-longevity .lng-faq-section h2, #page-zuerich-longevity .lng-bodymap h2, #page-zuerich-longevity .lng-protocols h2{font-family:var(--font-sans);font-weight:800;letter-spacing:-.03em;line-height:1.12} #page-zuerich-longevity .lng-hero h1{font-size:clamp(34px,4.2vw,56px);letter-spacing:-.035em;line-height:1.06} #page-zuerich-longevity .lng-section-title, #page-zuerich-longevity .lng-experience h2, #page-zuerich-longevity .lng-who h2, #page-zuerich-longevity .lng-access h2, #page-zuerich-longevity .lng-faq-section h2, #page-zuerich-longevity .lng-bodymap h2, #page-zuerich-longevity .lng-protocols h2{font-size:clamp(26px,3.5vw,40px)} #page-zuerich-longevity .lng-final h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.035em;line-height:1.08} #page-zuerich-longevity .lng-protocol h3, #page-zuerich-longevity .lng-care-card h3, #page-zuerich-longevity .lng-flagship h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.025em;line-height:1.18} #page-zuerich-longevity .lng-hero h1 em, #page-zuerich-longevity .lng-section-title em, #page-zuerich-longevity .lng-final h2 em, #page-zuerich-longevity .lng-protocol h3 em, #page-zuerich-longevity .lng-care-card h3 em, #page-zuerich-longevity .lng-flagship h3 em, #page-zuerich-longevity .lng-experience h2 em, #page-zuerich-longevity .lng-who h2 em, #page-zuerich-longevity .lng-access h2 em, #page-zuerich-longevity .lng-faq-section h2 em, #page-zuerich-longevity .lng-bodymap h2 em, #page-zuerich-longevity .lng-protocols h2 em{font-style:italic;font-weight:700;color:var(--lng-champagne)} #page-zuerich-longevity .lng-hero-sub, #page-zuerich-longevity .lng-section-sub, #page-zuerich-longevity .lng-final-sub, #page-zuerich-longevity .lng-protocol-desc, #page-zuerich-longevity .lng-care-card p, #page-zuerich-longevity .lng-bodymap-card p{font-weight:400} #page-zuerich-longevity .lng-hero-sub, #page-zuerich-longevity .lng-section-sub, #page-zuerich-longevity .lng-final-sub{font-size:16.5px;line-height:1.7} #page-zuerich-longevity .lng-hero-mark-caption{font-weight:400;font-style:normal} #page-zuerich-longevity .lng-btn-primary, #page-zuerich-longevity .lng-btn-secondary{font-family:var(--font-sans);font-weight:600;font-size:14.5px;letter-spacing:0} /* --- */ /* Scoped AGB page styles, all rules prefixed with #page-agb to avoid bleed */ /* --- */ /* Scoped Impressum page styles, all rules prefixed with #page-impressum */ /* --- */ /* Scoped Datenschutz page styles, prefixed with #page-datenschutz */ /* --- */ .endo-faq-item.open .endo-faq-q svg{transform:rotate(180deg)} .endo-faq-item.open .endo-faq-a{display:block} /* --- */ .faq-item[open] summary span{transform:rotate(45deg)} /* --- */ .sg-merged-cta{background:#0d0d0d;padding:80px 20px;color:#fff}.sg-merged-cta .sgm-wrap{max-width:980px;margin:0 auto}.sg-merged-cta .sgm-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.sg-merged-cta .sgm-text{display:flex;flex-direction:column;align-items:flex-start}.sg-merged-cta .sgm-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FFC107;margin-bottom:18px;padding:6px 14px;background:rgba(255,193,7,.12);border:1px solid rgba(255,193,7,.3);border-radius:999px}.sg-merged-cta .sgm-badge-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#FFC107;animation:pulse 2s infinite}.sg-merged-cta .sgm-text-h{font-family:var(--font-sans);font-weight:800;font-size:clamp(28px,3.4vw,38px);line-height:1.1;color:#fff;margin:0 0 16px;letter-spacing:-.025em}.sg-merged-cta .sgm-text-p{font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 28px;max-width:42ch}.sg-merged-cta .sgm-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 28px;background:#25D366;color:#fff;font-weight:700;font-size:16px;border-radius:999px;text-decoration:none;box-shadow:0 8px 20px rgba(37,211,102,.32);transition:transform .15s ease,box-shadow .15s ease}.sg-merged-cta .sgm-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,211,102,.4)}.sg-merged-cta .sgm-cta:active{transform:scale(.98)}.sg-merged-cta .sgm-meta{margin:14px 0 0;font-size:12.5px;color:rgba(255,255,255,.45)}.sg-merged-cta .sgm-photo{width:100%;border-radius:20px;overflow:hidden;background:transparent}.sg-merged-cta .sgm-photo img{width:auto;max-width:100%;height:auto;max-height:340px;object-fit:contain;object-position:right center;display:block;margin-left:auto}@media (max-width:768px){.sg-merged-cta{padding:56px 16px}.sg-merged-cta .sgm-split{grid-template-columns:1fr;gap:28px}.sg-merged-cta .sgm-text{align-items:center;text-align:center;order:2}.sg-merged-cta .sgm-text-p{max-width:none}.sg-merged-cta .sgm-cta{width:100%}.sg-merged-cta .sgm-photo{order:1}} /* --- */ .sg-merged-cta{background:#0d0d0d;padding:80px 20px;color:#fff}.sg-merged-cta .sgm-wrap{max-width:980px;margin:0 auto}.sg-merged-cta .sgm-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.sg-merged-cta .sgm-text{display:flex;flex-direction:column;align-items:flex-start}.sg-merged-cta .sgm-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FFC107;margin-bottom:18px;padding:6px 14px;background:rgba(255,193,7,.12);border:1px solid rgba(255,193,7,.3);border-radius:999px}.sg-merged-cta .sgm-badge-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#FFC107;animation:pulse 2s infinite}.sg-merged-cta .sgm-text-h{font-family:var(--font-sans);font-weight:800;font-size:clamp(28px,3.4vw,38px);line-height:1.1;color:#fff;margin:0 0 16px;letter-spacing:-.025em}.sg-merged-cta .sgm-text-p{font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 28px;max-width:42ch}.sg-merged-cta .sgm-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 28px;background:#25D366;color:#fff;font-weight:700;font-size:16px;border-radius:999px;text-decoration:none;box-shadow:0 8px 20px rgba(37,211,102,.32);transition:transform .15s ease,box-shadow .15s ease}.sg-merged-cta .sgm-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,211,102,.4)}.sg-merged-cta .sgm-cta:active{transform:scale(.98)}.sg-merged-cta .sgm-meta{margin:14px 0 0;font-size:12.5px;color:rgba(255,255,255,.45)}.sg-merged-cta .sgm-photo{width:100%;border-radius:20px;overflow:hidden;background:transparent}.sg-merged-cta .sgm-photo img{width:auto;max-width:100%;height:auto;max-height:340px;object-fit:contain;object-position:right center;display:block;margin-left:auto}@media (max-width:768px){.sg-merged-cta{padding:56px 16px}.sg-merged-cta .sgm-split{grid-template-columns:1fr;gap:28px}.sg-merged-cta .sgm-text{align-items:center;text-align:center;order:2}.sg-merged-cta .sgm-text-p{max-width:none}.sg-merged-cta .sgm-cta{width:100%}.sg-merged-cta .sgm-photo{order:1}} /* --- */ .sg-pzu{background:#FFFFFF;padding:clamp(64px,8vw,96px) 24px;border-bottom:1px solid #E5E7EB;font-family:var(--font-sans)} .sg-pzu-wrap{max-width:1240px;margin:0 auto} .sg-pzu-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#2D9B6F;margin:0 0 22px} .sg-pzu-h2{font-size:clamp(30px,3.4vw,44px);line-height:1.1;letter-spacing:-.025em;font-weight:800;color:#0A0A0A;margin:0 0 20px;max-width:880px} .sg-pzu-h2 em{font-style:italic;font-weight:800;color:#2D9B6F} .sg-pzu-sub{font-size:17px;line-height:1.65;color:#3A3A3A;margin:0 0 56px;max-width:740px;font-weight:400} .sg-pzu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .sg-pzu-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:28px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(0,0,0,.02)} .sg-pzu-icon{width:44px;height:44px;border-radius:12px;background:rgba(45,155,111,.1);display:flex;align-items:center;justify-content:center} .sg-pzu-card h3{font-size:16px;font-weight:700;letter-spacing:-.015em;color:#111;margin:0;line-height:1.3} .sg-pzu-card p{font-size:14.5px;line-height:1.55;color:#4a4a4a;margin:0;font-weight:400} @media(max-width:980px){.sg-pzu-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.sg-pzu{padding:48px 16px}.sg-pzu-grid{grid-template-columns:1fr}} .sg-kk{background:#FFFFFF;padding:clamp(48px,6vw,80px) 24px;font-family:var(--font-sans)} .sg-kk-card{max-width:1240px;margin:0 auto;background:linear-gradient(180deg,#EFF8F2 0%,#E8F5ED 100%);border:1px solid rgba(45,155,111,.12);border-radius:24px;padding:clamp(36px,5vw,56px);display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,5vw,72px);align-items:center} .sg-kk-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#2D9B6F;margin:0 0 20px} .sg-kk-h2{font-size:clamp(28px,3.2vw,40px);line-height:1.15;letter-spacing:-.025em;font-weight:800;color:#0A0A0A;margin:0 0 20px} .sg-kk-h2 em{font-style:italic;font-weight:800;color:#2D9B6F;display:block} .sg-kk-sub{font-size:16px;line-height:1.65;color:#3A3A3A;margin:0 0 26px;max-width:520px;font-weight:400} .sg-kk-bullets{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:12px} .sg-kk-bullets li{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;color:#2A2A2A;line-height:1.5;font-weight:500} .sg-kk-bullets svg{flex-shrink:0;margin-top:3px} .sg-kk-cta{background:#2D9B6F;color:#fff;border:none;border-radius:999px;padding:15px 28px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:var(--font-sans)} .sg-kk-side{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:28px 26px;text-align:center} .sg-kk-side h3{font-size:15.5px;font-weight:700;color:#0A0A0A;margin:0 0 10px;letter-spacing:-.01em} .sg-kk-side p{font-size:14px;color:#4A4A4A;line-height:1.55;margin:0 0 18px;font-weight:400} .sg-kk-side a{display:block;background:#fff;color:#2D9B6F;border:1.5px solid #2D9B6F;padding:13px 22px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;font-family:var(--font-sans)} @media(max-width:840px){.sg-kk{padding:32px 16px}.sg-kk-card{grid-template-columns:1fr;gap:24px;padding:32px 24px;border-radius:20px}} .sg-loc{background:#FFFFFF;padding:clamp(48px,6vw,80px) 24px;font-family:var(--font-sans)} .sg-loc-wrap{max-width:1240px;margin:0 auto} .sg-loc-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#2D9B6F;margin:0 0 20px} .sg-loc-h2{font-size:clamp(28px,3.2vw,40px);line-height:1.15;letter-spacing:-.025em;font-weight:800;color:#0A0A0A;margin:0 0 36px} .sg-loc-h2 em{font-style:italic;font-weight:800;color:#2D9B6F} .sg-loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .sg-loc-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:32px 30px;box-shadow:0 1px 2px rgba(0,0,0,.02)} .sg-loc-card h3{font-size:16px;font-weight:700;color:#0A0A0A;margin:0 0 18px;letter-spacing:-.01em} .sg-loc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .sg-loc-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:#3A3A3A;line-height:1.5} .sg-loc-list svg{flex-shrink:0;margin-top:2px} .sg-loc-pill{display:inline-block;background:rgba(45,155,111,.1);color:#2D9B6F;font-size:13.5px;font-weight:600;padding:5px 12px;border-radius:999px;margin-top:6px} .sg-loc-cta{display:inline-block;background:#fff;color:#2D9B6F;border:1.5px solid #2D9B6F;padding:12px 22px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;font-family:var(--font-sans);margin-top:18px} @media(max-width:780px){.sg-loc{padding:32px 16px}.sg-loc-grid{grid-template-columns:1fr}} /* --- */ /* ═══════════════════════════════════════════ SPRECHSTUNDE MODAL ═══════════════════════════════════════════ */ #sp-modal.sp-open { visibility: visible; pointer-events: all; } #sp-modal.sp-open #sp-backdrop { opacity: 1; } #sp-modal.sp-open #sp-panel { transform: translateY(0); opacity: 1; } /* Modal top bar */ /* ── Scoped sprechstunde styles ── */ /* Buttons */ /* Hero */ #sp-panel .hero-bg { position:absolute; top:0; right:0; bottom:0; width:42%; background:var(--sp-warm); clip-path:polygon(8% 0,100% 0,100% 100%,0% 100%); z-index:0; } #sp-panel .hero-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 40% 50%,rgba(45,155,111,.08) 0%,transparent 65%); } #sp-panel .hero-content { position:relative; z-index:1; max-width:560px; } #sp-panel .hero-badge { display:inline-flex; align-items:center; gap:8px; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--spt-mu); border:1px solid var(--spb-m); border-radius:40px; padding:6px 14px; margin-bottom:24px; background:var(--sp-card); } #sp-panel .hero-badge-dot { width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 2.5px rgba(22,163,74,.2); flex-shrink:0; animation:sp-hbdot 2s infinite; } @keyframes sp-hbdot { 0%,100%{ box-shadow:0 0 0 2.5px rgba(22,163,74,.2); } 50% { box-shadow:0 0 0 5px rgba(22,163,74,.08); } } #sp-panel .hero-sub { font-size:1rem; color:var(--spt-mu); line-height:1.65; margin-bottom:32px; max-width:480px; font-weight:300; } #sp-panel .hero-ctas { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; } #sp-panel .hero-avail { display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--spt-f); margin-bottom:36px; } #sp-panel .hero-avail::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--good); flex-shrink:0; } #sp-panel .hero-trust-row { padding-top:24px; border-top:1px solid var(--spb); display:flex; flex-wrap:wrap; gap:8px; } #sp-panel .hero-trust-chip { font-size:.72rem; font-weight:500; color:var(--spt-m); background:var(--sp-card); border:1px solid var(--spb); border-radius:var(--r-sm); padding:4px 10px; } /* Strip */ /* Problem */ /* What */ /* Conditions */ /* Not for */ /* Steps */ #sp-panel .step-num.active { background:var(--spg); border-color:var(--spg); color:#fff; } /* USP */ /* Consultations */ /* Doctor */ /* Why */ /* FAQ */ #sp-panel .faq-q.open .faq-q-icon { transform:rotate(45deg); background:var(--spg); color:#fff; } #sp-panel .faq-a.open { display:block; } /* Final CTA */ /* Footer */ /* Responsive */ @media (max-width: 760px) { #sp-panel .hero-bg { display:none; } } /* ── THERAPY DETAIL: text + image two-column layout ── */ .therapie-content-grid { display: grid; grid-template-columns: 1fr 42%; gap: 48px; align-items: start; } .therapie-img-wrap { position: sticky; top: 88px; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 32px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05); aspect-ratio: 4 / 3; background: var(--surface); } .therapie-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .therapie-content-grid { grid-template-columns: 1fr; gap: 28px; } .therapie-img-wrap { position: relative; top: 0; aspect-ratio: 16 / 9; order: -1; } } /* ── CONCIERGE HERO RESTRUCTURE ── */ /* Rebalanced hero grid: left narrower, right wider */ .hero{grid-template-columns:1fr 1.15fr!important;} /* Right column: relative for bg elements */ .hero-right-concierge{ position:relative; display:flex; align-items:center; justify-content:center; padding:40px 20px 40px 32px; overflow:visible; } /* Subtle background treatment */ /* Enlarged concierge card */ .hrc-card .hero-complaint-field{font-size:14px!important;padding:13px 16px!important;} .hrc-card .hero-complaint-btn{padding:13px 20px!important;font-size:14px!important;} .hrc-card .hero-complaint-row{margin-top:12px!important;} /* Also apply compact city card styles from before */ .city-card{min-height:0!important;} .city-card-body{padding:18px 18px 16px!important;gap:6px!important;display:flex!important;flex-direction:column!important;} .city-name{font-size:16px!important;margin-bottom:0!important;} .city-region{font-size:10px!important;margin-bottom:8px!important;} .city-note{font-size:11.5px!important;padding:6px 10px!important;border-radius:8px!important;margin-bottom:4px!important;} .city-stats{gap:4px!important;margin-bottom:0!important;} .city-stat{font-size:11px!important;padding:4px 8px!important;} .city-cta{padding-top:10px!important;font-size:11.5px!important;} /* ══ INTAKE CARD UPGRADE ══ */ /* Card header block */ /* Intake area */ /* Textarea */ /* Suggestion pills */ .hci-pill:active{transform:scale(.97);} /* Submit CTA */ .hci-submit:active{transform:scale(.98);} /* Support text below CTA */ /* Override old hrc-card complaint-row styles that might interfere */ .hrc-card .hero-complaint-row{display:none!important;} .hrc-card .hero-complaint-field{display:none!important;} .hrc-card .hero-complaint-btn{display:none!important;} .hrc-card .hero-complaint-label{display:none!important;} /* ── SUBPAGE CSS CLONED FROM MODAL ── */ #page-sprechstunde { background: #FAFAF8; color: #111A14; font-family:var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; --spg: #2D9B6F; --spg-mid: #238a5f; --spg-lt: rgba(45,155,111,0.08); --sp-dark: #111C16; --sp-darker: #0A1209; --sp-card: #FFFFFF; --sp-warm: #F3FAF6; --spt: #111A14; } #page-sprechstunde .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; } #page-sprechstunde .sec { padding: 72px 0; } #page-sprechstunde .sec-sm { padding: 48px 0; } #page-sprechstunde .sec-bg { background: var(--sp-card); } #page-sprechstunde .sec-warm { background: var(--sp-warm); } #page-sprechstunde h1, #page-sprechstunde h2, #page-sprechstunde h3, #page-sprechstunde h4 { font-family:var(--font-sans); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; } #page-sprechstunde h1 { font-size: clamp(2rem,4.5vw,3.2rem); } #page-sprechstunde h2 { font-size: clamp(1.5rem,3vw,2.3rem); } #page-sprechstunde h3 { font-size: clamp(1rem,1.8vw,1.3rem); } #page-sprechstunde .tag-label { font-family:var(--font-sans); display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--spg); background: var(--spg-lt); border-radius: 40px; padding: 5px 13px; margin-bottom: 18px; } #page-sprechstunde .tag-label::before { content:''; width:5px; height:5px; border-radius:50%; background: var(--spg); flex-shrink:0; } #page-sprechstunde .tag-label.dark { color:rgba(255,255,255,.55); background:rgba(255,255,255,.07); } #page-sprechstunde .tag-label.dark::before { background:rgba(255,255,255,.4); } #page-sprechstunde .sec-title { margin-bottom: 10px; } #page-sprechstunde .sec-sub { font-size:1rem; color:var(--spt-mu); line-height:1.65; max-width:560px; font-weight:300; } #page-sprechstunde .sec-header { margin-bottom: 44px; } #page-sprechstunde .sec-header.center { text-align:center; } #page-sprechstunde .sec-header.center .sec-sub { margin: 0 auto; } #page-sprechstunde .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-sans); font-weight:600; font-size:.93rem; border:none; border-radius:var(--r-md); padding:13px 26px; transition:background var(--t-fast),transform var(--t-fast); cursor:pointer; white-space:nowrap; text-decoration:none; } #page-sprechstunde .btn:hover { transform:translateY(-1px); } #page-sprechstunde .btn-primary { background:var(--spg); color:#fff; box-shadow:0 2px 10px rgba(45,155,111,.25); } #page-sprechstunde .btn-primary:hover { background:var(--spg-mid); } #page-sprechstunde .btn-white { background:#fff; color:var(--spt); box-shadow:0 1px 3px rgba(0,0,0,.06); } #page-sprechstunde .btn-wa { background:#25A84B; color:#fff; gap:8px; } #page-sprechstunde .btn-wa svg { width:18px; height:18px; fill:#fff; flex-shrink:0; } #page-sprechstunde .btn-lg { padding:16px 32px; font-size:1rem; border-radius:var(--r-lg); } #page-sprechstunde .btn-sm { padding:10px 18px; font-size:.82rem; } #page-sprechstunde .hero { min-height:90vh; display:flex; align-items:center; padding:72px 0 56px; position:relative; overflow:hidden; background:#FAFAF8; } #page-sprechstunde .hero-bg { position:absolute; top:0; right:0; bottom:0; width:42%; background:var(--sp-warm); clip-path:polygon(8% 0,100% 0,100% 100%,0% 100%); z-index:0; } #page-sprechstunde .hero-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 40% 50%,rgba(45,155,111,.08) 0%,transparent 65%); } #page-sprechstunde .hero-content { position:relative; z-index:1; max-width:560px; } #page-sprechstunde .hero-badge { display:inline-flex; align-items:center; gap:8px; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--spt-mu); border:1px solid var(--spb-m); border-radius:40px; padding:6px 14px; margin-bottom:24px; background:var(--sp-card); } #page-sprechstunde .hero-badge-dot { width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 2.5px rgba(22,163,74,.2); flex-shrink:0; animation:sp-hbdot 2s infinite; } #page-sprechstunde .hero h1 { margin-bottom:20px; color:var(--spt); } #page-sprechstunde .hero h1 .accent { color:var(--spg); font-style:italic; } #page-sprechstunde .hero-sub { font-size:1rem; color:var(--spt-mu); line-height:1.65; margin-bottom:32px; max-width:480px; font-weight:300; } #page-sprechstunde .hero-ctas { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; } #page-sprechstunde .hero-avail { display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--spt-f); margin-bottom:36px; } #page-sprechstunde .hero-avail::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--good); flex-shrink:0; } #page-sprechstunde .hero-trust-row { padding-top:24px; border-top:1px solid var(--spb); display:flex; flex-wrap:wrap; gap:8px; } #page-sprechstunde .hero-trust-chip { font-size:.72rem; font-weight:500; color:var(--spt-m); background:var(--sp-card); border:1px solid var(--spb); border-radius:var(--r-sm); padding:4px 10px; } #page-sprechstunde .strip { background:var(--sp-dark); } #page-sprechstunde .strip-inner { display:grid; grid-template-columns:repeat(5,1fr); } #page-sprechstunde .strip-item { padding:22px 16px; border-right:1px solid rgba(255,255,255,.05); display:flex; flex-direction:column; gap:3px; } #page-sprechstunde .strip-item:last-child { border-right:none; } #page-sprechstunde .strip-kicker { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:3px; } #page-sprechstunde .strip-label { font-size:.8rem; font-weight:700; color:rgba(255,255,255,.88); line-height:1.3; } #page-sprechstunde .problem-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; } #page-sprechstunde .problem-items { display:flex; flex-direction:column; gap:8px; } #page-sprechstunde .prob-item { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; background:var(--sp-card); border:1px solid var(--spb); border-radius:var(--r-lg); transition:border-color var(--t-fast); } #page-sprechstunde .prob-item:hover { border-color:var(--spb-m); } #page-sprechstunde .prob-icon { width:38px; height:38px; flex-shrink:0; background:var(--spg-lt); border-radius:var(--r-sm); border:1px solid rgba(45,155,111,.12); display:flex; align-items:center; justify-content:center; } #page-sprechstunde .prob-text strong { display:block; font-size:.86rem; font-weight:700; margin-bottom:2px; } #page-sprechstunde .prob-text span { font-size:.79rem; color:var(--spt-mu); line-height:1.4; } #page-sprechstunde .problem-answer { background:var(--spg); border-radius:var(--r-2xl); padding:40px 36px; color:rgba(255,255,255,.88); } #page-sprechstunde .problem-answer h3 { font-size:1.45rem; color:#fff; margin-bottom:14px; line-height:1.25; } #page-sprechstunde .problem-answer p { font-size:.9rem; line-height:1.7; color:rgba(255,255,255,.72); } #page-sprechstunde .problem-answer p+p { margin-top:10px; } #page-sprechstunde .prob-divider { margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.15); font-size:.95rem; color:rgba(255,255,255,.75); font-style:italic; font-family:var(--font-sans); } #page-sprechstunde .what-grid { display:grid; grid-template-columns:5fr 4fr; gap:48px; align-items:start; } #page-sprechstunde .what-body { font-size:.96rem; color:var(--spt-mu); line-height:1.75; font-weight:300; } #page-sprechstunde .what-body p+p { margin-top:12px; } #page-sprechstunde .what-aside { background:var(--sp-card); border:1px solid var(--spb); border-radius:var(--r-xl); padding:24px; } #page-sprechstunde .what-aside-title { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--spt-f); margin-bottom:12px; } #page-sprechstunde .what-row { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--spb); font-size:.84rem; color:var(--spt-m); line-height:1.4; } #page-sprechstunde .what-row:last-child { border-bottom:none; } #page-sprechstunde .what-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; margin-top:6px; } #page-sprechstunde .what-dot.red { background:#EF4444; } #page-sprechstunde .what-dot.green { background:var(--good); } #page-sprechstunde .cond-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } #page-sprechstunde .cond-card { background:var(--sp-card); border:1px solid var(--spb); border-radius:var(--r-xl); padding:18px 14px; transition:border-color var(--t-fast),box-shadow var(--t-fast); } #page-sprechstunde .cond-card:hover { border-color:var(--spg); box-shadow:0 0 0 3px var(--spg-lt); } #page-sprechstunde .cond-kicker { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--spt-f); margin-bottom:6px; } #page-sprechstunde .cond-title { font-size:.88rem; font-weight:600; color:var(--spt); margin-bottom:4px; line-height:1.25; } #page-sprechstunde .cond-sub { font-size:.75rem; color:var(--spt-mu); line-height:1.4; } #page-sprechstunde .notfor-box { background:var(--sp-dark); border-radius:var(--r-2xl); padding:44px 40px; } #page-sprechstunde .notfor-box h2 { color:#fff; } #page-sprechstunde .notfor-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:32px; align-items:start; } #page-sprechstunde .notfor-list { display:flex; flex-direction:column; gap:8px; } #page-sprechstunde .nf-item { display:flex; gap:10px; font-size:.88rem; color:rgba(255,255,255,.6); line-height:1.5; } #page-sprechstunde .nf-arrow { color:rgba(255,255,255,.2); flex-shrink:0; margin-top:1px; } #page-sprechstunde .notfor-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-xl); padding:24px; } #page-sprechstunde .notfor-card-kicker { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#F87171; margin-bottom:8px; } #page-sprechstunde .notfor-card p { font-size:.84rem; color:rgba(255,255,255,.55); line-height:1.6; margin-bottom:14px; } #page-sprechstunde .notfor-num { font-size:2.4rem; font-weight:700; color:#F87171; letter-spacing:-.03em; } #page-sprechstunde .steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:40px; } #page-sprechstunde .steps::before { content:''; position:absolute; top:24px; left:56px; right:56px; height:1px; background:linear-gradient(to right,var(--spb),var(--spg) 50%,var(--spb)); } #page-sprechstunde .step-item { padding:0 16px; text-align:center; } #page-sprechstunde .step-num { width:48px; height:48px; background:var(--sp-card); border:1px solid var(--spb-m); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:.85rem; font-weight:700; color:var(--spt-mu); position:relative; z-index:1; } #page-sprechstunde .step-num.active { background:var(--spg); border-color:var(--spg); color:#fff; } #page-sprechstunde .step-title { font-size:.87rem; font-weight:600; margin-bottom:5px; } #page-sprechstunde .step-desc { font-size:.78rem; color:var(--spt-mu); line-height:1.5; } #page-sprechstunde .step-tag { display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.05em; color:var(--good); background:var(--good-bg); border-radius:4px; padding:2px 8px; margin-top:5px; } #page-sprechstunde .usp-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } #page-sprechstunde .usp-headline { font-family:var(--font-sans); font-weight:400; font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.2; margin-bottom:14px; } #page-sprechstunde .usp-headline .green { color:var(--spg); font-style:italic; } #page-sprechstunde .usp-lead { font-size:.95rem; color:var(--spt-mu); line-height:1.7; margin-bottom:28px; font-weight:300; } #page-sprechstunde .usp-items { display:flex; flex-direction:column; gap:16px; } #page-sprechstunde .usp-item { display:flex; gap:12px; align-items:flex-start; } #page-sprechstunde .usp-icon { width:38px; height:38px; flex-shrink:0; background:var(--spg-lt); border-radius:var(--r-sm); border:1px solid rgba(45,155,111,.14); display:flex; align-items:center; justify-content:center; } #page-sprechstunde .usp-item-title { font-size:.88rem; font-weight:600; margin-bottom:2px; } #page-sprechstunde .usp-item-text { font-size:.8rem; color:var(--spt-mu); line-height:1.5; } #page-sprechstunde .usp-flow { background:var(--sp-warm); border-radius:var(--r-2xl); padding:28px; display:flex; flex-direction:column; gap:8px; } #page-sprechstunde .usp-flow-item { background:var(--sp-card); border:1px solid var(--spb); border-radius:var(--r-lg); padding:12px 16px; display:flex; align-items:center; gap:10px; font-size:.86rem; font-weight:500; } #page-sprechstunde .usp-flow-dot { width:8px; height:8px; border-radius:50%; background:var(--spg); flex-shrink:0; } #page-sprechstunde .usp-flow-connector { text-align:center; color:var(--spt-f); font-size:.88rem; } #page-sprechstunde .usp-flow-badge{margin:10px auto 0;width:fit-content;display:flex;align-items:center;gap:7px;background:rgba(45,155,111,.09);color:#1F7A54;border:1px solid rgba(45,155,111,.2);border-radius:100px;padding:6px 13px;font-size:.72rem;font-weight:600;letter-spacing:.03em;cursor:default} #page-sprechstunde .consult-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:40px; } #page-sprechstunde .consult-card { background:var(--sp-card); border:1px solid var(--spb); border-radius:var(--r-xl); padding:24px 20px; display:flex; flex-direction:column; transition:border-color var(--t-fast),box-shadow var(--t-fast); } #page-sprechstunde .consult-card:hover { border-color:var(--spb-m); box-shadow:0 1px 3px rgba(0,0,0,.06); } #page-sprechstunde .consult-card.feat { background:var(--spg); border-color:var(--spg); } #page-sprechstunde .consult-kicker { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--spg); margin-bottom:8px; } #page-sprechstunde .consult-card.feat .consult-kicker { color:rgba(255,255,255,.55); } #page-sprechstunde .consult-title { font-size:1rem; font-family:var(--font-sans); font-weight:400; margin-bottom:7px; } #page-sprechstunde .consult-card.feat .consult-title { color:#fff; } #page-sprechstunde .consult-desc { font-size:.8rem; color:var(--spt-mu); line-height:1.6; flex:1; margin-bottom:14px; font-weight:300; } #page-sprechstunde .consult-card.feat .consult-desc { color:rgba(255,255,255,.65); } #page-sprechstunde .consult-meta { font-size:.73rem; font-weight:600; color:var(--spt-f); padding-top:12px; border-top:1px solid var(--spb); } #page-sprechstunde .consult-card.feat .consult-meta { border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.4); } #page-sprechstunde .doctor-sec { background:var(--sp-card); } #page-sprechstunde .doctor-grid { display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start; } #page-sprechstunde .doc-photo { aspect-ratio:3/4; background:var(--sp-warm); border-radius:var(--r-2xl); border:1px solid var(--spb); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; } #page-sprechstunde .doc-photo-init { font-size:3rem; font-weight:300; color:var(--spg); font-family:var(--font-sans); } #page-sprechstunde .doc-photo-hint { font-size:.68rem; color:var(--spt-f); } #page-sprechstunde .doc-badge { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--spg); background:var(--spg-lt); border-radius:4px; padding:3px 9px; margin-bottom:10px; } #page-sprechstunde .doc-name { font-size:1.8rem; margin-bottom:4px; } #page-sprechstunde .doc-title { font-size:.9rem; color:var(--spt-mu); margin-bottom:20px; font-weight:300; } #page-sprechstunde .doc-bio { font-size:.92rem; color:var(--spt-mu); line-height:1.75; font-weight:300; } #page-sprechstunde .doc-bio p+p { margin-top:10px; } #page-sprechstunde .doc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; } #page-sprechstunde .doc-tag { font-size:.73rem; font-weight:500; border:1px solid var(--spb-m); border-radius:var(--r-sm); padding:4px 10px; color:var(--spt-m); } #page-sprechstunde .why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:40px; } #page-sprechstunde .why-card { background:var(--sp-card); border:1px solid var(--spb); border-radius:var(--r-xl); padding:22px; transition:border-color var(--t-fast),transform var(--t-fast); } #page-sprechstunde .why-card:hover { border-color:var(--spb-m); transform:translateY(-2px); } #page-sprechstunde .why-num { font-size:2.2rem; font-weight:800; line-height:1; margin-bottom:8px; background:linear-gradient(135deg,var(--spg) 0%,#7ecfaa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } #page-sprechstunde .why-title { font-size:.9rem; font-weight:700; margin-bottom:4px; } #page-sprechstunde .why-text { font-size:.8rem; color:var(--spt-mu); line-height:1.55; } #page-sprechstunde .faq-sec { background:var(--sp-card); } #page-sprechstunde .faq-wrap { max-width:680px; margin:40px auto 0; } #page-sprechstunde .faq-item { border-bottom:1px solid var(--spb); overflow:hidden; } #page-sprechstunde .faq-q { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:16px 0; font-size:.92rem; font-weight:500; color:var(--spt); display:flex; justify-content:space-between; align-items:center; gap:14px; font-family:var(--font-sans); } #page-sprechstunde .faq-q-icon { width:22px; height:22px; flex-shrink:0; background:var(--sp-warm); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; color:var(--spt-mu); transition:transform var(--t-base),background var(--t-fast); } #page-sprechstunde .faq-q.open .faq-q-icon { transform:rotate(45deg); background:var(--spg); color:#fff; } #page-sprechstunde .faq-a { display:none; padding:0 0 16px; font-size:.86rem; color:var(--spt-mu); line-height:1.7; } #page-sprechstunde .faq-a.open { display:block; } #page-sprechstunde .final-cta { background:var(--sp-dark); text-align:center; } #page-sprechstunde .final-cta h2 { color:#fff; margin-bottom:10px; } #page-sprechstunde .final-cta p { color:rgba(255,255,255,.5); font-size:.96rem; margin-bottom:28px; font-weight:300; } #page-sprechstunde .final-ctas { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } #page-sprechstunde .final-reassure { margin-top:18px; font-size:.76rem; color:rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; gap:6px; } #page-sprechstunde .final-reassure::before { content:'✓'; color:rgba(255,255,255,.2); } #page-sprechstunde .footer { background:var(--sp-darker); padding:48px 0; } #page-sprechstunde .footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; } #page-sprechstunde .footer-brand { font-family:'Nunito',sans-serif; font-weight:900; font-style:italic; font-size:1rem; color:rgba(255,255,255,.7); } #page-sprechstunde .footer-brand span { font-family:var(--font-sans); font-style:normal; font-weight:400; font-size:.78rem; color:rgba(255,255,255,.25); } #page-sprechstunde .footer-links { display:flex; gap:16px; } #page-sprechstunde .footer-links a { font-size:.76rem; color:rgba(255,255,255,.3); } #page-sprechstunde .footer-links a:hover { color:rgba(255,255,255,.6); } #page-sprechstunde .footer-copy { font-size:.73rem; color:rgba(255,255,255,.2); } @media (max-width: 760px) { #page-sprechstunde .hero-bg { display:none; } #page-sprechstunde .strip-inner { grid-template-columns:repeat(2,1fr); } #page-sprechstunde .strip-item:nth-child(even) { border-right:none; } #page-sprechstunde .problem-grid, #page-sprechstunde .what-grid, #page-sprechstunde .usp-grid, #page-sprechstunde .doctor-grid, #page-sprechstunde .notfor-grid { grid-template-columns:1fr; } #page-sprechstunde .cond-grid { grid-template-columns:repeat(2,1fr); } #page-sprechstunde .consult-grid { grid-template-columns:repeat(2,1fr); } #page-sprechstunde .steps { grid-template-columns:repeat(2,1fr); gap:20px; } #page-sprechstunde .steps::before { display:none; } #page-sprechstunde .why-grid { grid-template-columns:repeat(2,1fr); } #page-sprechstunde .notfor-box { padding:32px 24px; } } @media (max-width: 480px) { #page-sprechstunde .wrap { padding:0 18px; } #page-sprechstunde .sec { padding:48px 0; } #page-sprechstunde .cond-grid, #page-sprechstunde .consult-grid, #page-sprechstunde .why-grid, #page-sprechstunde .steps { grid-template-columns:1fr; } } /* --- */ /* Rebalance grid: right column wider, gap tighter */ .hero{grid-template-columns:1fr 1.35fr!important;gap:0!important;padding:64px 40px 48px!important;} /* Left: tighter right padding to pull sides closer */ .hero-left{padding-right:32px!important;} /* Right column: vertically centered, tighter left inset */ .hero-right-concierge{ padding:48px 12px 48px 20px!important; align-items:center!important; } /* Concierge card: ~22% bigger, more confident */ /* Card label: more prominent, slightly larger */ .hrc-card .hero-complaint-label{ font-size:13px!important; letter-spacing:.06em!important; opacity:1!important; margin-bottom:16px!important; color:var(--blue-dark)!important; } /* Avatar row: more breathing room */ /* Input field: taller, more generous, premium feel */ .hrc-card .hero-complaint-field{ font-size:14.5px!important; padding:14px 18px!important; border-radius:100px!important; border:1.5px solid rgba(0,0,0,0.1)!important; background:#f8faf9!important; transition:border-color var(--t-base),box-shadow var(--t-base),background var(--t-base)!important; } .hrc-card .hero-complaint-field:focus{ background:#fff!important; border-color:rgba(45,155,111,0.5)!important; box-shadow:0 0 0 4px rgba(45,155,111,0.08)!important; } /* CTA button: taller, stronger */ .hrc-card .hero-complaint-btn{ font-size:14px!important; padding:14px 22px!important; border-radius:100px!important; box-shadow:0 4px 16px rgba(45,155,111,0.32)!important; font-weight:700!important; } .hrc-card .hero-complaint-row{ margin-top:14px!important; gap:10px!important; align-items:stretch!important; } /* Support text below input */ /* Status label: replace with more authoritative version */ /* Rings: slightly stronger, closer to card */ /* Radial glow behind card */ /* ══ CONCIERGE CARD HEADER, VERTICAL FLOW ══ */ /* Reset old two-col layout */ /* Header: vertical stack */ /* Identity row: avatar + name/status side by side */ /* Helper sentence: below identity row */ /* Divider */ /* --- */ /* * Conservative mobile safety net, acts as a final layer only. * Goals: (1) prevent horizontal scroll, (2) ensure tap targets ≥ 44px on phones, * (3) respect notch/home-indicator safe areas. Nothing else is changed. */ /* ── (1) HORIZONTAL OVERFLOW PROTECTION ─────────────────────────────── */ /* Prevents any stray element (wide image, long URL, oversized grid item, emoji string) from making the whole page scroll sideways on phones. */ html, body { overflow-x: hidden; max-width: 100%; } /* Media never exceeds its container (handles hero images, inline SVGs, videos, iframes). */ img, video, svg, object { max-width: 100%; } img, video { height: auto; } /* Long URLs, long German compound words, long email addresses break instead of overflowing. */ p, li, td, th, h1, h2, h3, h4, .hero-sub, .hero-h1 { overflow-wrap: break-word; word-wrap: break-word; } /* Catch pre/code blocks that would force horizontal scroll on the whole page. */ pre { max-width: 100%; overflow-x: auto; } /* iOS Safari: prevent text auto-zoom on orientation change. */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } /* ── (2) MINIMUM TAP TARGETS ON TOUCH DEVICES ───────────────────────── */ /* WCAG 2.5.5 / Apple HIG: interactive elements should be ≥ 44×44 CSS px on touch. Scoped to narrow viewports + coarse pointer so desktop density is untouched. */ @media (max-width: 768px) and (pointer: coarse) { /* Buttons and button-like links get a minimum height. min-height uses line-box, we don't force a width so inline flows aren't disrupted. */ button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], a.btn, a.btn-primary, a.btn-secondary, a.btn-white, a.btn-outline-white { min-height: 44px; } /* Form inputs, ≥ 16px font prevents iOS auto-zoom on focus, ≥ 44px height = easy tap. */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="url"], select, textarea { font-size: max(16px, 1em); min-height: 44px; } textarea { min-height: 88px; /* two lines */ } /* Faster tap response on buttons: removes the 300 ms double-tap-zoom delay. */ button, a, [role="button"] { touch-action: manipulation; } } /* ── (3) SAFE-AREA INSETS FOR NOTCHED / HOME-INDICATOR DEVICES ─────── */ /* Any element pinned to the bottom of the viewport gets padded past the home indicator on iPhone X-class devices. Uses env() with fallback 0. */ .mobile-cta-bar, footer.sticky { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } /* Top-pinned elements (sticky headers) respect the status bar / dynamic island. */ /* Side safe areas, rare, but landscape on iPhone can clip content behind the notch. */ @media (orientation: landscape) and (max-width: 900px) { body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } } /* ── Belt-and-suspenders: break any child of a page container that's wider than it should be. Uses a conservative max-width rule on direct descendants of .page on phone only. */ @media (max-width: 480px) { .page > * { max-width: 100vw; } } /* ── (5) HOME HERO, MOBILE FIXES ───────────────────────────────────── */ /* Three issues addressed: (a) 100vh min-height causes giant whitespace on iOS Safari, (b) trust row overflows without flex-wrap, (c) secondary CTA row overflows without flex-wrap. Desktop CSS untouched, these only apply ≤900px. */ @media (max-width: 900px) { /* (a) Let the hero size to its content on phones. The desktop rule `min-height: calc(100vh - 68px)` stays for desktop; here we reset it. */ .hero-bg, .hero { min-height: auto !important; } /* Keep a sensible minimum so the hero still feels like a hero */ .hero-bg { padding: 24px 0 40px; } /* (b) Trust row: the inline-styled flex row ending the hero-left with "4.9★ bewertet · … · Gezielte Vermittlung". Target the last direct-flex child of .hero-left so we don't need to touch the inline style. */ .hero-left > div[style*="display:flex"][style*="gap:6px"] { flex-wrap: wrap !important; row-gap: 4px !important; } /* (c) Secondary CTA row: the "Standorte + Direkt schreiben" flex row with gap:20px */ .hero-left div[style*="display:flex"][style*="gap:20px"] { flex-wrap: wrap !important; row-gap: 12px !important; } } /* Extra-small phones (iPhone SE, small Android): tighten hero paddings */ @media (max-width: 380px) { .hero-left { padding: 20px 16px !important; } .hero-right { padding: 24px 16px !important; } .hero-headline { font-size: 28px !important; line-height: 1.08 !important; } .hero-sub { font-size: 15px !important; } } /* ── (6) HERO CONCIERGE GRID, DEFEAT LATE !IMPORTANT OVERRIDES ─────── */ /* Two late \3c style> blocks ("CONCIERGE HERO RESTRUCTURE" + "Rebalance grid") set .hero { grid-template-columns: 1fr 1.35fr !important } OUTSIDE any media query, so the grid never collapses on mobile. Because those rules use !important, these mobile overrides need !important too, and since this block is later in source order, same-specificity ties go to us. */ @media (max-width: 1024px) { .hero { grid-template-columns: 1fr !important; gap: 0 !important; padding: 32px 20px 40px !important; } .hero-left { padding: 28px 4px 24px !important; /* tight: hero already has side padding */ padding-right: 4px !important; /* overrides the "padding-right:32px!important" */ } .hero-right, .hero-right-concierge { padding: 24px 4px 8px !important; align-items: stretch !important; justify-content: stretch !important; } /* HCI card: full-width on mobile, tighter internal padding */ .hero-complaint-input { max-width: 100% !important; width: 100% !important; padding: 20px 18px 20px !important; border-radius: 16px !important; } /* Kill the decorative rings that sit absolute behind the card, they cause negative space on mobile since they're sized for the desktop 2-col layout */ } /* Tighten further on phones */ @media (max-width: 600px) { .hero { padding: 24px 16px 32px !important; } .hero-left { padding: 20px 0 16px !important; } .hero-complaint-input { padding: 0 !important; background:transparent !important; border:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; } .hero-right, .hero-right-concierge { padding: 8px 0 0 !important; } } /* ── (7) INLINE-GRID COLLAPSE ON MOBILE ─────────────────────────────── */ /* Many sections use INLINE `style="grid-template-columns:repeat(3,1fr)"` (or similar) with no mobile media query, so they stay N-column on phones and squeeze cards to ~110px, text then wraps word-by-word. We target the inline styles via attribute selector. !important is needed because inline styles have specificity 1000. */ /* 4-column → 2-column at ≤768px, 1-column at ≤480px */ /* EXCEPTION: #stats-bar should stay 4-across on mobile with smaller typography, because a stack of 4 single-stat rows eats too much screen height. Keeps the trust signals (24h / 94% / 4.9★ / 500+) in one glanceable row. */ @media (max-width: 768px) { #stats-bar { grid-template-columns: repeat(4, 1fr) !important; } /* Tighten padding so the 4 cells fit comfortably on a 360px phone */ #stats-bar .stat-cell { padding: 14px 4px !important; } /* The number ("24h", "94%", "4.9★", "500+"), still the focal point but smaller */ #stats-bar .stat-cell > div:first-child { font-size: 20px !important; letter-spacing: -0.03em !important; } /* The label under each number, allow wrapping to 2 lines if needed */ #stats-bar .stat-cell > div:last-child { font-size: 10px !important; line-height: 1.25 !important; margin-top: 4px !important; letter-spacing: 0 !important; } } /* Extra-small phones (≤360px): shrink one more notch */ @media (max-width: 360px) { #stats-bar .stat-cell { padding: 12px 2px !important; } #stats-bar .stat-cell > div:first-child { font-size: 17px !important; } #stats-bar .stat-cell > div:last-child { font-size: 9.5px !important; } } /* 3-column → 1-column at ≤768px (text-heavy card grids, the "Termin da", "Medikamente ohne Ende", and the CARE triad). Rationale: trying 3→2 on mobile still squeezes each card too tight for 2-line German compound-word headings like "Kostenübernahme". One column is safer and more legible on phones. */ /* 2-column → 1-column at ≤600px */ /* ── (8) "ALTE WELT ↔ TCM" COMPARISON GRID ──────────────────────────── */ /* The before/after comparison uses inline style="grid-template-columns:1fr auto 1fr" with an arrow in the middle column. On mobile we stack the two content columns and rotate the middle arrow 90° so it points downward. */ @media (max-width: 768px) { /* The middle column is a flex container with vertical divider + arrow. On mobile: kill the vertical line, stretch horizontally, shrink height. */ /* The absolute-positioned vertical divider line inside the middle column, it's a 1px-wide element sized top:0; bottom:0; width:1px. Hide it on mobile since stacked layout doesn't need a vertical separator. */ /* Rotate the circular arrow 90° so it points downward (alte welt → tcm) */ } /* ── (9) .start-grid "So startest du" CARDS ─────────────────────────── */ /* The class .start-grid uses grid-template-columns:repeat(3,1fr) with no mobile breakpoint, so the WhatsApp / Beschwerden / Standort cards stay 3-up on phones and every heading gets chopped to 3-4 chars per line. Stack on mobile. */ @media (max-width: 768px) { /* Keep cards visually consistent when stacked */ } /* ── (10) DUPLICATE HAMBURGER IN HEADER ─────────────────────────────── */ /* The nav has TWO hamburger buttons: .nav-mobile-btn (legacy, opens toggleMobileNav) and .nav-menu-btn (current drawer, opens drawerOpen). On mobile both are visible → redundant hamburger appears between the logo and the drawer button. The drawer is the current nav pattern, so the legacy .nav-mobile-btn is hidden. */ /* Force drawer burger visible on desktop AND mobile */ /* Nav layout fix: logo | links | burger */ @media(min-width:769px){ .logo{flex:0 0 auto !important;} .nav-inner{justify-content:flex-start !important; gap:32px !important;} .nav-links{margin-left:auto !important; gap:20px !important;} } .nav-menu-btn, #navMenuBtn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; border-radius: 10px !important; background: #fff !important; border: 1.5px solid #2D9B6F !important; cursor: pointer !important; padding: 0 !important; margin-left: 14px !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 999 !important; flex-shrink: 0 !important; color: #2D9B6F !important; } .nav-menu-btn svg, #navMenuBtn svg { display: block !important; width: 18px !important; height: 18px !important; stroke: #2D9B6F !important; } @media(max-width:900px){ .nav-menu-btn, #navMenuBtn { display: inline-flex !important; } } /* ── (11b) FAQ SECTION + CONCIERGE CTA TEXT VISIBILITY ──────────────── */ /* The #faq-allgemein section originally had a green background with white .kk-header text. A later override flipped the background to #FAFAFA (light grey) but left the white-text !important rules in place, so the header is now white-on-white-card (invisible). Fix with a darker palette. */ /* The concierge CTA card inside #faq-allgemein has a dark charcoal background with inline white text colors. A later rule `#faq-allgemein p { color: #0A0A0A !important }` overrides the inline white on the .kk-cta-sub paragraph, making it black-on-charcoal = invisible. Restore white with higher specificity. */ /* ── (12) SECTION RHYTHM, ALTERNATE WHITE / SUBTLE GREY ────────────── */ /* Create clean visual separation between sections on the home page by giving selected sections a subtle cool-grey background (#F7F8F9). Sections with their own branded backgrounds (s-offer mint gradient, cta-bands, hero, final-cta) are left untouched. */ /* Consolidate existing near-white greys (#FAFAFA) to the new tone for consistency */ /* Add grey to these sections to break up long white runs on mobile */ .bts-section { background: #F7F8F9 !important; } /* Keep the CSS variable --surface aligned with the new tone (it was #f8f8f8) */ /* ── (11a) "SO STARTEST DU" HEADLINE TEXT COLORS ────────────────────── */ /* Earlier !important rules set these text elements to white, back when the section had a coloured background. A later override at ~byte 246019 made the background #FAFAFA (light grey), but the text colours were never updated, so headline/label/subtitle are white-on-grey (invisible). Restore dark, readable colours matching the Farner/Swiss minimal system. */ /* ── (11) BEHIND-THE-SCENES VIDEO MARQUEE ON MOBILE ─────────────────── */ /* Desktop shows a 6-column grid (tall 9/16 videos). On mobile it becomes 4-column which leaves an orphan row of 2. Convert to an infinite horizontal auto-scroll marquee, editorial, zero interaction needed, no awkward rows. */ @media (max-width: 768px) { /* Hide horizontal overflow and fade the edges so the marquee flows into the page */ .bts-stage { overflow: hidden !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } /* Turn the grid into a single-line flex track; width auto so it can be wider than viewport */ .bts-video-grid { display: flex !important; grid-template-columns: none !important; gap: 10px !important; width: max-content !important; animation: bts-marquee 32s linear infinite; will-change: transform; } /* Fixed size per item; 9/16 aspect kept from desktop rule */ .bts-video-grid .bts-col-item { width: 200px !important; flex: 0 0 200px !important; aspect-ratio: 9/16 !important; } /* Pause on press-and-hold so a user can linger on a frame */ .bts-video-grid:active { animation-play-state: paused; } } /* The keyframes are defined outside the media query so they always exist */ @keyframes bts-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Respect users who've opted out of motion */ @media (prefers-reduced-motion: reduce) { .bts-video-grid { animation: none !important; /* Fall back to a horizontal scroll strip the user can swipe */ overflow-x: auto !important; scroll-snap-type: x mandatory; } .bts-video-grid .bts-col-item { scroll-snap-align: start; } } /* ── (12) HIDE HEAVY DESKTOP-FIRST SECTIONS ON MOBILE ───────────────── */ /* These three sections are dense/long on desktop and don't translate well to mobile (wide ecosystem diagram, 4-step horizontal flow, long prose). */ @media (max-width: 768px) { /* "Schnell zum Arzt / Ohne wochenlang zu warten" (Ärztliche Sprechstunde), the plain .signal-section. The OTHER .signal-section also has .care-system-section, which is handled separately below. */ .signal-section:not(.care-system-section) { display: none !important; } /* "Die richtige Behandlung. Ohne Umwege.", the 4-step flow + 3-brand grid */ .care-system-section { display: none !important; } /* "Nicht gebaut wie eine Praxis. Sondern wie ein System.", the CARE ecosystem pentagon diagram + long prose */ .vision-section { display: none !important; } /* Sticky anchor nav (Bewertungen / Behandlungen / Beschwerden / Standorte / Team / FAQ), redundant on mobile since the drawer menu covers navigation */ } /* --- */ /* ═══════════════════════════════════════ ÜBER UNS PAGE, moved sections override ═══════════════════════════════════════ */ body.on-subpage #page-ueber-uns.active .vision-section, body.on-subpage #page-ueber-uns.active .team-section, body.on-subpage #page-ueber-uns.active .team-header, body.on-subpage #page-ueber-uns.active .team-grid, body.on-subpage #page-ueber-uns.active .founder-section, body.on-subpage #page-ueber-uns.active .bts-section, body.on-subpage #page-ueber-uns.active .signal-section, body.on-subpage #page-ueber-uns.active .care-engine, body.on-subpage #page-ueber-uns.active .care-system-section { display: block !important; } body.on-subpage #page-ueber-uns.active .team-grid { display: grid !important; } #page-ueber-uns .ueber-intro { background:linear-gradient(135deg,#f0f8f4 0%,#f4faf7 55%,#fff 100%); border-bottom:1px solid var(--border); border-top:3px solid var(--blue); padding:64px 0 48px; } #page-ueber-uns .ueber-intro .wrap { display:flex; flex-direction:column; } #page-ueber-uns .ueber-intro .sub-eyebrow { background:rgba(45,155,111,.08); border:1px solid rgba(45,155,111,.25); color:var(--blue-dark); } #page-ueber-uns .ueber-anchor-nav { background:#fff; border-bottom:1px solid var(--border); position:sticky; top:68px; z-index:10; } #page-ueber-uns .ueber-anchor-inner { max-width:var(--max); margin:0 auto; padding:0 40px; display:flex; gap:32px; overflow-x:auto; scrollbar-width:none; } #page-ueber-uns .ueber-anchor-inner::-webkit-scrollbar { display:none; } #page-ueber-uns .ueber-anchor-link { font-size:13px; font-weight:600; color:var(--mid); text-decoration:none; padding:16px 0; white-space:nowrap; border-bottom:2px solid transparent; transition:color var(--t-base),border-color var(--t-base); background:none; border-left:none; border-right:none; border-top:none; cursor:pointer; font-family:var(--font-sans); } #page-ueber-uns .ueber-anchor-link:hover { color:var(--blue); } #page-ueber-uns .ueber-anchor-link.active { color:var(--blue); border-bottom-color:var(--blue); } @media(max-width:900px){ #page-ueber-uns .ueber-anchor-nav { top:64px; } #page-ueber-uns .ueber-anchor-inner { padding:0 20px; gap:24px; } } /* Partner band, quiet, low-contrast, bottom of ueber-uns */ /* ── PRESS STRIP ── */ #page-ueber-uns .uu-press{background:#fff;border-bottom:1px solid var(--border);padding:30px 0} #page-ueber-uns .uu-press-inner{max-width:var(--max);margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:40px} #page-ueber-uns .uu-press-label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-shrink:0} #page-ueber-uns .uu-press-logos{display:flex;align-items:center;gap:36px;flex-wrap:wrap;flex:1} #page-ueber-uns .uu-press-logo{font-family:var(--font-sans);font-size:16px;font-weight:700;color:#9a9a9a;letter-spacing:-.02em;opacity:.72;transition:opacity var(--t-base),color var(--t-base)} #page-ueber-uns .uu-press-logo.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:600;letter-spacing:0} #page-ueber-uns .uu-press-logo:hover{opacity:1;color:#555} @media(max-width:900px){ #page-ueber-uns .uu-press-inner{flex-direction:column;align-items:flex-start;gap:14px;padding:0 20px} #page-ueber-uns .uu-press-logos{gap:18px 24px} #page-ueber-uns .uu-press-logo{font-size:14px} } /* ── MEDICAL ADVISOR ── */ #page-ueber-uns .uu-advisor{background:#f8f8f6;padding:80px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} #page-ueber-uns .uu-advisor-inner{max-width:980px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:center} #page-ueber-uns .uu-advisor-photo-wrap{border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:linear-gradient(135deg,#E8F5EE 0%,#D4EEE0 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(0,0,0,.08)} #page-ueber-uns .uu-advisor-photo-placeholder{font-family:var(--font-sans);font-size:72px;font-weight:800;color:#2D9B6F;letter-spacing:-.04em;opacity:.78} #page-ueber-uns .uu-advisor-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;display:flex;align-items:center;gap:8px} #page-ueber-uns .uu-advisor-eyebrow::before{content:'';width:18px;height:1px;background:currentColor;opacity:.6} #page-ueber-uns .uu-advisor-name{font-family:var(--font-sans);font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--black);letter-spacing:-.025em;line-height:1.15;margin-bottom:4px} #page-ueber-uns .uu-advisor-role{font-size:14.5px;font-weight:600;color:var(--blue-dark);margin-bottom:18px} #page-ueber-uns .uu-advisor-quote{font-size:17px;line-height:1.65;color:var(--charcoal);font-style:italic;margin:0 0 20px;padding-left:18px;border-left:2px solid var(--blue);font-weight:400} #page-ueber-uns .uu-advisor-creds{display:flex;flex-wrap:wrap;gap:6px} #page-ueber-uns .uu-advisor-cred{font-size:12px;font-weight:600;color:var(--mid);background:#fff;border:1px solid var(--border);border-radius:100px;padding:5px 12px} @media(max-width:768px){ #page-ueber-uns .uu-advisor-inner{grid-template-columns:1fr;gap:28px;padding:0 20px;max-width:480px} #page-ueber-uns .uu-advisor-photo-wrap{aspect-ratio:1;max-width:200px;margin:0 auto} #page-ueber-uns .uu-advisor{padding:56px 0} } /* --- */ /* ═══════════════════════════════════════ ÄRZTLICHE SPRECHSTUNDE, subpage ═══════════════════════════════════════ */ /* cloned signal-section must stay visible on sprechstunde subpage */ /* --- */ .sticky-cta.is-visible{transform:translateY(0)} .sticky-cta-primary:active{transform:scale(.98)} .sticky-cta-secondary:active{transform:scale(.98)} .mobile-cta-bar{display:none !important} @media(max-width:600px){[class$="-sx-grid"],[class*="-sx-grid "],.cp-sx-grid,.bx-complaint-list{grid-template-columns:1fr 1fr !important}} @media(max-width:440px){.card-grid,.card-grid-3,.city-grid{grid-template-columns:1fr 1fr !important;gap:10px !important}} /* ============================================================ */ /* === DESIGN HIERARCHY REINFORCEMENT (v2) ==================== */ /* Sharpens the 3-tier visual distinction: */ /* BUTTONS → depth + colored shadow + lift on hover */ /* CARDS → subtle neutral shadow + larger radius */ /* CHIPS → flat + pill-shaped + no shadow */ /* ============================================================ */ /*, BUTTONS: depth + brand-tinted shadow + hover lift, */ .btn-primary, .hero-finder-cta, .team-cta, .offer-cta { border-radius: var(--r-btn); box-shadow: var(--sh-btn); transition: transform var(--t-base) var(--ease-out, cubic-bezier(.22,1,.36,1)), box-shadow var(--t-base) ease; } .btn-primary:hover, .hero-finder-cta:hover, .team-cta:hover, .offer-cta:hover { transform: translateY(-1px); box-shadow: var(--sh-btn-hover); } .btn-primary:active, .hero-finder-cta:active, .sticky-cta-primary:active, .cp-btn:active, .kar-btn-primary:active { transform: translateY(0); box-shadow: var(--sh-btn); } /*, SECONDARY BUTTONS: flat, no colored shadow, */ .btn-secondary, .btn-outline-white { border-radius: var(--r-btn); box-shadow: var(--sh-flat); transition: background var(--t-fast) ease, border-color var(--t-fast) ease; } /*, WHITE BUTTONS (on dark hero/CTA bands): elevated white, */ .btn-white { border-radius: var(--r-btn); box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.10); transition: transform var(--t-base) ease, box-shadow var(--t-base) ease; } .btn-white:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.24), 0 2px 4px rgba(0,0,0,.12); } /*, CARDS: subtle, neutral, larger radius. No colored shadow., */ .svc-card, .cond-card, .team-card, .city-card, .consult-card, .why-card, .inline-form-card, .c-card { border-radius: var(--r-card); box-shadow: var(--sh-card); transition: box-shadow var(--t-base) ease, transform var(--t-base) ease; } .svc-card:hover, .cond-card:hover, .team-card:hover, .city-card:hover, .consult-card:hover, .why-card:hover { box-shadow: var(--sh-elevated); } /*, CHIPS / LABELS / BADGES: flat + pill, no shadow, */ .offer-feat-pill, .wa-pill, .hero-trust-chip, .doc-tag, .svc-badge, .svc-badge--time, .svc-badge--ins, .section-label, .next-steps-label, .strip-label, .tag-label { border-radius: var(--r-pill); box-shadow: var(--sh-flat); } /*, Focus visibility (a11y polish), */ .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-white:focus-visible, .btn-outline-white:focus-visible, .hero-finder-cta:focus-visible, .sticky-cta-primary:focus-visible, .sticky-cta-secondary:focus-visible { outline: 2px solid #2D9B6F; outline-offset: 3px; } /*, Reduced motion respect, */ @media (prefers-reduced-motion: reduce) { .btn-primary, .btn-white, .hero-finder-cta, .svc-card, .cond-card, .team-card, .city-card { transition: none !important; } .btn-primary:hover, .btn-white:hover, .hero-finder-cta:hover { transform: none !important; } } /* ============================================================ */ /* === Hero team trust strip + price transparency === */ .sg-team-strip{margin:18px 0 18px;padding:14px 18px;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:12px;display:flex;flex-direction:column;gap:4px} .offer-img-caption{margin-top:14px;font-size:13.5px;line-height:1.55;color:#6B7280;text-align:center;font-style:italic;font-family:var(--font-sans);padding:0 8px} @media(max-width:600px){.offer-img-caption{margin-top:10px;font-size:12.5px;padding:0 4px}} .sg-team-card{margin:24px 0;padding:20px 22px;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:14px;display:flex;flex-direction:column;gap:8px} .sg-team-card-label{font-size:11px;font-weight:600;color:#2D9B6F;text-transform:uppercase;letter-spacing:.08em} .sg-team-card-names{font-size:15px;font-weight:500;color:#374151;line-height:1.5} .sg-team-card-names strong{font-weight:700;color:#0d0d0d} .sg-team-card-price{font-size:14px;font-weight:600;color:#0d0d0d;padding-top:10px;margin-top:2px;border-top:1px solid #E5E7EB} @media(max-width:600px){.sg-team-card{margin:18px 0;padding:14px 16px}.sg-team-card-names{font-size:14px}.sg-team-card-price{font-size:13px}} @media(max-width:900px){.sg-team-strip{display:none !important}} #sg-premium-hero.sg-active .sg-mobile-team{order:3} #zh-premium-hero.sg-active .sg-mobile-team{order:3} #win-premium-hero.sg-active .sg-mobile-team{order:3} #generic-premium-hero.sg-active .sg-mobile-team{order:3} .sg-team-strip-label{font-size:11px;font-weight:600;color:#2D9B6F;text-transform:uppercase;letter-spacing:.08em} .sg-team-strip-names{font-size:14px;font-weight:500;color:#374151;line-height:1.5} .sg-team-strip-names strong{font-weight:700;color:#0d0d0d} #sg-premium-hero.sg-active .sg-mobile-team{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:12px;margin:0 0 12px} #sg-premium-hero.sg-active .sg-mobile-team-label{font-size:10.5px;font-weight:600;color:#2D9B6F;text-transform:uppercase;letter-spacing:.08em} #sg-premium-hero.sg-active .sg-mobile-team-names{font-size:13.5px;font-weight:500;color:#374151;line-height:1.45} #sg-premium-hero.sg-active .sg-mobile-team-names strong{font-weight:700;color:#0d0d0d} #sg-premium-hero.sg-active .sg-mobile-price{font-size:12.5px;font-weight:600;color:#0d0d0d;margin-top:4px;padding-top:8px;border-top:1px solid #E5E7EB} .usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1200px;margin:0 auto} .usp-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px 22px;display:flex;flex-direction:column;gap:10px;transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease} .usp-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.06);border-color:rgba(45,155,111,.25)} .usp-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .usp-title{font-family:var(--font-sans);font-size:15.5px;font-weight:700;color:#0d0d0d;letter-spacing:-.01em;line-height:1.3} .usp-sub{font-size:13.5px;color:#6B7280;line-height:1.55;font-weight:400} @media(max-width:980px){.usp-grid{grid-template-columns:repeat(2,1fr);gap:14px}.usp-card{padding:20px 18px}} @media(max-width:560px){.usp-grid-section{padding:32px 0!important}.usp-grid{grid-template-columns:1fr;gap:12px}.usp-card{padding:18px 16px;gap:8px}.usp-title{font-size:14.5px}.usp-sub{font-size:13px}} /* ════════ HERO CONVERSION UPGRADE (action unit · trust row · sub-headline · review badge · header-CTA demote) ════════ */ #home-content .hero-subhead{font-family:var(--font-sans);font-size:clamp(16px,1.6vw,20px);font-weight:600;color:#374151;letter-spacing:-.01em;line-height:1.3;margin:0 0 12px} #home-content .hero-action{display:flex;flex-direction:column;gap:12px;margin-top:16px;max-width:520px;width:100%} #home-content .hero-action-label{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8a9299} #home-content .hero-action-row{display:flex;align-items:stretch;gap:12px} #home-content .hero-standort{position:relative;flex:1 1 auto;min-width:0} #home-content .hero-action-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:0 0 auto;white-space:nowrap;padding:15px 26px;border-radius:14px;background:var(--blue);color:#fff;border:none;font-size:15.5px;font-weight:700;font-family:var(--font-sans);letter-spacing:-.01em;cursor:pointer;box-shadow:0 8px 24px rgba(45,155,111,.32);transition:transform .2s ease,box-shadow .2s ease,background .2s ease} #home-content .hero-action-cta:hover{transform:translateY(-1px);background:var(--blue-dark);box-shadow:0 10px 28px rgba(45,155,111,.42)} #home-content .hero-action-cta:active{transform:translateY(0)} #home-content .hero-action-cta .hac-sub{opacity:.85;font-weight:500} #home-content .hero-action-cta svg{flex-shrink:0} #home-content .hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;font-family:var(--font-sans);font-size:13px;font-weight:500;color:#374151;line-height:1.4} #home-content .hero-trust-star{color:#c9a96e;font-size:14px;line-height:1} #home-content .hero-trust-dot{color:var(--border)} #home-content .hero-action-secondary button{background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#545e6b;font-family:var(--font-sans);font-weight:500;padding:0} #home-content .hero-action-secondary button span{color:var(--blue);text-decoration:underline;text-underline-offset:3px} #home-content .hero-checks{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--font-sans);font-size:13px;font-weight:500;color:#374151;line-height:1.4} #home-content .hero-checks span{display:inline-flex;align-items:center;gap:6px} #home-content .hero-checks svg{flex-shrink:0} #home-content .hero-right-picker{position:relative} #home-content .hero-review-badge{position:absolute;left:18px;bottom:18px;z-index:2;display:flex;align-items:center;gap:11px;background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-md);padding:13px 16px} #home-content .hero-review-badge .hrb-stars{color:#c9a96e;font-size:18px;line-height:1;flex-shrink:0} #home-content .hero-review-badge .hrb-main{font-family:var(--font-sans);font-size:14px;font-weight:700;color:#0d0d0d;line-height:1.2} #home-content .hero-review-badge .hrb-label{font-family:var(--font-sans);font-size:11px;font-weight:600;color:#8a9299;letter-spacing:.02em;margin-top:1px} @media(max-width:680px){#home-content .hero-action{max-width:none}#home-content .hero-action-row{flex-direction:column;align-items:stretch}#home-content .hero-action-cta{width:100%;padding:15px 20px}} @media(max-width:479px){#home-content .hero-review-badge{display:none}} #navCtaBtn.nav-cta{background:transparent!important;color:#0d0d0d!important;border:1.5px solid rgba(13,13,13,.22)!important;font-weight:600!important;box-shadow:none!important;transition:background .2s ease,border-color .2s ease} #navCtaBtn.nav-cta:hover{background:rgba(13,13,13,.06)!important;border-color:rgba(13,13,13,.4)!important} /* ════════════════════ HOME DESIGN-SYSTEM NORMALIZATION (polish pass) ════════════════════ */ /* Scoped to #home-content; !important to beat minified base rules + inline styles. Hero + dark bands left intact. */ /* 1. EYEBROWS → one style (hero eyebrow: 11.5/600/.18em/uppercase/green/mb14) */ #home-content .section-label, #home-content .offer-eyebrow, #home-content .eyebrow{font-family:var(--font-sans)!important;font-size:11.5px!important;font-weight:600!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:#2D9B6F!important;margin-bottom:14px!important;background:none!important;border:none!important;padding:0!important;display:block!important;width:auto!important} #home-content .kennst-section .reveal>div:first-child{font-size:11.5px!important;font-weight:600!important;letter-spacing:.18em!important;margin-bottom:14px!important;color:#2D9B6F!important} /* 2. SECTION H2 → one scale + tracking; slate em accent (green = action layer only) */ #home-content .section-title, #home-content .offer-h2, #home-content .kennst-section h2{font-size:clamp(28px,3.4vw,42px)!important;letter-spacing:-.02em!important;font-weight:800!important;line-height:1.12!important} #home-content section:not(.wa-section) .section-title, #home-content .offer-h2, #home-content .kennst-section h2{color:#0D0D0D!important} #home-content .offer-h2 em, #home-content .kennst-section h2 em{color:#2F3A45!important;font-weight:650!important;font-style:italic!important} /* 3. BODY GRAY → #374151 everywhere (dark wa-section excluded) */ #home-content section:not(.wa-section) .section-sub, #home-content .offer-sub, #home-content .offer-bullets li, #home-content .review-text, #home-content .svc-tagline, #home-content .svc-sub, #home-content .kennst-section p, #home-content .kk-a p, #home-content .kk-intro, #home-content .location-desc, #home-content .location-intro{color:#374151!important} #home-content .review-text{font-style:normal!important;font-weight:400!important;line-height:1.6!important} /* 4. CARDS → one style (16px / --border / --sh-md / hover -2px) */ #home-content .offer-card, #home-content .kennst-grid>div, #home-content .review-card, #home-content .svc-card, #home-content .usp-card, #home-content .city-card, #home-content .location-card, #home-content .cp-review-card, #home-content .inline-form-card, #home-content .wa-concierge, #home-content .kk-faq{background:#fff!important;border:1px solid var(--border)!important;border-radius:var(--r-card)!important;box-shadow:var(--sh-md)!important;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .2s!important} #home-content .offer-card:hover, #home-content .kennst-grid>div:hover, #home-content .review-card:hover, #home-content .svc-card:hover, #home-content .usp-card:hover, #home-content .city-card:hover, #home-content .location-card:hover{transform:translateY(-2px)!important;box-shadow:var(--sh-lg)!important;border-color:rgba(45,155,111,.25)!important} #home-content .kennst-grid>div, #home-content .review-card, #home-content .cp-review-card{padding:24px!important} /* 5. CTAs → one green primary (hero CTA) + one ghost secondary */ #home-content .offer-cta, #home-content .wa-concierge-submit, #home-content .btn-primary, #home-content .hcd-primary{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;padding:15px 26px!important;border-radius:14px!important;background:var(--blue)!important;color:#fff!important;border:none!important;font-size:15.5px!important;font-weight:700!important;font-family:var(--font-sans)!important;letter-spacing:-.01em!important;box-shadow:0 8px 24px rgba(45,155,111,.32)!important;transition:transform .2s,box-shadow .2s,background .2s!important} #home-content .offer-cta:hover, #home-content .wa-concierge-submit:hover, #home-content .btn-primary:hover, #home-content .hcd-primary:hover{transform:translateY(-1px)!important;background:var(--blue-dark)!important;box-shadow:0 10px 28px rgba(45,155,111,.42)!important} #home-content .btn-secondary{background:transparent!important;color:#0d0d0d!important;border:1.5px solid rgba(13,13,13,.22)!important;border-radius:14px!important;padding:14px 24px!important;font-weight:600!important;font-size:15px!important;font-family:var(--font-sans)!important;box-shadow:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;transition:background .2s,border-color .2s!important} #home-content .btn-secondary:hover{background:rgba(13,13,13,.06)!important;border-color:rgba(13,13,13,.4)!important;transform:none!important} /* 6. FORM focus ring → brand green */ #home-content .form-input:focus, #home-content .form-select:focus, #home-content .form-textarea:focus{border-color:#2D9B6F!important;box-shadow:0 0 0 3px rgba(45,155,111,.12)!important;outline:none!important} /* 7. DIVIDERS → one 1px --border hairline */ #home-content .svc-cta, #home-content .kk-item, #home-content .kk-q, #home-content .next-steps, #home-content .form-divider-quiet, #home-content #stats-bar .stat-cell{border-color:var(--border)!important} /* 8. REVEAL motion → 10px rise / 400ms ease-out (count-up + hover lifts kept) */ #home-content .reveal{transform:translateY(10px)!important;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)!important} #home-content .reveal.visible{transform:none!important;opacity:1!important} @media(prefers-reduced-motion:reduce){#home-content .reveal{transform:none!important;transition:none!important}} /* 9. SECTION rhythm → --section-py token on sections that override it */ #home-content #s-offer, #home-content .kennst-section, #home-content .wa-section{padding-top:var(--section-py)!important;padding-bottom:var(--section-py)!important} /* wa-concierge: dark glass → light standard card on the dark band; inner text flipped to dark */ #home-content .wa-concierge{padding:24px!important} #home-content .wa-concierge-head{border-bottom-color:var(--border)!important} #home-content .wa-concierge-label{color:#8a9299!important} #home-content .wa-concierge-sub{color:#374151!important} #home-content .wa-concierge-textarea{background:#fff!important;border:1.5px solid var(--border)!important;color:#0d0d0d!important;border-radius:14px!important} #home-content .wa-concierge-textarea:focus{border-color:#2D9B6F!important;box-shadow:0 0 0 3px rgba(45,155,111,.12)!important} #home-content .wa-chat-name{color:#0d0d0d!important} #home-content .wa-chat-status{color:#8a9299!important} #home-content .wa-pill{background:var(--surface)!important;border:1px solid var(--border)!important;color:#374151!important} #home-content .wa-pill:hover{border-color:#2D9B6F!important;color:#1F7A54!important} #home-content .wa-concierge-wa-alt{color:#1F7A54!important} /* ════════════ SITE-WIDE ROLLOUT: SPA hub/leaf pages (#page-* roots; longevity premium excluded) ════════════ */ /* One selector covers every SPA page container. Dark sections keep their inline white (we only touch size/tracking, not H2 color). */ [id^="page-"]:not(#page-longevity) .section-label, [id^="page-"]:not(#page-longevity) .offer-eyebrow, [id^="page-"]:not(#page-longevity) .eyebrow{font-family:var(--font-sans)!important;font-size:11.5px!important;font-weight:600!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:#2D9B6F!important;margin-bottom:14px!important;background:none!important;border:none!important;padding:0!important;display:block!important;width:auto!important} [id^="page-"]:not(#page-longevity) .section-title{font-size:clamp(28px,3.4vw,42px)!important;letter-spacing:-.02em!important;font-weight:800!important;line-height:1.12!important} [id^="page-"]:not(#page-longevity) .review-text, [id^="page-"]:not(#page-longevity) .svc-tagline, [id^="page-"]:not(#page-longevity) .kk-a p, [id^="page-"]:not(#page-longevity) .kk-intro, [id^="page-"]:not(#page-longevity) .offer-sub, [id^="page-"]:not(#page-longevity) .location-desc, [id^="page-"]:not(#page-longevity) .location-intro{color:#374151!important} [id^="page-"]:not(#page-longevity) .review-text{font-style:normal!important;font-weight:400!important;line-height:1.6!important} [id^="page-"]:not(#page-longevity) .offer-card, [id^="page-"]:not(#page-longevity) .review-card, [id^="page-"]:not(#page-longevity) .svc-card, [id^="page-"]:not(#page-longevity) .usp-card, [id^="page-"]:not(#page-longevity) .city-card, [id^="page-"]:not(#page-longevity) .location-card, [id^="page-"]:not(#page-longevity) .cp-review-card, [id^="page-"]:not(#page-longevity) .inline-form-card, [id^="page-"]:not(#page-longevity) .kk-faq{background:#fff!important;border:1px solid var(--border)!important;border-radius:var(--r-card)!important;box-shadow:var(--sh-md)!important;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .2s!important} [id^="page-"]:not(#page-longevity) .offer-card:hover, [id^="page-"]:not(#page-longevity) .review-card:hover, [id^="page-"]:not(#page-longevity) .svc-card:hover, [id^="page-"]:not(#page-longevity) .usp-card:hover, [id^="page-"]:not(#page-longevity) .city-card:hover, [id^="page-"]:not(#page-longevity) .location-card:hover{transform:translateY(-2px)!important;box-shadow:var(--sh-lg)!important;border-color:rgba(45,155,111,.25)!important} [id^="page-"]:not(#page-longevity) .review-card, [id^="page-"]:not(#page-longevity) .cp-review-card{padding:24px!important} [id^="page-"]:not(#page-longevity) .btn-primary, [id^="page-"]:not(#page-longevity) .offer-cta, [id^="page-"]:not(#page-longevity) .hcd-primary{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;padding:15px 26px!important;border-radius:14px!important;background:var(--blue)!important;color:#fff!important;border:none!important;font-size:15.5px!important;font-weight:700!important;font-family:var(--font-sans)!important;letter-spacing:-.01em!important;box-shadow:0 8px 24px rgba(45,155,111,.32)!important;transition:transform .2s,box-shadow .2s,background .2s!important} [id^="page-"]:not(#page-longevity) .btn-primary:hover, [id^="page-"]:not(#page-longevity) .offer-cta:hover, [id^="page-"]:not(#page-longevity) .hcd-primary:hover{transform:translateY(-1px)!important;background:var(--blue-dark)!important;box-shadow:0 10px 28px rgba(45,155,111,.42)!important} [id^="page-"]:not(#page-longevity) .btn-secondary{background:transparent!important;color:#0d0d0d!important;border:1.5px solid rgba(13,13,13,.22)!important;border-radius:14px!important;padding:14px 24px!important;font-weight:600!important;font-size:15px!important;box-shadow:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important} [id^="page-"]:not(#page-longevity) .btn-secondary:hover{background:rgba(13,13,13,.06)!important;border-color:rgba(13,13,13,.4)!important;transform:none!important} [id^="page-"]:not(#page-longevity) .form-input:focus, [id^="page-"]:not(#page-longevity) .form-select:focus, [id^="page-"]:not(#page-longevity) .form-textarea:focus{border-color:#2D9B6F!important;box-shadow:0 0 0 3px rgba(45,155,111,.12)!important;outline:none!important} [id^="page-"]:not(#page-longevity) .kk-q, [id^="page-"]:not(#page-longevity) .kk-item, [id^="page-"]:not(#page-longevity) .svc-cta{border-color:var(--border)!important} [id^="page-"] .reveal{transform:translateY(10px)!important;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)!important} [id^="page-"] .reveal.visible{transform:none!important;opacity:1!important} @media(prefers-reduced-motion:reduce){[id^="page-"] .reveal{transform:none!important;transition:none!important}} /* ── Offer section upgrade (Hormozi) — mint band, 3 system cards + full-width feature card ── */ #home-content #s-offer .offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:920px;margin:0 auto} #home-content #s-offer .offer-cardx{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-md);padding:24px;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .2s} #home-content #s-offer .offer-cardx:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:rgba(45,155,111,.25)} #home-content #s-offer .offer-cardx-title{display:flex;align-items:flex-start;gap:10px;font-family:var(--font-sans);font-size:17px;font-weight:700;color:#0d0d0d;letter-spacing:-.015em;line-height:1.3;margin:0 0 10px} #home-content #s-offer .offer-cardx-title svg, #home-content #s-offer .offer-feature-title svg{flex-shrink:0} #home-content #s-offer .offer-cardx-text{font-family:var(--font-sans);font-size:14.5px;line-height:1.6;color:#374151;margin:0} #home-content #s-offer .offer-feature{max-width:920px;margin:20px auto 0;background:#fff;border:1.5px solid #2D9B6F;border-radius:var(--r-card);box-shadow:var(--sh-md);padding:32px} #home-content #s-offer .offer-feature-title{display:flex;align-items:center;gap:12px;font-family:var(--font-sans);font-size:18px;font-weight:800;color:#0d0d0d;letter-spacing:-.015em;line-height:1.3;margin:0 0 10px} #home-content #s-offer .offer-feature-text{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:#374151;margin:0;max-width:760px} @media(max-width:680px){#home-content #s-offer .offer-grid{grid-template-columns:1fr}#home-content #s-offer .offer-feature{padding:24px}} /* Compact trust checklist + structural scarcity above the contact form (non-home pages; injected by home.js) */ .form-trust-checklist{display:flex;flex-wrap:wrap;justify-content:center;gap:11px 22px;margin:0 auto 12px;padding-top:22px;border-top:1px solid var(--border)} .form-trust-checklist .ftc-item{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:13.5px;font-weight:500;color:#374151;line-height:1.3} .form-trust-checklist .ftc-item svg{flex-shrink:0} .form-trust-scarcity{max-width:580px;margin:0 auto 24px;text-align:center;font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:#374151;line-height:1.45} @media(max-width:480px){.form-trust-checklist{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;justify-items:start}.form-trust-scarcity{text-align:left}} /* Home hero — keep the green CTA + trust row above the fold on small viewports: top-align, tighten, image below the CTA */ @media(max-width:1024px){ #home-content .hero-bg{align-items:flex-start !important} #home-content .hero{padding-top:18px !important;align-items:start !important} #home-content .hero-left .hero-headline{margin-bottom:12px !important} #home-content .hero-left .hero-sub{margin-bottom:14px !important} #home-content .hero-subhead{margin:0 0 10px !important} #home-content .hero-action{margin-top:14px !important} #home-content .hero-mobile-img{order:2;margin-top:22px} } /* Hero standort selector: hidden on mobile (home hero only; Standort pages keep their own intent) */ @media(max-width:767px){ #home-content .hero-action-label, #home-content .hero-standort{display:none !important} /* tighten the top offset above the headline (mobile only) — shift hero up, reveal image */ #home-content .hero-bg{padding-top:0 !important} #home-content .hero{padding-top:18px !important} #home-content .hero-left{padding-top:0 !important} } /* Pain section cards (kennst) only — compact, consistent type, single shared card scale */ #home-content .kennst-section .kennst-grid{max-width:980px;margin:0 auto;align-items:stretch} #home-content .kennst-section .kennst-grid>div{ height:100% !important; /* equal height across all 3 */ padding:22px !important; gap:10px !important; border:1px solid var(--border) !important; box-shadow:var(--sh-sm) !important; /* subtle: light shadow + hairline border, neither heavy */ border-radius:var(--r-card) !important; } #home-content .kennst-section .kennst-grid>div h3{ font-family:var(--font-sans) !important; /* Figtree, heading font */ font-weight:700 !important; letter-spacing:normal !important; color:#0d0d0d !important; } #home-content .kennst-section .kennst-grid>div p{ font-family:var(--font-sans) !important; /* standard body font/weight */ font-weight:400 !important; letter-spacing:normal !important; color:#374151 !important; } /* ── DE HOME HERO — matches the EN hero design system exactly ── Single column, one uniform headline, one lead paragraph, stacked primary+ghost CTAs, compact trust rows, image below. Values mirror global.css .hero / .eyebrow / .btn / .hero-figure. Mobile + desktop. */ /* containers: drop the two-column grid, bg image and full-viewport height */ #home-content .hero-bg{ background:#fff !important; background-image:none !important; min-height:auto !important; height:auto !important; display:block !important; } #home-content .hero{ display:block !important; grid-template-columns:none !important; max-width:var(--max) !important; margin:0 auto !important; padding:64px 40px 56px !important; min-height:auto !important; height:auto !important; width:100% !important; background:transparent !important; } #home-content .hero-left{ display:block !important; max-width:none !important; width:100% !important; margin:0 !important; padding:0 !important; background:none !important; border:none !important; box-shadow:none !important; animation:none !important; } /* old right-column image is replaced by the figure below — hide everywhere */ #home-content .hero-right, #home-content .hero-right-picker, #home-content .hero-right-img{display:none !important} /* eyebrow — EN .eyebrow (green, uppercase, letter-spaced) */ #home-content .deh-eyebrow{ font-family:var(--font-sans); font-size:11.5px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--blue); margin:0 0 14px;display:block; } /* headline — EN .hero h1: one uniform block, no italic, no colour change */ #home-content .deh-h1{ font-family:var(--font-sans); font-size:var(--fs-hero); font-weight:800; line-height:var(--lh-tight); letter-spacing:var(--tracking-hero); color:#0D0D0D; margin:0 0 16px; } /* body — EN .hero p.lead: one clean paragraph, single style */ #home-content .deh-lead{ font-family:var(--font-sans); font-size:var(--fs-sub); color:#374151; line-height:1.55; max-width:660px; margin:0 0 26px; font-weight:400; } /* CTAs — EN .hero__cta + .btn / .btn--primary / .btn--ghost */ #home-content .deh-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px} #home-content .deh-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--font-sans);font-weight:700;font-size:15.5px; padding:15px 26px;border-radius:14px; text-decoration:none;cursor:pointer;border:none;letter-spacing:-.01em; transition:background .2s ease,transform .2s ease,box-shadow .2s ease; } #home-content .deh-btn--primary{background:var(--blue);color:#fff;box-shadow:var(--sh-btn)} #home-content .deh-btn--primary:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:var(--sh-btn-hover)} #home-content .deh-btn--primary:active{transform:translateY(0);box-shadow:var(--sh-btn)} #home-content .deh-btn--ghost{background:transparent;color:#0d0d0d;border:1.5px solid rgba(13,13,13,.22)} #home-content .deh-btn--ghost:hover{background:rgba(13,13,13,.06);border-color:rgba(13,13,13,.4)} /* compact trust rows under the buttons */ #home-content .hero-checks{margin:0 0 10px !important} #home-content .hero-trust{margin:0 !important} /* image — EN .hero-figure */ #home-content .deh-figure{ margin:30px 0 0; border-radius:var(--r-hero); overflow:hidden; box-shadow:var(--sh-card); background:var(--surface); } #home-content .deh-figure img{ display:block;width:100%; height:clamp(220px,36vw,440px); object-fit:cover;object-position:center; } /* responsive — EN reduces hero padding at its 820px breakpoint */ @media(max-width:820px){ #home-content .hero{padding:40px 24px 40px !important} } /* desktop only — 50/50 split: text column left, image right at full hero height. The figure is a direct child of .hero (sibling of .hero-left), so it becomes the second grid column here, and on mobile (single column) it still falls below the trust strip. */ @media(min-width:1025px){ #home-content .hero{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:48px !important; align-items:center !important; /* text + image vertically centered, balanced */ padding:56px 40px !important; } #home-content .hero-left{ display:flex !important; flex-direction:column; justify-content:center; } #home-content .deh-figure{ margin:0 !important; /* fixed-height card that always fits the viewport under the 68px nav (68 nav + 56 top + 56 bottom = 180); object-fit keeps it filled and overflow:hidden + border-radius keep all 4 rounded corners visible */ height:clamp(420px, calc(100vh - 180px), 760px) !important; align-self:center !important; } #home-content .deh-figure img{ height:100% !important; width:100% !important; object-fit:cover !important; } } /* ── MOBILE AUDIT — category (a) fixes ─────────────────────────────────── */ /* A1. iOS focus-zoom: every form control >=16px on phones so Safari doesn't zoom the viewport when a field is focused (conversion forms sitewide). */ @media(max-width:640px){ input, select, textarea{ font-size:16px !important; } } /* A2. Symptom-leaf "Auf einen Blick"/symptom grids are pinned to two columns (line ~3952, 1fr 1fr !important) whose items can't shrink below their text, forcing .content-body past the viewport so body text is clipped on the right (body has overflow-x:hidden). Collapse them to one column on narrow phones. */ @media(max-width:420px){ .cp-sx-grid, [class$="-sx-grid"], [class*="-sx-grid "]{ grid-template-columns:1fr !important; } } /* ── Mobile audit B2: horizontal-scroll hint on wide tables ── header.js adds .is-scrollx when the table actually overflows its wrapper. */ .kk-table-wrap, .table-wrap{ position:relative; } .kk-table-wrap.is-scrollx::after, .table-wrap.is-scrollx::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:40px; background:linear-gradient(to right, rgba(255,255,255,0), #fff 80%); pointer-events:none; z-index:1; } .kk-table-wrap.is-scrollx::before, .table-wrap.is-scrollx::before{ content:"\203A"; position:absolute; top:6px; right:7px; z-index:2; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font:700 18px/1 var(--font-sans); color:#fff; background:var(--blue); border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.18); pointer-events:none; } /* ── Mobile audit B3: /ueber-uns #partner-grow-cta inline 2-col grid didn't collapse on phones, pushing an image past the viewport. Collapse to 1 col. */ @media(max-width:600px){ #partner-grow-cta [style*="grid-template-columns"]{ grid-template-columns:1fr !important; } } /* ── Mobile audit B1: touch targets >=44px (home/SPA pages bundle header CSS) ── */ .nav-menu-btn{width:44px;height:44px;min-width:44px;min-height:44px} .nav-lang{min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 14px !important} .drw-close{width:44px;height:44px} .drw-links a,.drw-links button{min-height:44px;display:flex;align-items:center} /* /krankenkassen hero: clear the 68px sticky mobile header (page lacks the header offset) */ @media(max-width:768px){.kk-hero{padding-top:64px}} /* Standort hero (all 12, shared .sg-active): clear the 68px sticky mobile header so the heading is not cut off */ @media(max-width:768px){#generic-premium-hero.sg-active,#zh-premium-hero.sg-active{padding-top:64px !important}}