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

:focus { outline: none;}
.focusable:focus-visible { outline: 3px solid #137066; outline-offset: 2px;}
.focusable-icon { display: inline-block; width: 90px; height: 90px }

/* Barrierefrei Button ------------------------------------------------------------------ */
:root {
  --btn-size: 60px;
  --btn-color: #1c8e81;
  --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); }

/* Einflug-Animation definieren */
@keyframes fly-in {
  from {
    transform: translateX(-150%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Animation auf den Button anwenden */
.assist-button {
  /* Ausgangszustand vor der Animation */
  transform: translateX(-150%);
  opacity: 0;

  /* Animationseinstellungen */
  animation-name: fly-in;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards; /* behalten des Endzustands */
  /* Delay, falls gewünscht, z.B. 0.2s:
  animation-delay: 0.2s;
  */
}

/* 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: #1c8e81;
  --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 #1c8e81; outline-offset: 2px; }
.assist-switch .material-icons {font-family: 'Material Icons';font-size:20px;vertical-align:middle;margin-left:5px}

/* Barrierefrei Hauptmenü----------------------------------------------------------------------------------------------------------- */
#sideMenuBox {  margin-top:10px; padding:10px; border-radius:8px; 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; }

.bf-icon { position:absolute; top:10px; left:20px; width:50px; height:50px; background: url("../layout/icons/bf-icon1.svg") no-repeat center center; background-size: contain;}

/* 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 #1c8e81; outline-offset: 3px }
/* Entferne Aufzählungszeichen und Einzug für alle ULs */
#barrierMenu, #barrierMenu ul { list-style: none; margin: 0; padding: 0; }
/* 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; scroll-behavior: smooth;  max-height: 10px; overflow-y: auto; transition: max-height 0.3s ease, opacity 0.3s ease;}
/* Abstand zwischen den Einträgen */
 #toggleItems li { margin: 0.6em 0; }
/* im expanded-Zustand sichtbar */
#barrierMenu.expanded #toggleItems { max-height: 30vh; opacity: 1; }

.barrierefrei { position:absolute; z-index:90; right:20px; bottom:5px; right:40px; font-size:12px; font-weight:normal; font-family:Cinzel, cinzel; 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; }
.large .bf-icon { position:absolute; top:10px; left:20px; width:70px; height:70px; background: url("../layout/icons/bf-icon1.svg") no-repeat center center; background-size: contain;}

.dark-mode #barrierBox { color: #fff; background-color: #333333 }
.dark-mode #barrierMenu > li > a { filter: invert(100%); }
.dark-mode #barrierMenu > li > a:focus { filter: invert(100%); }
.dark-mode .assist-switch { filter: invert(100%); }
.dark-mode #toggleItems { filter: invert(100%); }
.dark-mode .bf-icon  { filter: invert(100%); }

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

.large .cont_bg1, .large .cont_bg2, .large .cont_bg3 { opacity:0.2 }
.large .txtseq1 { position:absolute; z-index:30; width:1200px; height:auto; left:0px; bottom:160px }

.large .info1{ font-size:22px; width:90%}

.large .sprechstunden { width:700px }
.large .box_zeiten1 { font-size:32px}

.large .zeiten1{ position:relative; top:12px; width:45px; height:45px } 
.large .punkt1{ margin-bottom:-46px; width:28px; height:28px } 
.large .punkt2{ margin-bottom:-42px; width:30px; height:30px } 
.large .punkt3{ margin-bottom:-4px; width:30px; height:30px } 
.large .ikont{ margin-bottom: -8px; width:35px; height:35px } 
.large .list1 { margin-bottom:-10px; width:35px; height:35px}
.large .textblock1{ position:relative; left:40px; height:auto}
.large .textblock2 { position:relative; left:35px; height:auto}

/* Barrierefrei Dark-Mode ----------------------------------------------------------------------------------------------------------- */
.dark-mode { background-color:#000000; color:#ffffff; }
.dark-mode #data { background-color:#000000; color:#ffffff; }
.dark-mode #cont_bg1, .dark-mode #cont_bg2, .dark-mode #cont_bg3 { display:none; }
.dark-mode #foot_cont{ background:#000; }
.dark-mode { --color-h1: #fff; --color-h2: #fff; --color-h3: #fff; --color-h4: #1c8e81; --color-h5: #ddd; --color-h6: #bbb; --color-h7: #1c8e81; }

.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 .falte2 { filter: invert(100%); }
.dark-mode .intro { filter: invert(100%); }
.dark-mode .txtseq1 { filter: invert(100%); bottom:120px }
.dark-mode #header { filter: invert(100%); }
.dark-mode #menu { filter: invert(100%); }
.dark-mode .box_zeiten1 { filter: invert(100%); }
.dark-mode .textblock1, .dark-mode .textblock2 { filter: invert(100%); }

.dark-mode .auswahl, .dark-mode .auswahl1 { filter: invert(100%); }
.dark-mode .assist-button { filter: invert(100%); }
.dark-mode #foot, .dark-mode #foot2 { 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) {

.large .txtseq1 {width:90%; bottom:220px }  
    
}

/* 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 h1 { font-size: 32px; font-weight:700; font-family: Cinzel, cinzel; color: #1c8e81; margin: 0px }
.large h2 { font-size: 26px; font-weight:400; font-family: Cinzel, cinzel; color: #173330; margin: 0px }
.large h3 { font-size: 23px; font-weight:400; font-family: Cinzel, cinzel; color: #173330; margin: 0px }
.large h4 { font-size: 21px; font-weight:400; font-family: Cinzel, cinzel; color: #173330; margin: 0px }
.large h5 { font-size: 18px; font-weight:400; font-family: Cinzel, cinzel; color: #173330; margin: 0px }
.large h6 { font-size: 18px; font-weight:400; font-family: Cinzel, cinzel; color: #666666; margin: 0px }
.large h7 { font-size: 28px; font-weight:700; font-family: Cinzel, cinzel; color: #1c8e81; margin: 0px }
       
.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:30px }
    
.large .sprechstunden { width:100% }
.large .box_zeiten1 { font-size:28px}
.tb1a{ left:10px; width:40%}
.tb1b{ width:10%}
.tb1c{ right:0px; width:40%}
    
.large .txtseq1 {width:98%; bottom:200px }  
    
.large .textblock1{ position:relative; left:40px; width:96%; height:auto }
.large .textblock2 { position:relative; left:40px; width:95%; height:auto}
    
}

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

.large .sprechstunden { width:100% }
.large .box_zeiten1 { font-size:24px}
.large .tb1a{ left:10px; width:40%}
.large .tb1b{ width:10%}
.large .tb1c{ right:0px; width:40%}
 .large .info1{ font-size:22px; width:90%}
    
.large .zeiten1{ position:relative; top:8px; width:30px; height:30px } 
.large .punkt1{ margin-bottom:-40px; width:22px; height:22px } 
.large .punkt2{ margin-bottom:-38px; width:24px; height:24px } 
.large .punkt3{ margin-bottom:-4px; width:26px; height:26px } 
    
.large .txtseq1 {display:none}  
.large .b_top1 { display:none } 
    
.large .textblock1{ position:relative; left:35px; width:95%; height:auto }
.large .textblock2 { position:relative; left:30px; width:92%; 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:26px; --font-h2:22px;--font-h3:20px; --font-h4:16px; --font-h5:22px; --font-h6:16px; --font-h7:28px}    
.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 }
.large .nav3 a, .large .nav3 a:hover, .large .nav3 a:active { font-size:24px }

.large .sprechstunden { width:100% }
.large .box_zeiten1 { font-size:20px}
.large .tb1a{ left:10px; width:40%}
.large .tb1b{ width:10%}
.large .tb1c{ right:0px; width:40%}
.large .info1{ font-size:20px; width:90%}
    
.large .zeiten1{ position:relative; top:6px; width:25px; height:25px } 
.large .punkt1{ margin-bottom:-40px; width:22px; height:22px } 
.large .punkt2{ margin-bottom:-36px; width:22px; height:22px } 
.large .punkt3{ margin-bottom:-4px; width:26px; height:26px } 
    
.large .txtseq1 { display:none } 
.large .b_top1 { display:none } 
    
.large .textblock1{ position:relative; left:30px; width:96%; height:auto }
.large .textblock2 { position:relative; left:30px; width:92%; height:auto}
    
 }