@charset "utf-8";
/* CSS Document */

/* Barrierefrei Button ------------------------------------------------------------------ */
:root {
  --btn-size: 60px;
  --btn-color: #005D71;
  --btn-icon-size: 35px;
  --btn-border-width: 3px;
  --btn-border-hover: #ffffff;
  --btn-focus-ring: rgba(255, 204, 0, 0.5);
  --btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --btn-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.4);
  --btn-shadow-active: 0 3px 8px rgba(0, 0, 0, 0.4);
  --shimmer-color: rgba(255, 255, 255, 0.3);
  --shimmer-speed: 1s;
}

.assist-button {position:fixed;z-index:1000;bottom:20px;right:20px;width:var(--btn-size);height:var(--btn-size);background-color:var(--btn-color);border:var(--btn-border-width) solid transparent;border-radius:50%;box-shadow:var(--btn-shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;outline:none;transform-origin:center center;transition:transform 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;}
.assist-button::before {content:"";position:absolute;top:0;left:-75%;width:150%;height:100%;background:linear-gradient(120deg,rgba(255,255,255,0) 0%,var(--shimmer-color) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);pointer-events:none;}
.assist-button:hover::before {animation:shimmer var(--shimmer-speed) forwards;}
@keyframes shimmer {0%{left:-75%;}100%{left:100%;}}
.assist-button img {width:var(--btn-icon-size);height:var(--btn-icon-size);z-index:1;pointer-events:none;user-select:none;transition:none;}
.assist-button:hover {box-shadow:var(--btn-shadow-hover);border-color:var(--btn-border-hover);}
.assist-button:active,.assist-button.is-active {transform:scale(0.85);box-shadow:var(--btn-shadow-active);}
.assist-button:focus-visible {border-color:#ffcc00;box-shadow:0 0 0 4px var(--btn-focus-ring);}

.assist-button { touch-action: manipulation;}

/* Assist-Switch  ------------------------------------------------------------------------- */
:root {
  /* Assist-Switch Basis-Variablen */
  --assist-slider-w: 150px;
  --assist-slider-h: 30px;
  --assist-knob-size: 22px;
  --assist-spacing: 3px;
  --assist-label-font-size: 18px;
  --assist-label-spacing: 15px;
  --assist-bg-off: #e6e6e6;
  --assist-bg-on: #005D71;
  --assist-knob-bg: #fff;
  --assist-knob-border: rgba(0,0,0,0.2);
  --assist-label-font-family: font-family: Arial, Helvetica, sans-serif;
  --assist-label-color: #333;
  --assist-transition: .4s;  

  /* Neue Variablen zur Feinsteuerung der Knopf-Position */
  --switch-knob-offset-x: var(--assist-spacing);  
  --switch-knob-offset-y: var(--assist-spacing);  
  --switch-knob-translate: calc(
    var(--assist-slider-w)
    - var(--assist-knob-size)
    - var(--switch-knob-offset-x) * 3
  );
}
.assist-switch { display: inline-flex; align-items: center; cursor: pointer; user-select: none; position: relative; }
.assist-switch span { font-size: var(--assist-label-font-size); font-family: var(--assist-label-font-family); color: var(--assist-label-color); margin-right: var(--assist-label-spacing); }
.assist-switch input { position: absolute; width: 0; height: 0; opacity: 0; }
.assist-switch .slider { display: block; width: var(--assist-slider-w); height: var(--assist-slider-h); background-color: var(--assist-bg-off); border-radius: var(--assist-slider-h); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); transition: background-color var(--assist-transition), box-shadow var(--assist-transition); position: relative; }
.assist-switch .slider::before { content: ""; position: absolute; width: var(--assist-knob-size); height: var(--assist-knob-size); left: var(--switch-knob-offset-x); bottom: var(--switch-knob-offset-y); background-color: var(--assist-knob-bg); border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); border: 2px solid var(--assist-knob-border); transition: transform var(--assist-transition), background-color var(--assist-transition); }
.assist-switch:hover input:not(:checked) + .slider::before { background-color: var(--assist-bg-on); }
.assist-switch:hover input:checked + .slider::before { background-color: #eeeeee; }
.assist-switch input:checked + .slider { background-color: var(--assist-bg-on); box-shadow: inset 0 4px 8px rgba(0,0,0,0.3); }
.assist-switch input:checked + .slider::before { transform: translateX(var(--switch-knob-translate)); }
.assist-switch input:focus + .slider { outline: 3px solid #80bdff; outline-offset: 2px; }
.assist-switch .material-icons {font-family: 'Material Icons';font-size:20px;vertical-align:middle;margin-left:5px}

/* Barrierefrei Hauptmenü----------------------------------------------------------------------------------------------------------- */
#sideMenuBox { background-color: rgba(238, 238, 238, 0.0) }
#barrierBox { display: none; position: absolute; top:20px; right:20px; z-index:1000; max-width:800px; text-align: center; font-size: 20px; font-weight: 700; font-family: Arial, Helvetica, sans-serif; color: #333; padding: 20px 0; background-color: rgba(238, 238, 238, 0.95); border-radius: 20px;  
              border: 2px solid rgba(255, 255, 255, 0.8); box-shadow: 8px 8px 16px rgba(50,50, 50, 0.1),  -8px -8px 16px rgba(85,85, 85, 0.7);/* Glättung erzwingen (WebKit/Blink) */-webkit-font-smoothing: antialiased; outline: none; margin: 30px auto; }
#barrierMenu { list-style-type: none; padding: 30px; margin: 0 auto; width: 100%; }
#barrierMenu > li { margin: 5px; }
#barrierMenu > li > a:focus { background-color: #c0c0c0; color: #000; outline: 2px solid #000; }

#switchBox { width: 86%; max-width: 600px; margin: 0 auto 1em; padding: 1em; }
#switchMenu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; }
#switchMenu > li { margin-bottom: 0.5em; }

/* Gemeinsame Styles für alle Buttons in BarrierBox */
#barrierMenu > li > a,
#toggleItems > li > a { display:block; width:calc(80% - -10px); margin:0.4em 20px; padding:0.5em 0.75em; background:#e0e0e0; border-radius:10px; box-shadow:3px 3px 6px rgba(0,0,0,0.1), -3px -3px 6px rgba(255,255,255,0.7);
  color:#333; font-weight:600; text-align:center; text-decoration:none; font-size:1rem; transition:box-shadow 0.2s ease, transform 0.1s ease }

/* Spezieller, etwas dunklerer Hintergrund für Close-Button */
#barrierMenu > li > a#closeMenuLink { background: #cccccc }
#barrierMenu > li > a:hover,
#toggleItems > li > a:hover { box-shadow:5px 5px 8px rgba(0,0,0,0.15), -5px -5px 8px rgba(255,255,255,0.8); transform: translateY(-1px);}
#barrierMenu > li > a:active, #toggleItems > li > a:active { box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1), inset -2px -2px 4px rgba(255,255,255,0.7); transform: translateY(0) }
/* Fokus-Rahmen für Tastatur-Nutzer */
#barrierMenu > li > a:focus,
#toggleItems > li > a:focus { outline: 2px solid #ffa500; outline-offset: 3px }


.barrierefrei { position: absolute; z-index: 90; bottom: 10px; right: 40px; font-size: 12px; font-weight: normal; font-family: Montserrat, sans-serif; color: #666; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nocolor { filter: grayscale(100%); color: black !important; }
.markiert { background-color: #ff0; border: 3px solid #000; color: #000; }
.dark-mode .markiert { background-color: #ffeb3b; border: 3px solid #000; color: #000; }
.markiert:focus { outline: 3px dashed #000; }
.intro-hidden .intro { display: none !important; }
.intro-hidden #slider { display: none !important; }
.intro-hidden #header{ position:relative; z-index:100; top:0px; overflow:hidden; }  

.large #barrierBox { width:600px; font-size:24px; font-weight:700 }
.large #barrierMenu > li > a { width: 86%; font-size:20px; font-weight:700 }
.large .assist-switch { --assist-label-font-size:22px }
.large .assist-switch .material-icons {font-family: 'Material Icons';font-size:26px;vertical-align:middle;margin-left:5px}
.large #toggleItems > li > a { display:block; width:calc(85% - -10px); margin:0.4em 20px; padding:0.5em 0.75em; font-weight:600; font-size:1.2rem; }

.dark-mode #barrierBox { color: #fff; background-color: #333333 }
.dark-mode #barrierMenu > li > a { background-color: #666666; color: #fff }
.dark-mode #toggleItems > li > a { background-color: #666666; color: #fff }
.dark-mode #barrierMenu > li > a:focus { background-color:#bbbbbb; color:#fff }
.dark-mode .assist-switch { --assist-label-color:color: #fff;}

    /* Entferne Aufzählungszeichen und Einzug für alle ULs */
    #barrierMenu, #barrierMenu ul { list-style: none; margin: 0; padding: 0; }
    /* Styling für Box um Menüeinträge */
    .menu-box { background: rgba(238, 238, 238, 0.95); border-radius: 8px; padding: 10px; margin-top: 5px; }
    /* initial versteckt mit 0 Höhe und 0 Opazität */
    #toggleItems { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; }
    /* Abstand zwischen den Einträgen */
    #toggleItems li { margin: 0.5em 0; }
    /* im expanded-Zustand sichtbar */
    #barrierMenu.expanded #toggleItems { max-height: 1000px; opacity: 1; }



/* Barrierefrei Large ----------------------------------------------------------------------------------------------------------- */
.large { --font-h1: 34px; --font-h2: 26px; --font-h3: 28px; --font-h4: 26px; --font-h5: 24px; --font-h6: 22px; --font-h7: 28px; }
.large .box_txt1 { top:10px; font-size:26px; }
.large .box_txt2 { top:10px; font-size:20px; }
.large .infobox1 { position:relative; width:100%; height:480px; margin:20px; border:1px solid #ccc; padding:10px; background-color:#fff; flex-basis:38% }
.large .box_zeiten1 { position:relative; width:80%; font-size:26px }

.large .td2b{ width:97%; padding-left:10px; font-size:24px; }

.large .zeiten1 { position:relative; top:15px; width:45px; height:45px } 
.large .punkt1 { margin-bottom:-6px; padding-right:10px; width:30px; height:30px }
.large .punkt2{  top:-2px; width:30px; height:auto; padding: 0px 8px 0 0}
.large .ikont1 { position:relative; top:9px; padding-right:6px; width:35px; height:auto }

.large .nav1 a, .large .nav1 a:hover, .large .nav1 a:active { font-size:26px }
.large .nav2 a, .large .nav2 a:hover, .large .nav2 a:active { font-size:24px }

.large .cont_bg1, .large .cont_bg2, .large .cont_bg3, .large .cont_bg4 { opacity:0.2 }

/* Barrierefrei Dark-Mode ----------------------------------------------------------------------------------------------------------- */
.dark-mode { background-color: #000000; color: #ffffff; }
.dark-mode #data1, .dark-mode #data2 { background-color: #000000; color: #ffffff; }
.dark-mode { --color-h1: #fff; --color-h2: #fff; --color-h3: #fff; --color-h4: #f79da1; --color-h5: #ddd; --color-h6: #bbb; --color-h7: #f79da1; }

.dark-mode .td2b{ color:#fd7177; }

.dark-mode .nav1 a { color: #ddd; }
.dark-mode .nav1 a:hover { color: #fff; }
.dark-mode .nav1 a:active { color: #ddd; }
.dark-mode .nav2 a { color: #ddd; }
.dark-mode .nav2 a:hover { color: #fff; }
.dark-mode .nav2 a:active { color: #ddd; }
.dark-mode .nav3 a { color: #ddd; }
.dark-mode .nav3 a:hover { color: #fff; }
.dark-mode .nav3 a:active { color: #ddd; }
.dark-mode .cont_bg1a, .dark-mode .cont_bg2, .dark-mode .cont_bg3, .dark-mode .cont_bg4 { display: none; }
.dark-mode .falte { display: none; }
.dark-mode .intro { filter: invert(100%); }
.dark-mode .flexbox1 { filter: invert(100%); }
.dark-mode #header { filter: invert(100%); }
.dark-mode #menu { filter: invert(100%); }
.dark-mode .assist-button { filter: invert(100%); }
.dark-mode #foot, .dark-mode #foot_end { background: rgba(0,0,0,1); }

/* Tablet Querformat (Landscape) - PC mit geringer Auflösung */
@media only screen and (min-width: 991px) and (max-width: 1220px) { 
.barrierefrei { bottom: 5px; right:20px; }
}

/* Tablet Hochformat (Portrait) */
@media only screen and (min-width: 761px) and (max-width: 990px) { 
#barrierBox { display: none; width:500px; text-align: center; right:-20px; top:80px; font-size: 20px; padding: 15px 0; border-radius: 20px; margin: 10px auto;}
#barrierMenu > li > a { width:85%; font-size: 18px; } 
:root { --btn-size: 35px; --btn-icon-size:25px; --assist-slider-w:150px; --assist-slider-h:30px; --assist-knob-size:22px; --assist-spacing:3px; --assist-label-font-size:18px; --assist-label-spacing:15px }
.assist-button {position:fixed;bottom:15px;right:15px;}
    
.barrierefrei { bottom: 0px; left:20px; font-size: 11px; }
    
.large #barrierBox { width:100%; font-size:24px; font-weight:700 }
.large #barrierMenu > li > a { width: 85%; font-size:22px }
.large .assist-switch { --assist-label-font-size:22px }
.large .assist-switch .material-icons {font-family: 'Material Icons';font-size:22px;vertical-align:middle;margin-left:5px}  
}

/* Smartphone Querformat (Landscape) */
@media only screen and (min-width: 481px) and (max-width: 760px) {
#barrierBox { display: none; width: 100%; text-align: center; right:0px; top:70px; font-size: 20px; padding: 15px 0; border-radius: 0; margin: 10px auto;}
#barrierMenu > li > a { width: 85%; font-size: 18px; } 
:root { --btn-size: 35px; --btn-icon-size:25px; --assist-slider-w:150px; --assist-slider-h:30px; --assist-knob-size:22px; --assist-spacing:3px; --assist-label-font-size:18px; --assist-label-spacing:15px }
.assist-button {position:fixed;bottom:15px;right:15px;}
    
.barrierefrei { bottom: 20px; left: 10px; font-size: 11px; }

.large #barrierBox { width:100%; font-size:24px; font-weight:700 }
.large #barrierMenu > li > a { width: 85%; font-size:22px }
.large .assist-switch { --assist-label-font-size:22px }
.large .assist-switch .material-icons {font-family: 'Material Icons';font-size:22px;vertical-align:middle;margin-left:5px}
/* Large Seite */
.large { --font-h1:28px; --font-h2:22px; --font-h3:24px; --font-h4:22px; --font-h5:20px; --font-h6:16px; --font-h7:24px }
.large .box_txt1 { top:10px; font-size:24px; }
.large .box_txt2 { top:10px; font-size:20px; }
.large .infobox1 { position:relative; width:100%; height:500px; margin:10px; border:1px solid #ccc; padding:10px; background-color:#fff; flex-basis:38% }
.large .box_zeiten1 { position:relative; width:100%; font-size:20px }

.large .td2b{ width:97%; padding-left:10px; font-size:20px; }

.large .zeiten1 { position:relative; top:6px; width:30px; height:30px } 
.large .punkt1 { margin-bottom:-6px; padding-right:10px; width:25px; height:25px }
.large .punkt2{  top:0px; width:25px; height:auto; padding: 0px 8px 0 0}
.large .ikont1 { position:relative; top:9px; padding-right:6px; width:30px; height:auto }

.large .nav1 a, .large .nav1 a:hover, .large .nav1 a:active { font-size:22px }
.large .nav2 a, .large .nav2 a:hover, .large .nav2 a:active { font-size:20px }
  }

/* Smartphone Hochformat (Portrait) */
@media only screen and (min-width: 240px) and (max-width: 480px) {
#barrierBox { display: none; width: 100%; text-align: center; right:0px; top:70px; font-size: 18px; padding: 15px 0; border-radius: 0; margin: 10px auto;}
#barrierMenu > li > a { width: 85%; font-size: 16px; } 
:root { --btn-size: 35px; --btn-icon-size:25px; --assist-slider-w:120px; --assist-slider-h:28px; --assist-knob-size:20px; --assist-spacing:3px; --assist-label-font-size:16px; --assist-label-spacing:15px }
.assist-button {position:fixed;bottom:15px;right:15px;}
    
.barrierefrei { bottom: 10px; left: 10px; font-size: 11px; }
    
.large #barrierBox { width:100%; font-size:22px; font-weight:700 }
.large #barrierMenu > li > a { width: 85%; font-size:20px }
.large .assist-switch { --assist-label-font-size:20px }
.large .assist-switch .material-icons {font-family: 'Material Icons';font-size:20px;vertical-align:middle;margin-left:5px} 
/* Large Seite */
.large { --font-h1: 26px; --font-h2: 20px; --font-h3: 22px; --font-h4: 20px; --font-h5: 18px; --font-h6: 16px; --font-h7: 22px; }
.large .box_txt1 { top:10px; font-size:22px; }
.large .box_txt2 { top:10px; font-size:18px; }
.large .infobox1 { position:relative; width:100%; height:450px; margin:20px; border:1px solid #ccc; padding:10px; background-color:#fff; flex-basis:98% }
.large .box_zeiten1 { position:relative; width:100%; font-size:18px }
    
.large .td2a{ display: table-cell; vertical-align:top; width:4%; padding:3px 0 0 0}
.large .td2b{ width:96%; padding-left:10px; font-size:18px; }

.large .zeiten1 { display:none } 
.large .punkt1 { margin-bottom:-6px; padding-right:10px; width:25px; height:25px }
.large .punkt2{  top:0px; width:25px; height:auto; padding: 0px 8px 0 0}
.large .ikont1 { position:relative; top:9px; padding-right:6px; width:25px; height:auto }

.large .nav1 a, .large .nav1 a:hover, .large .nav1 a:active { font-size:20px }
.large .nav2 a, .large .nav2 a:hover, .large .nav2 a:active { font-size:18px }
    
 }