/* =========================================================
MyPelvi — PLATFORM layer
Scalable components shared across all pages.
Extends styles.css (same tokens) — does NOT restyle the
approved visual system.
========================================================= */
/* ---------- Skip the homepage's inline .nav when platform nav present ---------- */
body.has-pnav{ }
/* =========================================================
MEGA NAV — scalable architecture
========================================================= */
.pnav{ position:fixed; inset:0 0 auto 0; z-index:60; background:rgba(247,246,243,.9); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s; }
.pnav.scrolled{ border-color:rgba(227,221,208,.7); box-shadow:0 1px 0 rgba(227,221,208,.5); }
.pnav__row{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--nav-h); }
.pnav__left{ display:flex; align-items:center; gap:34px; }
.pnav__menu{ display:flex; align-items:center; gap:4px; }
.pnav__item{ position:relative; }
.pnav__link{ display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:10px; font-size:14px; font-weight:500; color:var(--ink-2); cursor:pointer; transition:.18s; white-space:nowrap; }
.pnav__link:hover, .pnav__item.open .pnav__link{ color:var(--brand-blue); background:rgba(64,96,144,.06); }
.pnav__link .caret{ width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s; opacity:.6; }
.pnav__item.open .pnav__link .caret{ transform:rotate(-135deg) translateY(-1px); }
.pnav__right{ display:flex; align-items:center; gap:12px; }
.pnav__ghost{ padding:11px 18px; font-size:14px; }
.pnav__cta{ padding:11px 20px; font-size:14px; }
/* Mega panel */
.pnav__panel{
position:absolute; top:calc(100% + 10px); left:0; min-width:300px;
background:var(--bone); border:1px solid var(--hair); border-radius:16px;
box-shadow:0 30px 70px -36px rgba(28,35,51,.4); padding:14px;
display:none;
}
.pnav__panel.wide{ min-width:540px; grid-template-columns:1fr 1fr; gap:8px; }
.pnav__panel.feature{ min-width:620px; grid-template-columns:1.1fr .9fr; gap:8px; }
/* Variante A — "Frauen & Männer" als zwei klar getrennte Cards (0,5-s-Orientierung) */
.pnav__panel.cards{ min-width:880px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding:20px; background:#fff; }
.pnav__panel.cards .pnav__sub{ background:#fff; border:1px solid var(--hair); border-radius:16px; padding:20px 20px 22px; transition:border-color .2s, box-shadow .2s; }
.pnav__panel.cards .pnav__sub:hover{ border-color:var(--brand-blue-tint); box-shadow:var(--shadow-md); }
.pnav__panel.cards .pnav__suba{ padding:11px 12px; }
.pnav__panel.cards .pnav__col-title{ font-family:var(--serif); font-size:19px; font-weight:400; letter-spacing:-.01em; text-transform:none; color:var(--ink); padding:2px 8px 14px; margin-bottom:6px; border-bottom:1px solid var(--hair); }
.pnav__item.open .pnav__panel{ display:block; animation:pnavIn .18s ease both; }
.pnav__item.open .pnav__panel.wide,
.pnav__item.open .pnav__panel.feature{ display:grid; }
@keyframes pnavIn{ from{ transform:translateY(-6px); } to{ transform:none; } }
.pnav__col-title{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); padding:8px 12px 6px; }
.pnav__sub{ display:flex; flex-direction:column; }
.pnav__suba{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; transition:.15s; }
.pnav__suba:hover{ background:rgba(64,96,144,.07); }
.pnav__suba .t{ font-size:14.5px; font-weight:500; color:var(--ink); display:flex; align-items:center; gap:8px; }
.pnav__suba .d{ font-size:12.5px; color:var(--ink-3); }
.pnav__suba .t .arrow{ opacity:0; transform:translateX(-4px); transition:.15s; color:var(--brand-blue); }
.pnav__suba:hover .t .arrow{ opacity:1; transform:none; }
.pnav__promo{ background:var(--brand-blue); color:#fff; border-radius:12px; padding:20px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.pnav__promo::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 90% 10%, rgba(var(--brand-yellow-rgb),.3), transparent 70%); }
.pnav__promo .pk{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); position:relative; }
.pnav__promo h5{ font-family:var(--serif); font-weight:400; font-size:21px; line-height:1.12; margin:10px 0 14px; position:relative; }
.pnav__promo .btn{ position:relative; align-self:flex-start; }
.pnav__burger{ display:none; width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center; }
.pnav__burger span,.pnav__burger span::before,.pnav__burger span::after{ content:""; display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.3s; }
.pnav__burger span::before{ position:absolute; top:-6px; } .pnav__burger span::after{ position:absolute; top:6px; }
body.pdrawer-open .pnav__burger span{ background:transparent; }
body.pdrawer-open .pnav__burger span::before{ top:0; transform:rotate(45deg); }
body.pdrawer-open .pnav__burger span::after{ top:0; transform:rotate(-45deg); }
/* Country switcher */
.pnav__country{ display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:999px; border:1px solid var(--hair-2); font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-2); cursor:pointer; transition:.18s; }
.pnav__country:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }
.pnav__country--util{ padding:7px 11px; border-color:transparent; background:transparent; opacity:.72; font-size:10.5px; }
.pnav__country--util:hover{ opacity:1; background:rgba(28,35,51,.04); }
.pnav__country .flag{ width:16px; height:11px; border-radius:2px; background:linear-gradient(180deg,#000 33%,#d00 33% 66%,#FFC800 66%); }
.pnav__country.at .flag{ background:linear-gradient(180deg,#ed2939 33%,#fff 33% 66%,#ed2939 66%); }
.pnav__country.ch .flag{ background:#d52b1e; position:relative; }
/* Mobile drawer */
.pdrawer{ position:fixed; inset:var(--nav-h) 0 0 0; z-index:55; background:var(--bone); transform:translateY(-10px); opacity:0; pointer-events:none; transition:.3s; overflow-y:auto; padding:18px var(--gut) 60px; }
body.pdrawer-open .pdrawer{ opacity:1; transform:none; pointer-events:auto; }
.pdrawer__group{ border-bottom:1px solid var(--hair); }
.pdrawer__gt{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:18px 0; font-family:var(--serif); font-size:1.4rem; color:var(--ink); cursor:pointer; }
.pdrawer__gt .pm{ font-size:1.4rem; color:var(--ink-3); transition:transform .2s; }
.pdrawer__group.open .pdrawer__gt .pm{ transform:rotate(45deg); color:var(--brand-orange); }
.pdrawer__sub{ max-height:0; overflow:hidden; transition:max-height .3s; }
.pdrawer__sub a{ display:block; padding:11px 0 11px 4px; font-size:15px; color:var(--ink-2); border-top:1px solid var(--hair); }
.pdrawer__sub a:first-child{ border-top:none; }
/* Drawer-Gruppenüberschrift (Frauen/Männer) für mehrspaltige Menüs */
.pdrawer__ct{ font-family:var(--sans); font-weight:700; font-size:15.5px; color:var(--ink); padding:14px 0 4px; display:flex; align-items:center; gap:8px; }
.pdrawer__ct + a{ border-top:none; }
.pdrawer__cta{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.pdrawer__cta .btn{ justify-content:center; }
@media (max-width:1080px){
/* Mobil nur EIN gelber CTA: der obere Header-CTA entfällt; der CTA lebt unten
(.sticky-cta beim Browsen / .pdrawer__cta im offenen Menü). Desktop unverändert. */
.pnav__menu, .pnav__ghost, .pnav__country, .pnav__cta{ display:none; }
.pnav__burger{ display:flex; }
/* Mehr Abstand links/rechts im Mobile-Drawer (Text klebte am Rand). */
.pdrawer{ padding-left:clamp(30px,8vw,46px); padding-right:clamp(30px,8vw,46px); }
}
/* =========================================================
PAGE HEADER (sub-pages) — small hero band
========================================================= */
.subhero{ padding-top:calc(var(--nav-h) + clamp(28px,4vw,52px)); padding-bottom:clamp(28px,4vw,48px); background:var(--bone); }
.crumbs{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:flex; gap:9px; align-items:center; margin-bottom:22px; }
.crumbs a{ color:var(--ink-3); } .crumbs a:hover{ color:var(--brand-blue); } .crumbs .sep{ opacity:.5; }
/* =========================================================
MEDIA / TRUST — "Bekannt aus" reusable strip
========================================================= */
.media-strip{ padding:clamp(40px,5vw,64px) 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
/* =========================================================
TRUST WALL — premium monochrome logo wall ("Bekannt aus")
Grayscale wordmark slots, grouped, no borders.
========================================================= */
.trustwall{ padding:clamp(56px,7vw,92px) 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.trustwall__head{ text-align:center; max-width:64ch; margin:0 auto clamp(36px,5vw,56px); }
.trustwall__title{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,36px); letter-spacing:-.01em; margin:0 0 12px; }
.trustwall__sub{ font-size:16px; line-height:1.55; color:var(--ink-2); margin:0 auto; max-width:52ch; }
.trustwall__groups{ display:flex; align-items:stretch; justify-content:center; gap:clamp(28px,4vw,56px); flex-wrap:wrap; }
.twgroup{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.twgroup__label{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); opacity:.85; }
.twgroup__logos{ display:flex; align-items:center; justify-content:center; gap:clamp(24px,3vw,44px); flex-wrap:wrap; min-height:42px; }
.twdivider{ width:1px; align-self:center; height:60px; background:var(--hair); }
@media (max-width:860px){ .twdivider{ display:none; } .trustwall__groups{ gap:40px; } }
/* Mobil: kompakte, horizontal wischbare Logo-Leiste statt 3 hoher gestapelter Gruppen. */
@media (max-width:700px){
.trustwall{ padding:clamp(34px,7vw,48px) 0; }
.trustwall__head{ margin-bottom:24px; }
.trustwall__groups{ flex-wrap:nowrap; justify-content:flex-start; gap:30px; overflow-x:auto; padding:2px 2px 14px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.trustwall__groups::-webkit-scrollbar{ display:none; }
.twgroup{ flex:0 0 auto; gap:12px; scroll-snap-align:start; }
.twgroup__logos{ flex-wrap:nowrap; gap:22px; min-height:0; }
}
/* monochrome wordmark slots — uniform ink, lift on hover */
.twlogo{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; color:#9a9ea7; line-height:1; transition:color .25s, opacity .25s, filter .25s; opacity:.85; }
.twlogo:hover{ color:var(--ink); opacity:1; }
.twlogo img{ height:30px; width:auto; filter:grayscale(1) opacity(.7); transition:filter .25s; }
.twlogo:hover img{ filter:grayscale(0) opacity(1); }
.twlogo__wm{ white-space:nowrap; }
.twlogo__sub{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; margin-top:5px; opacity:.8; }
/* type-treatment variants → reads as a varied logo wall, one ink */
.twlogo--sans .twlogo__wm{ font-family:var(--sans); font-weight:600; font-size:21px; letter-spacing:-.01em; }
.twlogo--bold .twlogo__wm{ font-family:var(--sans); font-weight:800; font-size:24px; letter-spacing:.04em; }
.twlogo--serif .twlogo__wm{ font-family:var(--serif); font-weight:700; font-size:23px; letter-spacing:.01em; }
.twlogo--serif-spaced .twlogo__wm{ font-family:var(--serif); font-weight:400; font-size:21px; letter-spacing:.14em; text-transform:uppercase; }
.twlogo--italic .twlogo__wm{ font-family:var(--serif); font-style:italic; font-weight:700; font-size:23px; }
.twlogo--stack{ } .twlogo--stack .twlogo__wm{ font-family:var(--sans); font-weight:800; font-size:24px; letter-spacing:.02em; }
.twlogo--box .twlogo__wm{ font-family:var(--sans); font-weight:800; font-size:18px; letter-spacing:.06em; padding:8px 12px; box-shadow:inset 0 0 0 2px currentColor; border-radius:3px; }
/* =========================================================
EXPERT — reusable component (richer than homepage mini)
========================================================= */
.expertc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:820px){ .expertc-grid{ grid-template-columns:1fr; } }
.expertc{ background:var(--bone); border:1px solid var(--hair); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.bg-bone2 .expertc{ background:#fff; }
.expertc__photo{ aspect-ratio:4/3; position:relative; background:repeating-linear-gradient(135deg,#e9e4db 0 14px,#f1ece4 14px 28px); display:grid; place-items:center; }
.expertc__photo img{ width:100%; height:100%; object-fit:cover; }
.expertc__ph{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:#a59f93; text-align:center; padding:0 16px; line-height:1.5; }
.expertc__body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.expertc__role{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.expertc__role::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brand-orange); }
.expertc__quote{ font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.36; color:var(--ink); margin:0 0 18px; }
.expertc__meta{ margin-top:auto; padding-top:16px; border-top:1px solid var(--hair); }
.expertc__name{ font-size:15px; font-weight:600; color:var(--ink); }
.expertc__cred{ font-size:13px; color:var(--ink-3); margin-top:3px; }
/* =========================================================
LOCATION DETAIL PAGE
========================================================= */
.loc-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:stretch; }
@media (max-width:920px){ .loc-hero{ grid-template-columns:1fr; } }
.loc-hero__info .status{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#1c8a52; background:rgba(28,138,82,.1); padding:7px 13px; border-radius:999px; margin-bottom:20px; }
.loc-hero__info .status .d{ width:7px; height:7px; border-radius:50%; background:#1c8a52; }
.loc-hero__info h1{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.6vw,58px); line-height:1.02; letter-spacing:-.016em; margin:0 0 10px; }
.loc-hero__info .tagline{ font-size:18px; color:var(--ink-2); margin-bottom:28px; max-width:42ch; }
.loc-facts{ display:flex; flex-direction:column; gap:2px; margin-bottom:28px; }
.loc-fact{ display:grid; grid-template-columns:130px 1fr; gap:18px; padding:15px 0; border-top:1px solid var(--hair); align-items:baseline; }
.loc-fact:last-child{ border-bottom:1px solid var(--hair); }
.loc-fact .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.loc-fact .v{ font-size:15.5px; color:var(--ink); } .loc-fact .v a{ color:var(--brand-blue); } .loc-fact .v b{ font-weight:600; }
.loc-fact .v .row2{ display:flex; justify-content:space-between; gap:14px; max-width:320px; }
.loc-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.loc-map-lg{ border-radius:16px; overflow:hidden; min-height:340px; position:relative; background:linear-gradient(160deg,#dde8f3,#c4d6ea); border:1px solid var(--hair); }
.loc-map-lg .pin{ position:absolute; left:50%; top:46%; width:20px; height:20px; background:var(--brand-orange); border:3px solid #fff; border-radius:50% 50% 50% 0; transform:translate(-50%,-50%) rotate(-45deg); box-shadow:0 6px 16px rgba(0,0,0,.3); }
.loc-map-lg .maplabel{ position:absolute; left:18px; bottom:16px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-blue-2); background:rgba(247,246,243,.85); padding:7px 12px; border-radius:999px; }
/* Gallery */
.gallery{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:12px; height:440px; }
@media (max-width:720px){ .gallery{ grid-template-columns:1fr 1fr; height:auto; } }
.gallery__item{ overflow:hidden; border-radius:14px; background:var(--sand); }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.gallery__item:hover img{ transform:scale(1.05); }
.gallery__item.big{ grid-row:span 2; }
.gallery__item.wide{ grid-column:span 2; }
@media (max-width:720px){ .gallery__item.big{ grid-row:span 2; grid-column:span 2; height:240px; } .gallery__item{ height:140px; } }
/* Team / coaches */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .team-grid{ grid-template-columns:1fr 1fr; } }
.coach{ text-align:left; }
.coach__photo{ aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:repeating-linear-gradient(135deg,#e9e4db 0 14px,#f1ece4 14px 28px); display:grid; place-items:center; margin-bottom:14px; }
.coach__photo img{ width:100%; height:100%; object-fit:cover; }
.coach__ph{ font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:#a59f93; text-align:center; padding:0 10px; }
.coach__name{ font-family:var(--serif); font-size:19px; }
.coach__role{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; }
/* =========================================================
QUIZ FUNNEL (dedicated page)
========================================================= */
.funnel{ min-height:100svh; display:flex; flex-direction:column; background:var(--bone); }
.funnel__top{ height:var(--nav-h); display:flex; align-items:center; border-bottom:1px solid var(--hair); }
.funnel__top .row{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.funnel__progress{ flex:1; max-width:340px; height:5px; border-radius:3px; background:var(--sand); overflow:hidden; margin:0 20px; }
.funnel__progress i{ display:block; height:100%; width:0%; background:var(--brand-orange); transition:width .45s cubic-bezier(.4,0,.2,1); }
.funnel__exit{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.funnel__exit:hover{ color:var(--brand-blue); }
.funnel__stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:clamp(28px,5vw,64px) var(--gut); }
.fstep{ width:100%; max-width:680px; display:none; animation:fstepIn .4s cubic-bezier(.2,.7,.2,1) both; }
.fstep.active{ display:block; }
@keyframes fstepIn{ from{ transform:translateY(14px);} to{ transform:none; } }
.fstep__count{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-orange); margin-bottom:18px; }
.fstep__q{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,4vw,46px); line-height:1.08; letter-spacing:-.014em; margin-bottom:8px; text-wrap:balance; }
.fstep__hint{ color:var(--ink-3); font-size:15px; margin-bottom:30px; }
.fopts{ display:flex; flex-direction:column; gap:12px; }
.fopt{ text-align:left; padding:20px 24px; border-radius:14px; border:1px solid var(--hair-2); background:#fff; font-family:var(--sans); font-size:17px; font-weight:500; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px; transition:.16s; }
.fopt:hover{ border-color:var(--brand-blue); transform:translateX(4px); box-shadow:0 14px 30px -18px rgba(64,96,144,.5); }
.fopt .num{ font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-right:6px; }
.fopt .chev{ color:var(--ink-3); transition:.16s; } .fopt:hover .chev{ color:var(--brand-blue); transform:translateX(4px); }
.fback{ margin-top:26px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.fback:hover{ color:var(--brand-blue); }
/* Lead capture step */
.lead-wrap{ max-width:560px; margin:0 auto; width:100%; }
.lead-wrap .eyebrow{ margin-bottom:14px; }
.lead-wrap h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.6vw,42px); line-height:1.08; letter-spacing:-.014em; margin-bottom:10px; }
.lead-wrap .sub{ color:var(--ink-2); font-size:16px; margin-bottom:28px; }
.lead-form .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .lead-form .field-row{ grid-template-columns:1fr; } }
.lead-form .field{ margin-bottom:16px; }
.lead-form label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.lead-form input{ width:100%; padding:15px 16px; border-radius:12px; border:1px solid var(--hair-2); background:#fff; font-family:var(--sans); font-size:15.5px; outline:none; transition:.2s; }
.lead-form input:focus{ border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(64,96,144,.12); }
.consent{ display:flex; gap:12px; align-items:flex-start; padding:13px 0; cursor:pointer; }
.consent input{ width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--brand-blue); cursor:pointer; }
.consent span{ font-family:var(--sans),sans-serif; font-size:11.5px; font-weight:400; letter-spacing:normal; text-transform:none; color:var(--ink-3); line-height:1.5; }
.consent .req{ color:var(--brand-orange); }
.lead-trust{ display:flex; gap:20px; flex-wrap:wrap; margin-top:18px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.lead-trust span{ display:inline-flex; align-items:center; gap:7px; } .lead-trust .d{ width:5px;height:5px;border-radius:50%;background:#1c8a52; }
/* Result step */
.fresult{ max-width:620px; margin:0 auto; text-align:center; }
.fresult__ring{ width:150px; height:150px; margin:0 auto 24px; position:relative; }
.fresult__ring svg{ transform:rotate(-90deg); }
.fresult__ring .val{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.fresult__ring .val .n{ font-family:var(--serif); font-size:44px; line-height:1; color:var(--brand-blue); }
.fresult__ring .val .l{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }
.fresult .lvl{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-orange); margin-bottom:12px; }
.fresult h2{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.6vw,42px); line-height:1.08; margin-bottom:14px; }
.fresult p{ color:var(--ink-2); font-size:16px; max-width:48ch; margin:0 auto 30px; }
.fresult__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.fresult__next{ background:var(--bone-2); border:1px solid var(--hair); border-radius:14px; padding:20px 22px; margin-bottom:30px; text-align:left; display:flex; gap:16px; align-items:center; }
.fresult__next .ico{ width:46px; height:46px; flex:none; border-radius:12px; background:var(--brand-blue); color:#fff; display:grid; place-items:center; font-family:var(--serif); font-size:22px; }
.fresult__next .t{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.fresult__next .h{ font-family:var(--serif); font-size:20px; margin-top:3px; }
/* =========================================================
FRANCHISE LANDING PAGE
========================================================= */
.fr-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center; }
@media (max-width:920px){ .fr-hero{ grid-template-columns:1fr; } }
.fr-hero h1{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,5.4vw,72px); line-height:1.02; letter-spacing:-.018em; margin:18px 0 18px; text-wrap:balance; }
.fr-hero h1 .serif-em{ color:var(--brand-blue); font-style:italic; }
.fr-hero .lead{ margin-bottom:28px; }
.fr-hero__media{ aspect-ratio:4/5; border-radius:18px; overflow:hidden; box-shadow:0 40px 90px -50px rgba(28,35,51,.5); }
.fr-hero__media img{ width:100%; height:100%; object-fit:cover; }
.market{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:760px){ .market{ grid-template-columns:1fr 1fr; } }
.market .m{ border-top:2px solid var(--brand-blue); padding-top:18px; }
.market .m .n{ font-family:var(--serif); font-size:clamp(34px,4vw,52px); line-height:1; color:var(--ink); letter-spacing:-.02em; }
.market .m .l{ font-size:14px; color:var(--ink-2); margin-top:10px; }
.benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .benefits{ grid-template-columns:1fr; } }
.benefit{ background:var(--bone); border:1px solid var(--hair); border-radius:16px; padding:28px; }
.bg-bone2 .benefit{ background:#fff; }
.benefit__k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.benefit__k::before{ content:""; width:5px;height:5px;border-radius:50%;background:var(--brand-orange); }
.benefit h4{ font-family:var(--serif); font-weight:400; font-size:23px; margin:0 0 10px; }
.benefit p{ font-size:14.5px; color:var(--ink-2); margin:0; }
.fr-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .fr-steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .fr-steps{ grid-template-columns:1fr; } }
/* Big lead form panel */
.leadpanel{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:20px; overflow:hidden; border:1px solid var(--hair); box-shadow:0 40px 90px -50px rgba(28,35,51,.4); }
@media (max-width:820px){ .leadpanel{ grid-template-columns:1fr; } }
.leadpanel__aside{ background:var(--brand-blue-2); color:#fff; padding:clamp(32px,4vw,52px); position:relative; overflow:hidden; }
.leadpanel__aside::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 60% at 90% 8%, rgba(var(--brand-yellow-rgb),.3), transparent 70%); }
.leadpanel__aside *{ position:relative; }
.leadpanel__aside h3{ font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.1; margin:14px 0 16px; }
.leadpanel__aside p{ color:rgba(255,255,255,.82); font-size:15px; margin-bottom:28px; }
.leadpanel__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.leadpanel__list li{ display:flex; gap:11px; font-size:14.5px; color:rgba(255,255,255,.9); align-items:flex-start; }
.leadpanel__list li::before{ content:""; flex:none; width:16px; height:16px; margin-top:2px; border-radius:50%; background:rgba(var(--brand-yellow-rgb),.25) url("data:image/svg+xml;utf8,") no-repeat center; }
.leadpanel__form{ background:var(--bone); padding:clamp(32px,4vw,52px); }
.leadpanel__form .field{ margin-bottom:15px; }
.leadpanel__form label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.leadpanel__form input, .leadpanel__form select{ width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--hair-2); background:#fff; font-family:var(--sans); font-size:15px; outline:none; transition:.2s; }
.leadpanel__form input:focus, .leadpanel__form select:focus{ border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(64,96,144,.12); }
.leadpanel__form .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .leadpanel__form .field-row{ grid-template-columns:1fr; } }
.leadpanel__success{ display:none; text-align:center; padding:30px 0; }
.leadpanel__success.show{ display:block; }
.leadpanel__form-inner.hide{ display:none; }
/* =========================================================
LOCATION DETAIL — additional sections (data-driven)
========================================================= */
.loc-hero__media-img{ border-radius:16px; overflow:hidden; box-shadow:0 40px 90px -50px rgba(28,35,51,.5); min-height:340px; }
.loc-hero__media-img img{ width:100%; height:100%; object-fit:cover; }
.loc-hero__info .status.closed{ color:#b4691c; background:rgba(180,105,28,.1); }
.loc-hero__info .status.closed .d{ background:#b4691c; }
/* Über den Standort */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:start; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:32px; } }
.about-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.about-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--brand-blue); background:rgba(64,96,144,.08); padding:9px 14px; border-radius:999px; }
.about-facts{ display:flex; flex-direction:column; gap:2px; }
.about-fact{ padding:18px 0; border-top:1px solid var(--hair); }
.about-fact:last-child{ border-bottom:1px solid var(--hair); }
.about-fact .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.about-fact p{ font-size:15px; color:var(--ink); margin:0; line-height:1.55; }
/* 4-up pricing variant */
.prices--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1080px){ .prices--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .prices--4{ grid-template-columns:1fr; max-width:460px; } }
/* Quiz CTA band */
.quizcta{ background:var(--brand-blue); color:#fff; border-radius:20px; padding:clamp(30px,4vw,52px); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; position:relative; overflow:hidden; }
.quizcta::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 80% at 92% 0%, rgba(var(--brand-yellow-rgb),.28), transparent 70%); }
.quizcta>*{ position:relative; }
.quizcta h2{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3vw,40px); line-height:1.08; letter-spacing:-.014em; margin:14px 0 10px; }
.quizcta h2 .serif-em{ color:var(--brand-orange); font-style:italic; }
.quizcta p{ color:rgba(255,255,255,.82); font-size:16px; max-width:44ch; margin:0; }
/* Google reviews badge */
.google-badge{ display:inline-flex; align-items:center; gap:14px; background:var(--bone); border:1px solid var(--hair); border-radius:14px; padding:14px 22px; box-shadow:var(--shadow-sm); }
.bg-bone2 .google-badge{ background:#fff; }
.google-badge .g{ width:34px; height:34px; border-radius:50%; background:conic-gradient(#4285F4 0 25%,#EA4335 0 50%,#FBBC05 0 75%,#34A853 0); display:grid; place-items:center; position:relative; }
.google-badge .g::after{ content:"G"; position:absolute; inset:4px; background:var(--bone); border-radius:50%; display:grid; place-items:center; color:var(--ink); font-size:18px; font-weight:700; }
.bg-bone2 .google-badge .g::after{ background:#fff; }
.google-badge .gr{ font-family:var(--mono); font-size:13px; color:var(--brand-orange); letter-spacing:.04em; }
/* Social buttons */
.socials{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:760px; }
@media (max-width:680px){ .socials{ grid-template-columns:1fr 1fr; } }
.social-btn{ display:flex; align-items:center; gap:12px; padding:18px 20px; border:1px solid var(--hair); border-radius:14px; background:var(--bone); font-weight:500; font-size:15px; color:var(--ink); transition:.2s; }
.social-btn:hover{ border-color:var(--brand-blue); transform:translateY(-3px); box-shadow:0 16px 34px -22px rgba(64,96,144,.5); }
.social-ic{ width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; }
.social-ic[data-s="instagram"]{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.social-ic[data-s="instagram"]::after{ content:"IG"; }
.social-ic[data-s="facebook"]{ background:#1877F2; } .social-ic[data-s="facebook"]::after{ content:"f"; font-size:18px; }
.social-ic[data-s="tiktok"]{ background:#111; } .social-ic[data-s="tiktok"]::after{ content:"TT"; }
.social-ic[data-s="website"]{ background:var(--brand-blue); } .social-ic[data-s="website"]::after{ content:"↗"; font-size:16px; }
/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,48px); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-form .field{ margin-bottom:14px; }
.contact-form label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.contact-form input, .contact-form textarea{ width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--hair-2); background:#fff; font-family:var(--sans); font-size:15px; outline:none; transition:.2s; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus{ border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(64,96,144,.12); }
.contact-success{ display:none; margin-top:16px; padding:14px 16px; border-radius:12px; background:rgba(28,138,82,.1); color:#1c7a4a; font-size:14px; }
.contact-success.show{ display:block; }
.contact-direct{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.contact-direct a{ flex:1; min-width:140px; border:1px solid var(--hair); border-radius:12px; padding:14px 16px; background:var(--bone); transition:.2s; }
.bg-bone2 .contact-direct a{ background:#fff; }
.contact-direct a:hover{ border-color:var(--brand-blue); }
.contact-direct .k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; }
/* =========================================================
LOCATION FINDER — rich filterable cards
========================================================= */
.finder__bar{ display:grid; grid-template-columns:1fr 1fr 2fr; gap:14px; background:var(--bone); border:1px solid var(--hair); border-radius:16px; padding:18px; box-shadow:var(--shadow-sm); }
.bg-bone2 .finder__bar{ background:#fff; }
@media (max-width:760px){ .finder__bar{ grid-template-columns:1fr 1fr; } .finder__field.grow{ grid-column:span 2; } }
.finder__field label{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.finder__field select, .finder__field input{ width:100%; padding:13px 15px; border-radius:11px; border:1px solid var(--hair-2); background:var(--bone); font-family:var(--sans); font-size:15px; outline:none; transition:.2s; -webkit-appearance:none; appearance:none; }
.finder__field select{ background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 14px center; cursor:pointer; }
.finder__field select:focus, .finder__field input:focus{ border-color:var(--brand-blue); box-shadow:0 0 0 4px rgba(64,96,144,.12); }
.finder__count{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:22px 0 16px; }
.finder__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .finder__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .finder__grid{ grid-template-columns:1fr; } }
.finder__empty{ grid-column:1/-1; padding:40px; text-align:center; color:var(--ink-2); border:1px dashed var(--hair-2); border-radius:16px; }
.finder__empty a{ color:var(--brand-blue); }
.fcard{ background:var(--bone); border:1px solid var(--hair); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.bg-bone2 .fcard{ background:#fff; }
.fcard:hover{ transform:translateY(-4px); box-shadow:0 26px 56px -36px rgba(28,35,51,.45); }
.fcard__img{ aspect-ratio:16/10; position:relative; overflow:hidden; }
.fcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.fcard:hover .fcard__img img{ transform:scale(1.05); }
.fcard__badge{ position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:rgba(28,138,82,.92); color:#fff; padding:5px 11px; border-radius:999px; }
.fcard__badge.closed{ background:rgba(120,120,120,.92); }
.fcard__body{ padding:20px; display:flex; flex-direction:column; flex:1; }
.fcard__top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.fcard__country{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.fcard__rating{ font-size:12px; color:var(--brand-orange); letter-spacing:.5px; white-space:nowrap; }
.fcard__rating b{ color:var(--ink); } .fcard__rating .rc{ color:var(--ink-3); }
.fcard__body h4{ font-family:var(--serif); font-weight:400; font-size:22px; letter-spacing:-.008em; margin:0 0 6px; }
.fcard__addr{ font-size:14px; color:var(--ink-2); margin-bottom:14px; }
.fcard__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:14px; border-top:1px solid var(--hair); font-size:13px; color:var(--ink-2); }
.fcard__price{ font-family:var(--mono); font-size:12px; color:var(--brand-blue); font-weight:500; }
.fcard__btn{ margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-blue); display:inline-flex; align-items:center; gap:7px; }
.fcard__btn .arrow{ transition:transform .2s; } .fcard:hover .fcard__btn .arrow{ transform:translateX(3px); }
/* =========================================================
LOCATION CLASSIFICATION BADGES (scalable)
Tones map to data.js BADGES[].tone — add a tone once, reuse.
========================================================= */
.badge-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:2px; }
.badge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.005em; padding:7px 13px 7px 10px; border-radius:999px; border:1px solid; line-height:1; white-space:nowrap; }
.badge__ic{ font-size:13px; line-height:1; }
.badge__desc{ font-weight:400; opacity:.8; }
.badge--lg{ font-size:14px; padding:9px 16px 9px 13px; }
.badge--sm{ font-size:11px; padding:5px 10px 5px 8px; }
/* tones — soft tinted fills, harmonised with the bone palette */
.badge--rose{ background:#fbf1da; color:#8a6410; border-color:#f0e0b8; }
.badge--blue{ background:#eaf0f8; color:#2f4a73; border-color:#d4e0ee; }
.badge--gold{ background:#fbf1da; color:#8a6410; border-color:#f0e0b8; }
.badge--teal{ background:#e3f1ee; color:#1f6a5c; border-color:#cbe5df; }
.badge--violet{ background:#f0ecf8; color:#5b3f86; border-color:#ddd3ee; }
/* badge anchored on a finder card image (primary type) */
.fcard__type{ position:absolute; left:12px; bottom:12px; }
.fcard__type .badge{ background:rgba(247,246,243,.94); backdrop-filter:blur(6px); box-shadow:0 6px 16px -8px rgba(28,35,51,.4); }
.fcard__body .badge-row{ margin:0 0 12px; }
/* hero badge on location detail */
.loc-hero__info .badge-row{ margin:18px 0 4px; }
/* =========================================================
FINDER — location-type filter pills (toggle, not checkbox)
========================================================= */
.finder__types{ margin-top:16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.finder__types-label{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.finder__pills{ display:flex; flex-wrap:wrap; gap:9px; }
.tpill{ display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:500; font-size:13px; padding:9px 15px; border-radius:999px; border:1px solid var(--hair-2); background:var(--bone); color:var(--ink-2); cursor:pointer; transition:.18s; }
.bg-bone2 .tpill{ background:#fff; }
.tpill__ic{ font-size:14px; }
.tpill:hover{ border-color:var(--brand-blue); color:var(--ink); transform:translateY(-1px); }
.tpill[aria-pressed="true"]{ border-color:transparent; color:#fff; font-weight:600; }
.tpill--rose[aria-pressed="true"]{ background:var(--brand-yellow); color:#1c2333; }
.tpill--blue[aria-pressed="true"]{ background:var(--brand-blue); }
.tpill--gold[aria-pressed="true"]{ background:#b08322; }
.tpill--teal[aria-pressed="true"]{ background:#1f7a69; }
.tpill--violet[aria-pressed="true"]{ background:#6b4a9c; }
/* =========================================================
INSTAGRAM FEED (location)
========================================================= */
.ig-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:30px; }
.ig-head h2{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3vw,38px); letter-spacing:-.01em; margin:0; }
.ig-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
@media (max-width:900px){ .ig-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .ig-grid{ grid-template-columns:repeat(2,1fr); } }
.ig-tile{ position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--sand); }
.ig-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.ig-tile:hover img{ transform:scale(1.08); }
.ig-ov{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:14px; background:rgba(28,35,51,0); opacity:0; transition:.25s; }
.ig-tile:hover .ig-ov{ background:rgba(28,35,51,.42); opacity:1; }
/* =========================================================
NETWORK KPI TRUST BAND
========================================================= */
.kpiband{ padding:clamp(28px,4vw,44px) 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.kpiband--dark{ background:var(--brand-blue); color:#fff; border-color:transparent; }
.kpiband__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,3vw,32px); }
@media (max-width:680px){ .kpiband__grid{ grid-template-columns:1fr 1fr; gap:24px; } }
.kpi{ text-align:center; position:relative; }
.kpi + .kpi::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:44px; background:var(--hair); }
.kpiband--dark .kpi + .kpi::before{ background:rgba(255,255,255,.2); }
@media (max-width:680px){ .kpi + .kpi::before{ display:none; } }
.kpi__n{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,4.4vw,50px); line-height:1; letter-spacing:-.02em; color:var(--brand-blue); }
.kpiband--dark .kpi__n{ color:#fff; }
.kpi__l{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:10px; }
.kpiband--dark .kpi__l{ color:rgba(255,255,255,.72); }
/* finder card — phone + dual actions */
.fcard__phone{ display:inline-flex; align-items:center; gap:8px; margin:2px 0 14px; font-size:14px; color:var(--ink-2); font-family:var(--mono); letter-spacing:.01em; }
.fcard__phone:hover{ color:var(--brand-blue); }
.fcard__phicon{ color:var(--brand-blue); }
.fcard__actions{ display:flex; gap:8px; margin-top:auto; padding-top:6px; }
.fcard__actions .btn{ flex:1; justify-content:center; padding:11px 12px; font-size:13.5px; }
.fcard__body h4 a{ color:inherit; }
.fcard__body h4 a:hover{ color:var(--brand-blue); }
.finder__more{ grid-column:1/-1; margin:10px auto 0; padding:14px 28px; border-radius:999px; border:1px solid var(--hair-2); background:var(--bone); font-family:var(--sans); font-weight:500; font-size:14px; color:var(--ink); cursor:pointer; transition:.2s; }
.finder__more:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }
/* smart finder: nearest-fallback note + distance pill */
.finder__note{ display:none; margin:0 0 16px; padding:14px 18px; border-radius:12px; background:var(--brand-soft); border:1px solid #d4e0ee; font-size:14.5px; color:var(--ink-2); }
.finder__note.show{ display:block; }
.finder__note b{ color:var(--brand-blue); font-weight:600; }
.fcard__dist{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:12px; font-weight:500; color:var(--brand-blue); white-space:nowrap; }
.fcard__dist .pin{ font-size:12px; }