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

/* Barrierefrei Button ------------------------------------------------------------------ */
:root {
  --btn-size: 60px;
  --btn-color: #136695;
  --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: #136695;
  --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ü----------------------------------------------------------------------------------------------------------- */
#barrierBox { display: none; position: absolute; top:20px; right:20px; z-index: 1000; width: 600px; 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; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); margin: 30px auto; }
#barrierMenu { list-style-type: none; padding: 30px; margin: 0 auto; width: 100%; }
#barrierMenu > li { margin: 5px; }
#barrierMenu > li > a { display: block; width: 86%; padding: 5px; text-decoration: none; background-color: #dddddd; border-radius: 5px; font-size: 18px; font-weight: 700; font-family: Arial, Helvetica, sans-serif; color: #333; text-align: center; }
#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; }

.barrierefrei { position: absolute; z-index: 90; bottom: 10px; right: 40px; font-size: 12px; font-weight: normal; font-family: 'Open Sans', 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}

.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:40px; --font-h2:28px; --font-h3:32px; --font-h5:28px; --font-h6:28px; --font-h7:24px; --font-h8:22px;}

.large .infobox1{ top:-38px; left:40px; width:800px; font-size:28px; font-weight:400;  }
.large .infobox2{ top:-34px; left:40px; width:800px; font-size:28px; font-weight:400;  }
.large .icons1 { position:relative; width:30px; height:30px; top:5px; padding-right:6px; }
.large .ikont1 { position:relative; top:6px; padding-right:6px; width:30px; 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 .nav3 a, .large .nav3 a:hover, .large .nav3 a:active { font-size:26px }

.large #cont_bg1, .dark-mode #cont_bg2, .dark-mode #cont_bg3 {display:none}

.large .textbox1{ position:relative; font-size:26px; font-weight:400 }
.large .textbox2{ position:relative; font-size:26px; font-weight:400 }

.large .btnbox1 { position:relative; z-index:5; width:400px; height:220px; margin:0 10px 20px 10px; }
.large .boxinfo1 { position:absolute; width:100%; top:15px; padding:0; font-size:28px; font-weight:400;}
.large .icons_size1, .large .icon1, .large .icon2, .large .icon3, .large .icon4, .large .icon5, .large .icon6, .large .icon7, .large .icon8 {
 position:absolute; z-index:10; display:block; margin:0 auto; width:300px; height:130px; top:80px; left:40px; background-size:280px} 

/* Barrierefrei Dark-Mode ----------------------------------------------------------------------------------------------------------- */
.dark-mode { background-color: #000000; color: #ffffff; }
.dark-mode { --color-h1:#fff; --color-h2:#eee; --color-h3:#fff; --color-h5:#1DA1EC; --color-h6:#FAA2A5; --color-h7:#fff; --color-h8:#fff }
.dark-mode .contbox2{ background: rgba(30,30,30,1)  }
.dark-mode .contbox3{ filter: invert(100%); }
.dark-mode .infobox1{ color:#7dc7f1  }
.dark-mode .infobox2{ color:#f69fa3  }
.dark-mode .leist1, .leist2 { display:none}

.dark-mode .textbox1{ color: #fff;  }
.dark-mode .textbox2{ color: #fff;  }

.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 #cont_bg1, .dark-mode #cont_bg2, .dark-mode #cont_bg3 {display:none}
.dark-mode .intro { filter: invert(100%); }
.dark-mode #header { filter: invert(100%); }
.dark-mode #menu { filter: invert(100%); }
.dark-mode .flexbox1 { filter: invert(100%); }
.dark-mode .assist-button { filter: invert(100%); }
.dark-mode #foot, .dark-mode #foot_cont2 { background: rgba(0,0,0,1); }

.dark-mode .ikont1 { filter: invert(100%); }


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

/* 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 .textbox1{ position:relative; font-size:24px; font-weight:400 }
.large .textbox2{ position:relative; font-size:24px; font-weight:400 }}
    
.large .infobox1{ top:-28px; left:40px; width:100%; font-size:24px; font-weight:400;  }
.large .infobox2{ top:-32px; left:40px; width:80%; font-size:28px; font-weight:400;  }
.large .icons1 { position:relative; width:25px; height:25px; top:5px; padding-right:6px; }
    
}

/* 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:26px; --font-h2:22px; --font-h3:24px; --font-h5:26px; --font-h6:26px; --font-h7:20px; --font-h8:20px;}
.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: 18px; }
.large .nav3 a, .large .nav3 a:hover, .large .nav3 a:active { font-size: 20px; }

.large .infobox1{ top:-28px; left:40px; width:92%; font-size:24px; font-weight:400;  }
.large .infobox2{ top:-28px; left:40px; width:92%; font-size:24px; font-weight:400;  }
.large .icons1 { position:relative; width:25px; height:25px; top:5px; padding-right:6px; }
    
.large .textbox1{ position:relative; font-size:22px; font-weight:400 }
.large .textbox2{ position:relative; font-size:22px; font-weight:400 }
    
.large .leist1 { display:none }

.large .btnbox1 { position:relative; z-index:5; width:300px; height:180px; margin:0 10px 20px 10px; }
.large .boxinfo1 { position:absolute; width:100%; top:15px; padding:0; font-size:20px; font-weight:400;}
.large .icons_size1, .large .icon1, .large .icon2, .large .icon3, .large .icon4, .large .icon5, .large .icon6, .large .icon7, .large .icon8 {
 position: absolute; z-index:10; display:block; margin:0 auto; width:300px; height:120px; top:60px; left:40px; background-size:200px} 
.large .ikont1 { position:relative; top:6px; padding-right:6px; width:28px; height:auto }
}

/* 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:24px; --font-h2:20px; --font-h3:22px; --font-h5:24px; --font-h6:24px; --font-h7:18px; --font-h8:18px;} 
.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: 16px; }
.large .nav3 a, .large .nav3 a:hover, .large .nav3 a:active { font-size: 18px; }  
    
.large .infobox1{ top:-24px; left:30px; width:90%; font-size:20px; font-weight:400;  }
.large .infobox2{ top:-24px; left:30px; width:90%; font-size:20px; font-weight:400;  }
.large .icons1 { position:relative; width:20px; height:20px; top:5px; padding-right:6px; }
    
.large .leist1 { display:none }
    
.large .textbox1{ position:relative; font-size:20px; font-weight:400 }
.large .textbox2{ position:relative; font-size:20px; font-weight:400 }

.large .btnbox1 { position:relative; z-index:5; width:300px; height:180px; margin:0 10px 20px 10px; }
.large .boxinfo1 { position:absolute; width:100%; top:15px; padding:0; font-size:20px; font-weight:400;}
.large .icons_size1, .large .icon1, .large .icon2, .large .icon3, .large .icon4, .large .icon5, .large .icon6, .large .icon7, .large .icon8 {
 position: absolute; z-index:10; display:block; margin:0 auto; width:300px; height:120px; top:60px; left:40px; background-size:220px} 
.large .ikont1 { position:relative; top:6px; padding-right:6px; width:25px; height:auto }
 }