/* =========================================================
   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; }
/* Fund 2026-07-28 (Markus Weiland, MyPelvi Gänserndorf): .loc-fact reserviert fix 130px für die
   Label-Spalte, auf 375px-Breite bleiben der Werte-Spalte nur ~210px -- bei geteilten Vor-/
   Nachmittagszeiten ("08:00 - 13:00 & 16:00 - 19:00", bereits zu einem String verkettet, siehe
   data.js hours-Mapping) bricht .row2 (justify-content:space-between, kein Stacking) MITTEN im
   Zeit-String um, Tage mit einem Zeitfenster bleiben einzeilig -- uneinheitliche Zeilenhöhen pro
   Wochentag. Unter 560px Wochentag-Kürzel und Zeit(en) daher untereinander statt nebeneinander. */
@media (max-width:560px){
  .loc-fact{ grid-template-columns:100px 1fr; gap:10px; }
  .loc-fact .v .row2{ flex-direction:column; align-items:flex-start; gap:2px; max-width:none; }
}
.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{ position:relative; overflow:hidden; border-radius:14px; background:var(--sand); cursor:pointer; }
/* --gal-rot: Rotation aus dem Fokuspunkt-Editor (platform.js#galleryImgStyle, location_images.rotation),
   0deg per Default = heutiges Verhalten. Per Custom-Property statt festem inline "transform:", damit
   der bestehende Hover-Zoom unten (scale(1.05)) weiterhin zusätzlich zur Rotation greift. */
.gallery__item img{ width:100%; height:100%; object-fit:cover; transform:rotate(var(--gal-rot,0deg)); transition:transform .5s; }
.gallery__item:hover img{ transform:rotate(var(--gal-rot,0deg)) 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; } }
/* Fund 2026-07-28 (Markus Weiland, Foto-Limit): "+N Fotos"-Badge auf der letzten sichtbaren Kachel,
   wenn ein Standort mehr als 5 Galeriefotos hat (siehe platform.js#renderLocationPage/_galleryMore). */
.gallery__more{ position:absolute; inset:0; background:rgba(28,35,51,.55); color:#fff; display:grid; place-items:center; font:600 15px/1.2 var(--sans),sans-serif; text-align:center; padding:12px; pointer-events:none; }
.gallery__viewall{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font:500 14px var(--sans),sans-serif; color:var(--brand-blue); background:none; border:none; cursor:pointer; padding:0; }
.gallery__viewall:hover{ text-decoration:underline; }

/* Studio-Galerie-Lightbox (Wunsch Jasmin 2026-07-28) -- selbes .open/z-index-Muster wie .modal
   (styles.css), eigener Layer darüber (110 statt 100), da Lightbox+Buchungsmodal nie gleichzeitig
   offen sein müssen, aber der Abstand macht die Reihenfolge robust gegen künftige Layer dazwischen. */
.lightbox{ position:fixed; inset:0; z-index:110; display:none; align-items:center; justify-content:center; padding:24px; }
.lightbox.open{ display:flex; }
.lightbox__scrim{ position:absolute; inset:0; background:rgba(15,18,26,.92); }
.lightbox__figure{ position:relative; margin:0; max-width:min(1100px,92vw); max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:12px; }
.lightbox__img{ max-width:100%; max-height:80vh; object-fit:contain; border-radius:10px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); }
.lightbox__count{ font:500 13px var(--mono),monospace; letter-spacing:.06em; color:rgba(255,255,255,.75); }
.lightbox__close{ position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; font-size:1.5rem; line-height:1; transition:.2s; }
.lightbox__close:hover{ background:rgba(255,255,255,.22); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; font-size:1.8rem; line-height:1; transition:.2s; }
.lightbox__nav:hover{ background:rgba(255,255,255,.22); }
.lightbox__prev{ left:16px; } .lightbox__next{ right:16px; }
@media (max-width:640px){ .lightbox__nav{ width:42px; height:42px; font-size:1.4rem; } .lightbox__prev{ left:8px; } .lightbox__next{ right:8px; } .lightbox__close{ top:12px; right:12px; } }

/* 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,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 5l2 2 4-5' stroke='%23FFC800' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") 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)
   ========================================================= */
/* Festes Referenzverhaeltnis (Crop-Editor, Wunsch Jasmin 2026-07-16, auf Hochformat korrigiert
   2026-07-16 -- 16:9 war ein Missverstaendnis, das Titelbild sollte hochformatig sein): das
   Titelbild-Crop-Rechteck (location_content.hero_crop_*) wird IMMER als 3:4-Ausschnitt gespeichert
   -- der Container MUSS also ebenfalls fest 3:4 sein, sonst zeigt die Live-Seite (dieses CSS) etwas
   anderes als der Portal-Editor (apps/portal/.../ImageCropDialog.tsx HERO_PREVIEW_TILES, aspect=3/4).
   Vorher (vor dem Crop-Editor) dynamisch gestreckt (min-height:340px, align-items:stretch der
   Elternspalte) -- align-self:start verhindert, dass die Grid-Stretch-Ausrichtung die aspect-ratio
   wieder ueberschreibt. */
.loc-hero__media-img{ border-radius:16px; overflow:hidden; box-shadow:0 40px 90px -50px rgba(28,35,51,.5); aspect-ratio:3/4; align-self:start; }
.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="google"]{ background:#fff; border:1px solid #dadce0; } .social-ic[data-s="google"]::after{ content:"G"; color:#4285F4; font-size:19px; font-weight:800; }
.social-ic[data-s="instagram"]{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
/* Fund 2026-07-28 (Markus Weiland): "IG"-Textplatzhalter durch das echte Instagram-Glyph ersetzt (Simple Icons, CC0-Pfad). */
.social-ic[data-s="instagram"]::after{ content:""; display:block; width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E") center/contain no-repeat; }
.social-ic[data-s="facebook"]{ background:#1877F2; }
/* Fund 2026-07-28 (Markus Weiland): "f"-Buchstabe (Systemschrift) durch das echte Facebook-Glyph ersetzt (Simple Icons, CC0-Pfad). */
.social-ic[data-s="facebook"]::after{ content:""; display:block; width:15px; height:15px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.social-ic[data-s="tiktok"]{ background:#111; } .social-ic[data-s="tiktok"]::after{ content:"TT"; }
.social-ic[data-s="youtube"]{ background:#FF0000; } .social-ic[data-s="youtube"]::after{ content:"▶"; font-size:13px; }
.social-ic[data-s="linkedin"]{ background:#0A66C2; } .social-ic[data-s="linkedin"]::after{ content:"in"; font-size:15px; }
.social-ic[data-s="xing"]{ background:#006567; } .social-ic[data-s="xing"]::after{ content:"XI"; font-size:13px; }
.social-ic[data-s="whatsapp"]{ background:#25D366; } .social-ic[data-s="whatsapp"]::after{ content:"WA"; font-size:13px; }
.social-ic[data-s="website"]{ background:var(--brand-blue); } .social-ic[data-s="website"]::after{ content:"↗"; font-size:16px; }
.social-ic[data-s="other"]{ background:var(--brand-blue); } .social-ic[data-s="other"]::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; }
/* Nur die kurzen Feld-Labels (Name/Telefon/…) uppercase/mono — NICHT das lange Einwilligungs-Label
   (.mp-consent), das sonst als schmale Großbuchstaben-Kolonne bricht (Fix 2026-07-09). */
.contact-form .field label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
/* :not([type=checkbox]) — sonst bekäme auch die Einwilligungs-Checkbox width:100%+padding und würde
   die volle Spaltenbreite einnehmen, wodurch der Einwilligungstext in eine schmale Kolonne rutscht. */
.contact-form input:not([type="checkbox"]), .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:not([type="checkbox"]):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,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%236b7388' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); 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); }
.finder__reset{ background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--brand-blue); text-decoration:underline; cursor:pointer; }
.finder__reset:hover{ color:var(--brand-blue-2,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); }
/* Nächstgelegenes Studio hervorheben (2026-08-01): eigener Rahmen + Fähnchen, damit die
   Entfernungs-Sortierung auf einen Blick erkennbar ist. position:relative, weil das Fähnchen
   absolut darin sitzt. */
/* "Meinen Standort verwenden" — bewusst zurückhaltend als Textlink-Button, damit er den
   primären "Standort finden"-Button nicht verdrängt. */
.finder__here{ background:none; border:0; padding:6px 2px; cursor:pointer; white-space:nowrap;
  font:600 13px/1.2 'Albert Sans',sans-serif; color:var(--brand-blue,#2c5aa0); text-decoration:underline;
  text-underline-offset:3px; }
.finder__here:hover{ color:var(--brand-orange,#e8743c); }
.finder__here[disabled]{ opacity:.6; cursor:default; text-decoration:none; }
.fcard--nearest{ position:relative; border-color:var(--brand-orange,#e8743c); box-shadow:0 0 0 2px rgba(232,116,60,.16); }
.fcard__nearest{ position:absolute; z-index:2; top:10px; left:10px; background:var(--brand-orange,#e8743c); color:#fff;
  font:600 11px/1 'Albert Sans',sans-serif; letter-spacing:.02em; padding:6px 10px; border-radius:999px;
  box-shadow:0 6px 16px -8px rgba(28,35,51,.6); }
.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; }

/* =========================================================
   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; }