/* =============================
   Globale Styles zur Verbesserung der Barrierenfreiheit
   Weitzelium Web Development
   AUTHOR: Colin Weitzel
   ============================= 
*/

:root {
  --black: #000000;
  --darkgrey: #1a1a18;
  --grey: #58595b;
  --midgrey: #3d3d39;
  --lightgrey: #f4f4f4;
  --white: #fff;
  --blue: #003a56;
  --green: #bdd577;
  --gold-bg: #BD924C;
}

html.a11y-contrast-on{
  --contrast-black: #000000;
  --contrast-dark-blue: #002537;
  --contrast-white: #ffffff;
}

/* =============================
   1. Sichtbarer Tastatur-Fokus
   ============================= */
:where(a, button, input, textarea, summary, [tabindex]:not([tabindex="-1"]))
  :focus-visible {
  position: relative;            /* nötig, damit z-index wirkt */
  z-index: 2147483647;           /* sehr hoch – gern als Var */
  isolation: isolate;            /* eigenes Stacking-Context */
  outline: none;                 /* wir malen den Ring selbst */
  /* 2-lagiger Ring (innen + außen), immer sichtbar */
  box-shadow:
    0 0 0 3px var(--focus-inner, #fff),
    0 0 0 6px var(--focus-outer, #000);
}

/* =============================
   2. Skip-Link (unsichtbar bis Fokus)
   ============================= */
.skip-link {
  position: absolute; top: 0; left: 0;
  transform: translateY(-100%);
  background: var(--white, #fff);
  color: var(--black, #000000);
  padding: .5rem 1rem; z-index: 1000;
}

.skip-link:focus-visible {transform: translate(50vw, 10vw); }

.visually-hidden-focusable {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-100%);
  background: #fff;
  color: var(--black, #000000);
  padding: .5rem 1rem;
  z-index: 1000;
  outline-offset: 0px;
}
.visually-hidden-focusable:focus {
  transform: translateY(0);
  outline: 3px solid var(--black);
  outline-offset:1px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}

/* Haupt-UL des Megamenus sichtbar machen,
   sobald ein Nachfahre Fokus bekommt */
.nav-tab:focus-within .subnav-wrap{
  display: block;
  opacity: 1;
  visibility: visible;
}

#mainnav li:focus-within .dropdown {
  top: 100% !important;
  bottom: auto !important;
  margin-top: 0 !important;
  opacity: 1 !important;
}

/* Falls .is-open fehlt: letzter Rettungsanker */
.nav-tab.is-open .subnav-wrap{
  display:block !important;   /* überschreibt alte Regel */
}

/* ---- Nur Desktop (960px–1440px) ---- */
@media (min-width: 960px) and (max-width: 1440px) {
  /* Subnav neben dem Haupt-Tab anzeigen */
  #mainnav .nav-tab:hover .subnav.lvl-1,
  #mainnav .nav-tab:focus-within .subnav.lvl-1,
  #mainnav .nav-tab.tab-on .subnav.lvl-1 {
    left: 0           !important;
    opacity: 1        !important;
    top: auto         !important; 
  }

  /* Falls eine generische .subnav-Regel noch opacity reduziert */
  #mainnav .subnav {
    opacity: 1        !important;
  }

  /* Mod-02 spezifisch: Hover/Tab-on für .subnav-wrap */
  .mod-02 #mainnav .nav-list li:hover .subnav-wrap,
  #mainnav .nav-list li.tab-on .subnav-wrap {
    display: block;
    top: 0%           !important;
    opacity: 1        !important;
  }
}

/* ---- Nur Tablet und kleiner (max. 980px) ---- */
@media (max-width: 980px) {
  /* Subnav direkt unter dem Tab einblenden */
  #mainnav .nav-tab:hover .subnav.lvl-1,
  #mainnav .nav-tab:focus-within .subnav.lvl-1,
  #mainnav .nav-tab.tab-on .subnav.lvl-1 {
    left: auto       !important;
    top: 0           !important;
    transform: none  !important;
    opacity: 1       !important;
  }
}

/* ---- Globale Defaults für Overflow und Fokus-Ring ---- */

/* List-Item overflow sichtbar, damit der Fokus-Ring nicht gekappt wird */
#mainnav .nav-list li {
  overflow: visible;
}

/* sorgt dafür, dass hidden tatsächlich display:none erzwingt 
@media (max-width: 1440px) {
  #mainnav[hidden] {
    display: none !important;
  }
}
*/
#mainnav.active {
  display: flex;    
}

/* 1) Dropdown standardmäßig verstecken */
#mainnav .nav-item.drpdwn-btn > .dropdown {
  display: none;
  opacity: 0;
  visibility: hidden;
}

#mainnav .nav-item.drpdwn-btn:hover > .dropdown,
#mainnav .nav-item.drpdwn-btn:focus-within > .dropdown,
#mainnav .nav-item.drpdwn-btn.tab-on > .dropdown {
  display: block !important;
  opacity: 1    !important;
  visibility: visible !important;
}


:where(a,button,[tabindex]):focus-visible{
  position: relative;            /* nötig, damit z-index wirkt */
  z-index: 2147483647;           /* sehr hoch – gern als Var */
  isolation: isolate;            /* eigenes Stacking-Context */
  outline: none;                 /* wir malen den Ring selbst */
  /* 2-lagiger Ring (innen + außen), immer sichtbar */
  box-shadow:
    0 0 0 3px var(--focus-inner, #fff),
    0 0 0 6px var(--focus-outer, #000);
}

:where(article a, section a, #mainfooter a, .hint-win a):focus-visible {
  position: relative;            /* nötig, damit z-index wirkt */
  z-index: 2147483647;           /* sehr hoch – gern als Var */
  isolation: isolate;            /* eigenes Stacking-Context */
  outline: none;                 /* wir malen den Ring selbst */
  /* 2-lagiger Ring (innen + außen), immer sichtbar */
  box-shadow:
    0 0 0 3px var(--focus-inner, #fff),
    0 0 0 6px var(--focus-outer, #000);
}

.logo-slider li {
  overflow:visible;
}


article header.button.tgl {
  outline-offset: -6px;
}

#cookie-consent .InputfieldContent {
  border-bottom: none !important;
  outline: none !important;
}

#cookie-consent input[type="checkbox"]:checked::after {
  content: '';
  display: block;
  text-align: center;
  line-height: 1.25rem;
  font-size: 1rem;
  color: var(--contrast-black);
}

#cookie-consent input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--white, #fff);
  outline-offset:2px;
  box-shadow: #000000 0px 0px 0px 2px inset !important; 
}

.error {
  color: #c33026;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  position: relative;            /* nötig, damit z-index wirkt */
  z-index: 2147483647;           /* sehr hoch – gern als Var */
  isolation: isolate;            /* eigenes Stacking-Context */
  outline: none;                 /* wir malen den Ring selbst */
  /* 2-lagiger Ring (innen + außen), immer sichtbar */
  box-shadow:
    0 0 0 3px var(--focus-inner, #fff),
    0 0 0 6px var(--focus-outer, #000);
}

input,
textarea,
select {
  pointer-events: auto !important;
}

form#schnellbewerbung-form .InputfieldContent {
  border-bottom: none !important;
}

form#schnellbewerbung-form .InputfieldContent label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

form#schnellbewerbung-form input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--white, #fff);
  outline-offset:2px;
  box-shadow: #000000 0px 0px 0px 2px inset !important; 
}

.btn-pp-gmaps:focus-visible, .btn-pp-flockler:focus-visible {
  outline: 3px solid var(--white, #fff);
  outline-offset:2px;
  box-shadow: #000000 0px 0px 0px 2px inset !important; 
}

#cookie-settings-btn:focus-visible {
  outline: 3px solid var(--white, #fff);
  outline-offset:2px;
  box-shadow: #000000 0px 0px 0px 2px inset !important; 
}

:where(a, button, input, textarea, summary, [tabindex]:not([tabindex="-1"]))
:focus-visible {
  position: relative;
  z-index: 9999 !important;        
  position: relative;            /* nötig, damit z-index wirkt */
  z-index: 2147483647;           /* sehr hoch – gern als Var */
  isolation: isolate;            /* eigenes Stacking-Context */
  outline: none;                 /* wir malen den Ring selbst */
  /* 2-lagiger Ring (innen + außen), immer sichtbar */
  box-shadow:
    0 0 0 3px var(--focus-inner, #fff),
    0 0 0 6px var(--focus-outer, #000);
}

#mainnav :where(a, button, #mainlogo, [tabindex]):focus-visible {
  position: relative;            /* nötig, damit z-index wirkt */
  z-index: 2147483647;           /* sehr hoch – gern als Var */
  isolation: isolate;            /* eigenes Stacking-Context */
  outline: none;                 /* wir malen den Ring selbst */
  /* 2-lagiger Ring (innen + außen), immer sichtbar */
  box-shadow:
    0 0 0 3px var(--focus-inner, #fff),
    0 0 0 6px var(--focus-outer, #000);
}

#mainnav .subnav-wrap :where(a, button, [tabindex]):focus-visible,
#mainnav .subnav      :where(a, button, [tabindex]):focus-visible {
  position: relative;            /* nötig, damit z-index wirkt */
  z-index: 2147483647;           /* sehr hoch – gern als Var */
  isolation: isolate;            /* eigenes Stacking-Context */
  outline: none;                 /* wir malen den Ring selbst */
  /* 2-lagiger Ring (innen + außen), immer sichtbar */
  box-shadow:
    0 0 0 3px var(--focus-inner, #fff),
    0 0 0 6px var(--focus-outer, #000);
}

@media (max-width: 979px) {
  #mainnav :where(a, button, [tabindex]):focus-visible {
  position: relative;            /* nötig, damit z-index wirkt */
  z-index: 2147483647;           /* sehr hoch – gern als Var */
  isolation: isolate;            /* eigenes Stacking-Context */
  outline: none;                 /* wir malen den Ring selbst */
  /* 2-lagiger Ring (innen + außen), immer sichtbar */
  box-shadow:
    0 0 0 3px var(--focus-inner, #fff),
    0 0 0 6px var(--focus-outer, #000);
  }
}

#mainfooter :where(a, button, [tabindex]):focus-visible {
  position: relative;            /* nötig, damit z-index wirkt */
  z-index: 2147483647;           /* sehr hoch – gern als Var */
  isolation: isolate;            /* eigenes Stacking-Context */
  outline: none;                 /* wir malen den Ring selbst */
  /* 2-lagiger Ring (innen + außen), immer sichtbar */
  box-shadow:
    0 0 0 3px var(--focus-inner, #fff),
    0 0 0 6px var(--focus-outer, #000);
}

:is(#main, #main .section-heroslider) .caption .button * {
  color: var(--contrast-dark-blue);
  border-color: var(--contrast-dark-blue);
}

.color-one, .color-one .teaser-item {
  background-color: var(--contrast-dark-blue);
}

#mainnav-container {
  background-color: var(--contrast-dark-blue, var(--blue));
}

#main .caption-slider .slide{
  background-color: var(--contrast-white, #f1f1f2c7);
}

.slide .eye-catcher .txt * {
  color: var(--contrast-black, var(--blue));
}

.slide .eye-catcher {
  background-color: var(--contrast-white, var(--green));
}

.slide .eye-catcher a.inner::after {
  color: var(--contrast-black, var(--blue));
}

.caption-slider .caption * {
  color: var(--contrast-black, var(--grey));
}

html.a11y-contrast-on .button.xl.btn-s, html.a11y-contrast-on button.xl.btn-s {
  opacity: 1;
}

.button.scroll{
  background-color: var(--contrast-dark-blue, var(--blue));
}

.bg-grey {
  background-color: var(--contrast-black, var(--grey));
}

:is(#main .bg-color-one, #main .bg-black, #main .bg-d-grey, #main .bg-grey) .button:hover{
  background-color: var(--contrast-dark-blue, var(--blue));
}

.bg-color-one {
  background-color: var(--contrast-dark-blue, var(--blue));
}

#main .txt-two * {
  color: var(--contrast-white, var(--green));
  border-color: var(--contrast-white, var(--green));
}

.txt-two .button::before {
  background-color: var(--contrast-white, var(--green));
}

html.a11y-contrast-on .infographic .i-item.img::before {
  opacity: 1;
}

#pageheader h1, #pageheader h2, #pageheader h3, #pageheader h4, .section-header h1, .section-header h2, .section-header h3, .section-header h4 {
  color: var(--contrast-black, var(--green));
}

html, body {
  color: var(--contrast-black, var(--grey));
}

button, .button {
  color: var(--contrast-black,#222);
  border: 1px solid var(--contrast-dark-blue, var(--blue));
}

.button *, button * {
  color: var(--contrast-dark-blue, var(--blue));
}

.button::before, button::before {
  background-color: var(--contrast-dark-blue, var(--blue));
}

@media (max-width: 1440px) {
  #mainnav {
    background-color: var(--contrast-dark-blue, var(--blue));
  }
}

@media only screen and (max-width: 1280px) {
  #mainnav #nav-btn-list {
    background-color: var(--contrast-dark-blue, var(--blue));
  }
}

#mainnav .dropdown ul {
  background-color: var(--contrast-dark-blue, var(--blue));
}

#mainnav .dropdown:before {
  background-color: var(--contrast-dark-blue, var(--blue));
}

#mainnav-logo p span {
  color: var(--white);
}

#mainfooter {
  background-color: var(--contrast-dark-blue, var(--blue));
}

html.a11y-contrast-on #mainfooter {
  background-image: none !important;
}

#mainfooter * {
  color: var(--contrast-white, var(--green));
}

.project .info * {
  color: var(--contrast-black, var(--grey));
}

.slick-dots button {
  background-color: var(--contrast-white, var(--grey)); ;
  border: 1px solid var(--contrast-dark-blue, var(--white-rgb));
}

.slick-active button {
  background-color: var(--contrast-black, var(--green));
}

html.a11y-contrast-on #iwModule #iwWidget#iwWidget,
html.a11y-contrast-on #iwModule #iwWidget#iwWidget * {
  color: var(--contrast-black, var(--grey)) !important;
}

#iwModule #iwWidget .hm_box_03 {
  background-color: var(--contrast-white, var(--green)) !important;
}

* .teaserlist .teaser-title, * .teaserlist .teaser-title * {
  color: var(--contrast-black, var(--grey));
}

#mainfooter::before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  inset: 0;          
  background: rgba(0,0,0,0.4); 
  pointer-events: none;   
}

.teaser-img::before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  inset: 0;          
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4), rgba(0,0,0,0)); 
  pointer-events: none;   
}

.caption-wrapper, .caption-wrapper:before {
  z-index: 1;
}

@media only screen and (max-width: 1230px) {
  .nav-contrast {
    display: flex !important;
    justify-content: flex-end;
  }
}

.contrast-icon{
  display:inline-block;
  width:25px;
  height:25px;
  padding:0;
  margin:0;
  border:0;
  background: transparent no-repeat center center;
  background-size: contain;
  background-image:url("../img/contrast-button.svg");
}

#contrast-toggle {
  height: 40px;
  font-size: 0.9375em;
  line-height: 40px;
  text-transform: none;
  padding: 0 14px;
  border: none;
  transition: none;
  display: flex;
  align-items: center;
}

#contrast-toggle:hover {
  outline: 1px solid #fff;
}

@media only screen and (max-width: 1280px) {
  .contrast-label {
    height: 6.5vh;
    font-size: 4vh;
    line-height: 6vh;
  }

  #contrast-toggle {
    width: 100%;
    height: 6.5vh;
    display: flex;
    justify-content: center;
  }

  .contrast-icon {
    width: 5vh;
    height: 5vh;
  }

}

#contrast-toggle::before{
  content: none;
}