/* =============================
   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-txt: #3b8476;
  --green-bg: #e0f6e0;
  --red: #d20134;
}

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 {
  outline: 3px solid var(--black);      /* kräftiger Ring  WCAG 2.2 2.4.13 */
  outline-offset: 0px;
  box-shadow: none;                             /* Safari-Bugfix */
  transition: outline-offset .1s ease;
}

/* =============================
   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;
}

#main-nav 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 */
  #main-nav .nav-tab:hover .subnav.lvl-1,
  #main-nav .nav-tab:focus-within .subnav.lvl-1,
  #main-nav .nav-tab.tab-on .subnav.lvl-1 {
    left: 0           !important;
    opacity: 1        !important;
    top: auto         !important; 
  }

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

  /* Mod-02 spezifisch: Hover/Tab-on für .subnav-wrap */
  .mod-02 #main-nav .nav-list li:hover .subnav-wrap,
  #main-nav .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 */
  #main-nav .nav-tab:hover .subnav.lvl-1,
  #main-nav .nav-tab:focus-within .subnav.lvl-1,
  #main-nav .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 */
#main-nav .nav-list li {
  overflow: visible;
}

/* sorgt dafür, dass hidden tatsächlich display:none erzwingt 
@media (max-width: 1440px) {
  #main-nav[hidden] {
    display: none !important;
  }
}
  
#main-nav .nav-item.drpdwn-btn > .dropdown {
  display: none;
  opacity: 0;
  visibility: hidden;
}

*/

#main-nav.active {
  display: flex;    
}

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


:where(a,button,[tabindex]):focus-visible{
  outline: 3px solid var(--white, #fff);
  outline-offset:2px;
  box-shadow: #000000 0px 0px 0px 1px inset !important; 
}

:where(article a, section a, #mainfooter a, .hint-win a):focus-visible {
  outline: 3px solid var(--white, #ffffff) !important;
  outline-offset: 2px;
  box-shadow: #000000 0px 0px 0px 1px inset !important; 
}

.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: 0px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 3px solid var(--white, #fff);
  outline-offset: 2px;
  box-shadow: #000000 0px 0px 0px 1px inset !important; 
}

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

#cookie-settings-btn:focus-visible {
  outline: 3px solid var(--contrast-white);
  outline-offset: 2px;
}

:where(a, button, input, textarea, summary, [tabindex]:not([tabindex="-1"]))
:focus-visible {
  position: relative;               /* → macht z-index wirksam */
  z-index: 9999 !important;         /* → nichts kann den Ring überdecken */
  outline-offset: 2px;
  outline: 3px solid var(--white, #fff);
  box-shadow: #000000 0px 0px 0px 1px inset !important; 
}

#main-nav :where(a, button, #mainlogo, [tabindex]):focus-visible {
  outline: 3px solid var(--white, #fff) !important;
  box-shadow: #000000 0px 0px 0px 1px inset !important; 
}

#main-nav .subnav-wrap :where(a, button, [tabindex]):focus-visible,
#main-nav .subnav      :where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--white, #fff);
  box-shadow: #000000 0px 0px 0px 1px inset !important; 
}

@media (max-width: 979px) {
  #main-nav :where(a, button, [tabindex]):focus-visible {
    outline: 3px solid var(--white, #fff);
    box-shadow: #000000 0px 0px 0px 1px inset !important; 
  }
}

#mainfooter :where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--white, #fff);
  box-shadow: #000000 0px 0px 0px 1px inset !important; 
}

#main-nav {
  background-color: var(--contrast-white);
}

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

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

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

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

.nav-btn-list a, .nav-btn-list a * {
  color: var(--contrast-black, var(--green-txt));
}

html.a11y-contrast-on #main-nav-logo {
  filter:brightness(0);
}

html.a11y-contrast-on .section-bg {
  background-image: none !important;
}

html.a11y-contrast-on .bg-img {
  background-image: none !important;
}

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

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

.article-body * {
  color: var(--contrast-black, var(--green-txt)) !important;
}

.header-container .contact-phone {
  color: var(--contrast-black, var(--green-txt));
}

html.a11y-contrast-on .contact-fax:before, html.a11y-contrast-on .contact-phone:before, html.a11y-contrast-on .contact-email:before {
  filter: brightness(0);
}

.caption * {
  color: var(--contrast-white, var(--green-bg));
}

.socialmedia-btns .button.min, .socialmedia-btns .button.min *, .socialmedia-btns .button.min i {
  color: var(--contrast-white, var(--green-bg)) !important;
}

.section-pageheader.img .section-header, .section-slider .section-header {
  background-color: var(--contrast-white, var(--green-bg));
}

.socialmedia-btns .button.min i {
  color: var(--contrast-black, var(--green-txt)) !important;
  transition: all 500ms cubic-bezier(0.17, 0.67, 0.41, 1);
}

.socialmedia-btns .button.min:hover i {
  color: var(--contrast-white, var(--green-bg)) !important;
}

#main-footer * {
  color: var(--contrast-black, var(--green-txt)) !important;
}

html.a11y-contrast-on .logo {
  filter: brightness(0);
}

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

.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 .InputfieldContent p, html.a11y-contrast-on .FormBuilder.InputfieldForm .Inputfield .InputfieldHeader {
  color: var(--contrast-black, var(--green-txt));
}

.FormBuilder.InputfieldForm input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="range"]), .FormBuilder.InputfieldForm select:not([multiple]) {
  background: var(--contrast-white, var(--green-bg)) !important;
}

html.a11y-contrast-on .FormBuilder.InputfieldForm .notes, .FormBuilder.InputfieldForm .description {
  opacity: 1 !important;
}

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

/* Button als Icon (SVG) – keine Textbreite */
.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");
  filter: none;
}

*[aria-pressed="false"] > .contrast-icon {
  filter: invert(96.90%) sepia(55.90%) saturate(2226%) hue-rotate(87.10deg) brightness(53.27%) contrast(53.99%);
}

.contrast-icon:hover {
  filter: invert(21.51%) sepia(30.89%) saturate(2208%) hue-rotate(315deg) brightness(110%) contrast(230%)
}

#contrast-toggle {
  height: 40px;
  font-size: 1.0625rem;
  line-height: 51px;
  text-transform: none;
  padding:0;
  border: none;
  cursor: pointer;
  padding-left: 30px;
}

#contrast-toggle:hover .contrast-label {
  color: var(--red);
}

@media only screen and (max-width: 1230px) {
  *[aria-pressed="false"] > .contrast-icon {
    filter: contrast(0);
    transition: filter 500ms cubic-bezier(0.17, 0.67, 0.41, 1);
  }

  .contrast-icon:hover {
    filter: invert(1);
  }

  #contrast-toggle {
    display: flex;
    align-items: center;
    padding-right: 20px;
  }

  #contrast-toggle:hover .contrast-label {
    color: var(--white);
  }
}

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