/* ==========================================================
   Bikeley Provider Microsite – Upgrade Layer
   
   Änderungen:
   1. Header: transparent über Hero → solid sticky danach
   2. Section-Nav: nicht mehr sticky, scrollt normal weg
   ========================================================== */


/* ── 1. HEADER ─────────────────────────────────────────────
   
   Aktuell (app.css STEP10):
   - position:fixed, immer transparent
   - wird per JS weggeschoben wenn nav-docked
   
   Neu:
   - position:fixed bleibt (für transparent über Hero)
   - wenn nav-docked: Header wird NICHT weggeschoben,
     sondern bekommt soliden weißen Hintergrund
   ────────────────────────────────────────────────────────── */

/* Überschreibe das Wegsliden — Header bleibt IMMER sichtbar */
body.is-provider-microsite.provider-site-nav-docked .site-header{
  transform:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Wenn nav-docked → solid weißer Header */
body.is-provider-microsite.provider-site-nav-docked .site-header,
body.is-provider-microsite.provider-site-nav-docked .site-header--overlay,
body.is-provider-microsite.provider-site-nav-docked .site-header--overlay.is-solid,
body.is-provider-microsite.provider-site-nav-docked .site-header.is-solid{
  background:rgba(255,255,255,0.97) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  border-bottom:1px solid rgba(15,23,42,0.08) !important;
  box-shadow:0 1px 3px rgba(15,23,42,0.04) !important;
}

/* Wenn solid → Text/Icons dunkel statt weiß */
body.is-provider-microsite.provider-site-nav-docked .site-header .nav__brand,
body.is-provider-microsite.provider-site-nav-docked .site-header .nav__brand-text{
  color:#05060a !important;
}

body.is-provider-microsite.provider-site-nav-docked .site-header .nav__links a,
body.is-provider-microsite.provider-site-nav-docked .site-header .nav-menu__summary,
body.is-provider-microsite.provider-site-nav-docked .site-header .nav__icon-btn{
  color:#05060a !important;
}

/* Nav buttons: von glassmorphism-dark zu light */
body.is-provider-microsite.provider-site-nav-docked .site-header .nav__icon-btn,
body.is-provider-microsite.provider-site-nav-docked .site-header .nav-menu__summary{
  border:1px solid rgba(15,23,42,0.12) !important;
  background:rgba(15,23,42,0.04) !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}

body.is-provider-microsite.provider-site-nav-docked .site-header .nav__icon-btn:hover,
body.is-provider-microsite.provider-site-nav-docked .site-header .nav-menu__summary:hover{
  background:rgba(15,23,42,0.08) !important;
}

/* Logo: von dark glassmorphism zu clean white */
body.is-provider-microsite.provider-site-nav-docked .site-header .nav__brand-logo{
  background:#fff !important;
  border-color:rgba(15,23,42,0.10) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.06) !important;
}


/* ── 2. SECTION-NAV ────────────────────────────────────────
   
   Aktuell: position:sticky, klebt unter dem Header
   Neu: position:static, scrollt ganz normal mit
   ────────────────────────────────────────────────────────── */

body.is-provider-microsite .provider-site-nav-wrap{
  position:static !important;
  top:auto !important;
}

body.is-provider-microsite.provider-site-nav-docked .provider-site-nav-wrap{
  top:auto !important;
}


/* ── 3. HEADER SOLID STATE ─────────────────────────────────
   Header über Hero = original (groß, transparent, weiße Schrift)
   
   Problem: app.js adds is-solid class after 24px scroll.
   Generic CSS (.site-header.is-solid) then makes buttons/text dark.
   Fix: Override is-solid rules on microsite when NOT nav-docked,
   so header stays transparent + white on the hero.
   ────────────────────────────────────────────────────────── */

/* Keep header elements white while over the hero (is-solid but NOT docked) */
body.is-provider-microsite:not(.provider-site-nav-docked) .site-header.is-solid{
  background:transparent !important;
  border-bottom-color:transparent !important;
  box-shadow:none !important;
}

body.is-provider-microsite:not(.provider-site-nav-docked) .site-header.is-solid .nav__brand,
body.is-provider-microsite:not(.provider-site-nav-docked) .site-header.is-solid .nav__brand-text,
body.is-provider-microsite:not(.provider-site-nav-docked) .site-header.is-solid .nav__links a{
  color:#fff !important;
}

body.is-provider-microsite:not(.provider-site-nav-docked) .site-header.is-solid .nav__icon-btn,
body.is-provider-microsite:not(.provider-site-nav-docked) .site-header.is-solid .nav-menu__summary{
  color:#fff !important;
  background:rgba(10,16,28,0.34) !important;
  border-color:rgba(255,255,255,0.17) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 12px 28px rgba(0,0,0,0.14) !important;
}

body.is-provider-microsite:not(.provider-site-nav-docked) .site-header.is-solid .nav__icon-btn:hover,
body.is-provider-microsite:not(.provider-site-nav-docked) .site-header.is-solid .nav-menu__summary:hover{
  background:rgba(10,16,28,0.48) !important;
}

body.is-provider-microsite:not(.provider-site-nav-docked) .site-header.is-solid .nav__brand-logo{
  background:rgba(13,18,29,0.38) !important;
  border-color:rgba(255,255,255,0.18) !important;
  box-shadow:0 10px 24px rgba(0,0,0,0.18) !important;
}


/* ── 4. MARKETPLACE BIKES SECTION ──────────────────────────
   Uses the same mkt-card classes from marketplace-v5.css
   We include the card styles here so the microsite is self-contained
   ────────────────────────────────────────────────────────── */

.provider-site-bikes{
  background:#fff;
}

.provider-site-bikes-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

/* mkt-card styles (copied from marketplace-v5.css for self-containment) */
.provider-site-bikes .mkt-card{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid rgba(0,0,0,0.07);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  transition:all 0.3s cubic-bezier(.22,1,.36,1);
}
.provider-site-bikes .mkt-card:hover{
  border-color:rgba(0,0,0,0.12);
  box-shadow:0 16px 44px rgba(0,0,0,.10);
  transform:translateY(-6px);
}
.provider-site-bikes .mkt-card__link{ position:absolute; inset:0; z-index:1; }

.provider-site-bikes .mkt-card__media{
  position:relative;
  aspect-ratio:4/3;
  background:#f5f5f5;
  overflow:hidden;
}
.provider-site-bikes .mkt-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.provider-site-bikes .mkt-card:hover .mkt-card__media img{ transform:scale(1.05); }

.provider-site-bikes .mkt-card__badges{
  position:absolute; top:10px; left:10px; z-index:3;
  display:flex; gap:6px;
}
.provider-site-bikes .mkt-badge{
  display:inline-flex; align-items:center;
  padding:5px 10px;
  border-radius:8px; font-size:11px; font-weight:700;
  border:none; line-height:1;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.provider-site-bikes .mkt-badge--sale{ background:rgba(185,28,28,.88); color:#fff; }
.provider-site-bikes .mkt-badge--year{ background:rgba(255,255,255,.88); color:#374151; border:1px solid rgba(0,0,0,.06); }

.provider-site-bikes .mkt-card__body{
  padding:14px 16px 16px;
  display:flex; flex-direction:column; gap:2px;
  flex:1;
}
.provider-site-bikes .mkt-card__meta-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:4px;
}
.provider-site-bikes .mkt-card__brand{
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em;
  color:#9ca3af;
}
.provider-site-bikes .mkt-card__type{
  font-size:11px; font-weight:600;
  color:#9ca3af; letter-spacing:0.04em;
  text-transform:uppercase;
  margin-top:6px;
}
.provider-site-bikes .mkt-card__title{
  margin:2px 0 0; font-size:15px; font-weight:600;
  line-height:1.3; letter-spacing:-0.01em; color:#1a1a1a;
}
.provider-site-bikes .mkt-card__specs{
  font-size:12px; color:#9ca3af; margin-top:2px;
}
.provider-site-bikes .mkt-card__price{
  display:flex; align-items:baseline; gap:8px;
  margin-top:8px;
}
.provider-site-bikes .mkt-card__price strong{
  font-size:16px; font-weight:700; color:#1a1a1a;
}
.provider-site-bikes .mkt-card__price strong.is-sale{ color:#b42318; }
.provider-site-bikes .mkt-card__price span{
  font-size:13px; color:#9ca3af;
  text-decoration:line-through; font-weight:500;
}

/* Responsive */
@media (max-width:1100px){
  .provider-site-bikes-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:780px){
  .provider-site-bikes-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }
}

@media (max-width:480px){
  .provider-site-bikes-grid{
    grid-template-columns:1fr;
  }
}


/* ── 5. HERO TITLE – Weniger zusammengerückt ───────────────
   STEP11 setzt letter-spacing:-0.055em + line-height:0.9
   Das drückt die Buchstaben zu eng. Etwas lockerer:
   ────────────────────────────────────────────────────────── */

body.is-provider-microsite .provider-site-hero__title{
  letter-spacing:-0.04em !important;
  line-height:0.92 !important;
  font-size:clamp(64px, 14vw, 140px) !important;
  margin-top:0 !important;
  max-width:14ch !important;
  font-weight:980 !important;
}

/* ── HOME ICON in header — LEFT position, override centered brand ── */
body.is-provider-microsite .site-header .nav__brand{
  position:static !important;
  left:auto !important;
  transform:none !important;
  width:40px !important;height:40px !important;min-width:40px !important;
  max-width:40px !important;
  overflow:hidden !important;border-radius:12px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  flex:0 0 40px !important;
  text-align:center !important;
  gap:0 !important;
}
body.is-provider-microsite .site-header .nav__brand img,
body.is-provider-microsite .site-header .nav__brand-text,
body.is-provider-microsite .site-header .nav__brand-sub,
body.is-provider-microsite .site-header .nav__brand-initials,
body.is-provider-microsite .site-header .nav__brand-logo{
  display:none !important;
}
body.is-provider-microsite .site-header .nav__brand::after{
  content:'' !important;display:block !important;
  width:22px !important;height:22px !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 10.5V21h13V10.5'/%3E%3C/svg%3E") no-repeat center/contain !important;
}
/* When header becomes solid/docked → dark icon */
body.is-provider-microsite.provider-site-nav-docked .site-header .nav__brand::after,
body.is-provider-microsite .site-header.is-solid .nav__brand::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 10.5V21h13V10.5'/%3E%3C/svg%3E") !important;
}


/* ── 6. HERO HEIGHT – 85vh ─────────────────────────────────
   Groß genug für Content, man sieht unten die Nav angeschnitten
   ────────────────────────────────────────────────────────── */

body.is-provider-microsite .provider-site-hero{
  min-height:85vh !important;
  max-height:none !important;
}
@supports (min-height:85dvh){
  body.is-provider-microsite .provider-site-hero{
    min-height:85dvh !important;
  }
}

/* Pull hero under the fixed header to eliminate white stripe */
body.is-provider-microsite .provider-site-hero.is-behind-header{
  margin-top:calc(-1 * var(--header-h)) !important;
  padding-top:var(--header-h) !important;
}

body.is-provider-microsite .provider-site-hero__inner{
  padding:calc(var(--header-h) + 28px) 0 80px !important;
}

/* Hero CTA buttons – show them (hidden by STEP10) */
body.is-provider-microsite .provider-site-hero__cta{
  display:flex !important;
  margin-top:24px;
}

/* Scroll cue: mehr Abstand nach oben */
body.is-provider-microsite .provider-site-scroll{
  bottom:20px;
}
body.is-provider-microsite .provider-site-scroll__line{
  height:28px;
}


/* ── 7. ABOUT – 2-Spalten (Text links, Facts rechts) ───────
   ────────────────────────────────────────────────────────── */

body.is-provider-microsite .provider-site-about{
  background:linear-gradient(180deg, #fafafa 0%, #fff 100%) !important;
  color:#05060a !important;
  padding:64px 0 56px !important;
  border-bottom:1px solid rgba(0,0,0,0.04) !important;
}

body.is-provider-microsite .provider-site-about .provider-site-kicker{
  color:rgba(0,0,0,0.38) !important;
  font-size:11px !important;
  letter-spacing:.1em !important;
}

body.is-provider-microsite .provider-site-about__title{
  color:#05060a !important;
  font-size:clamp(32px, 4vw, 48px) !important;
  letter-spacing:-.04em !important;
  line-height:1 !important;
  margin-bottom:12px !important;
}

body.is-provider-microsite .provider-site-about__tagline{
  color:rgba(5,6,10,0.52) !important;
  font-size:17px !important;
  font-style:italic !important;
  margin-bottom:20px !important;
}

body.is-provider-microsite .provider-site-about__text{
  color:rgba(0,0,0,0.58) !important;
  max-width:none !important;
  font-size:15px !important;
  line-height:1.75 !important;
  padding-top:20px !important;
  border-top:1px solid rgba(0,0,0,0.06) !important;
}

body.is-provider-microsite .provider-site-about__inner{
  max-width:none !important;
  text-align:left !important;
  display:grid !important;
  grid-template-columns:1fr 380px !important;
  gap:20px 48px !important;
  align-items:start !important;
}

/* Text-Inhalt links */
body.is-provider-microsite .provider-site-about__inner > .provider-site-kicker,
body.is-provider-microsite .provider-site-about__inner > .provider-site-section-title,
body.is-provider-microsite .provider-site-about__inner > .provider-site-about__title,
body.is-provider-microsite .provider-site-about__inner > .provider-site-about__tagline,
body.is-provider-microsite .provider-site-about__inner > .provider-site-about__text{
  grid-column:1 !important;
}

/* Facts → rechte Spalte */
body.is-provider-microsite .provider-site-about__facts{
  grid-column:2 !important;
  grid-row:1 / span 5 !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  margin-top:0 !important;
}

/* Facts Cards: light statt dark glassmorphism */
body.is-provider-microsite .provider-site-fact{
  background:#fff !important;
  border:1px solid rgba(15,23,42,0.06) !important;
  border-radius:18px !important;
  box-shadow:0 2px 12px rgba(15,23,42,0.03) !important;
  backdrop-filter:none !important;
  padding:20px 22px !important;
  transition:all .2s ease !important;
}

body.is-provider-microsite .provider-site-fact__label{
  color:rgba(0,0,0,0.36) !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  margin-bottom:6px !important;
}

body.is-provider-microsite .provider-site-fact__value{
  color:#05060a !important;
  font-size:17px !important;
  font-weight:750 !important;
  letter-spacing:-.02em !important;
}

body.is-provider-microsite .provider-site-fact__hint{
  color:rgba(0,0,0,0.34) !important;
  font-size:13px !important;
  margin-top:6px !important;
}

body.is-provider-microsite a.provider-site-fact:hover{
  border-color:rgba(0,0,0,0.14) !important;
  box-shadow:0 8px 24px rgba(15,23,42,0.06) !important;
  transform:translateY(-2px);
}

@media (max-width:980px){
  body.is-provider-microsite .provider-site-about__inner{
    grid-template-columns:1fr !important;
  }
  body.is-provider-microsite .provider-site-about__facts{
    grid-column:1 !important;
    grid-row:auto !important;
  }
}


/* ── 8. SERVICES – Liste mit Preisen statt Card-Grid ───────
   ────────────────────────────────────────────────────────── */

body.is-provider-microsite .provider-site-offer-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:0 !important;
}

body.is-provider-microsite .provider-site-offer-grid.is-featured{
  grid-template-columns:1fr !important;
}

body.is-provider-microsite .provider-site-offer-grid.is-featured .provider-site-offer-card:first-child{
  grid-column:span 1 !important;
}

body.is-provider-microsite .provider-site-offer-card{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  gap:4px 28px !important;
  align-items:start !important;
  padding:20px 0 !important;
  border-top:1px solid rgba(15,23,42,0.08) !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  min-height:0 !important;
}

body.is-provider-microsite .provider-site-offer-card:first-child{
  border-top:0 !important;
}

/* Category-Pill verstecken (redundant wegen Tabs) */
body.is-provider-microsite .provider-site-offer-card__topline{
  display:none !important;
}

body.is-provider-microsite .provider-site-offer-card h4{
  margin:0 !important;
  font-size:17px !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  color:#05060a !important;
  line-height:1.25 !important;
  grid-column:1 !important;
}

body.is-provider-microsite .provider-site-offer-card__meta{
  text-align:right !important;
  white-space:nowrap !important;
  font-size:16px !important;
  font-weight:850 !important;
  letter-spacing:-0.02em !important;
  color:#05060a !important;
  grid-column:2 !important;
  grid-row:1 !important;
}

body.is-provider-microsite .provider-site-offer-card p{
  margin:4px 0 0 !important;
  font-size:14px !important;
  line-height:1.65 !important;
  color:rgba(0,0,0,0.54) !important;
  grid-column:1 / -1 !important;
}


/* ── 9. INFO – Google Maps Embed ───────────────────────────
   Map container added via PHP
   ────────────────────────────────────────────────────────── */

body.is-provider-microsite .provider-site-info-grid{
  grid-template-columns:1fr 1fr !important;
}

@media (max-width:980px){
  body.is-provider-microsite .provider-site-info-grid{
    grid-template-columns:1fr !important;
  }
}


/* ── 10. CONTACT – Cleaner form + WhatsApp ─────────────────
   ────────────────────────────────────────────────────────── */

body.is-provider-microsite .provider-site-lead-form input,
body.is-provider-microsite .provider-site-lead-form textarea{
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.12);
  padding:12px 16px;
  font-size:15px;
  font-weight:600;
  transition:border-color .18s ease, box-shadow .18s ease;
}

body.is-provider-microsite .provider-site-lead-form input:focus,
body.is-provider-microsite .provider-site-lead-form textarea:focus{
  outline:none;
  border-color:#05060a;
  box-shadow:0 0 0 3px rgba(5,6,10,0.08);
}

/* ── About: type badges ── */
body.is-provider-microsite .provider-site-about__types{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}

body.is-provider-microsite .provider-site-about__type-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(15,23,42,0.05);
  font-size:12px;
  font-weight:700;
  color:rgba(15,23,42,0.6);
  letter-spacing:.02em;
}