/* Spez. Fonts - OpenDyslexic etc.*/
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2'),
       url('../fonts/OpenDyslexic-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Cookie Hinweis */

#cookie-banner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #000;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  text-align: center;
  max-width: 90vw;
  width: 450px;
}

#cookie-banner p {
  margin-bottom: 1.2em;
  text-align: center;
  line-height: 1.2;
  font-size: 0.95rem;
}

#cookie-banner button {
  margin: 0 0.5rem;
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background-color: #ffffff;
  color: #000;
  border: 1px solid #333;
  font-weight: 600;
}

#cookie-banner button:hover {
  background-color: #000;
  color: #fff;
}

#cookie-banner a {
  color: black;
  text-decoration: underline;
  font-weight: bold;
}


/* Cursor für mittlere Größe (50px) */
body.cursor-medium,
body.cursor-medium a,
body.cursor-medium h3,
body.cursor-medium button,
body.cursor-medium input,
body.cursor-medium textarea,
body.cursor-medium select,
body.cursor-medium label,
body.cursor-medium [role="button"],
body.cursor-medium [role="link"],
body.cursor-medium [contenteditable],
body.cursor-medium .cursor-override,
body.cursor-medium * {
  cursor: url('../assets/cursor/cursor-50.png') 8 2, auto !important;
}

/* Cursor für große Größe (100px) */
body.cursor-large,
body.cursor-large a,
body.cursor-large h3,
body.cursor-large button,
body.cursor-large input,
body.cursor-large textarea,
body.cursor-large select,
body.cursor-large label,
body.cursor-large [role="button"],
body.cursor-large [role="link"],
body.cursor-large [contenteditable],
body.cursor-large .cursor-override,
body.cursor-large * {
  cursor: url('../assets/cursor/cursor-100.png') 16 4, auto !important;
}

html { scroll-behavior: smooth; }


/* Grundlegende Einstellungen */



.link-heading {
  color: inherit;
  text-decoration: none;
}

.link-heading:hover {
  text-decoration: underline;
}

:focus {
  outline: 2px solid #229954 !important;
  outline-offset: 2px;
}

:root {
  --primary-color: #003366;
  --accent-color: #229954;
  --background-color: #FFFFFF;
  --text-color: #333333;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}

a {
  text-decoration: none;
  color: inherit;
  font-weight: bold;
}

a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  padding: 0rem;
  flex: 1;
}

footer {
  background-color: var(--primary-color);
  color: white;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

body.no-scroll {
  overflow: hidden;
}

/* Startseite */

/* Hauptcontainer */
.page-wrapper {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* Abschnitte */
section {
  padding: 2rem;
  box-sizing: border-box;
}

/* 1. Abschnitt (Hintergrundbild) */
.hero-section {
  background-image: url('../images/startseite_3.png');
  background-size: cover;
  background-position: center;
  height: 500px; /* Oder eine andere Höhe, je nach Bedarf */
  color: white;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
}

.hero-section h1 {
  font-size: 2rem;
}

.hero-section p {
  font-size: 1.2rem;
}

/* 2. Abschnitt (Grauer Hintergrund) */
.gray-section {
  background-color: #f3f3f3; /* Grauer Hintergrund */
  color: #333;
}

/* 3. Abschnitt (Weißer Hintergrund) */
.white-section {
  background-color: #fff;
  color: #333;
}

/* Inhalt der Abschnitte */
.content {
  max-width: 900px;
  margin: 0 auto;
}

.box-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */

  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.box {
  position: relative;
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.box:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.link-button {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #229954; /* Grünton */
  border: none;
  color: white;
  font-weight: bold;
  font-size: 1rem;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
  transition: background-color 0.3s ease;
}

.link-button:hover {
  background-color: #1a7e43;
  color: white;
  text-decoration: none;
}

.box h3 {
  margin-top: 0;
  margin-left: 36px; /* Platz für Button */
  font-size: 1.25rem;
}

.box p {
  margin-left: 36px; /* Auch etwas eingerückt */
  color: #555;
  line-height: 1.4;
}

ul.news-preview {
  list-style: none; /* Keine Standard-Punkte */
  padding: 0;
  margin: 0;
  padding-left: 2em; /* Einrückung von links 1.2em */
}

ul.news-preview li {
  margin-bottom: 0.7em; /* Abstand 1rem */
  line-height: 1.5;
}

/* Letztes Element ohne extra Abstand */
ul.news-preview li:last-child {
  margin-bottom: 0;
}

/* Accessibility Slider */
.accessibility-slider {
  position: fixed;
  top: 0;
  right: -300px; /* Initial Position - außerhalb des Fensters */
  width: 300px;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
  transition: right 0.3s ease-in-out;
  z-index: 1200; /* Damit es über allem anderen liegt */
}

.accessibility-slider.open {
  right: 0; /* Wenn geöffnet, gleitet der Slider in Sicht */
}

.slider-content {
  padding: 20px;
  color: #333;
  max-height: 100vh;
  overflow-y: auto;
}

.slider-content h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.slider-content p {
  font-size: 1rem;
}

/* Schließen-Schaltfläche */
.close-slider {
  margin-top: 1.0rem;
  padding: 1rem 1.5rem; /* Längere Buttons */
  background-color: #229954;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%; /* Vollbreite */
}

.close-slider:hover,
.close-slider:focus {
  background-color: #1a7e43;
  outline: none;
}

/* Schaltflächen im Slider */
.slider-button {
  background-color: #229954;
  color: white;
  font-weight: bold;
  padding: 1rem 1.5rem; /* Längere Buttons */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin: 0.2rem 0;
  transition: background-color 0.3s ease;
  width: 100%; /* Vollbreite */
}

.slider-button.active {
  outline: 2.5px solid #8cf58c;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px #d6fad6;
}
.slider-button:focus {
  outline: 2.5px solid #229954 
  outline-offset: 2px;
}

.slider-button:hover,
.slider-button:focus {
  background-color: #1a7e43;
  outline: none;
}

#slider-description:empty {
  display: none;
}

/* Accessibility Button */
.accessibility-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #a3d2f2;
  color: white;
  font-size: 1.2rem;
  width: 42px;
  height: 40px;
  line-height: 44px;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  z-index: 1100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.accessibility-button:hover,
.accessibility-button:focus {
  background-color: #72aee6;
  outline: none;
}

.accessibility-button svg {
  fill: white;
  pointer-events: none;
}

body.overlay-visible {
  overflow: hidden;
}

/*  Dunkelmodus */

body.dark-mode #cookie-banner {
  background-color: #34495e;
  color: #fff;
  border: 1px solid #444;
}

body.dark-mode #cookie-banner a {
  color: #fff;
  text-decoration: underline;
}

body.dark-mode #cookie-banner button {
  background-color: #333;
  color: #fff;
  border: 1px solid #888;
}

body.dark-mode #cookie-banner button:hover {
  background-color: #555;
  color: #fff;
}


body.dark-mode .verkehrs-slider.umleitung .close-button {
  color: white;
}

body.dark-mode .verkehrs-slider.umleitung .close-button:hover {
  color: white;
}



body.dark-mode .tab-content {
  background-color: #34495e;
}

body.dark-mode th {
  background-color: #34495e;
  color: #fff;
}


body.dark-mode {
  background-color: #34495e;
  color: white;
}

body.dark-mode .footer-main {
  background-color: #34495e;
}

body.dark-mode .main-nav {
  background-color: #34495e;
}

body.dark-mode .slider-button {
  background-color: #1a7e43;
}

body.dark-mode .accessibility-slider {
  background-color: #2c3e50; /* Dunkler Hintergrund für den Slider */
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
}

body.dark-mode h1, 
body.dark-mode h3,
body.dark-mode p {
  color: white;
}

body.dark-mode .cta-button {
  color: white;
}


body.dark-mode .page-content h1,
body.dark-mode .page-content h2,
body.dark-mode .page-contenth3,
body.dark-mode .page-content p {
  color: white;
}


body.dark-mode .close-slider {
  background-color: #c0392b; /* Schließen-Button bleibt rot im Dunkelmodus */
}

body.dark-mode .slider-content h2 {
  color: white;
}

body.dark-mode .slider-button:hover {
  background-color: #27ae60; /* Button Hover im Dunkelmodus */
}

body.dark-mode .top-slogan {
  background-color: #34495e; /* Dunkler Hintergrund */
  color: white;
}

body.dark-mode .top-slogan h1,
body.dark-mode .top-slogan p {
  color: white;
}

body.dark-mode .gray-section {
  background-color: #34495e;
}

body.dark-mode .gray-section .content h2 {
  color: white;
}

body.dark-mode .white-section {
  background-color: #34495e;
}

body.dark-mode .white-section h2 {
  color: white;
}

body.dark-mode .box {
  background-color: #34485f; /* Etwas angepasst */
}

body.dark-mode a {
  color: #a3d2f2;
}

body.dark-mode a:hover {
  color: #72aee6;
}

body.dark-mode .timeline-entry .timeline-content {
  background-color: #2c3e50;
}

/* Dunkelmodus für die gesamte Topbar (Hintergrund und Schrift) */
body.dark-mode .topbar {
  background-color: #34485e; /* Dunkler Hintergrund */
  color: white;
}

body.dark-mode .topbar .main-nav {
  background-color: #34495e; /* Dunkler Hintergrund für Navigation */
}

/* Links im Menü */
body.dark-mode .topbar .main-nav a {
  color: white;
  transition: color 0.3s ease;
}

/* Aktiver Menüpunkt */
body.dark-mode .topbar .main-nav a.active {
  color: white;
  font-weight: bold;
}

/* Hover und Fokus */
body.dark-mode .topbar .main-nav a:hover,
body.dark-mode .topbar .main-nav a:focus {
  color: #a3d2f2; /* Hellblau als dezenter Hover-Effekt */
  outline: none;
}

/* Untermenü Hintergrund */
body.dark-mode .topbar .submenu {
  background-color: #34495e;
}

/* Pfeile in Weiß */
body.dark-mode .topbar .submenu-header .arrow {
  color: white;
  user-select: none;
}

/* Untermenü Links */
body.dark-mode .topbar .submenu a {
  color: white;
  padding: 0.5em 1em;
  display: block;
  transition: background-color 0.3s ease;
}

/* Untermenü Hover und Fokus */
body.dark-mode .topbar .submenu a:hover,
body.dark-mode .topbar .submenu a:focus {
  background-color: #2c3e50; /* Etwas dunkler als Hauptfarbe */
  outline: none;
}

body.dark-mode .topbar .submenu-header {
  background-color: #34495e; /* Dunkler Hintergrund für Submenü-Header */
  color: white; /* Weiße Schriftfarbe */
}

body.dark-mode .topbar .submenu-toggle {
  color: white; /* Weiße Farbe für das Submenü-Umschalten */
}

body.dark-mode .topbar .submenu-header .arrow {
  color: white; /* Weiße Pfeile */
}

/* Optional: Wenn das Submenü geöffnet ist */
body.dark-mode .topbar .submenu.open {
  background-color: #2c3e50; /* Etwas dunklerer Hintergrund, wenn Submenü geöffnet */
}

body.dark-mode .topbar .submenu a:hover {
  color: #a3d2f2; /* Hover-Farbe für die Links im Submenü */
}

body.dark-mode .timeline-content {
  background-color: #34495e; /* Dunkler Hintergrund */
}

/* Rahmen um Submenüs entfernen oder dunkel machen */
body.dark-mode .topbar .submenu {
  border: 1px solid #34495e; /* Dunkle Rahmenfarbe oder auf 'none' setzen zum Entfernen */
  /* border: none;  // wenn du komplett keinen Rahmen möchtest */
}

/* Hintergrund der Pfeile bei Fokus auf Menüpunkt */
body.dark-mode .topbar .submenu-header:focus-within,
body.dark-mode .topbar .submenu-header:hover {
  background-color: #34495e; /* Dunkler Hintergrund beim Fokus/Hover */
}

/* Optional: Wenn Pfeil-Button selbst einen Hintergrund hat (z.B. Toggle-Button), auch dunkel */
body.dark-mode .topbar .submenu-toggle:focus,
body.dark-mode .topbar .submenu-toggle:hover {
  background-color: #34495e;
  outline: none;
}

body.dark-mode .topbar .submenu-header {
  display: flex;              /* Flexbox für zusammenhängende Breite */
  align-items: center;        /* Vertikal zentrieren */
  background-color: transparent; /* Standard transparent */
  padding-right: 0;           /* Optional, falls zu viel Platz rechts ist */
}

/* Hover und Fokus Hintergrund für gesamtes Menüelement */
body.dark-mode .topbar .submenu-header:hover,
body.dark-mode .topbar .submenu-header:focus-within {
  background-color: #34495e;
}

/* Pfeil-Button soll keine Lücke zum Rest haben */
body.dark-mode .topbar .submenu-toggle {
  background-color: transparent; /* Standard transparent */
  border: none;                  /* Kein Rand */
  padding: 0 0.5rem;             /* Platz für Pfeil, aber minimal */
  margin-left: auto;             /* Pfeil ganz rechts */
  height: 100%;                  /* volle Höhe */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pfeil-Button im Hover/Fokus: selben Hintergrund wie Menü */
body.dark-mode .topbar .submenu-toggle:hover,
body.dark-mode .topbar .submenu-toggle:focus {
  background-color: #34495e;
  outline: none;
}

body.dark-mode .topbar nav.main-nav li.has-submenu:hover > .submenu-header,
body.dark-mode .topbar nav.main-nav li.has-submenu:focus-within > .submenu-header {
  background-color: #34495e;
}

body.dark-mode .topbar .submenu-header {
  display: flex;
  align-items: center;
  background-color: #34495e;
  cursor: pointer;
}

body.dark-mode .timeline-content h2,
body.dark-mode .timeline-content h3 {
  color: white;
}

body.dark-mode .page-header {
  background-color: #34495e; /* Dunkler Hintergrund */
}

body.dark-mode .breadcrumb {
  color: white;
}

body.dark-mode .content {
  color: white;
}

body.dark-mode .hero-section {
  filter: grayscale(50%);
}

body.dark-mode #slider-description,
body.dark-mode #accessibility-options
  {
  background: #34495e;
  color: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,0.15);
}

#dark-mode::before {
    font-family: "Font Awesome 6 Free";
    content: "\f186"; /* Mond */
    margin-right: 8px;
    font-weight: 900;
}

#dark-mode.active::before {
    content: "\f185"; /* Sonne */
}

body.dark-mode .box {
  background-color: #254356;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

body.dark-mode .box:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.8);
}

body.dark-mode .email-button {
  color: white;
}

body.dark-mode .email-button:hover {
  color: white;
}

body.dark-mode .nav-toggle .burger {
  background: #fff;
}

body.dark-mode .download-entry {
  background-color: #254356;
}

body.dark-mode .download-button {
  color: white;
}

body.dark-mode .download-button:hover {
  color: white;
}

body.dark-mode .drive-magazine .magazine-box {
  background: #34495e;
  color: #fff;
  border: 2px solid #fff;
}

body.dark-mode .magazine-details h3 {
  color: #fff;
}

body.dark-mode .magazine-details p {
  color: #fff;
}

body.dark-mode .magazine-image img {
  border: 2px solid #fff;
}


body.dark-mode .news .news-box {
  background: #34495e;
  color: #fff;
  border: 2px solid #fff;
}

body.dark-mode .news-details h3 {
  color: #fff;
}

body.dark-mode .news-details p {
  color: #fff;
}

body.dark-mode .news-image img {
  border: 2px solid #fff;
}


body.dark-mode .faq-item {
  border-color: #555;
  background-color: #2c3e50;
}

body.dark-mode .faq-question {
  background-color: #3b4a59;
  color: #fff;
}

body.dark-mode .faq-item.open .faq-question {
  background-color: #4b5c6d;
}

body.dark-mode .faq-answer {
  background-color: #2c3e50;
  color: #fff;
}

body.dark-mode .faq-question i {
  color: #fff;
}

body.dark-mode .price-tag {
  background-color: #d32f2f;
  color: white;
}

body.dark-mode .fahrplan-overview .fahrplan-grid .fahrplan-card {
  background-color: #34495e;
  border: 1px solid #fff;
}

body.dark-mode .fahrplan-card i,
body.dark-mode .fahrplan-card span {
    color: white !important;
}


body.dark-mode .fahrplan-card:hover i,
body.dark-mode .fahrplan-card:hover span {
    color: white !important;
}


body.dark-mode .themen-overview .themen-grid .themen-card {
  background-color: #34495e;
  border: 1px solid #fff;
}

body.dark-mode .themen-card i,
body.dark-mode .themen-card span {
    color: white !important;
}


body.dark-mode .themen-card:hover i,
body.dark-mode .themen-card:hover span {
    color: white !important;
}


body.dark-mode .download-group {
  background-color: #445875;
}

body.dark-mode .moonlight-grid {
  background-color:  #34495e;
}

body.dark-mode .moonlight-block {
  background-color: #445875;
}

body.dark-mode i {
  color: white !important;
}

body.dark-mode .fahrplan-button a{
  color: white !important;
}

body.dark-mode .cta-button:hover {
  color: white !important;
}

body.dark-mode .verkehrs-slider,
body.dark-mode .verkehrs-slider.umleitung,
body.dark-mode .verkehrs-slider .slide.umleitung {
  background-color: #34495e;
  color: white !important;
}

body.dark-mode .slide.umleitung a {
  color: white !important;
}

/*body.dark-mode .verkehrs-icon[title="Umleitung"] {
  color: #d1001c !important;
}*/

/*
body.dark-mode .verkehrs-icon[title="Info"] {
  color: #0078d4 !important;
}*/

body.dark-mode .search-box {
  background-color: #445875; !important;
  color: #fff !important;
  border: 2px solid #fff;
}

body.dark-mode .search-box mark {
  background-color: yellow !important;
  color: black !important;
  font-weight: bold;
}

body.dark-mode .bank-company {
  background-color: #2c3e50;
  color: #fff;
  border: 1px solid #555;
}

body.dark-mode .bank-company h3 {
  color: #90ee90; /* CI-freundliches Hellgrün oder Weiß */
}

body.dark-mode .bank-company p strong {
  color: #ffffff;
}

body.dark-mode .summary-modal {
  background: #2c3e50;
  border-color: #555;
  color: #fff;
}

body.dark-mode .form-hint {
  visibility: visible !important;
  display: block !important;
  color: #000000 !important;
}

/* Hoher Kontrast */


body.high-contrast .verkehrs-slider.umleitung .close-button {
  color: white;
}

body.high-contrast .verkehrs-slider.umleitung .close-button:hover {
  color: white;
}


body.high-contrast .form-hint {
  visibility: visible !important;
  display: block !important;
  color: #000000 !important;
}


body.high-contrast .summary-modal {
  background-color: #000;
  border-color: #fff;
  color: #000000;
}

body.high-contrast .bank-company {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

body.high-contrast .bank-company h3 {
  color: yellow !important;
  font-weight: bold;
}

body.high-contrast .bank-company p strong {
  color: cyan !important;
}


body.high-contrast .cookie-banner {
  background-color: #000 !important;
  color: #fff;
  border: 2px solid #fff;
}

body.high-contrast .cookie-banner a {
  color: yellow;
  font-weight: bold;
  text-decoration: underline;
}

body.high-contrast .cookie-banner button {
  background-color: #000;
  color: #fff;
  border: 2px solid #fff;
  font-weight: bold;
}

body.high-contrast .cookie-banner button:hover {
  background-color: #fff;
  color: #000;
}

body.high-contrast .tab-content {
  background-color: #000;
  color: #fff;
}

body.high-contrast th {
  background-color: #000;
  color: #fff;
}


body.high-contrast {
  background-color: #000;
  color: #fff;
}

body.high-contrast .nav-toggle .burger {
  background: #fff;
}

body.high-contrast .top-slogan {
  background-color: #000 !important;
  color: #fff !important;
}

body.high-contrast .content {
  color: white;
}

body.high-contrast .cta-button {
  color: white;
}

body.high-contrast .fahrplan-button a{
  color: white !important;
}

body.high-contrast .fahrplan-button:hover a{
  background-color: #1a7e43 !important;
  color: white !important;
}

body.high-contrast .cta-button:hover {
  background-color: #1a7e43 !important;
  color: white !important;
}

body.high-contrast .box {
  background-color: #254356;
  box-shadow: 0 2px 6px rgba(128, 128, 128, 0.6); /* grauer Schatten */
  border: 1px solid #fff; /* dünner weißer Rahmen */
}

body.high-contrast .box:hover {
  box-shadow: 0 8px 15px rgba(128, 128, 128, 0.9); /* stärkerer grauer Schatten beim Hover */
}

body.high-contrast .email-button {
  background: #808080 !important;
  color: white;
}

body.high-contrast .email-button:hover {
  background: #666666 !important;
  color: white;
}

body.high-contrast .fb-button {
  background: #808080 !important;
}

body.high-contrast .link-button {
  background: #808080 !important;
}

body.high-contrast .link-button:hover {
  background: white !important;
}

body.high-contrast .footer-main,
body.high-contrast .main-nav,
body.high-contrast .gray-section,
body.high-contrast .white-section,
body.high-contrast .box,
body.high-contrast .timeline-content,
body.high-contrast .topbar,
body.high-contrast .topbar .main-nav,
body.high-contrast .topbar .submenu,
body.high-contrast .topbar .submenu.open,
body.high-contrast .page-header,
body.high-contrast .accessibility-slider {
  background-color: #000 !important;
}

body.high-contrast .slider-button {
  background-color: #222 !important;
  color: #fff !important;
}

body.high-contrast .slider-button:hover,
body.high-contrast .slider-button:focus {
  background-color: #444 !important;
  color: #fff !important;
}

body.high-contrast .accessibility-slider {
  box-shadow: -2px 0 5px rgba(0,0,0,0.7);
}

body.high-contrast h1, 
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6,
body.high-contrast p,
body.high-contrast .slider-content h2,
body.high-contrast .top-slogan,
body.high-contrast .top-slogan h1,
body.high-contrast .top-slogan p,
body.high-contrast .gray-section .content h2,
body.high-contrast .white-section h2,
body.high-contrast .timeline-content h2,
body.high-contrast .timeline-content h3,
body.high-contrast .breadcrumb {
  color: #fff !important;
}

body.high-contrast a,
body.high-contrast .topbar .main-nav a,
body.high-contrast .topbar .submenu a {
  color: #fff !important;
}

body.high-contrast a:hover,
body.high-contrast .topbar .main-nav a:hover,
body.high-contrast .topbar .main-nav a:focus,
body.high-contrast .topbar .submenu a:hover,
body.high-contrast .topbar .submenu a:focus {
  color: #ccc !important;
  background-color: #111 !important;
  outline: none;
}

body.high-contrast .close-slider {
  background-color: #c0392b;
  color: #fff;
}

body.high-contrast .topbar .submenu-header,
body.high-contrast .topbar .submenu-header:hover,
body.high-contrast .topbar .submenu-header:focus-within,
body.high-contrast .topbar nav.main-nav li.has-submenu:hover > .submenu-header,
body.high-contrast .topbar nav.main-nav li.has-submenu:focus-within > .submenu-header {
  background-color: #000 !important;
  color: #fff !important;
}

body.high-contrast .topbar .submenu-toggle,
body.high-contrast .topbar .submenu-header .arrow {
  color: #fff !important;
  background: transparent !important;
}

body.high-contrast .topbar .submenu {
  border: 1px solid #111 !important;
}

body.high-contrast .timeline-entry .timeline-content {
  background-color: #000 !important;
}

body.high-contrast .slider-content {
  color: #fff !important;
}

body.high-contrast .back-to-top {
  background: #52af2f !important;   /* Hintergrund schwarz */
  color: #fff !important;        /* Schrift weiß */
  transition: background 0.2s, color 0.2s;
}

body.high-contrast .back-to-top:hover,
body.high-contrast .back-to-top:focus {
  background: #52af2f !important;   /* Beim Hover: Hintergrund weiß */
  color: #000 !important;        /* Schrift schwarz */

}

body.high-contrast .hero-section {
  filter: grayscale(100%);
}

body.high-contrast #slider-description,
body.high-contrast #accessibility-options
  {
  background: #222;
  color: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,0.15);
}

#high-contrast::before {
    font-family: "Font Awesome 6 Free";
    content: "\f042"; /* Adjust */
    margin-right: 8px;
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    text-rendering: auto;
}

#high-contrast.active::before {
    content: "\f042"; /* Adjust */
}

body.high-contrast .download-entry {
  background: #222;
  color: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,0.15);
}

body.high-contrast .download-button {
  color: white;
}

body.high-contrast .download-button:hover {
  color: white;
}

body.high-contrast .drive-magazine .magazine-box {
  background: #222;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

body.high-contrast .magazine-details h3 {
  color: #f0f0f0;
}

body.high-contrast .magazine-details p {
  color: #cccccc;
}

body.high-contrast .news .news-box {
  background: #222;
  color: #fff;
  border: 1px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

body.high-contrast .news-details h3 {
  color: #f0f0f0;
}

body.high-contrast .news-details p {
  color: #cccccc;
}

body.high-contrast .news-image img {
  border: 2px solid #fff;
}


body.high-contrast .download-group {
  background-color: #4b4b4b;
}

body.high-contrast .fahrplan-overview .fahrplan-grid .fahrplan-card {
  background-color: #201d1d;
  border: 1px solid #fff;
}

body.high-contrast .fahrplan-card i,
body.high-contrast .fahrplan-card span {
    color: white !important;
}

body.high-contrast .fahrplan-card:hover i,
body.high-contrast .fahrplan-card:hover span {
    color: white !important;
}

body.high-contrast .themen-overview .themen-grid .themen-card {
  background-color: #201d1d;
  border: 1px solid #fff;
}

body.high-contrast .themen-card i,
body.high-contrast .themen-card span {
    color: white !important;
}

body.high-contrast .themen-card:hover i,
body.high-contrast .themen-card:hover span {
    color: white !important;
}

body.high-contrast .faq-item {
  border: 1px solid #fff;
  background-color: #000;
}

body.high-contrast .faq-question {
  background-color: #000;
  color: #fff;
}

body.high-contrast .faq-item.open .faq-question {
  background-color: #111;
}

body.high-contrast .faq-answer {
  background-color: #000;
  color: #fff;
}

body.high-contrast .faq-question i {
  color: #fff;
}

body.high-contrast .price-tag {
  background-color: #fff;
  color: #000;
}

body.high-contrast .moonlight-grid {
  background-color: #000;
}

body.high-contrast .moonlight-block {
  background-color: #282828;
}

.moonlight-block i {
  color: white !important;
}

body.high-contrast i {
  color: white !important;
}

body.high-contrast img.logo-icon {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 4px;
  display: inline-block;
}

body.high-contrast .verkehrs-slider,
body.high-contrast .verkehrs-slider.umleitung,
body.high-contrast .verkehrs-slider .slide.umleitung {
  background-color: black;
  color: white !important;
}

body.high-contrast .slide.umleitung a {
  color: white !important;
}


body.high-contrast .verkehrs-icon[title="Umleitung"] {
  color: white !important;
}

/*
body.high-contrast .verkehrs-icon[title="Info"] {
  color: #0078d4 !important;
}*/


body.high-contrast .search-box {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff;
}

body.high-contrast .search-box mark {
  background-color: yellow !important;
  color: black !important;
  font-weight: bold;
}



body.high-contrast .fahrplan-button a,
body.high-contrast .fahrplan-button a:visited {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  font-weight: bold;
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none !important;
}

/* Hover- & Fokus-Zustand */
body.high-contrast .fahrplan-button a:hover,
body.high-contrast .fahrplan-button a:focus,
body.high-contrast .fahrplan-button a:active {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  text-decoration: none !important;
}




/* Textgrösse Slider-Icon */
#increase-font::before {
    font-family: "Font Awesome 6 Free";
    content: "\f034"; /* fa-text-height */
    margin-right: 8px;
    font-weight: 900;
    display: inline-block;
}

#decrease-font::before {
    font-family: "Font Awesome 6 Free";
    content: "\f034"; /* fa-text-height (gleiches Icon) */
    margin-right: 8px;
    font-weight: 900;
    display: inline-block;
}

/* Textabstand Slider-Icon */
#letter-spacing::before {
    font-family: "Font Awesome 6 Free";
    content: "\f035"; /* fa-text-width */
    margin-right: 8px;
    font-weight: 900;
    display: inline-block;
}

#letter-spacing.active::before {
    content: "\f035"; /* fa-text-width */
}

/* Linienabstand Slider-Icon */
#line-height-spacing::before {
    font-family: "Font Awesome 6 Free";
    content: "\f039"; /* fa-align-justify */
    margin-right: 8px;
    font-weight: 900;
    display: inline-block;
}

#line-height-spacing.active::before {
    content: "\f039"; /* fa-align-justify */
}

/* Schrift-Art Slider-Icon */
#change-font::before {
    font-family: "Font Awesome 6 Free";
    content: "\f031"; /* fa-font */
    margin-right: 8px;
    font-weight: 900;
    display: inline-block;
}

#change-font.active::before {
    content: "\f032"; /* fa-bold */
}

/* Einfache Sprache Slider-Icon */
#simple-text::before {
    font-family: "Font Awesome 6 Free";
    content: "\f1ae"; /* fa-child */
    margin-right: 8px;
    font-weight: 900;
    display: inline-block;
}

/* Vorlese-Funktion Slider-Icon */

#read-text::before {
    font-family: "Font Awesome 6 Free";
    content: "\f028"; /* fa-volume-up */
    margin-right: 8px;
    font-weight: 900;
    display: inline-block;
}

#read-text.active::before {
    content: "\f04d"; /* fa-stop */
}

#simple-text.active::before {
    content: "\f086"; /* fa-comments */
}


/* Mobile Anpassungen */
@media (max-width: 768px) {
  #cursor-toggle {
    display: none !important;
  }

  .hero-section {
    height: 300px;
  }

  .hero-section h1 {
    font-size: 1.0rem;
  }

  .hero-section p {
    font-size: 0.8rem;
  }

  .box-container {
    grid-template-columns: 1fr;
  }

   /* Cookie-Banner */
  #cookie-banner {
    width: 80vw;
    max-width: 300px;
    padding: 1.2rem;
  }

  #cookie-banner p {
    font-size: 0.95rem;
  }


}