/* ============================================================
   Der Vertraute — Startseite (index.html)
   Ergänzt zuhoeren.css um seitenspezifische Regeln:
   Hero ohne Foto/Video, primärer CTA-Button, Testpersonen- und
   Footer-Abschnitt. Nutzt dieselben Design-Tokens/Klassen wie
   zuhoeren.html (siehe assets/css/zuhoeren.css).
   ============================================================ */

/* Feinere Kantenglättung für die serifenbetonte Cormorant-Garamond-Schrift */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* HERO — Waldweg-Foto in Normalfarben, unten ausgeblendet in den Hintergrund des Laufbands; darüber die langsame Lichtbewegung (.hero-drift); H1 sitzt näher am oberen Rand */
.hero-media--wald{
  position:absolute;inset:0;overflow:hidden;
  background-color:var(--bg-1);
  background-image:
    linear-gradient(180deg, rgba(15,13,11,0.40) 0%, rgba(26,23,20,0.22) 38%, rgba(15,13,11,0.88) 100%),
    url('../foto-waldweg.jpg'),
    radial-gradient(120% 90% at 30% 20%, #2A241E 0%, #1A1714 60%);
  background-size:cover, cover, cover;
  background-position:center, center 30%, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
}
@media (max-width:640px){
  /* Auf schmalen Viewports schneidet "center" eine der beiden Personen ab; Bildausschnitt auf die Gruppe zentrieren */
  .hero-media--wald{
    background-position:center, 32% 20%, center;
  }
}
.hero{justify-content:flex-start;}
.hero-content{padding-top:clamp(96px,16vh,150px);padding-bottom:0;}
.hero-content h1{color:#D4B097;}

/* KI-KENNZEICHNUNG — Pflichtlabel für KI-generierte Fotos */
.ai-label{
  position:absolute;z-index:2;
  font-family:'Work Sans',sans-serif;font-weight:400;font-size:11px;
  letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(245,242,238,0.8);
  background:rgba(15,13,11,0.55);
  border:1px solid rgba(245,242,238,0.2);
  border-radius:3px;padding:5px 10px;
  pointer-events:none;
}
.hero .ai-label{right:clamp(16px,4vw,40px);bottom:clamp(16px,3vh,28px);}
.photo-block-media .ai-label{right:14px;bottom:14px;}

/* LAUFBAND — goldenes Ticker-Band zwischen Hero und Intro */
.marquee{
  position:relative;overflow:hidden;
  background:var(--bg-2);
  border-top:1px solid rgba(178,109,64,0.28);
  border-bottom:1px solid rgba(178,109,64,0.28);
  padding:30px clamp(24px,7vw,110px);
  white-space:nowrap;
}
.marquee-track{
  display:inline-flex;align-items:center;width:max-content;
  animation:marquee-scroll 22s linear infinite;
  animation-play-state:running;
  will-change:transform;
}
.marquee-item{
  font-family:'Work Sans',sans-serif;font-weight:500;font-size:15px;
  letter-spacing:0.1em;text-transform:uppercase;color:#D9A653;
  padding:0 22px;
}
.marquee-sep{color:rgba(217,166,83,0.5);font-size:14px;padding:0 2px;}
@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
}

/* FOTO — normalfarbig, unten ausgeblendet in den Hintergrund der folgenden Sektion */
.photo-block{background:var(--bg-2);padding:0;}
.photo-block-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;}
.photo-block-media img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-block-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(15,13,11,0) 0%, rgba(15,13,11,0) 45%, var(--bg-2) 100%);
}

/* TESTPERSONEN */
.testpersonen{background:var(--bg-2);position:relative;overflow:hidden;}
.testpersonen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 0%, rgba(178,109,64,0.10), rgba(15,13,11,0) 62%);
}
.testpersonen > *{position:relative;}
.testpersonen h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  font-size:clamp(34px,6vw,56px);
  line-height:1.1;
  letter-spacing:0.02em;
  color:var(--paper);
  margin-bottom:clamp(28px,5vh,40px);
}
.testpersonen .mail-inline{
  display:inline-block;margin-bottom:clamp(36px,6vh,52px);
  font-family:'Work Sans',sans-serif;font-weight:400;font-size:18px;
  color:var(--copper);text-decoration:underline;text-decoration-color:rgba(178,109,64,0.4);
  text-underline-offset:4px;transition:opacity .2s;
}
.testpersonen .mail-inline:hover{opacity:0.75;}
.testpersonen .mail-inline:focus-visible{outline:2px solid var(--copper);outline-offset:4px;}

/* FOOTER */
.site-footer{background:var(--bg-1);position:relative;padding:clamp(50px,8vh,70px) 0 clamp(40px,6vh,56px);}
.site-footer .wrap-narrow{text-align:center;}
.site-footer p{font-size:15px;letter-spacing:0.05em;color:var(--text-softer);}
.site-footer a{color:var(--copper);text-decoration:none;transition:opacity .2s;}
.site-footer a:hover{opacity:.75;}