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

#zeug {
  --black: #1a1a1a;
  --lightgrey: #eae8e4;
}

#home-1 {
  :root {
    /*Farben passen schon so*/
  }
}

#darmstadt-3488 {
  :root {
    --dark-red:#562e2d;
    --turquoise:#75B1AE;
    --color-txt: var(--dark-red);
    --color-one: var(--turquoise);
    --color-two: var(--dark-red);
    --color-bg-one: var(--turquoise);
    --color-bg-two: var(--dark-red);
  }
}

#bad-homburg-3492 {
  :root {
    --blue: #186c94;
    --grey: #AAAFB2;
    --color-one: var(--blue);
    --color-two: var(--grey);
    --color-bg-one: var(--blue);
    --color-bg-two: var(--grey);
  }
}

#rossdorf-4018 {
  :root {
    --red: #951813;
    --color-one: var(--red);
    --color-bg-one: var(--red);
    /* color-txt schon schwarz / weiß */
  }
}

#gross-zimmern-5176 {
  :root {
    --green: #597E14;
    --color-bg: var(--green);
    /*color-txt schon schwarz / weiß*/
  }
}

html.a11y-contrast-on {
  --contrast-black: #000000;
  --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;
}

html.a11y-contrast-on #darmstadt-3488 :root, html.a11y-contrast-on #darmstadt-3488::before, html.a11y-contrast-on #darmstadt-3488::after {
  --color-bg-one: var(--contrast-black) !important;
  --color-bg-one-rgb: var(--contrast-black-rgb) !important;
}

html.a11y-contrast-on #rossdorf-4018 .section-slider .img .txt-box, html.a11y-contrast-on #gross-zimmern-5176 .section-slider .img .txt-box {
  background-color: var(--color-bg) !important;
}

html.a11y-contrast-on #mainnav-container, html.a11y-contrast-on .is-active ::before , html.a11y-contrast-on .c-txt main .c-txt-two *, html.a11y-contrast-on :is(.c-txt-two,.c-txt main .c-txt-two) *::after {
  --color-two: var(--contrast-black) !important;
} 

html.a11y-contrast-on :is(.c-txt-one,.c-txt main .c-txt-one) *::after,  html.a11y-contrast-on :is(.c-txt-one,.c-txt main .c-txt-one) *::before {
  --color-one: var(--contrast-black) !important;
}

html.a11y-contrast-on .bgc, html.a11y-contrast-on .mainfooter body .c-txt-two *, html.a11y-contrast-on :is(.c-txt-two,.c-txt main .c-txt-two) *::before, html.a11y-contrast-on .mainfooter .c-txt main .c-txt-two *, html.a11y-contrast-on .mainfooter :is(.c-txt-two,.c-txt main .c-txt-two) *::before, html.a11y-contrast-on .mainfooter :is(.c-txt-two,.c-txt main .c-txt-two) *::after {
  --color-two: var(--contrast-white);
}

html.a11y-contrast-on #darmstadt-3488 * .c-bg-one, #bad-homburg-3492 * .c-bg-one {
  --color-bg: var(--contrast-black) !important;
}

html.a11y-contrast-on .section-slider *::before {
  --color-txt: var(--contrast-white) !important;
}

html.a11y-contrast-on .section-slider *::after {
  --color-txt: var(--contrast-white) !important;
}

html.a11y-contrast-on .splide__pagination ::before {
  --color-bg: var(--contrast-black) !important;
}

html.a11y-contrast-on .c-bg-one .img .splide .splide__pagination ::before {
  --color-two: var(--contrast-white) !important;
}

html.a11y-contrast-on .c-bg-one .img .splide .splide__pagination::after {
  --color-two: var(--contrast-white) !important;
}

html.a11y-contrast-on .c-bg-one .img .splide .splide__pagination ::after {
  --color-two: var(--contrast-white) !important;
}

html.a11y-contrast-on * .c-bg-two {
  --color-bg: var(--contrast-black) !important;
}

html.a11y-contrast-on .marker *, html.a11y-contrast-on marker *{
  color: var(--contrast-black) !important;
}

html.a11y-contrast-on .txt-box > h1 {
  color: var(--contrast-white) !important;
}
html.a11y-contrast-on #darmstadt-3488 .txt-box {
  background-color: rgb(49 73 71 / 89%) !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;
}

/* 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 .nav-item.drpdwn-btn > .dropdown {
  display: none;
  opacity: 0;
  visibility: hidden;
}

*/

#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,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; 
}

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

#mainnav .subnav-wrap :where(a, button, [tabindex]):focus-visible,
#mainnav .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) {
  #mainnav :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 .caption-slider .slide{
  background-color: var(--contrast-white, #f1f1f2c7);
}

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

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

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

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

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

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

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 #mainfooter {
  display: none !important;
}

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

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

html.a11y-contrast-on #img--1 > figure {
  background-image: none !important;
  background-color:#446665
}

html.a11y-contrast-on #img--2 > figure {
  background-image: none !important;
  background-color: #32385a;
}

html.a11y-contrast-on #img--3 > figure {
  background-image: none !important;
  background-color: #951812;
}

html.a11y-contrast-on #img--4 > figure {
  background-image: none !important;
  background-color: #3f5c0e;
}

#darmstadt-3488 .bgc, #bad-homburg-3492 .bgc {
  background-color: var(--contrast-black, var(--color-bg));
}

html.a11y-contrast-on .teaser-img picture {
  filter: brightness(0.3);
}

html.a11y-contrast-on .stoerer {
  display: none;
}

html.a11y-contrast-on .btn-img {
  filter: opacity(0.1) brightness(0.9);
}

html.a11y-contrast-on .btn-img::after {
  background-image: var(--contrast-white);
}

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

html.a11y-contrast-on .splide__list {
  background-color: var(--contrast-white);
  filter: grayscale(1);
}

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

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

#darmstadt-3488 *[aria-pressed="false"] > .contrast-icon {
  filter: brightness(0) saturate(100%) invert(18%) sepia(43%) saturate(542%) hue-rotate(315deg) brightness(99%) contrast(94%);
}

#bad-homburg-3492 *[aria-pressed="false"] > .contrast-icon {
  filter: brightness(0) saturate(100%) invert(32%) sepia(91%) saturate(487%) hue-rotate(155deg) brightness(90%) contrast(89%);
}

/* Großzimmern, Rossdorf und Home schwarz lassen */

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

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

@media only screen and (max-width: 1230px) {

  #contrast-toggle {
    display: flex;
    align-items: center;
    padding: 0;
  }

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

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