:root{--brand:#006D77;--ink:#1a1a1a;}
.uk-button-primary{background:var(--brand)!important;border-color:var(--brand)!important;}
a{color:var(--brand);} .uk-section-primary{background:var(--brand);} .wordmark{font-weight:800;letter-spacing:.04em}
.card-soft{border-radius:16px} .footer a{color:inherit}
.uk-navbar-sticky{box-shadow:0 4px 14px rgba(0,0,0,.08); background:#fff;}
.uk-navbar-sticky .uk-button-primary{background:var(--brand)!important;border-color:var(--brand)!important;}
.uk-button-primary:hover,.uk-button-primary:focus,.uk-button-primary:active{filter:brightness(.92);}
.uk-button-default:hover,.uk-button-default:focus{border-color:var(--brand);color:var(--brand);}
a:hover{text-decoration:underline;}
:focus-visible{outline:3px solid rgba(0,109,119,.35); outline-offset:2px;}
.uk-navbar-nav>li.uk-active>a{color:var(--brand);text-decoration:none;font-weight:600;}
.uk-offcanvas-bar .uk-nav>li.uk-active>a{color:var(--brand);font-weight:600;}
input.uk-input:invalid, textarea.uk-textarea:invalid{border-color:#cc3d3d;}
.hero{min-height:60vh}
/* Skip-Link nur bei Tastaturfokus anzeigen */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus,
.skip-link:focus-visible{
  left:1rem;
  top:1rem;
  width:auto;
  height:auto;
  padding:.5rem .75rem;
  background:#fff;
  border-radius:.5rem;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  z-index:10000;
  outline:3px solid rgba(0,109,119,.35);
  outline-offset:2px;
}
/* Dark overlay für bessere Lesbarkeit (WCAG AA) */
.hero { position: relative; }
.hero-dark::before{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.38) 40%,
    rgba(0,0,0,.38) 100%
  );
  pointer-events: none;
  z-index: 0;
}
/* Hero-Content über das Overlay */
/* RICHTIG */
.hero .uk-position-cover { z-index: 1; }   /* Position nicht überschreiben! */


/* Buttons auf dunklem Hintergrund besser lesbar */
.hero .uk-button-default{
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
.hero .uk-button-default:hover,
.hero .uk-button-default:focus{
  background: rgba(255,255,255,.18);
  border-color: #fff;
}
.hero .uk-button-primary{
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* Mobile: Overlay etwas stärker */
@media (max-width: 959px){
  .hero-dark::before{ background: rgba(0,0,0,.55); }
}

/* Optional: leichtes Text-Shadow für Headline auf Fotos */
.hero h1 { text-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* Hero-Kontrast fixen */

/* 1) Primärbutton im Hero: weißer Text + klare States */
.hero .uk-button-primary{
  color:#fff !important;
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.hero .uk-button-primary:hover,
.hero .uk-button-primary:focus{
  filter: brightness(.92);
}

/* 2) Subline im Hero nicht halbtransparent */
.hero .uk-text-lead{
  color:#fff !important;   /* UIkit gibt hier oft rgba(255,255,255,.7) in .uk-light */
  opacity:1 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* 3) Optional: Outline-Button auf dunklem Bild besser lesbar */
.hero .uk-button-default{
  color:#fff !important;
  border-color: rgba(255,255,255,.7) !important;
  background: rgba(255,255,255,.10);
}
.hero .uk-button-default:hover,
.hero .uk-button-default:focus{
  border-color:#fff !important;
  background: rgba(255,255,255,.16);
}
/* Footer weiß + dezente Abtrennung */
footer.footer,
.uk-section-muted.footer{
  background:#fff !important;
}

footer.footer{
  border-top:1px solid rgba(0,0,0,.06);
  color:#333;
}
footer.footer a{ color:inherit; }
/* 2-Klick-YouTube */
.yt-2click{
  position:relative; border-radius:12px; overflow:hidden; background:#000;
  aspect-ratio:16/9; /* hält das Format ohne JS */
}
.yt-2click-thumb{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:brightness(.8); transition:filter .2s ease;
}
.yt-2click:hover .yt-2click-thumb{ filter:brightness(.7); }
.yt-2click-overlay{
  position:absolute; inset:auto 0 0 0; padding:1rem; background:linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.5) 100%);
  color:#fff;
}
.yt-2click .uk-button{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.6); }
.yt-2click .uk-button:hover{ background:rgba(255,255,255,.18); border-color:#fff; }