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

/* Barrierefrei Button ------------------------------------------------------------------ */
:root {
  --btn-size: 60px;
  --btn-color: #C5474C;
  --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; transition: all 0.3s ease, opacity 0.3s ease, transform 0.3s ease; outline: none; overflow: hidden; }
.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; }
.assist-button:hover { box-shadow: var(--btn-shadow-hover); border-color: var(--btn-border-hover); }
.assist-button:active { transform: scale(0.95); box-shadow: var(--btn-shadow-active); }
.assist-button:focus-visible { border-color: #ffcc00; box-shadow: 0 0 0 4px var(--btn-focus-ring); }

/* Assist-Switch  ------------------------------------------------------------------------- */
:root {
  --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: #C5474C;
  --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;  

  --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 #C5474C; outline-offset: 3px }

/* 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 { 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 #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 #barrierMenu > li > a:focus { background-color:#bbbbbb; color:#fff }
.dark-mode .assist-switch { --assist-label-color:color: #fff;}

/* Barrierefrei Large ----------------------------------------------------------------------------------------------------------- */
.large { --font-h1:34px; --font-h2:26px; --font-h3:28px; --font-h4:26px; --font-h5:24px; --font-h6:22px; --font-h8:28px;}
.large .nav1 a, .large .nav1 a:hover, .large .nav1 a:active { font-size: 28px; }
.large .nav2 a, .large .nav2 a:hover, .large .nav2 a:active { font-size: 24px; }
.large .nav3 a, .large .nav3 a:hover, .large .nav3 a:active { font-size: 22px; }

.large .info1{ position:relative; z-index:10; width:800px; height:auto; left:0px} 
.large .info2{ position:relative; z-index:10; width:900px; height:auto; left:0px} 
.large .box_zeiten1 { position:relative; margin:0 auto; width:800px; text-align:left; font-family:'Open Sans', sans-serif; font-size:28px;}

.large .btnbox1{ position:relative; width:400px; height:auto; padding:10px; }
.large .btnbox2{ position:relative; width:420px; height:auto; padding:10px; }

.large .icons3 { position:relative; width:30px; height:30px; top:5px; padding-right:6px; }
.large .ikont1 { position:relative; top:9px; padding-right:6px; width:35px; height:auto }
.large .impp1 { margin-bottom:-8px; padding-right:10px; width:35px; height:35px }


/* Barrierefrei Dark-Mode ----------------------------------------------------------------------------------------------------------- */
.dark-mode { 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-h8:#f79da1 }

.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 { background-color:#000000; color:#ffffff;}
.dark-mode .cont_bg1,.dark-mode .cont_bg2,.dark-mode .cont_bg3,.dark-mode .cont_bg4,.dark-mode .cont_bg8 {display:none}
.dark-mode .i-kf1{ display:none} 
.dark-mode .box_zeiten1 { filter: invert(100%);}
.dark-mode .bg_zeiten1 { background:#000; } 
.dark-mode .info1,.dark-mode .info2 { filter: invert(100%);}
.dark-mode .intro { filter: invert(100%);}
.dark-mode #header { filter: invert(100%);}
.dark-mode #menu { filter: invert(100%);}
.dark-mode #foot  { background: rgba(0,0,0,1);}
.dark-mode #foot_end { background: rgba(0,0,0,1);}
.dark-mode .flexbox1 { filter: invert(100%);}
.dark-mode .cont_bg1, .dark-mode .cont_bg2, .dark-mode .cont_bg3, .dark-mode .cont_bg4, .dark-mode .cont_bg8 {display:none}


/* Tablet Querformat (Landscape) - PC mit geringer Auflösung */
@media only screen and (min-width: 991px) and (max-width: 1220px) {
.large .info1{ position:relative; z-index:10; width:750px; height:auto; left:0px} 
.large .info2{ position:relative; z-index:10; width:850px; height:auto; left:0px} 

.large .box_zeiten1 { position:relative; width:90%; font-size:26px; }
.large .box_zeiten2 { position:relative; width:90%; font-size:28px; }
    
}

/* 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: 10px; 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 .info1{ position:relative; z-index:10; width:700px; height:auto; left:0px} 
.large .info2{ position:relative; z-index:10; width:800px; height:auto; left:0px} 
    
.large .box_zeiten1 { position:relative; width:99%; font-size:24px; }
.large .box_zeiten2 { position:relative; width:99%; font-size:26px; }
.large .tb1a{ display: table-cell; vertical-align:text-top; width:50%}
.large .tb1b{ display: table-cell; vertical-align:text-top; width:5%}
.large .tb1c{ display: table-cell; vertical-align:text-top; width:45%}
    
.zeiten1{ position:relative; top:4px; width:25px; height:25px } 
    
}

/* 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: 10px; 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:20px; --font-h3:22px; --font-h4:22px; --font-h5:22px; --font-h6:16px; --font-h8:20px;} 
.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; }
.large .nav3 a, .large .nav3 a:hover, .large .nav3 a:active { font-size: 18px; }
.large .info1{ position:relative; z-index:10; width:650px; height:auto; left:0px} 
.large .info2{ position:relative; z-index:10; width:720px; height:auto; left:0px} 
.large .i-kf1{ display:none} 
.large .btnbox1{ position:relative; width:70%; height:auto; padding:10px; }
.large .btnbox2{ position:relative; width:70%; height:auto; padding:10px; }
.large .box_zeiten1 { position:relative; width:98%; font-size:22px; }
.large .box_zeiten2 { position:relative; width:98%; font-size:24px; }
.large .tb1a{ display: table-cell; vertical-align:text-top; width:50%}
.large .tb1b{ display: table-cell; vertical-align:text-top; width:5%}
.large .tb1c{ display: table-cell; vertical-align:text-top; width:45%}
    
.large .icons3 { position:relative; width:20px; height:25px; top:5px; padding-right:6px; }
.large .ikont1 { position:relative; top:6px; padding-right:6px; width:25px; height:auto }
.large .impp1 { margin-bottom:-3x; padding-right:10px; width:30x; height:30x }
.large .zeiten1{ position:relative; top:4px; width:22px; height:22px } 
}

/* 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:18px; --font-h3:20px; --font-h4:20px; --font-h5:20px; --font-h6:14px; --font-h8:18px;}
.large .nav1 a, .large .nav1 a:hover, .large .nav1 a:active { font-size: 18px; }
.large .nav2 a, .large .nav2 a:hover, .large .nav2 a:active { font-size: 16px; }
.large .nav3 a, .large .nav3 a:hover, .large .nav3 a:active { font-size: 16px; }
.large .info1 { position:relative; z-index:10; width:100%; height:auto; left:0px} 
.large .info2 { position:relative; z-index:10; width:100%; height:auto; left:0px} 
.large .i-kf1 { display:none} 
.large .btnbox1 { position:relative; width:70%; height:auto; padding:10px; }
.large .btnbox2 { position:relative; width:70%; height:auto; padding:10px; }
.large .box_zeiten1 { position:relative; width:95%; font-size:20px; }
.large .box_zeiten2 { position:relative; width:95%; font-size:22px; }
.large .tb1a{ display: table-cell; vertical-align:text-top; width:60%}
.large .tb1b{ display: table-cell; vertical-align:text-top; width:0%}
.large .tb1c{ display: table-cell; vertical-align:text-top; width:40%}

.large .icons3 { position:relative; width:20px; height:20px; top:5px; padding-right:6px; }
.large .ikont1 { position:relative; top:7px; padding-right:6px; width:25px; height:auto }
.large .impp1 { margin-bottom:-8; padding-right:10px; width:25px; height:25px }
.large .zeiten1 { display:none}
 }