/* v1.46.0: one site-wide header geometry and page-hero geometry.
   The homepage is the visual reference; its hero artwork is deliberately untouched. */
:root{--skh-shell-max:1680px;--skh-shell-inset:24px;--skh-shared-hero-desktop:100svh;--skh-shared-hero-min:760px}
/* Shared header: align every internal page with the exact homepage header geometry. */
body .skh-global-header{
 position:absolute!important;left:50%!important;right:auto!important;top:16px!important;
 transform:translateX(-50%)!important;width:min(calc(100% - 48px),var(--skh-shell-max))!important;
 max-width:none!important;min-height:auto!important;padding:0!important;margin:0!important;
 background:transparent!important;border:0!important;box-shadow:none!important;z-index:90!important;
 display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;
}
body .skh-global-header .skh-brand{flex:0 0 auto!important}
body .skh-global-header .skh-overlay-nav{margin-left:auto!important;display:flex;align-items:center;gap:10px!important}
body .skh-global-header .skh-overlay-nav a{white-space:nowrap}
/* Old page-specific navigation must not appear alongside the shared header. */
body.skh-app-page :is(.skh-med-nav,.skh-save-hero>.skh-overlay-header,.skh-lock-masterhero>.skh-overlay-header,.skh-aid-masterhero>.skh-overlay-header,.ssc-hero>.skh-overlay-header,.skh-app-hero>.skh-overlay-header,.skh-calc-hero>.skh-overlay-header,.skh-lpage__header){display:none!important}
body.skh-app-page .skh-global-mobile-menu{z-index:89!important}
/* The app pages have no separate header strip above their hero. */
body.skh-app-page :is(.skh-lpage__hero,.skh-letters__hero,.skh-med-hero,.skh-lock-masterhero,.skh-save-hero,.skh-aid-masterhero,.ssc-hero,.skh-app-hero,.skh-calc-hero){
 min-height:var(--skh-shared-hero-min)!important;height:var(--skh-shared-hero-desktop)!important;
 max-height:none!important;box-sizing:border-box!important;position:relative!important;
 padding-block:125px 76px!important;background-size:cover!important;background-repeat:no-repeat!important;
 background-position:center center!important;
}
/* Readable cinematic side-to-side mask is supplied by individual hero variants. */
body.skh-app-page :is(.skh-lpage__hero,.skh-letters__hero,.skh-med-hero,.skh-lock-masterhero,.skh-save-hero,.skh-aid-masterhero,.ssc-hero,.skh-app-hero,.skh-calc-hero) :is(h1,p){position:relative;z-index:2}
body.skh-app-page .skh-lpage__hero .skh-lpage__wrap{width:min(1260px,calc(100% - 64px));max-width:1260px;margin-inline:auto}
/* Put the second line inside branded coral block, same as home. */
body.skh-app-page .skh-unified-title-line{font-weight:850!important;border-radius:18px!important;line-height:1.02!important}
body.skh-app-page .skh-lpage__hero h1.skh-unified-hero-title{font-size:clamp(2.9rem,5.4vw,6.25rem)!important;letter-spacing:-.068em!important}
/* Keep the central CookieYes UI above the hero and navigation (never force visibility/consent). */
body :is(.cky-consent-container,.cky-modal,.cky-overlay,.cky-preference-center,.cky-btn-revisit-wrapper){z-index:2147483000!important}
@media(max-width:1024px){
 :root{--skh-shared-hero-desktop:92svh;--skh-shared-hero-min:710px}
 body .skh-global-header{width:min(calc(100% - 28px),var(--skh-shell-max))!important}
 body .skh-global-header .skh-overlay-nav{display:none!important}
 body .skh-global-header .skh-menu-toggle{display:flex!important;margin-left:auto!important}
}
@media(max-width:720px){
 :root{--skh-shared-hero-desktop:min(800px,94svh);--skh-shared-hero-min:610px}
 body .skh-global-header{top:10px!important;width:min(calc(100% - 20px),var(--skh-shell-max))!important;padding:0!important;min-height:auto!important}
 body.skh-app-page :is(.skh-lpage__hero,.skh-letters__hero,.skh-med-hero,.skh-lock-masterhero,.skh-save-hero,.skh-aid-masterhero,.ssc-hero,.skh-app-hero,.skh-calc-hero){height:auto!important;min-height:var(--skh-shared-hero-min)!important;padding:135px 0 62px!important}
 body.skh-app-page .skh-lpage__hero .skh-lpage__wrap{width:calc(100% - 32px)}
 body.skh-app-page .skh-lpage__hero h1.skh-unified-hero-title{font-size:clamp(2rem,9.4vw,4rem)!important;letter-spacing:-.055em!important}
 body.skh-app-page .skh-unified-title-line{max-width:100%;border-radius:12px!important;overflow-wrap:anywhere}
}
@media print{body .skh-global-header,body .skh-global-mobile-menu{display:none!important}}

/* v1.47.0 – the three selected hero images, including ratenzahlung on all devices. */
body.skh-app-page .skh-lpage--stromschulden-jobcenter .skh-lpage__hero{
 background-image:linear-gradient(90deg,rgba(10,12,18,.93) 0%,rgba(10,12,18,.82) 35%,rgba(10,12,18,.35) 75%,rgba(10,12,18,.14) 100%),url('https://stromhilfen.de/wp-content/uploads/2026/10/Briefe-an-Jobcenter.png')!important;
 background-position:center,65% center!important;
}
body.skh-app-page .skh-lpage--ratenzahlung-stromrechnung .skh-lpage__hero{
 background-image:linear-gradient(90deg,rgba(10,12,18,.94) 0%,rgba(10,12,18,.82) 38%,rgba(10,12,18,.33) 76%,rgba(10,12,18,.1) 100%),url('https://stromhilfen.de/wp-content/uploads/2026/10/Ratenzahlung-auf-Stromruckstand.png')!important;
 background-position:center,65% center!important;
}
body.skh-app-page .skh-letters__hero{
 background-image:linear-gradient(90deg,rgba(10,12,18,.94) 0%,rgba(10,12,18,.84) 35%,rgba(10,12,18,.35) 74%,rgba(10,12,18,.12) 100%),url('https://stromhilfen.de/wp-content/uploads/2026/10/Musterbriefe-Stromhilfen.de_.png')!important;
 background-position:center,63% center!important;
}
@media(max-width:720px){
 body.skh-app-page .skh-lpage--stromschulden-jobcenter .skh-lpage__hero,
 body.skh-app-page .skh-lpage--ratenzahlung-stromrechnung .skh-lpage__hero,
 body.skh-app-page .skh-letters__hero{background-position:center,65% center!important;}
}

/* v1.49 – EXACT shared visual navigation and footer, home and app pages.
   Loaded after legacy template styles, and scoped to the single reusable shell. */
body .skh-global-header,
body .skh-home--v060 .skh-global-header,
body .skh-letters .skh-global-header{
  position:absolute!important;top:10px!important;left:50%!important;right:auto!important;
  transform:translateX(-50%)!important;
  width:min(calc(100% - 36px),1680px)!important;
  max-width:1680px!important;min-height:0!important;
  padding:0!important;margin:0!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:20px!important;background:transparent!important;z-index:100!important;
}
body .skh-global-header .skh-brand{
  display:flex!important;align-items:center!important;gap:10px!important;
  flex-shrink:0!important;color:#fff!important;
}
body .skh-global-header .skh-overlay-nav,
body .skh-home--v060 .skh-global-header .skh-overlay-nav{
  display:flex!important;align-items:center!important;gap:10px!important;
  margin-left:auto!important;
}
body .skh-global-header .skh-overlay-nav>a,
body .skh-home--v060 .skh-global-header .skh-overlay-nav>a{
  box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;
  min-height:44px!important;padding:0 16px!important;
  border:1px solid rgba(255,255,255,.78)!important;
  background:rgba(5,10,13,.16)!important;color:#fff!important;
  box-shadow:none!important;backdrop-filter:blur(8px);
  font-size:.73rem!important;font-weight:820!important;letter-spacing:.05em!important;
  text-transform:uppercase!important;white-space:nowrap!important;text-decoration:none!important;
}
body .skh-global-header .skh-overlay-nav>a:hover{background:rgba(255,255,255,.12)!important;color:#fff!important}
body .skh-global-header .skh-overlay-nav>a.skh-overlay-nav__cta,
body .skh-home--v060 .skh-global-header .skh-overlay-nav>a.skh-overlay-nav__cta{
  padding-right:0!important;background:#fff!important;color:#091018!important;border-color:#fff!important;
}
body .skh-global-header .skh-overlay-nav__cta span,
body .skh-home--v060 .skh-global-header .skh-overlay-nav__cta span{
  display:grid!important;place-items:center!important;width:44px!important;height:44px!important;
  margin-left:14px!important;background:#f3dc48!important;color:#101318!important;font-weight:900!important;
}
/* Same complete footer on all custom layouts, not just the home container. */
body .skh-global-footer,
body .skh-home--v060 .skh-global-footer,
body .skh-letters .skh-global-footer{
  box-sizing:border-box!important;width:100%!important;min-height:0!important;
  display:block!important;background:#08090b!important;color:#fff!important;
  padding:58px 0 28px!important;margin:0!important;
  border:0!important;
}
body .skh-global-footer .skh-wrap{width:min(1260px,calc(100% - 48px))!important;margin:0 auto!important}
body .skh-global-footer .skh-footer__top{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  flex-wrap:wrap!important;gap:24px!important;padding:0 0 48px!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.12)!important;
}
body .skh-global-footer .skh-footer__brand{
  font-size:clamp(2.5rem,5vw,5rem)!important;font-weight:760!important;
  line-height:1!important;letter-spacing:-.055em!important;color:#fff!important;
}
body .skh-global-footer .skh-footer__top>a{
  display:inline-flex!important;align-items:center!important;min-height:44px!important;
  border:1px solid rgba(255,255,255,.24)!important;border-radius:999px!important;
  padding:12px 18px!important;background:transparent!important;
  font-size:.8rem!important;font-weight:820!important;letter-spacing:.02em!important;
  text-transform:uppercase!important;color:#fff!important;text-decoration:none!important;
}
body .skh-global-footer .skh-footer__bottom{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:18px!important;flex-wrap:wrap!important;padding:22px 0 0!important;
  margin:0!important;border:0!important;color:rgba(255,255,255,.72)!important;font-size:.78rem!important;
}
body .skh-global-footer .skh-footer__bottom div{display:flex!important;align-items:center!important;gap:18px!important;flex-wrap:wrap!important}
body .skh-global-footer a,body .skh-global-footer span{color:inherit!important}
@media(max-width:1024px){
 body .skh-global-header .skh-overlay-nav,
 body .skh-home--v060 .skh-global-header .skh-overlay-nav,
 body .skh-letters .skh-global-header .skh-overlay-nav{display:none!important}
 body .skh-global-header .skh-menu-toggle{display:flex!important;margin-left:auto!important}
}
@media(max-width:720px){
 body .skh-global-header,body .skh-home--v060 .skh-global-header,body .skh-letters .skh-global-header{
   top:10px!important;width:calc(100% - 20px)!important;
 }
 body .skh-global-footer .skh-wrap{width:calc(100% - 28px)!important}
 body .skh-global-footer .skh-footer__top{flex-direction:column!important;align-items:flex-start!important}
 body .skh-global-footer .skh-footer__bottom{flex-direction:column!important;align-items:flex-start!important}
}


/* v1.50.0 – Only internal pages: more breathing room above the global navigation.
   Homepage remains visually unchanged. */
body.skh-app-page .skh-global-header,
body.skh-app-page .skh-letters .skh-global-header {
  top:26px!important;
}
@media (max-width:720px){
  body.skh-app-page .skh-global-header,
  body.skh-app-page .skh-letters .skh-global-header {
    top:18px!important;
  }
}


/* v1.51.0 – Respect WordPress admin bar on internal-page overlay navigation.
   WordPress toolbar is 32px desktop and 46px under 783px.
   No offset on public (logged-out) visitors and never change the homepage. */
body.skh-app-page.admin-bar .skh-global-header,
body.skh-app-page.admin-bar .skh-letters .skh-global-header{
  top:calc(32px + 26px)!important;
}
@media (max-width:782px){
  body.skh-app-page.admin-bar .skh-global-header,
  body.skh-app-page.admin-bar .skh-letters .skh-global-header{
    top:calc(46px + 18px)!important;
  }
}