/**
 * Gemeinsame Demo-UX: Marquee, Headline-Strong, Hochformat (.bd-img-portrait).
 * Bild-Fallback: ../demo/bd-placeholder.svg (per onerror an Team-<img> gesetzt, außer Kreis-Avatare).
 * Multi-Step-Wizard: bewusst nicht hier (eigener Umbau / Conversion-Fokus).
 * Einbinden nach demo-google-hero-pill.css in den HTML-Templates.
 * Inhaltsbreite: `main .wrap` wird ab Desktop verbreitert; Hero bleibt mit `main section#hero .wrap.hero-content` bei ~1120px.
 * Hero: Google-Pill unter CTAs (`flex-basis:100%` falls noch in `.hero-ctas`); H1 max-width + `text-wrap: balance`.
 * Hero-Footer: Unterlauf-Gradient (--bd-hero-fade-to am #hero setzen) + „Scroll down“-CTA (≤639px ausgeblendet, extra Padding unten).
 * min-height = calc(100dvh - var(--bd-demo-bar-h,0)); --bd-demo-bar-h: demo-bd-stack-offset.js.
 * Ausrichtung wie Handwerk: Desktop Section-Padding oben; mobil reduziert (vgl. Handwerk max-width 639px).
 * Split-Heros mobil: align-content start + overflow-y auto bei Bedarf; zentrierte .hero (Barbershop/Friseur …) bleiben vertikal zentriert.
 */

/* --- Bold-Inline in Headlines: stark, aber Farbe vom Eltern-Heading (kein „fremdes“ Dunkel) --- */
main h1 strong,
main .hero h1 strong,
.hero h1 strong,
main .h1 strong,
main h2.section-title strong,
main h2.h2 strong,
main .section-title strong {
  font-weight: 800;
  color: inherit;
  letter-spacing: inherit;
}

/* --- Hochformat 3:4 (z. B. class="bd-img-portrait" auf Team-Portraits) --- */
.bd-img-portrait {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
}

/* --- Demo-Marquee (reines CSS, reduzierte Bewegung respektiert) --- */
.bd-demo-ticker {
  overflow: hidden;
  max-width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.88);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #44403c;
}
.bd-demo-ticker__track {
  display: flex;
  width: max-content;
  gap: 4rem;
  padding: 6px 0;
  animation: bd-demo-ticker-marquee 28s linear infinite;
}
.bd-demo-ticker__track > span {
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .bd-demo-ticker__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.75rem;
    padding: 8px 12px;
    text-align: center;
  }
  .bd-demo-ticker__track > span:last-child {
    display: none;
  }
}
@keyframes bd-demo-ticker-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* --- Hero: Gradient zum nächsten Abschnitt + Scroll-Hinweis (Markup in section#hero) --- */
section#hero {
  --bd-hero-fade-to: rgba(10, 10, 10, 0.88);
}
/*
 * Hero-Säule: CSS-Grid (Zeile 1 = minmax(0,1fr), Zeile 2 = Scroll-Fuß) — zuverlässigere vertikale Mitte als Flex+flex-basis.
 * Absolut positionierte Layer (Overlay/Fade) nehmen keine Grid-Zellen ein.
 */
main section#hero.rt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100svh - var(--bd-demo-bar-h, 0px));
  min-height: calc(100dvh - var(--bd-demo-bar-h, 0px));
  /* Padding bleibt in demo/restaurant (.rt-hero-inner), sonst doppelt */
  padding: 0;
  box-sizing: border-box;
  align-items: stretch;
}
main section#hero.rt-hero .rt-hero-inner {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Breite: .rt-hero-inner im Template (min(100%,52rem) / .wrap) */
}
main section#hero.rt-hero .bd-hero-scroll-foot {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  flex-shrink: 0;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
}

/* Handwerk-Split (#hero.section.hero): Scroll-Zeile in Zeile 2, Inhalt in 1fr-Zeile */
main section#hero.section.hero .bd-hero-scroll-foot {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  flex-shrink: 0;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
}
section#hero.section.hero > .bd-hero-fade {
  z-index: 1;
}

/* Handwerk & Co.: Grid-Säule + min-height (lokales display:flex auf .section.hero wird überstimmt) */
main section#hero.section.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100svh - var(--bd-demo-bar-h, 0px));
  min-height: calc(100dvh - var(--bd-demo-bar-h, 0px));
}
main section#hero.section.hero > .wrap.hero-inner {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
  align-self: stretch;
}

/* Zentrierte Vollbild-Heros: wie Handwerk — Section-Padding oben, innerer Block stretcht + zentriert Inhalt */
main section#hero.hero:not(.section) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100svh - var(--bd-demo-bar-h, 0px));
  min-height: calc(100dvh - var(--bd-demo-bar-h, 0px));
  padding: clamp(72px, 14vh, 120px) clamp(16px, 3vw, 24px) 0;
  box-sizing: border-box;
  align-items: stretch;
}
main section#hero.hero:not(.section) > .wrap.hero-content,
main section#hero.hero:not(.section) > .hero-content {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 clamp(16px, 3vw, 24px) clamp(24px, 4vh, 40px);
  box-sizing: border-box;
}
main section#hero.hero:not(.section) .bd-hero-scroll-foot {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  flex-shrink: 0;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
}
section#hero.hero:not(.section) > .bd-hero-fade {
  z-index: 1;
}

/* Café-Split (#hero.cf-hero): wie Handwerk — Section-Padding, Zeile 1 stretch, inneres Grid align-items/content center */
main section#hero.cf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100svh - var(--bd-demo-bar-h, 0px));
  min-height: calc(100dvh - var(--bd-demo-bar-h, 0px));
  padding: clamp(72px, 14vh, 120px) clamp(16px, 3vw, 24px) 0;
  box-sizing: border-box;
  align-items: stretch;
}
main section#hero.cf-hero .cf-hero-inner {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  align-content: center;
}
main section#hero.cf-hero .bd-hero-scroll-foot {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  flex-shrink: 0;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
}

/* Nagelstudio (#hero.ns-hero): wie Handwerk / Café */
main section#hero.ns-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100svh - var(--bd-demo-bar-h, 0px));
  min-height: calc(100dvh - var(--bd-demo-bar-h, 0px));
  padding: clamp(72px, 14vh, 120px) clamp(16px, 3vw, 24px) 0;
  box-sizing: border-box;
  align-items: stretch;
}
main section#hero.ns-hero .ns-hero-inner {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  max-width: min(1080px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
  padding: 0 clamp(16px, 3vw, 24px) clamp(24px, 4vh, 40px);
  align-items: center;
  align-content: center;
}
main section#hero.ns-hero .bd-hero-scroll-foot {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  flex-shrink: 0;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
}

/* Wimpernstudio / Podologie (#hero.ws-hero, #hero.po-hero) — wie Handwerk / Café */
main section#hero.ws-hero,
main section#hero.po-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100svh - var(--bd-demo-bar-h, 0px));
  min-height: calc(100dvh - var(--bd-demo-bar-h, 0px));
  padding: clamp(72px, 14vh, 120px) clamp(16px, 3vw, 24px) 0;
  box-sizing: border-box;
  align-items: stretch;
}
main section#hero.ws-hero .ws-hero-inner,
main section#hero.po-hero .po-hero-inner {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  align-items: center;
  align-content: center;
}
main section#hero.ws-hero .bd-hero-scroll-foot,
main section#hero.po-hero .bd-hero-scroll-foot {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  flex-shrink: 0;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
}
section#hero.ws-hero > .bd-hero-fade,
section#hero.po-hero > .bd-hero-fade {
  z-index: 1;
}

/* Mobil: Split-Heros von oben + Scroll bei langem Inhalt; zentrierte Vollbild-Heros wie Handwerk mit Luft + Mitte */
@media (max-width: 639px) {
  /* Zwei-Spalten-/Split-Shells: kompakteres Top-Padding, Zeilen oben andocken */
  main section#hero.cf-hero,
  main section#hero.ns-hero,
  main section#hero.ws-hero,
  main section#hero.po-hero {
    padding-top: max(
      env(safe-area-inset-top, 0px),
      clamp(40px, 10vh, 72px)
    );
    padding-left: max(env(safe-area-inset-left, 0px), clamp(14px, 4vw, 20px));
    padding-right: max(env(safe-area-inset-right, 0px), clamp(14px, 4vw, 20px));
    /* unten: Platz statt „Scroll down“-Zeile */
    padding-bottom: max(
      env(safe-area-inset-bottom, 0px),
      clamp(32px, 8vh, 72px)
    );
    align-content: start;
  }

  /* Barbershop, Friseur, Sonnenstudio, Beauty … — vgl. Handwerk .section.hero mobil */
  main section#hero.hero:not(.section) {
    padding-top: max(
      64px,
      env(safe-area-inset-top, 0px),
      clamp(56px, 12vh, 96px)
    );
    padding-left: max(env(safe-area-inset-left, 0px), clamp(14px, 4vw, 20px));
    padding-right: max(env(safe-area-inset-right, 0px), clamp(14px, 4vw, 20px));
    padding-bottom: max(
      env(safe-area-inset-bottom, 0px),
      clamp(32px, 8vh, 72px)
    );
  }

  main section#hero.section.hero {
    padding-bottom: max(
      env(safe-area-inset-bottom, 0px),
      clamp(32px, 8vh, 72px)
    );
  }

  /* Nur Split: interner Scroll statt Clip (overflow:hidden in den Demos) */
  main section#hero.cf-hero,
  main section#hero.ns-hero,
  main section#hero.ws-hero,
  main section#hero.po-hero {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  main section#hero.cf-hero .cf-hero-inner,
  main section#hero.ns-hero .ns-hero-inner,
  main section#hero.ws-hero .ws-hero-inner,
  main section#hero.po-hero .po-hero-inner {
    align-content: start;
    align-items: stretch;
    padding: 0 0 max(
      env(safe-area-inset-bottom, 0px),
      clamp(28px, 7vh, 64px)
    );
  }

  main section#hero.hero:not(.section) > .wrap.hero-content,
  main section#hero.hero:not(.section) > .hero-content {
    justify-content: center;
    align-items: center;
    padding: 0 clamp(14px, 4vw, 20px) max(
      env(safe-area-inset-bottom, 0px),
      clamp(36px, 10vh, 88px)
    );
  }

  section#hero h1 {
    font-size: clamp(34px, 9vw, 48px);
    line-height: 1.08;
    max-width: 16ch;
  }
  section#hero .rt-hero-sub,
  section#hero .hero-sub,
  section#hero .cf-hero-sub,
  section#hero .ns-hero-sub,
  section#hero .ws-hero-sub,
  section#hero .po-hero-sub {
    font-size: clamp(15px, 4.2vw, 18px);
    line-height: 1.45;
  }
  section#hero .rt-badge,
  section#hero .hero-badge {
    font-size: 11.5px;
    letter-spacing: 0.06em;
  }
  section#hero .btn-row,
  section#hero .hero-ctas,
  section#hero .cf-hero-ctas,
  section#hero .ns-hero-ctas,
  section#hero .ws-hero-ctas,
  section#hero .po-hero-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }
  section#hero .btn,
  section#hero .hero-cta {
    min-height: 48px;
    width: 100%;
    padding: 14px 18px;
  }
  section#hero .bd-hero-google-pill {
    margin-top: 14px;
    font-size: 13px;
    padding: 8px 12px;
    gap: 8px;
  }

  section#hero .rt-hero-overlay,
  section#hero .cf-hero-overlay,
  section#hero .ns-hero-overlay,
  section#hero .ws-hero-overlay,
  section#hero .po-hero-overlay {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.6));
  }

  /* Handwerk: wieder vertikale Mitte wie lokales Stylesheet */
  main section#hero.section.hero > .wrap.hero-inner {
    align-content: center;
    align-items: center;
    padding-bottom: max(
      env(safe-area-inset-bottom, 0px),
      clamp(28px, 7vh, 64px)
    );
  }

  /* „Scroll down“-Hinweis mobil aus; Inhalt rutscht durch extra Padding nach unten */
  section#hero .bd-hero-scroll-foot {
    display: none !important;
  }
}

/* Stacking: Hero-Hintergrund/Parallax unter nachfolgenden Sektionen (vgl. demo/restaurant) */
main > section:not(#hero) {
  position: relative;
  z-index: 1;
}

section#hero .bd-hero-scroll-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}
section#hero .bd-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Kürzer + weicher: weniger „Milchglas“ über dem Foto, unten weiterhin volle Deckkraft fürs Andocken an die nächste Sektion */
  height: clamp(88px, 22vh, 220px);
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 32%,
    color-mix(in srgb, var(--bd-hero-fade-to) 14%, transparent) 55%,
    color-mix(in srgb, var(--bd-hero-fade-to) 42%, transparent) 76%,
    color-mix(in srgb, var(--bd-hero-fade-to) 78%, transparent) 92%,
    var(--bd-hero-fade-to) 100%
  );
}
section#hero .bd-hero-scroll-cta {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 20px clamp(20px, 4vh, 36px);
  margin-top: auto;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  outline: none;
}
section#hero .bd-hero-scroll-cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 4px;
  border-radius: 4px;
}
section#hero .bd-hero-scroll-mouse {
  display: block;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  box-sizing: border-box;
  position: relative;
  animation: bd-hero-scroll-nudge 1.8s ease-in-out infinite;
}
section#hero .bd-hero-scroll-mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  animation: bd-hero-scroll-dot 1.8s ease-in-out infinite;
}
@keyframes bd-hero-scroll-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
@keyframes bd-hero-scroll-dot {
  0%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.45;
    transform: translateY(10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  section#hero .bd-hero-scroll-mouse,
  section#hero .bd-hero-scroll-mouse::after {
    animation: none;
  }
}
@media (prefers-reduced-data: reduce) {
  section#hero .rt-hero-bg,
  section#hero .cf-hero-bg,
  section#hero .ns-hero-bg,
  section#hero .ws-hero-bg,
  section#hero .po-hero-bg {
    background-image: none !important;
    background-color: #1a1a1a;
  }
}
section#hero .bd-hero-scroll-text {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Helles Ziel (--bd-hero-fade-to z. B. #fff): dunkles Icon + Label */
section#hero[data-bd-fade="light"] .bd-hero-scroll-cta {
  color: rgba(35, 32, 38, 0.92);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
section#hero[data-bd-fade="light"] .bd-hero-scroll-mouse {
  border-color: rgba(35, 32, 38, 0.55);
}
section#hero[data-bd-fade="light"] .bd-hero-scroll-mouse::after {
  background: rgba(35, 32, 38, 0.8);
}
section#hero[data-bd-fade="light"] .bd-hero-scroll-cta:focus-visible {
  outline-color: rgba(35, 32, 38, 0.85);
}

/* --- Standort (ab Business): `standort_bild_1`–`4` + onerror-Pexels; nicht Teil der Galerie-Marquee --- */
.bd-location-section .bd-location-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .bd-location-section .bd-location-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .bd-location-section .bd-location-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.bd-location-section .bd-location-card {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.035);
}
.bd-location-section .bd-location-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* --- Öffnungszeiten: Generator liefert oft nur <tr>…</tr> — im Markup in <tbody> eingebettet; Tabelle zentriert --- */
.oeffnungszeiten-grid {
  margin-left: auto;
  margin-right: auto;
  max-width: min(28rem, 100%);
}
.oeffnungszeiten-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: inherit;
  line-height: 1.55;
}
.oeffnungszeiten-table td {
  padding: 0.35rem 0.75rem 0.35rem 0;
  vertical-align: top;
}
.oeffnungszeiten-table td:first-child {
  font-weight: 600;
  width: 44%;
}
.oeffnungszeiten-table td:last-child {
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}

/* --- Inhaltsbreite (Desktop): Sektionen nutzen mehr Viewport; seitliche Luft bleibt --- */
@media (min-width: 1024px) {
  main .wrap {
    box-sizing: border-box;
    width: min(100% - clamp(32px, 5vw, 72px), min(94vw, 1500px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
  /* Hero: innerer Block nicht mitziehen — Typo/CTA bleiben wie bei klassischem ~1120px-Raster */
  main section#hero .wrap.hero-content {
    width: min(1120px, 100%);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hero: Headline nicht endlos einzeilig auf sehr breiten Viewports */
section#hero .wrap.hero-content > h1,
section#hero .hero-content > h1 {
  max-width: min(18em, 92vw);
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

/* Google-Pill unter den CTA-Buttons (liegt in vielen Templates irrtümlich IN .hero-ctas / *-hero-ctas) */
.hero-ctas .bd-hero-google-pill,
.ns-hero-ctas .bd-hero-google-pill,
.cf-hero-ctas .bd-hero-google-pill,
.ns-hero-ctas .bd-hero-google-pill,
.ws-hero-ctas .bd-hero-google-pill,
.po-hero-ctas .bd-hero-google-pill {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
}