/* Barrierefreiheit-Links: Leiste über dem Header (ab 90em) und unten im Burger-Menü (darunter). Siehe inc/barrierefreiheit.php */

.a11y-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Haken-Icon der allgemeinen Listen ausblenden */
.a11y-links li {
  margin: 0;
  padding: 0;
}
.a11y-links li::before {
  content: none;
}
.a11y-links a {
  align-items: center;
  color: #222;
  display: inline-flex;
  font-family: sparkasse-rg, sans-serif;
  gap: 0.375rem;
  min-height: 1.5rem;
  text-decoration: none;
}
.a11y-links a:hover span:first-of-type {
  text-decoration: underline;
}
.a11y-links a:focus-visible {
  outline: 2px solid #565656;
  outline-offset: 2px;
}
.a11y-links svg {
  fill: currentColor;
  flex-shrink: 0;
  height: 1.25rem;
  width: 1.25rem;
}
/* Hinweis "öffnet neues Fenster" nur für Screenreader */
.a11y-links__hint {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Mobil/Tablet: Header ist fixiert, Links stehen unten im Burger-Menü */
.a11y-bar {
  display: none;
}
.a11y-links--menu {
  border-top: 1px solid #e7e7e7;
  flex-direction: column;
  font-size: 1rem;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

/* Desktop: Menü steht im Header, Links in eigener Leiste darüber (wie meinkoelnbonn.de).
   Gleicher Innenabstand wie .header, damit "Barriere melden" bündig über "Job finden" endet. */
@media (min-width: 90em) {
  .a11y-bar {
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: block;
    padding: 0 6.5rem;
    position: relative;
    z-index: 101;
  }
  .a11y-links--bar {
    font-size: 1rem;
    gap: 1.875rem;
    justify-content: flex-end;
    padding: 0.625rem 0;
  }
  .a11y-links--bar a {
    gap: 0.25rem;
    line-height: 1.75rem;
  }
  .a11y-links--bar svg {
    height: 1.5rem;
    width: 1.5rem;
  }
  .a11y-links--menu {
    display: none;
  }
}
@media (min-width: 120em) {
  /* .header ist hier auf 107rem begrenzt und zentriert, behält aber seinen Innenabstand */
  .a11y-bar {
    padding: 0;
  }
  .a11y-links--bar {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 107rem;
    padding: 0.625rem 6.5rem;
  }
}

/* Seite /barrierefreiheit/: Text so breit wie in der Datenschutzerklärung, nur mehr Abstand zwischen Absätzen und Abschnitten */
.page-barrierefreiheit .section--text p,
.page-barrierefreiheit .section--text ul {
  margin: 0 0 1.25rem;
}
.page-barrierefreiheit .section--text li {
  margin-bottom: 1rem;
}
.page-barrierefreiheit .section--text h1 {
  margin-bottom: 2rem;
}
.page-barrierefreiheit .section--text h2 {
  margin: 3.5rem 0 1.25rem;
}
.page-barrierefreiheit .section--text h3 {
  margin: 2.5rem 0 1rem;
}
.page-barrierefreiheit .section--text strong:first-child {
  display: inline-block;
  margin-bottom: 0.25rem;
}

/* ---------- Korrekturen aus der Selbstbewertung vom 16.10.2026 ---------- */

/* Nur für Screenreader (z. B. Überschrift "Offene Stellen" auf /jobs/) */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Sprunglink zum Hauptinhalt (header.php): erscheint erst, wenn er per Tab den Fokus bekommt */
.skip-link {
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 999px;
  color: #000;
  font-family: sparkasse-rg, sans-serif;
  font-weight: 700;
  left: 1rem;
  line-height: 1.5rem;
  padding: 0.625rem 1.5rem;
  position: fixed;
  text-decoration: none;
  top: -10rem;
  z-index: 1000;
}
.skip-link:focus {
  top: 1rem;
}
#inhalt:focus {
  outline: none;
}

/* "Job finden" ist jetzt ein Link statt Button im Link: gleiches Aussehen wie vorher
   (:where hält die Regel schwach, damit die Hover-Farben aus styles.css weiter greifen) */
.header :where(a.header-button) {
  box-sizing: border-box;
  color: #222;
  text-decoration: none;
}

/* Prozess-Modul: Schaltfläche ist jetzt ein Link; Links erben im Reset die Zeilenhöhe, Buttons nicht */
.process__footer :where(a.button) {
  line-height: normal;
}

/* Geschlossenes Burger-Menü und zugeklappte Untermenüs liegen nur außerhalb des Bildes:
   unsichtbar schalten, damit ihre Links nicht per Tab erreichbar sind. Ab 90em steht das Menü im Header. */
@media (max-width: 89.99em) {
  .header-menu-container {
    transition: right 0.3s, visibility 0s 0.3s;
    visibility: hidden;
  }
  .header-menu-container.menu-opened {
    transition-delay: 0s;
    visibility: visible;
  }
  .header .sub-menu {
    transition: right 0.8s, visibility 0s 0.8s;
    visibility: hidden;
  }
  .header .sub-menu.active {
    transition-delay: 0s;
    visibility: visible;
  }
}

/* Teaser-Slider: Pfeile stehen neben der Punkte-Liste (script.js), Anordnung wie vorher */
.section--teaser-slider .teaser__pagination,
.section--teaser-stacked .teaser__pagination {
  align-items: center;
  display: flex;
  gap: 0.375rem;
  justify-content: center;
}
.section--teaser-slider .teaser .slick-dots,
.section--teaser-stacked .teaser .slick-dots {
  width: auto;
}