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

:root {
  --dark-grey: #424242;
  --grey: rgba(165,165,165,0.92);

  --fv-ring-outer: 3px;           /* weißer Ring */
  --fv-ring-gap: 2px;             /* Abstand zum Element */
  --fv-ring-inner: 1px;           /* schwarzer Innenrand */
  --fv-ring-white: var(--white, #fff);
  --fv-ring-black: #000;
  --fv-z: 999;
}

html.a11y-contrast-on {
  --contrast-black: rgb(0 0 0 / 90%);
  --contrast-white: #ffffff;
  --contrast-black-rgb: 0, 0, 0;
  --color-one: var(--contrast-black) !important;
  --color-two: var(--contrast-black) !important;
  --color-txt: var(--contrast-black) !important;
  --color-bg-rgb: var(--contrast-black-rgb) !important;
  --lightgrey: var(--contrast-white) !important;
  --color-bg-one: var(--contrast-black) !important;
  --color-bg-one-rgb: var(--contrast-black-rgb) !important;
}

/* =============================
   1. Sichtbarer Tastatur-Fokus
   ============================= */
:where(a, button, input, textarea, summary, [tabindex]:not([tabindex="-1"]))
  :focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 0px;
  box-shadow: none;
  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;
}

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

.nav-tab.is-open .subnav-wrap{
  display:block !important;
}

@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;
}

#mainnav.active {
  display: flex;    
}

@media only screen and (min-width: 90rem) {
  :is(.standard.switch-off,.standard.switch-on.active) #mainnav :is(.drpdwn-btn.no-link.on,.drpdwn-btn.link:focus-visible) .dropdown, :is(.standard.switch-off,.standard.switch-on.active) #mainnav :is(.drpdwn-btn.no-link.on,.drpdwn-btn.link:focus) .dropdown, :is(.standard.switch-off,.standard.switch-on.active) #mainnav :is(.drpdwn-btn.no-link.on,.drpdwn-btn.link:focus-within) .dropdown {
    top: 100%;
    transform: translate(-50%, 0) !important;
    margin-top: calc(var(--nav-height) / 4 * -1);
    opacity: 1;
    display: flex;
    transition: opacity 350ms ease-in-out, margin 500ms var(--cubic-bezier);
  }
}

:is(.dropdown,.dropdown.noprev), :is(.switch-off,.switch-on.active) .drpdwn-btn.on .dropdown, .switch-on :is(.drpdwn-btn:focus-visible,.nav-item.focus) .dropdown, :is(.dropdown,.dropdown.noprev), :is(.switch-off,.switch-on.active) .drpdwn-btn.on .dropdown, .switch-on :is(.drpdwn-btn:focus,.nav-item.focus) .dropdown, :is(.switch-off,.switch-on.active) .drpdwn-btn.on .dropdown, .switch-on :is(.drpdwn-btn:focus-within,.nav-item.focus) .dropdown {
  position: static;
  float: left;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  z-index: 1;
  width: 100%;
  height: auto;
  padding: 0 var(--gap-txt);
  margin: 0;
  display: block;
  box-shadow: none;
  opacity: 1;
  transform: unset !important;
}

.standard .drpdwn-btn:focus-within {
  overflow: visible !important;
}

:where(
  a[href],
  area[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  details > summary,
  [role="button"],
  [role="link"],
  [tabindex]:not([tabindex="-1"])
):focus-visible{
  outline: none;

  position: relative;
  z-index: var(--fv-z);

  isolation: isolate;
}

:where(
  a[href],
  area[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  details > summary,
  [role="button"],
  [role="link"],
  [tabindex]:not([tabindex="-1"])
):focus-visible::after{
  content: "";
  position: absolute;

  inset: calc(-1 * (var(--fv-ring-gap, 2px) + var(--fv-ring-outer, 3px)));

  border: var(--fv-ring-outer, 3px) solid var(--fv-ring-white, #fff);
  box-shadow: inset 0 0 0 var(--fv-ring-inner, 1px) var(--fv-ring-black, #000);
  z-index: var(--fv-z, 2147483647);
  border-radius: inherit;
  pointer-events: none;
}

:where(
  input[type="checkbox"],
  input[type="radio"]
):focus-visible::after{
  border-radius: 2px; 
}

#cookie-consent input[type="checkbox"]:focus-visible::after{
  inset: calc(-1 * (0px + var(--fv-ring-outer)));
}

@media (prefers-reduced-motion: reduce){
  :where(
    a[href],
    area[href],
    button,
    input:not([type="hidden"]),
    select,
    textarea,
    summary,
    details > summary,
    [role="button"],
    [role="link"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible::after{
    transition: none !important;
  }
}


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

html.a11y-contrast-on ::selection {
  color: var(--contrast-white);
  background: var(--contrast-black);
}

html.a11y-contrast-on #hero-type::after {
  background-color: white;
  background-image: none;
}

html.a11y-contrast-on #hero-type p img {
  display: none;
}

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

html.a11y-contrast-on #mainfooter {
  background-color: #fff;
  border-top: black 3px solid;
  top: -2.5px;
}

html.a11y-contrast-on #sovielseitigwieunseregaerten-section figure {
  filter: saturate(4) grayscale(1) brightness(0.9) contrast(1.3);
}

html.a11y-contrast-on .section-teaser.boards.bgc.grey .wrapper-l::before{
  background-color: var(--contrast-black);
}

html.a11y-contrast-on html, html.a11y-contrast-on body {
  color: var(--contrast-black);
}

html.a11y-contrast-on #mainnav a.active span, html.a11y-contrast-on #mainnav a:hover span {
  color: var(--contrast-black);
}

html.a11y-contrast-on #mainnav a span:after {
  color: var(--contrast-black);
}

html.a11y-contrast-on .body {
  color: var(--contrast-white);
}

html.a11y-contrast-on h1, html.a11y-contrast-on h2, html.a11y-contrast-on h3, html.a11y-contrast-on h4, html.a11y-contrast-on h5, html.a11y-contrast-on h6 {
  color: var(--contrast-black);
}

html.a11y-contrast-on .button.next span::before {
  color: var(--contrast-black);
}

html.a11y-contrast-on #main-container a {
  color: var(--contrast-black);
}

html.a11y-contrast-on #main-container .teaser a {
  color: var(--contrast-white);
}

html.a11y-contrast-on #main-container .body .button:hover, html.a11y-contrast-on #main-container .body .button.active {
  border-color: var(--contrast-white) !important;
  background-color: var(--contrast-white) !important;
}

html.a11y-contrast-on #main-container .body .button:hover a, html.a11y-contrast-on #main-container .body .button.active a{
  color: var(--contrast-black) !important;
}

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

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

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

html.a11y-contrast-on .txt .caption-wrapper::before, html.a11y-contrast-on .teaser-item.img.txt figure::after {
  background-image: linear-gradient(to top, rgb(0 0 0 / 84%), rgb(0 0 0 / 60%) 50%);
}

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

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

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

*[aria-pressed="false"] > .contrast-icon {
  filter: invert(25.88%);
}

#contrast-toggle {
  font-size: 1.0625rem;
  line-height: 51px;
  text-transform: none;
  padding:0;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  height: 120px;
  padding-left: 15px;
  padding-right: 15px;
  align-items: center;
  background-color: transparent;
}

#contrast-toggle:after {
  content: "";
  position: absolute;
  bottom: 44px;
  right: 0;
  z-index: -1;
  width: 0;
  height: 2px;
  background-color: #424242;
  transition: all 350ms ease-in-out;
}

html.a11y-contrast-on .nav-contrast:hover #contrast-toggle:after {
  background-color: var(--contrast-black);
}

.nav-contrast:hover #contrast-toggle:after {
  left: 0;
  right: auto;
  width: 100%;
}

@media only screen and (max-width: 1280px) {
  #contrast-toggle {
    display: flex;
    height: 38px;
    align-items: center;
    padding: 0;
  }
  #contrast-toggle:hover .contrast-label {
    color: var(--white);
  }
  #contrast-toggle:after {
    bottom: 0;
  }
}

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