/* Seitenkopf: gruenes Band mit Logo und Menue, Papier-Risskanten der ganzen Website.
   Wird als letzte Datei im <head> geladen und ersetzt die aelteren Kanten aus styles.css,
   seiten.css, tear-footer.css und ernaehrungsberatung.html. */
:root{
  --ph-green:#2C7A43;
  --ph-on-green:#FFFFFF;
  --ph-paper-top:#E9E8E2;
  --ph-paper:#FBFAF6;
  --ph-edge:44px;
  --ph-bar:112px;
  --ph-logo:clamp(172px,17.25vw,248px);
  --ph-h:calc(24px + var(--ph-logo)*.4032 + 60px);
  --ph-y0:calc(24px + var(--ph-logo)*.2016 - 27px);
  --ph-y1:7px;
}
html{scroll-padding-top:calc(var(--ph-bar) + 16px)}
html body{padding-top:0!important}

/* Band */
.ph-band{position:sticky;top:calc(var(--ph-bar) - var(--ph-h));z-index:59;box-sizing:border-box;height:var(--ph-h);margin-bottom:calc(-1*var(--ph-edge));padding:24px clamp(20px,5vw,80px) 60px}
.ph-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--tpf-grain,none) 0 0/160px 160px,var(--ph-green);
  -webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 43px) no-repeat,url(assets/brand/riss-gruen-oben.svg) 0 100%/2400px 44px repeat-x;
  mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 43px) no-repeat,url(assets/brand/riss-gruen-oben.svg) 0 100%/2400px 44px repeat-x}
.ph-rim{position:absolute;left:0;right:0;bottom:0;height:var(--ph-edge);z-index:-2;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(20,32,24,.28)) drop-shadow(0 4px 6px rgba(20,32,24,.26))}
.ph-rim::before{content:"";position:absolute;inset:0;background:var(--tpf-grain,none) 0 0/160px 160px,linear-gradient(to bottom,var(--ph-paper-top),var(--ph-paper) 70%);
  -webkit-mask:url(assets/brand/riss-papier.svg) 0 0/2400px 44px repeat-x;mask:url(assets/brand/riss-papier.svg) 0 0/2400px 44px repeat-x}
.ph-band__in{max-width:1280px;margin:0 auto}
.ph-logo{display:block;width:var(--ph-logo);opacity:calc(1 - clamp(0,(var(--ph-p,0) - .2)/.4,1))}
.ph-logo img{display:block;width:100%;height:auto}
.ph-band.is-bar .ph-logo{visibility:hidden}

/* Menue am PC: direkt auf dem Gruen, Punkte durch feine Linien getrennt */
@media (min-width:1024px){
  html body .pp-nav,html body .pp-nav.scrolled{position:fixed;inset:0 0 auto 0;height:0;padding:0 clamp(20px,5vw,80px);align-items:flex-start}
  html body .pp-nav .pp-nav-inner,html body .pp-nav.scrolled .pp-nav-inner{width:100%;max-width:1280px;height:54px;display:grid;grid-template-columns:calc(var(--ph-logo) + clamp(10px,1.4vw,20px)) 1fr auto;column-gap:clamp(4px,.7vw,10px);padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ph-on-green);
    transform:translate3d(0,calc(var(--ph-y0) + (var(--ph-y1) - var(--ph-y0))*var(--ph-p,0)),0);transition:none;will-change:transform}
  html body.ebh-light .pp-nav:not(.scrolled) .pp-nav-inner{border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ph-on-green)}
  html body .pp-nav .pp-brand{color:var(--ph-on-green);font-size:15px;opacity:clamp(0,(var(--ph-p,0) - .5)/.2,1)}
  html body .pp-nav:not(.is-bar) .pp-brand{visibility:hidden}
  html body .pp-nav .pp-links{justify-content:flex-end;gap:0}
  html body .pp-nav .pp-nav-right{gap:clamp(8px,.8vw,14px)}
  html body .pp-links>li+li,html body .pp-nav .pp-nav-blog{border-left:1px solid rgba(255,255,255,.45);border-radius:0}
  html body .pp-links>li>a,html body .pp-dropdown-trigger,html body .pp-nav .pp-nav-blog{display:inline-flex;font-size:clamp(13.5px,1.18vw,16.25px);font-weight:600;color:var(--ph-on-green);opacity:1;padding:3px clamp(10px,1.2vw,19px);border-radius:0}
  html body .pp-links>li>a:hover,html body .pp-dropdown-trigger:hover,html body .pp-nav .pp-nav-blog:hover,html body .pp-nav.scrolled .pp-links>li>a:hover,html body .pp-nav.scrolled .pp-dropdown-trigger:hover,html body .pp-nav.scrolled .pp-nav-blog:hover{background:rgba(255,255,255,.14);color:var(--ph-on-green)}
  html body .pp-links>li>a[aria-current="page"],html body .pp-nav .pp-nav-blog[aria-current="page"]{color:var(--ph-on-green);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  html body .pp-nav .pp-cta{background:var(--cream)!important;background-image:none!important;color:var(--green-700)!important;box-shadow:none!important;font-size:clamp(13.5px,1.12vw,16px);padding:clamp(11px,.95vw,14px) clamp(14px,1.4vw,20px)}
  html body .pp-nav .pp-cta:hover{background:#fff!important}
  html body .pp-links a:focus-visible,html body .pp-dropdown-trigger:focus-visible,html body .pp-nav .pp-nav-blog:focus-visible,html body .pp-nav .pp-cta:focus-visible,html body .pp-brand:focus-visible{outline:2px solid var(--ph-on-green);outline-offset:2px}
}
@media (min-width:1024px) and (max-width:1180px){
  html body .pp-links>li>a,html body .pp-dropdown-trigger,html body .pp-nav .pp-nav-blog{padding-left:8px;padding-right:8px;font-size:12.5px}
  html body .pp-nav .pp-cta{padding:10px 11px;font-size:13px}
  html body .pp-nav .pp-nav-blog{display:inline-flex}
}

/* Handy und Tablet: Band laeuft weg, Burger-Menue bleibt oben rechts */
@media (max-width:1023px){
  :root{--ph-logo:min(276px,71vw)}
  .ph-band{position:relative;top:auto;height:auto;padding:14px 20px 50px;z-index:3}
  .ph-logo{opacity:1}
  .ph-band.is-bar .ph-logo{visibility:visible}
  html body .pp-links,html body .pp-nav .pp-cta,html body .pp-nav .pp-nav-blog,html body .pp-brand{display:none}
  html body .pp-nav,html body .pp-nav.scrolled{position:fixed;inset:calc(env(safe-area-inset-top) + 12px) 14px auto auto;width:auto;height:auto;padding:0}
  html body .pp-nav .pp-nav-inner,html body .pp-nav.scrolled .pp-nav-inner{display:block;width:auto;height:auto;padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html body .pp-nav .pp-nav-right{display:block}
  html body.ebh-light .pp-nav:not(.scrolled) .pp-nav-inner{border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html body .pp-nav .pp-toggle{display:flex;width:50px;height:50px;border-radius:50%;background:var(--cream);color:var(--ink);box-shadow:0 8px 24px -8px rgba(28,42,32,.5)}
  /* Aufgeklappt sieht das Menue aus wie bisher: helle Leiste mit Wortmarke */
  html body:has(.pp-mobile-menu.open) .pp-nav{inset:0 0 auto 0;padding:12px clamp(16px,3vw,34px);display:flex;justify-content:center}
  html body:has(.pp-mobile-menu.open) .pp-nav .pp-nav-inner,html body.ebh-light:has(.pp-mobile-menu.open) .pp-nav:not(.scrolled) .pp-nav-inner{display:grid;grid-template-columns:1fr auto;align-items:center;width:100%;max-width:980px;height:56px;padding:0 10px 0 24px;border:1px solid rgba(28,42,32,.07);border-radius:999px;color:var(--ink);background:rgba(242,247,244,.92);box-shadow:0 14px 40px -18px rgba(28,42,32,.38)}
  html body:has(.pp-mobile-menu.open) .pp-nav .pp-brand{display:flex;color:var(--ink)}
  html body:has(.pp-mobile-menu.open) .pp-nav .pp-toggle{width:44px;height:44px;background:none;box-shadow:none}
}

/* Startseite: Foto liegt unter der Kante, Handy zeigt den Kopf bis zum zweiten Hemdknopf */
@media (min-width:761px){
  html body .pp-hero{min-height:min(88svh,720px)}
  html body .pp-hero-veil{background:
    linear-gradient(90deg,var(--cream) 0%,var(--cream) 36%,rgba(242,247,244,.86) 44%,rgba(242,247,244,.35) 56%,rgba(242,247,244,0) 68%),
    linear-gradient(to top,var(--cream) 0%,rgba(242,247,244,0) 22%)}
}
@media (max-width:760px){
  html body .pp-hero-media{height:calc(98vw + var(--ph-edge));min-height:0;-webkit-mask-image:none;mask-image:none}
  html body .pp-hero-media img{object-position:50% 0;transform-origin:50% 0}
  html body .pp-hero-veil{height:calc(98vw + var(--ph-edge) + 2px);min-height:0;background:linear-gradient(to top,var(--cream) 0%,rgba(242,247,244,0) 7%)}
  html body .pp-hero-inner{margin-top:0;padding-top:8px}
}

/* Footer: zweifarbig wie das Band, Papierkante ragt ueber das Gruen hinaus */
html body .tpf-tear{filter:drop-shadow(0 -1px 1px rgba(20,32,24,.22)) drop-shadow(0 -4px 6px rgba(20,32,24,.16))}
html body .tpf-tear::before{top:-43px;height:var(--ph-edge);z-index:3;
  -webkit-mask:url(assets/brand/riss-fuss-gruen.svg) 0 0/2400px 44px repeat-x!important;mask:url(assets/brand/riss-fuss-gruen.svg) 0 0/2400px 44px repeat-x!important}
html body .tpf-tear::after{content:"";position:absolute;left:0;right:0;top:-43px;height:var(--ph-edge);z-index:2;pointer-events:none;background:var(--tpf-grain,none) 0 0/160px 160px,linear-gradient(to top,var(--ph-paper-top),var(--ph-paper) 70%);
  -webkit-mask:url(assets/brand/riss-fuss-papier.svg) 0 0/2400px 44px repeat-x;mask:url(assets/brand/riss-fuss-papier.svg) 0 0/2400px 44px repeat-x}

/* Uebergaenge zwischen den Abschnitten: einfarbig, nur die feine Form */
html body .tear::before,html body .ds-tear::before,html body .warum::before,html body .testi.at::before,html body .leistungen.lv::before,html body .pp-partner::before{top:-43px;height:var(--ph-edge);
  -webkit-mask:url(assets/brand/riss-kante.svg) 0 0/2400px 44px repeat-x!important;mask:url(assets/brand/riss-kante.svg) 0 0/2400px 44px repeat-x!important}
html body .pp-faq.tear{clip-path:inset(-46px 0 0 0)}

/* Mitlaufende Elemente bleiben unter der schmalen Leiste frei */
@media (min-width:1024px){
  html body .va-toc,html body .z3-fig,html body .lv__media{top:calc(var(--ph-bar) + 16px)}
  html body .ds-story h2{top:calc(var(--ph-bar) + 24px)}
}

/* Logo ueberall klickbar: die Menueleiste liegt ueber dem Logo und laesst Klicks dort durch */
html body .pp-nav .pp-nav-inner{pointer-events:none}
html body .pp-nav .pp-nav-inner>*{pointer-events:auto}
html body .pp-nav:not(.is-bar) .pp-brand{pointer-events:none}
.ph-logo{position:relative;z-index:61}
.ph-logo:focus-visible{outline:2px solid var(--ph-on-green);outline-offset:4px}

/* WebP-Bilder: das picture-Element nimmt keinen eigenen Platz ein, das Bild verhaelt sich wie bisher */
picture{display:contents}
picture>source{display:none}

/* Fluessiges Scrollen: Band, Logo und Menue auf eigenen Ebenen */
.ph-band{will-change:transform}
.ph-logo{will-change:opacity}
html body .pp-hero-media img{will-change:transform}

/* Schmale Leiste und offenes Handy-Menue zeigen ebenfalls das neue Logo statt der Schriftmarke */
html body .pp-nav .pp-brand{font-size:0!important;letter-spacing:0!important;width:136px;height:52px;background:currentColor;
  -webkit-mask:url(assets/brand/logo-quer-kreide.svg?v=2) 0 50%/contain no-repeat;mask:url(assets/brand/logo-quer-kreide.svg?v=2) 0 50%/contain no-repeat}
html body .pp-nav .pp-brand::after{content:none!important}

@media print{.ph-band{display:none}}