/* ==========================================================================
   a11y-overrides.css – Barrierefreiheit (zentral)
   ========================================================================== */

/* 1) Screenreader-Utility & Honeypot */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}

/* 2) Reduced Motion – Hero-Video deaktivieren */
@media (prefers-reduced-motion: reduce){
  .hero-video{ display:none !important; }
}

/* 3) Fokus-Styles (Tastaturbedienung) */
.form-field input:focus, .form-field textarea:focus{
  box-shadow: 0 0 0 3px rgba(255,255,255,.7);
}
.mobile-menu a:focus-visible,
.nav-list a:focus-visible{
  outline:2px solid var(--accent-600); outline-offset:2px; border-radius:.35rem;
}

/* 4) Hero/Teaser – ROBUST: absolutes Overlay + klare Ebenenreihenfolge */
.hero-overlay{
  position:absolute !important;
  inset:0 !important;
  background: rgba(0,0,0,.68) !important;
  z-index:1 !important;
  pointer-events:none;
}
.teaser .hero-overlay{
  background: rgba(0,0,0,.5) !important;   /* Teaser minimal dunkler */
}

/* WICHTIG: Text-Container im Teaser wieder als ABSOLUTES Overlay */
.teaser .teaser-hero-content{
  position:absolute !important;
  inset:0 !important;
  display:grid;
  align-items:center;
  z-index:5 !important;                        /* über dem Overlay */
}

/* Sicherheit: Überschriften & Lead sichtbar und konform (WAVE/AA) */
.hero h1, .hero .lead,
.teaser h1, .teaser .lead{
  position:relative;
  z-index:6 !important;                        /* oberste Ebene */
  color:#fff !important;
  text-shadow:none !important;
  opacity:1 !important;
}

/* Dezenter echter Hintergrund NUR im Teaser (für sehr helle Fotos) */
.teaser h1,
.teaser .lead{
  padding: 0;
  border-radius:.25rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* A11y: Headline/Lead-Zeilenumbruch im Teaser erzwingen */
.teaser h1{
  display:block !important;    /* H1 wieder als Block ? neue Zeile */
  margin: 0 !important;
}
.teaser .lead{
  display:block !important;    /* Lead nicht inline rendern */
  margin-top: 1rem !important; /* Abstand wie im Design */
 }

.hero-content h1,
.hero-content .lead,
.teaser .lead, 
.teaser h1,
.btn-outline,
.parallax-inner h2,
.parallax-inner h3,
.parallax-inner p,
.reveal .link,
.pkg-link,
p.muted-text,
.muted-text time,
.link-post
{
  background-color: rgba(0,0,0,.01);
}
/* A11y: Primär-Buttons in dunklem Orange (aus dem Chat) */
.btn-accent{
  background: #C8511E !important;   /* rgb(200, 81, 30) */
  color: #fff !important;
  border-color: transparent !important;
}
.btn-accent:hover{
  background: #B94E1D !important;   /* rgb(185, 78, 29) */
}

/* Optional, aber empfehlenswert: klarer Fokusrahmen */
.btn-accent:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px !important;
}
/* Screenreader-only (zugänglich, aber visuell versteckt) */