/* ================================================================
   eHealth-Connect – Hero Fix (FINAL HARD RESET)
   Ziel: Doppelte Bilder zuverlässig verhindern
   ================================================================ */

/* 0) HARD RESET: ALLE bestehenden Pseudos auf der Startseite neutralisieren */
body#startseite .hero::before,
body#startseite .hero::after,
body#startseite .hero.hero-bg::before,
body#startseite .hero.hero-bg::after{
  content: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* 1) Section-Grundsetup (ohne Bild) – NUR für den Home-Hero */
body#startseite header.hero.hero-bg.hero-home{
  position: relative !important;
  overflow: hidden !important;
  min-height: clamp(380px, 56dvh, 640px) !important;

  /* nur Gradients – KEIN Bild hier */
  --blend-strong: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,.24) 70%, rgba(255,255,255,.40) 100%);
  --blend-mid:    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 40%, rgba(255,255,255,.32) 70%, rgba(255,255,255,.48) 100%);
  --blend-soft:   linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.24) 40%, rgba(255,255,255,.44) 70%, rgba(255,255,255,.64) 100%);

  background-image:
    var(--blend-strong),
    linear-gradient(180deg,#F3FCFC 0%, #FFFFFF 60%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right bottom, center top !important;
  background-size: 100% 100%, 100% 100% !important;
}

/* 2) NEU: Bild ausschließlich auf ::before (unter dem Veil) */
body#startseite header.hero.hero-bg.hero-home::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;           /* unter dem Veil */
  pointer-events: none !important;
  background-image: url('/static/img/hero/startseite_hero_ehealth-connect_25.png') !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;  /* Default ≥728px */
  background-size: auto 100% !important;        /* Höhe = 100% */
}

/* 3) NEU: Veil/Opacity ausschließlich auf ::after (über dem Bild) */
body#startseite header.hero.hero-bg.hero-home::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;           /* über dem Bild, unter Inhalt */
  pointer-events: none !important;
  background-color: rgba(255,255,255, 0.30) !important; /* Default ≥1041px */
}

/* 4) Inhalt über allem */
body#startseite header.hero.hero-bg.hero-home > .container{
  position: relative !important;
  z-index: 2 !important;
}

/* 5) Grid & Text (neutral) */
#startseite .hero-grid{
  min-height: inherit;
  display: grid;
  gap: 28px;
  align-items: stretch;
}
#startseite .hero-text{
  max-inline-size: 72ch;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}
#startseite .hero-visual{
  background: none !important;      /* sicherheitshalber */
  filter: none !important;
  pointer-events: none;
  min-height: 300px;
}

/* ===================== BREAKPOINTS ===================== */

/* ≥1041px — Blend stark, Veil 0.30, Bild right bottom */
@media (min-width: 1041px){
  #startseite .hero-grid{ grid-template-columns: 4fr 1fr; gap: 40px; }

  body#startseite header.hero.hero-bg.hero-home{
    background-image:
      var(--blend-strong),
      linear-gradient(180deg,#F3FCFC 0%, #FFFFFF 60%) !important;
    background-position: right bottom, center top !important;
  }
  body#startseite header.hero.hero-bg.hero-home::after{
    background-color: rgba(255,255,255, 0.30) !important; /* Bild ≈ 0.70 sichtbar */
  }
  body#startseite header.hero.hero-bg.hero-home::before{
    background-position: right bottom !important;
    background-size: auto 100% !important;
  }
}

/* 728–1040px — Blend mittel, Veil 0.50, Bild right bottom */
@media (min-width: 728px) and (max-width: 1040px){
  #startseite .hero-grid{ grid-template-columns: 2fr 1fr; gap: 28px; }

  body#startseite header.hero.hero-bg.hero-home{
    background-image:
      var(--blend-mid),
      linear-gradient(180deg,#F3FCFC 0%, #FFFFFF 60%) !important;
    background-position: right bottom, center top !important;
  }
  body#startseite header.hero.hero-bg.hero-home::after{
    background-color: rgba(255,255,255, 0.50) !important; /* Bild ≈ 0.50 sichtbar */
  }
  body#startseite header.hero.hero-bg.hero-home::before{
    background-position: right bottom !important;
    background-size: auto 100% !important;
  }
  #startseite .hero-visual{ min-height: 260px; }
}

/* <728px — Blend weich, Veil 0.70, Bild center bottom */
@media (max-width: 727.98px){
  #startseite .hero-grid{ grid-template-columns: 1fr; gap: 24px; }

  /* Section: nur weiche Blend + Grundverlauf */
  body#startseite header.hero.hero-bg.hero-home{
    background-image:
      var(--blend-soft),
      linear-gradient(180deg,#F3FCFC 0%, #FFFFFF 60%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center bottom, center top !important;
    background-size: 100% 100%, 100% 100% !important;
  }

  /* Bild zentriert */
  body#startseite header.hero.hero-bg.hero-home::before{
    background-position: center bottom !important;
    background-size: auto 100% !important;
    /* Falls das PNG rechts mehr „Luft“ hat, leicht nach links schieben:
       background-position: calc(50% - 6vw) bottom !important; */
  }

  /* Veil 0.70 */
  body#startseite header.hero.hero-bg.hero-home::after{
    background-color: rgba(255,255,255, 0.70) !important;
  }

  /* rechte Spalte raus */
  #startseite .hero-visual{ display:none !important; min-height:0 !important; }

  /* Doppelbild-Ende: selbst wenn irgendwo noch ein .hero/.hero-bg Pseudo kommt */
  body#startseite .hero::before,
  body#startseite .hero::after,
  body#startseite .hero.hero-bg::before,
  body#startseite .hero.hero-bg::after{
    content: none !important;
    background: none !important;
    background-image: none !important;
  }
  /* … und nur UNSER Hero bekommt seine beiden Ebenen wieder: */
  body#startseite header.hero.hero-bg.hero-home::before{
    content:"" !important;
    background-image: url('/static/img/hero/startseite_hero_ehealth-connect_25.png') !important;
  }
  body#startseite header.hero.hero-bg.hero-home::after{
    content:"" !important;
  }
}

/* ===================== TYPO & CHIPS ===================== */

#startseite .hero-points{ list-style:none; padding:0; margin:0 0 14px; }
#startseite .hero-points li{ margin:6px 0; color:#2c3a3a; }
#startseite .hero-points li .fw-bold,
#startseite .hero-points li strong{
  display:inline !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  line-height:inherit !important;
}

/* Chip als Fließtext (keine harte Wortzerlegung) */
#startseite .hero-text .chip, .chip{
  max-width: 100%;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: auto !important;
  text-wrap: balance;
  text-align: center;
}

/* 🔧 Killt das alte Overlay-Bild auf dem Textblock – überall */
body#startseite header.hero.hero-home .hero-text::after{
  content: none !important;          /* Pseudo-Element komplett entfernen */
  background: none !important;       /* falls ein späteres content:"" kommt */
  background-image: none !important; /* doppelt hält besser */
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Falls es zusätzlich per Media Queries wieder eingeschaltet wurde,
   neutralisieren wir das in denselben Breakpoints explizit: */
@media (max-width: 1040px){
  body#startseite header.hero.hero-home .hero-text::after{
    content: none !important;
    background: none !important;
    background-image: none !important;
  }
}
@media (max-width: 727.98px){
  body#startseite header.hero.hero-home .hero-text::after{
    content: none !important;
    background: none !important;
    background-image: none !important;
  }
}