/* =========================================================
   Hunde-Sprache — Above-the-Fold / Hero (stabil)
   ========================================================= */

/* ---------- Design-Variablen ---------- */
:root{
  --hs-ink: #222;
  --hs-white: #fff;

  /* Brand-CTA */
  --hs-cta: #cf7b87;
  --hs-cta-hover: #dc8b96;

  /* Proof-Sterne */
  --hs-star: #F7D94C;

  /* Textfarbe (leicht off-white, sehr gut lesbar) */
  --hs-text: rgba(255,255,255,.96);

  /* Overlay (heller/neutraler → Bild wirkt frischer) */
  --hs-overlay-top: rgba(0,0,0,.08);
  --hs-overlay-mid: rgba(0,0,0,.18);
  --hs-overlay-bot: rgba(0,0,0,.40);

  /* Text optisch nach oben ziehen (mobil stärker) */
  --hs-mobile-shift: 15vh;
}

/* ---------- Section mit Bild-Hintergrund + Overlay ---------- */
.hs-hero{
  position: relative;
  color: var(--hs-white);
  background: center/cover no-repeat;
  /* Mobile ist Default */
  background-image: var(--hs-hero-img-mobile, var(--hs-hero-img, none));
  /* Links Ruhefläche für den Text schaffen */
  background-position: right 10% center;
  min-height: 92vh;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
}

.hs-hero--overlay::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(
    180deg,
    var(--hs-overlay-top) 0%,
    var(--hs-overlay-mid) 34%,
    var(--hs-overlay-bot) 100%
  );
}

.hs-hero__inner{
  position: relative; z-index:1;
  width: 100%;
  padding: clamp(14px,4vw,28px) clamp(18px,5vw,42px)
           calc(26px + env(safe-area-inset-bottom));
}

.hs-hero__content{
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  transform: translateY(calc(-1 * var(--hs-mobile-shift)));
}

/* ---------- Typografie ---------- */

/* H1 – dominant, bewusst sehr hell + etwas stärkerer Schatten */
.hs-hero__title{
  margin: 0 0 clamp(20px, 4.6vh, 28px); /* Luft zu H2 */
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.06;
  font-size: clamp(32px, 7.6vw, 56px);
  color: rgba(255,255,255,.99);
  text-wrap: balance;
  text-shadow: 0 3px 16px rgba(0,0,0,.34);
}

/* H2 – klar kleiner/leichter, mehr Abstand zum CTA */
.hs-hero__subtitle{
  margin: 0 0 clamp(30px, 5.6vh, 38px); /* Luft zu CTA */
  font-weight: 700;
  line-height: 1.18;
  font-size: clamp(18px, 4.8vw, 24px);
  color: var(--hs-text);
  text-wrap: balance;
}

/* ---------- CTA ---------- */
.hs-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  max-width: 720px;
  padding: 16px 26px;
  border-radius: 16px;
  background: var(--hs-cta);
  color: #fff;
  font-weight: 800;
  font-size: clamp(16px, 4.5vw, 20px);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(207,123,135,.42);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.hs-cta:hover{ transform: translateY(-2px); background: var(--hs-cta-hover); }
.hs-cta:active{ transform: translateY(0); }

/* Microcopy unter dem CTA */
.hs-cta__hint{
  margin: 14px auto 0; /* +2px Luft */
  max-width: 720px;
  font-size: clamp(12.5px, 3.5vw, 14px);
  line-height: 1.3;
  color: var(--hs-text);  /* bleibt hell */
}

/* ---------- Proof ---------- */
.hs-proof{
  margin-top: clamp(22px, 3.4vh, 28px);
  display: grid;
  place-items: center;
  row-gap: 10px;
}
.hs-proof__stars{ display:flex; gap:8px; }
.hs-star{ color: var(--hs-star); font-size: 21px; line-height: 1; }
.hs-proof__line{
  margin: 0;
  font-size: clamp(14px, 3.8vw, 16px);
  line-height: 1.35;
  color: var(--hs-text);
}

/* ---------- Breakpoints ---------- */
@media (max-width: 767px){
  :root{ --hs-mobile-shift: 15vh; }
}
@media (min-width: 768px){
  :root{ --hs-mobile-shift: 9vh; }
  .hs-hero{ min-height: 88vh; }
  .hs-hero__title{ font-size: clamp(36px, 5.2vw, 62px); }
  .hs-hero__subtitle{ font-size: clamp(18px, 2.2vw, 26px); }
}
@media (min-width: 900px){
  .hs-hero{
    background-image: var(--hs-hero-img-desktop, var(--hs-hero-img-mobile));
    background-position: right 4% center; /* rechts, links Textfläche */
  }
}
@media (min-width: 1280px){
  .hs-hero{ min-height: 92vh; }
  :root{ --hs-mobile-shift: 6.5vh; }
}

/* =========================================================
   NAVBAR – minimale Fixes NUR für Startseite
   (kein Einfluss auf Hero/Abstände/CTA-Farben)
   ========================================================= */

/* 1) Lupe im Header weiß färben (egal ob SVG oder PNG) */
.home-template .header .search-icon svg,
.home-template .header .search-icon path {
  stroke: #fff !important;
  fill: none !important;
}
.home-template .header .search-icon img {
  filter: invert(1) brightness(1.2) !important;
}

/* 2) Dropdown-Menüs: heller Hintergrund + dunkler Text */
.home-template .header .secondary-links{
  background: rgba(255,255,255,.96) !important; /* „Light“-Look */
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.home-template .header .secondary-links a{
  color: #222 !important;     /* dunkler Text */
  text-shadow: none !important;
}
.home-template .header .secondary-links a:hover{
  color: var(--hs-cta-hover) !important;
}

/* 3) „Werde Mitglied“ Button vollständig ausblenden */
.acc-button-wrapper,
.acc-button-wrapper *{
  display: none !important;
}

/* 4) Suchbereich: Box-Ränder unsichtbar (nur Icon + Text) */
.search-wrapper{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==== Header: Startseite immer helle Schrift + helle Icons (ohne Dropdown zu beeinflussen) ==== */

/* Links & Logo oben weiß erzwingen */
.home-template .header .logo .medium-text,
.home-template .header .nav-link,
.home-template .header .links-label,
.home-template .header .search-button {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}

/* Pfeilchen der Dropdown-Trigger auch weiß */
.home-template .header .dropdown-arrow-svg path {
  stroke: #fff !important;
}

/* Lupe sicher weiß (SVG oder PNG) */
.home-template .header .search-icon svg,
.home-template .header .search-icon path,
.home-template .header .search-icon img {
  stroke: #fff !important;
  fill: #fff !important;
  filter: invert(1) brightness(1.3) !important;
}

/* Falls das Theme beim Scrollen eine "sticky/scrolled" Klasse setzt:
   dann wieder auf dunkle Standardfarben zurück (damit es über weißem
   Content nicht zu hell bleibt) */
.home-template .header.is-sticky .logo .medium-text,
.home-template .header.scrolled .logo .medium-text,
.home-template .header.is-sticky .nav-link,
.home-template .header.scrolled .nav-link,
.home-template .header.is-sticky .links-label,
.home-template .header.scrolled .links-label,
.home-template .header.is-sticky .search-button,
.home-template .header.scrolled .search-button {
  color: var(--text-color2) !important;
  text-shadow: none !important;
}

/* =========================
   MOBILE NAV – FIXES (<=991)
   ========================= */
@media (max-width: 991px){

  /* A) Burger auf dem Hero: klar weiß */
  .home-template .header .menu-line{
    background: #fff !important;
    box-shadow: 0 0 6px rgba(0,0,0,.15); /* leichte Kontur gegen helle Bildstellen */
  }
  .home-template .header .menu-button svg{
    stroke: #fff !important; fill: #fff !important;
    filter: drop-shadow(0 0 2px rgba(0,0,0,.3));
  }

  /* B) Offenes Menü: Farben wieder auf „Light“ stellen */
  .home-template .navbar-links-outer{
    /* reset der im Header auf weiß gestellten Variablen */
    --text-color1: #222;
    --text-color2: #222;
    --text-color2-20-opacity: rgba(34,34,34,.20);
    --text-color2-40-opacity: rgba(34,34,34,.40);

    background: var(--background-color2, #F9F9F9) !important; /* Light-Theme BG2 */
  }

  /* C) Links in der Mobile-Liste: dunkel, ohne Textschatten */
  .home-template .navbar-links-outer .nav-link,
  .home-template .navbar-links-outer .links-label,
  .home-template .navbar-links-outer .secondary-links a{
    color: #222 !important;
    text-shadow: none !important;
  }

  /* Divider in der Liste: dunkler, nicht weiß */
  .home-template .navbar-links-outer .links-label{
    border-bottom: 1px solid rgba(34,34,34,.20) !important;
  }
  .home-template .navbar-links-outer .acc-button-wrapper{ display:none !important; }

  /* D) Sekundäre Links (Dropdown-Panels im Mobile-Menü) */
  .home-template .navbar-links-outer .secondary-links{
    background: #fff !important;                 /* klares Weiß */
    border: 1px solid rgba(0,0,0,.06) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
  }
  .home-template .navbar-links-outer .secondary-links a{
    color: #222 !important;
  }

  /* E) Schließen-Icon (X) im geöffneten Menü auf dunkel */
  /* deckt gängige Close-Elemente ab – harmlos, wenn nicht vorhanden */
  .home-template .navbar-links-outer .menu-button .menu-line{ background:#222 !important; }
  .home-template .navbar-links-outer .menu-button svg,
  .home-template .navbar-links-outer .menu-close svg,
  .home-template .navbar-links-outer .close svg,
  .home-template .navbar-links-outer .menu-close,
  .home-template .navbar-links-outer .close{
    stroke:#222 !important; fill:#222 !important; color:#222 !important;
    filter:none !important;
  }
}