.dhi-wa-float{position:fixed;right:18px;bottom:18px;z-index:95;width:58px;height:58px;border-radius:999px;background:#25D366;box-shadow:0 14px 30px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center}.dhi-wa-float svg{width:28px;height:28px;fill:#fff}.dhi-mobile-contact{position:fixed;left:0;right:0;bottom:0;z-index:96;display:none;grid-template-columns:repeat(4,1fr);background:#8f1024;border-top:1px solid rgba(255,255,255,.18);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -12px 30px rgba(31,41,55,.18)}.dhi-mobile-contact a{display:flex;align-items:center;justify-content:center;min-height:76px;color:#fff!important;text-decoration:none!important;font-size:17px;font-weight:900}.dhi-mobile-contact a+a{border-left:1px solid rgba(255,255,255,.28)}body.has-dhi-mobile-contact{padding-bottom:88px}@media(max-width:860px){.dhi-mobile-contact{display:grid}.dhi-wa-float{display:none}}

/* PATCH 2026-06-28c: Header-Sticky, Bildausschnitte, Galerie */
html, body{overflow-x:hidden!important;}
.site-header{position:sticky!important;top:0!important;z-index:99999!important;}
.top-bar{z-index:99998!important;}
.praxis-topic-card.topic-selbstwert-innere-ruhe .topic-image img,
.theme-anchor-card.topic-selbstwert-innere-ruhe img{object-position:50% 8%!important;}
.praxis-topic-card.topic-kinderhypnose .topic-image img,
.theme-anchor-card.topic-kinderhypnose img{object-position:50% 10%!important;}
.praxis-gallery-grid--compact{grid-template-columns:minmax(0,1fr)!important;max-width:760px;margin-left:auto;margin-right:auto;}
.praxis-gallery-card--single img{object-position:center center!important;}
@media (max-width: 780px){.site-header{top:0!important;}.header-inner{padding:.55rem 0!important;}.logo-img{height:42px!important;}}

/* PATCH 2026-06-28d: Praxis Sticky-Menü nach Root-Technik
   Ziel: Topbar bleibt oben, Header klebt darunter mit dynamischem Offset.
   Keine Inhalts-/Bildänderungen. */
:root{
  --praxis-topbar-fallback: 44px;
  --praxis-mobile-header-h: 58px;
}
html{
  scroll-padding-top: calc(var(--topbar-h, var(--praxis-topbar-fallback)) + 76px) !important;
}
html body .top-bar{
  position: sticky !important;
  position: -webkit-sticky !important;
  top: 0 !important;
  z-index: 100200 !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}
html body .site-header{
  position: sticky !important;
  position: -webkit-sticky !important;
  top: var(--topbar-h, var(--praxis-topbar-fallback)) !important;
  z-index: 100100 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}
html body .site-header .header-inner{
  min-height: 62px !important;
  padding-top: .42rem !important;
  padding-bottom: .42rem !important;
  gap: .65rem !important;
}
html body .site-header .logo-img{
  height: 44px !important;
  width: auto !important;
  max-width: min(250px, 62vw) !important;
}
html body .site-header .main-nav{
  background:#ffffff !important;
}
html body .site-header .main-nav ul{
  align-items:center !important;
  gap:.22rem .36rem !important;
}
html body .site-header .main-nav a{
  font-size:.82rem !important;
  line-height:1.18 !important;
  padding:.24rem .44rem !important;
}
@media (min-width: 861px){
  html body .site-header .header-inner{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  html body .site-header .main-nav{
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
  }
  html body .site-header .main-nav ul{
    display:flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content:flex-end !important;
  }
  html body .site-header .nav-toggle{
    display:none !important;
  }
}
@media (max-width: 860px){
  html{
    scroll-padding-top: calc(var(--topbar-h, 48px) + var(--praxis-mobile-header-h) + 12px) !important;
  }
  html body .site-header .header-inner{
    min-height: var(--praxis-mobile-header-h) !important;
    padding-top: .38rem !important;
    padding-bottom: .38rem !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  html body .site-header .logo-img{
    height: 40px !important;
    max-width: min(235px, 68vw) !important;
  }
  html body .site-header .nav-toggle{
    display: inline-flex !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
  html body .site-header .main-nav{
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: .35rem !important;
  }
  html body .site-header .main-nav:not(.is-open) ul{
    display: none !important;
  }
  html body .site-header .main-nav.is-open ul{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: .28rem .38rem !important;
    align-items: stretch !important;
    padding: .5rem 0 .45rem !important;
    margin:0 !important;
    max-height: min(46vh, 360px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html body .site-header .main-nav.is-open a{
    display:block !important;
    padding:.52rem .64rem !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    color:#1f2933 !important;
  }
  html body .site-header .main-nav.is-open a.is-active{
    background: #fff7ed !important;
    border-color: rgba(242,153,74,.36) !important;
    color:#7c2d12 !important;
    font-weight:800 !important;
  }
}
@media (max-width: 520px){
  html body .site-header .main-nav.is-open ul{
    grid-template-columns: minmax(0,1fr) !important;
    max-height: min(54vh, 380px) !important;
  }
  html body .site-header .main-nav.is-open a{
    padding:.54rem .7rem !important;
  }
}



/* PATCH 2026-06-28e: Praxis Hard-Sticky + Startseiten-Foto-Bereinigung
   Grund: position:sticky griff auf der Praxis nicht zuverlässig. Daher hier bewusst fixed.
   Keine Inhaltsänderung. Keine neuen Medien. */
:root{
  --praxis-fixed-topbar-h: var(--topbar-h, 54px);
  --praxis-fixed-header-h: 68px;
}
html{
  scroll-padding-top: calc(var(--praxis-fixed-topbar-h, 54px) + var(--praxis-fixed-header-h, 68px) + 16px) !important;
}
html body.praxis-redesign,
html body.praxis-page{
  padding-top: calc(var(--praxis-fixed-topbar-h, 54px) + var(--praxis-fixed-header-h, 68px)) !important;
}
html body .top-bar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 2147483000 !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}
html body .site-header{
  position: fixed !important;
  top: var(--praxis-fixed-topbar-h, 54px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 2147482990 !important;
  background: #fff !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.10) !important;
}
html body .site-header .header-inner{
  position: relative !important;
  min-height: var(--praxis-fixed-header-h, 68px) !important;
  padding-top: .42rem !important;
  padding-bottom: .42rem !important;
}
@media (min-width:861px){
  html body .site-header .main-nav ul{
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: .22rem .34rem !important;
  }
  html body .site-header .main-nav a{
    font-size: .80rem !important;
    line-height: 1.16 !important;
    padding: .22rem .40rem !important;
  }
}
@media (max-width:860px){
  :root{--praxis-fixed-header-h: 60px;}
  html body.praxis-redesign,
  html body.praxis-page{
    padding-top: calc(var(--praxis-fixed-topbar-h, 54px) + var(--praxis-fixed-header-h, 60px)) !important;
  }
  html body .site-header .header-inner{
    min-height: var(--praxis-fixed-header-h, 60px) !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  html body .site-header .logo-img{
    height: 40px !important;
    max-width: min(230px, 68vw) !important;
  }
  html body .site-header .nav-toggle{
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  html body .site-header .main-nav{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 1px) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    background: transparent !important;
    z-index: 2147482980 !important;
  }
  html body .site-header .main-nav:not(.is-open) ul{
    display: none !important;
  }
  html body .site-header .main-nav.is-open ul{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: .36rem .44rem !important;
    max-height: min(52vh, 420px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding: .72rem !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(15,23,42,.10) !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 20px 42px rgba(15,23,42,.18) !important;
    backdrop-filter: blur(10px) !important;
  }
  html body .site-header .main-nav.is-open li,
  html body .site-header .main-nav.is-open a{
    min-width: 0 !important;
  }
  html body .site-header .main-nav.is-open a{
    display: block !important;
    width: 100% !important;
    padding: .58rem .68rem !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    color: #1f2933 !important;
    font-size: .95rem !important;
    line-height: 1.18 !important;
    text-decoration: none !important;
  }
  html body .site-header .main-nav.is-open a.is-active{
    background: #fff7ed !important;
    border-color: rgba(185,138,54,.45) !important;
    color: #76101f !important;
    font-weight: 850 !important;
  }
}
@media (max-width:540px){
  html body .site-header .main-nav.is-open ul{
    grid-template-columns: minmax(0,1fr) !important;
    max-height: min(58vh, 420px) !important;
  }
  html body .site-header .main-nav.is-open a{
    padding: .58rem .72rem !important;
  }
}

/* Startseite: die drei unpassenden Themenfotos werden nicht mehr angezeigt.
   Stattdessen ruhige Praxis-/Markenflächen, keine neuen Bilddateien nötig. */
html body .praxis-topic-card.topic-schlaf .topic-image,
html body .praxis-topic-card.topic-selbstwert-innere-ruhe .topic-image,
html body .praxis-topic-card.topic-kinderhypnose .topic-image{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.45), transparent 30%),
    linear-gradient(135deg, rgba(143,16,36,.92), rgba(111,143,115,.92)) !important;
}
html body .praxis-topic-card.topic-schlaf .topic-image img,
html body .praxis-topic-card.topic-selbstwert-innere-ruhe .topic-image img,
html body .praxis-topic-card.topic-kinderhypnose .topic-image img{
  display: none !important;
}
html body .praxis-topic-card.topic-schlaf .topic-image::before,
html body .praxis-topic-card.topic-selbstwert-innere-ruhe .topic-image::before,
html body .praxis-topic-card.topic-kinderhypnose .topic-image::before{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 74px !important;
  height: 74px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  color: #fff !important;
  font-size: 2.35rem !important;
  line-height: 1 !important;
  box-shadow: 0 14px 30px rgba(31,41,55,.18) !important;
}
html body .praxis-topic-card.topic-schlaf .topic-image::before{content:"☾" !important;}
html body .praxis-topic-card.topic-selbstwert-innere-ruhe .topic-image::before{content:"◌" !important;}
html body .praxis-topic-card.topic-kinderhypnose .topic-image::before{content:"♙" !important;}
html body .praxis-topic-card.topic-schlaf .topic-image::after,
html body .praxis-topic-card.topic-selbstwert-innere-ruhe .topic-image::after,
html body .praxis-topic-card.topic-kinderhypnose .topic-image::after{
  content:"" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.12), transparent) !important;
  pointer-events: none !important;
}


/* PATCH 2026-06-28f: Praxis Header Fallback fixed */
html body.praxis-redesign .top-bar{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:2147483000!important;}
html body.praxis-redesign .site-header{position:fixed!important;top:var(--praxis-fixed-topbar-h,54px)!important;left:0!important;right:0!important;width:100%!important;z-index:2147482999!important;background:#fff!important;}
html body.praxis-redesign{padding-top:calc(var(--praxis-fixed-topbar-h,54px) + var(--praxis-fixed-header-h,68px))!important;}
