/* 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: Glas bleibt auch beim Scrollen, etwas kraeftiger fuer Lesbarkeit ueber Bildern. */
.je-page .je-nav.is-scrolled,
.je-home .je-nav.is-scrolled{
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.38));
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 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;}

/* je-menu-fix: Mobilmenue bleibt beim Scrollen sichtbar.
   Ursache: Inline-Skript setzt body{overflow:hidden}; da html overflow-x:clip hat, wird body zum Scroll-Container und die Sticky-Nav haengt am Seitenanfang. Zusaetzlich bilden transform/backdrop-filter/will-change der Nav einen Containing Block fuer das fixed-Panel. */
@media (max-width: 899px){
  body{ overflow-x: clip !important; overflow-y: visible !important; }
  html:has(details.je-mobile-nav[open]){ overflow: hidden; }
  .je-page .je-nav:has(details.je-mobile-nav[open]),
  .je-home .je-nav:has(details.je-mobile-nav[open]){
    transform: none; -webkit-transform: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    will-change: auto;
  }
}

/* je-hero-spacing: Startseite mobil, Hero-Hoererprobe soll beim ersten Blick komplett ueber der Anfragen-Leiste liegen. */
@media (max-width: 899px){
  .je-home .je-hero .je-hero-content{ padding-top: 56px; padding-bottom: 124px; }
}


/* je-h1-desktop: Hero-Titel in vier Zeilen, Ort als feine Kursivzeile, damit der Text nicht ins Gesicht ragt */
.je-home .je-hero-content h1 .je-br-d{display:none;}
@media (min-width: 900px){
  .je-home .je-hero-content h1 .je-br-d{display:inline;}
  .je-home .je-hero-content h1{font-size:clamp(32px,3.4vw,50px);max-width:none;}
  .je-home .je-hero-content h1 .je-h1-place{display:block;font-family:var(--je-font-accent);font-style:italic;font-size:.6em;letter-spacing:.02em;margin-top:.25em;}
}


/* je-review-author: Verfassername unter Google-Zitaten */
.je-home .je-review-card{display:flex;flex-direction:column;justify-content:space-between;gap:20px;}
.je-home .je-review-author{display:block;font-family:var(--je-font-body);font-style:normal;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--je-text-muted);}
.je-home .je-review-author::before{content:'';display:block;width:24px;height:1px;background:var(--je-border);margin-bottom:12px;}


/* je-intro-spacing: mehr Luft unter der Ueberschrift im Hoerproben-Teaser */
.je-home .je-intro-inner h2 + p{margin-top:32px;}

.je-faq-item p a{color:var(--je-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:500;}
.je-faq-item p a:hover{text-decoration-thickness:2px;}

/* Events-Hero: zwei Zeilen, je Satz eine */
.page-id-123 .je-hero-content h1{max-width:none;}
@media (max-width:520px){.page-id-123 .je-hero-content h1{font-size:clamp(22px,6.4vw,30px);}}

/* Kontaktseite: kleinerer Abstand zwischen Kopf und Buttons */
body.page-id-885 .je-page .je-blog-hero{padding-bottom:32px;}
body.page-id-885 .je-page section.je-contact{padding-top:0;}