/* JE Politur, 19.09.2026 */

/* Hero-Text: volle Deckkraft, leichte Schattenkante gegen helle Bildstellen */
:where(.je-page, .je-home) .je-hero-content h1{
  text-shadow: 0 1px 24px rgba(28,28,26,.45);
}
:where(.je-page, .je-home) .je-hero-content p{
  color: #fdfdfc;
  text-shadow: 0 1px 18px rgba(28,28,26,.5);
}

/* Navigation: deckend, sobald die Seite gescrollt ist. Vorher Glas ueber dem Hero. */
.je-page .je-nav.is-scrolled,
.je-home .je-nav.is-scrolled{
  background: rgba(242,241,238,.97);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--je-border);
  box-shadow: 0 10px 30px rgba(28,28,26,.08);
}
.je-page .je-nav.is-scrolled .je-nav-links a,
.je-home .je-nav.is-scrolled .je-nav-links a{ color: var(--je-text); }

/* Mobiler Handlungsaufruf: eine beschriftete Leiste statt drei unbeschrifteter Kreise */
.je-cta-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(242,241,238,.96);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid var(--je-border);
}
.je-cta-bar a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  text-decoration: none;
  font-family: var(--je-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.je-cta-bar .je-cta-bar-primary{
  flex: 1 1 auto;
  background: var(--je-sage);
  color: var(--je-on-sage);
  border: 1px solid var(--je-sage);
}
.je-cta-bar .je-cta-bar-primary:active{ background: var(--je-sage-dark); }
.je-cta-bar .je-cta-bar-icon{
  flex: 0 0 auto;
  width: 48px;
  min-height: 48px;
  color: var(--je-text);
  border: 1px solid var(--je-border);
  background: var(--je-bg-alt);
}
.je-cta-bar .je-cta-bar-icon svg{ width: 20px; height: 20px; }

@media (max-width: 899px){
  .je-cta-bar{ display: flex; }
  /* Die schwebenden Kreise verdecken auf dem Handy den Hero-Button, daher aus. */
  .je-page .je-float-cta,
  .je-home .je-float-cta{ display: none !important; }
  /* Platz fuer die Leiste, damit der Footer nicht darunter verschwindet */
  .je-page .je-foot,
  .je-home .je-foot{ padding-bottom: 92px; }
}

/* Desktop: Spalte aus der senkrechten Mitte nach unten, damit sie nie im Text liegt */
@media (min-width: 900px){
  .je-page .je-float-cta,
  .je-home .je-float-cta{
    top: auto;
    bottom: 28px;
    transform: none;
  }
}

/* je-cta-bar-space: Platz fuer die mobile Handlungsleiste, damit sie keine Hero-Buttons verdeckt */
@media (max-width: 899px){
  .je-page .je-hero-content,
  .je-home .je-hero-content{ padding-bottom: 108px; }
  .je-page .je-contact-inner,
  .je-home .je-contact-inner{ padding-bottom: 24px; }
}

/* Index-Seiten (Blog, Hoerproben): bewusst flacherer Hero als die Inhaltsseiten */
.je-page .je-hero--index,.je-home .je-hero--index{min-height:64vh;min-height:64dvh;}
.je-page .je-hero--index .je-hero-content p,.je-home .je-hero--index .je-hero-content p{max-width:52ch;margin-top:16px;}