/* ----------------------------------------
   SCREENREADER-ONLY UND SKIP-LINKS
---------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* Standard: Unsichtbar, aber zugänglich für Screenreader & per Tastatur */
.sr-only-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sichtbar beim Fokus (Tastaturbedienung via Tab) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 1em auto;
  padding: 0.5em 1em;
  background: #fff;
  color: #000;
  text-align: center;
  z-index: 1000;
  clip: auto;
  white-space: normal;
  display: inline-block;
  border: 2px solid #00fac9;
  outline: 3px solid #00fac9;
  outline-offset: 4px;
  border-radius: 4px;
  text-decoration: none;
}



/* ----------------------------------------
   Skip links
---------------------------------------- */
.skip-nav {
  position: absolute;
  top: 80px;
  left: 0;
  width: 600px;
  z-index: 1000;
}

.skip-nav-link {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: #131313;
  color: #000;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: 2px solid #000;
  text-decoration: none;
}

.skip-nav-link:focus-visible {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
}

@media (max-width: 767px) {
  .skip-nav {
    width: 100%; /* Mobile: volle Breite */
    padding: 0 10px; /* Optional: Seitenabstand */
    box-sizing: border-box;
  }
  
  .skip-nav-link {
    display: block; /* Damit die Links untereinander stehen */
    margin-bottom: 8px;
  }
}


/* ----------------------------------------
   NAVIGATION & FOKUS
---------------------------------------- */
/* Fokus nur sichtbar bei Tastaturbedienung (via JS-Klasse oder :focus-visible) */
body.user-is-tabbing #navbar_toggle:focus-visible {
  outline: 3px solid #00fac9;
  outline-offset: 10px;
}

/* Fokus für Links, Skip-Links etc. */
#dsn-primary-list a:focus-visible,
.skip-link:focus-visible,
.focus-style:focus-visible {
  outline: 2px solid #00fac9;
  outline-offset: 3px;  
  border-radius: 4px;
  color: #fff;
}

.site-header.dsn-hamburger ul.primary-nav.open > li > a > span.overflow {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.main-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.site-header.dsn-hamburger.dsn-open .main-navigation {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.back-to-menu-link {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #131313;
  color: white;
  padding: 10px 15px;
  border-radius: 4px;
  z-index: 9999;
  text-decoration: none;
  cursor: pointer;
}

.back-to-menu-link:focus-visible,
.back-to-menu-link:hover {
  outline: 3px solid yellow;
  outline-offset: 2px;
}

html {
  scroll-padding-top: 80px;
}

/* ----------------------------------------
   MODAL Long img im modal Index picture öffnen
---------------------------------------- */
.modal {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  max-height: 80vh; 
  z-index: 65000;  /* Sehr hoch, um über allem zu sein */
  background: white; 
  overflow: auto;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  border-radius: 4px;
  padding: 30px 20px 20px 20px; /* Oben mehr Platz für Pfeil */
  display: none;
  display: flex;
  flex-direction: column;
}

.modal.hidden {
  display: none;
}

.modal-content {
  flex-grow: 1;
  overflow-y: auto;
  margin: 10px 0;
  outline: none;
}

/* Klasse zum Anzeigen */
.modal:not(.hidden) {
  display: flex;
}


/* Pfeil nach unten oben positioniert */
#scroll-down-arrow {
  position: absolute;
  top: 10px;
  right: 50px;
  font-size: 54px;
  color: #00fac9;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  z-index: 10;
  padding: 0;
  margin: 0;
}


/* Close Button größer und mit grünem Rahmen */
.close-modal {
  font-size: 0.7rem;             /* größer */
  color: #007a56;               /* dunkles Grün */
  border: 2px solid #00fac9;    /* heller grüner Rahmen */
  background: white;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  align-self: flex-end;         /* rechtsbündig im Modal */
  margin-top: 15px;
}

.close-modal:hover {
  background-color: #00fac9;
  color: white;
  outline: none;
}

.close-modal:focus-visible {
  outline: 3px solid #00fac9;  /*grün */
  outline-offset: 3px;
  background-color: #00fac9;
  color: #000;
}


.cover-bg-img {
  position: relative; /* falls noch nicht gesetzt */
  z-index: 1;
}

picture[tabindex="0"] {
  position: relative; /* für das Pseudo-Element */
}

picture[tabindex="0"]:focus-visible::after {
  content: "\e9b2";
  font-family: 'iconfont-berg';
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: #000;
  background-color: #00fac9;
  xxborder: 1px solid white;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
   #modal-img-1 {
    display: none;
  }
}


html {
  font-size: var(--font-size-base);
  scroll-behavior: initial;
}

.dsn-scroll-bottom .text {
  writing-mode: vertical-lr;
  font-size: 13px;
}

/* Standard: Kein Outline (optional) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Fokus sichtbar nur wenn Tastatur-Fokus */
:focus-visible {
  outline: 3px solid #00fac9;  /*#005fcc; blau */
  outline-offset: 3px;
}

/* Fokus sichtbar nur bei Tastaturbedienung  */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.cover-trigger:focus-visible,
h1:focus-visible {
  outline: 3px solid #00fac9;  /*grün */
  outline-offset: 2px;
  border-radius: 4px; /* wenn gewünscht */
  background-color: transparent; /* h1 Ausnahme behandeln */
}

/* Für h1 spezieller Fokus mit Hintergrund */
h1:focus-visible {
  outline: 3px solid #00ae8c;
  outline-offset: 4px;
  background-color: #e0f0ff;
}

/* Alle Fokus ohne :focus-visible (also z.B. Mausfokus) ohne Outline */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.cover-trigger:focus:not(:focus-visible),
h1:focus:not(:focus-visible) {
  outline: none;
}

/* zum inhalt springen */
.visually-hidden-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Beim Fokus sichtbar machen */
.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 1rem auto;
  clip: auto;
  overflow: visible;
  background-color: #e9f5ff;
  outline: 2px solid #007acc;
  padding: 0.5rem 1rem;
  text-align: center;
  display: block;
  border-radius: 0.25rem;
  font-weight: bold;
}

.cover-trigger:focus {
  outline: 2px solid #007BFF;
  outline-offset: 4px;
}

.hidden {
  display: none !important;
}

.cover-trigger:focus-visible {
  outline: 3px solid #00fac9;  /*grün */
  outline-offset: 4px;
  border-radius: 4px;
}

/* Statt :focus nur :focus-visible nutzen */
button:focus-visible, 
[role="button"]:focus-visible, 
a:focus-visible {
  outline: 3px solid 00fac9; /* grün deutlicher blauer Rahmen */
  outline-offset: 2px;
}

/* Fokus ohne :focus-visible (also z.B. Mausfokus) ohne Outline */
button:focus:not(:focus-visible), 
[role="button"]:focus:not(:focus-visible), 
a:focus:not(:focus-visible) {
  outline: none;
}


/* Index Tel und Mail agentur */
.footer-head .grid-item h2 {
  font-size:1.0em;
  font-family: "Poppins";
}

/* Icon im Bild */
.barrierefrei-badge {
  position: absolute;
  top: -160px;       /* oben */
  left: 50px;     /* von links eingerückt */
/*  background: rgba(0, 0, 0, 0.2);   */
  color: #e8e8e8;    
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 3;
  pointer-events: none; /* verhindert, dass Badge Klicks blockiert */
  letter-spacing:0.03em;
}

/* Icon etwas kleiner oder angepasst */
.barrierefrei-badge i {
  font-size: 1rem;
}

/* Optional: nur Desktop */
@media (max-width: 991px) {
  .barrierefrei-badge {
    display: none;
  }
}

/* ----------------------------------------
   DESIGNMODI: GRAYSCALE / DYSLEXIA / HIGHLIGHT
---------------------------------------- */
html.grayscale main,
html.grayscale .page-wrapper,
html.grayscale .wf-icon-box-flex,
html.grayscale .wf-header-logo,
html.grayscale .wf-col.mk-footer-box,
html.grayscale .footer-logo,
html.grayscale .content-wrapper {
  filter: grayscale(100%);
}

html.grayscale .access-widget {
  filter: none !important;
}


/* ----------------------------------------
   Schrift
---------------------------------------- */
/* Globaler Dyslexie-Modus */
#main_root.dyslexia-mode {
  font-family: 'Poppins', Arial, Verdana, sans-serif;
  font-size: 1.15em;
  line-height: 1.5;
}

/* Nur Grundtext & spezielle Klassen */
#main_root.dyslexia-mode p,
#main_root.dyslexia-mode li,
#main_root.dyslexia-mode .title-block,
#main_root.dyslexia-mode .content-body {
  font-family: 'Poppins', Arial, Verdana, sans-serif;
  letter-spacing: 0.08em;
}

/* Für kleinere Screens – z. B. Smartphones */
@media (max-width: 767.98px) {
  #main_root.dyslexia-mode p,
  #main_root.dyslexia-mode li,
  #main_root.dyslexia-mode .title-block,
  #main_root.dyslexia-mode .content-body {
    font-size: 1rem;
    line-height: 1.4;
  }
}





/* ----------------------------------------
   Heller Hintergrund
---------------------------------------- */
body.v-dark.lightmode {
  background-color: white !important;
  color: black !important;
}

body.v-light h3.post.post1H1 {
  color: #333; /* dunklere Schrift im hellen Modus */
  /* hier kannst du noch mehr Styles hinzufügen, z.B. Schriftart, Hintergrund etc. */
}

body.v-light #hero_title h1 {  
  color: #000; 
}

body.v-light .text-line.zwei text {
  fill: black !important;
  stroke: black !important;
}

body.v-light #hero_title .post {
  position: relative;  
  font-size: 8em;
  font-weight: 600; 
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.75px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.95);
  user-select: none;  
}

body.v-light .heading-color{  
  color: #000; 
}

body.v-light .heading-color a{  
  color: #000;   
}

body.v-light .index .title-h3 {
  font-size: 2.4em;
  font-weight:600;
  color:#000;
  letter-spacing:0;
}

body.v-light #dsn_footer .list-impr li {	
	color:#000;	
}

body.v-light .bgs {
  display: none !important;
}

body.v-light .colors-h{  
  background-color:white;
  color:#000;
}

body.v-light .leist_title-smaller span {    
   color:#000;
}

body.v-light .title-block {    
  color:#000;
  font-weight:500;
}

body.v-light .accordion--headline button.accordion-button { 
  color: #000;  
  font-size:1.4em;  
  font-weight:600;
}

body.v-light .background-section, .background-section .background-inner {
  background-color: #e8e8e8;
}

/* Horizontale Linie (Minus/Plus) */
body.v-light .accordion--headline button.accordion-button::before { 
  background-color: #00fac9;  
}

/* Vertikale Linie (Plus) */
body.v-light .accordion--headline button.accordion-button::after { 
  background-color: #00fac9;  
}

/* Leistungen */
body.v-light .leist_title-small h1  {    
  font-weight:500;
}

body.v-light .leist_title-small h1 span {
  color: #000;
}


body.v-light .title-h2 {
  color: #000;  
  font-weight:600;
  font-size:1.9em;   
  line-height:1.5em;
}

body.v-light .leist_title-small h3 { 
  font-weight: 600;
}

body.v-light .leist_title-small h3 span {  
  color: #000;
  font-weight:600;
}

body.v-light .title-h4 {  
  color: #000;
  font-weight:600;
}

/* Beispiel für helles Theme */
body.v-light .container.referenzen {
  background-color: #adaeae; /* sanftes Hellgrau */
  padding: 10px;             /* etwas Innenabstand für Luft */
  border-radius: 4px;        /* optional, für weichere Kanten */
}


body.v-light .bgs {
  display: none !important;
}

body.v-light .colors-h{  
  background-color:white;
  color:#000;
}

body.v-light .leist_title-smaller span {    
   color:#000;
}


body.v-light .title-block {    
  color:#000;
  font-weight:500;
}

body.v-light .accordion--headline button.accordion-button { 
  color: #000;  
  font-size:1.4em;  
  font-weight:600;
}

body.v-light .background-section, .background-section .background-inner {
  background-color: #e8e8e8;
}

/*  Webdesign hosting Texter */
body.v-light .site-header.dsn-hamburger .container-content .sm-title-block  {  
  color: #000;  
}

body.v-light .site-header.dsn-hamburger .container-content .nav-content p {
  color: #000;   
}

body.v-light .site-header.dsn-hamburger .menu-cover-title {
	  display:none;
}

/* barrierefrei bei index- kein abstand*/
body.v-light #dsn_header .footer-head.no-bottom{
	 margin-left:10px;
	 font-size:1.0em;
}


/* ----------Tablet ---------------1024-------------------------
Landscape 1024 x 650, 
Porträt    768 x 906 --www.../kunde/app-----------------*/	

@media only screen and (max-width: 1024px) {	
/* --Titel index--------*/	
	body.v-light #hero_title h2 {    
	  font-size: 7em; 
	  color: #000; 
	  padding-top:1rem;
	  font-weight: 600;
	}
		
   /* --Titel index--------*/
	body.v-light #hero_title .post {
	  position: relative;
	  font-size: 6em;
	  font-weight: 600;
	  -webkit-text-fill-color: transparent;
	  -webkit-text-stroke: 0.45px;
		-webkit-text-stroke-color: currentcolor;
	  -webkit-text-stroke-color: rgba(0, 0, 0, 0.9); /* bei hellem Hintergrund ggf. dunkler */
	}

	body.v-light .title-h2 {
	color: #000;  
	font-weight:500;
	font-size:1.4em;   
   }

}


/*-------------------------------------------------------------------
	media  991   Responsive hero Tablet hoch
-------------------------------------------------------------------	*/
@media only screen and (max-width: 991px) {		
/* --Titel index--------*/	
	body.v-light #hero_title h2 {    
	  font-size: 7em; 
	  color: #000; 
	  padding-top:1rem;
	  font-weight: 600;
	}
		
   /* --Titel index--------*/
	body.v-light #hero_title .post {
	  position: relative;
	  font-size: 6em;
	  font-weight: 600;
	  -webkit-text-fill-color: transparent;
	  -webkit-text-stroke: 0.45px;
		-webkit-text-stroke-color: currentcolor;
	  -webkit-text-stroke-color: rgba(0, 0, 0, 0.9); /* bei hellem Hintergrund ggf. dunkler */
	}

	#dsn_header .footer-head .dsn-list{  
     padding-top:30px; 
     padding-bottom:50px;
    } 
	
	
	body.v-light #dsn_header .footer-head .dsn-list{  
     padding-top:30px; 
     padding-bottom:50px;
    } 
	
	/* ----Text-------*/ 
	body.v-light .title-h2{
	font-size:1.4rem;
	color:#000;
	font-weight:400;
	}	
}


/*--------------------------------------------------
	media 600 Responsive 
---------------------------------------------------	*/
@media (max-width: 600px) { 
     body.v-light #hero_title .post {
	  position: relative;
	  font-size: 3em;
	  font-weight: 600;
	  -webkit-text-fill-color: transparent;
	  -webkit-text-stroke: 0.45px;
		-webkit-text-stroke-color: currentcolor;
	  -webkit-text-stroke-color: rgba(0, 0, 0, 0.9); /* bei hellem Hintergrund ggf. dunkler */
	}
	body.v-light #hero_title h2 {    
	  font-size: 5em; 
	  color: #000; 
	  padding-top:1rem;
	  font-weight: 600;
	}

	body.v-light .title-h2 {
	color: #000;  
	font-weight:600;
	font-size:1.9em;   
   }

	/*  wir lassen.... */
	body.v-light .index .title-h3 {
	  font-size: 1.8em;   
	}
	/*  referenzen, auf die....wir können hier nicht */
	body.v-light .index .title-block{   
	   font-weight:500;
	   color:#000;
	   letter-spacing:0.01em;
	 }
	body.v-light .accordion--headline button.accordion-button { 
	  color: #000;  
	  font-size:1.3em;  
	  font-weight:500;
	}

	body.v-light .accordion--headline .accordion-item {
		margin-bottom: 8px; /* oder 0 */
	 }

	body.v-light .subtitle {
	  color: #000;
	  font-size: 16px;
	  letter-spacing: 2px;
	  font-weight:400;
	}   

}



/* ------------Handy Astrid 396 x 738 Porträt, 794 x 301 Landscape-----------end---------*/	
/* ------------Handy Gustl  412 x 780 Porträt, 836 x 332 Landscape-----------end---------*/	
/* -----------------------media 479---------Astrid + Gustl Handy------------------------------*/ 


@media only screen and (max-width: 479px) {		 
/*  Webdesign hosting Texter */
	body.v-light .site-header.dsn-hamburger .container-content .sm-title-block {	
	  color:#000;
	 }

	  /* --Webdesign | Hosting | Texter-------*/
	body.v-light .site-header.dsn-hamburger .container-content .nav-content p {
	  color: #000; 	 	  
	} 

}



/* -----------------------media 440--------------------------------------------------------*/	
@media (max-width:440px) {
	
	/*  navi*/
	body.v-light .site-header.dsn-hamburger ul.primary-nav a {
	font-size:1.1em;
	color:#000;
	}

	body.v-light #dsn_footer .list-impr li {
		font-size:0.8rem;
		color:#000;	
	}

	/*  Webdesign hosting Texter */
	body.v-light .site-header.dsn-hamburger .container-content .sm-title-block {	
	  color:#000;
	}

   body.v-light .title-h2 {
   color: #000;  
   font-weight:600;
   font-size:1.15em;   
   }

}




/* ----------------------------------------
   ACCESSIBILITY-POPUP/SWITCH zur Hilfe Barrierefreiheit
---------------------------------------- */
.access-widget {
  visibility: hidden;
}

.js body.loaded .access-widget {
  visibility: visible;
}
.access-widget {
  position: fixed;
  bottom: 2.5rem;
  right: 4rem;
  background: #00fac9;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
}

.access-widget i.icon-bergaccessibility {
  color: black;
  font-size: 2.5rem;
}

.access-widget:focus-visible{
  outline: 3px solid #00fac9;
  outline-offset: 4px;    
  border-radius: 50%;
}

.js body.loaded .access-widget {
  visibility: visible;
}

.access-widget.active {
  border: 2px solid white; /* weiße Umrandung, wenn aktiv */
  color: white;            /* Icon weiß, wenn aktiv */
  background: #00fac9;     /* Hintergrund bleibt grün */
}

.access-widget:focus-visible {
  outline: 3px solid #00fac9;
  outline-offset: 4px;
  background: #00fac9 !important; /* Hintergrund zwingend grün bei Fokus */
  color: black !important;         /* Icon schwarz bei Fokus */
}

/* Popup-Grundstruktur Hilfe zur Barrierefreiheit */
.popup {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1rem;
}

.popup[hidden] {
  display: none;
}

.popup-content {  
  background:#f0f0f0;
  padding: 1.5rem;
  border-radius: 0.2rem;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  position: relative;
}

.popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 4rem;
  line-height: 1;
  cursor: pointer;
  color: #333;
  padding: 0.25rem 0.5rem;
  transition: transform 0.2s ease;
}

.popup-header {
  font-size: 1.7rem;
  color: #000;
  margin-bottom: 0.4rem;
}

.popup-body {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

#popup-title {
  font-size: 1.3rem;
  color: #000;
  padding: 0.5rem 0 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

#popup-desc{
  font-size: 1.0rem;
  color: #000;
  padding: 0.5rem 0 0.5rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}


/* ----------------------------------------
   TOGGLE CONTAINER
---------------------------------------- */
.accessibility-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;  
  background:#fff;
  border-radius: 0.2rem;
  min-height: 80px;
}

.icon-and-text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-grow: 1;
}

.accessibility-toggle .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.25rem;
  height: 5.25rem;
  xpadding: 0.4rem;
  xxborder: 1px solid black;
  xborder-radius: 0.375rem;
}

.icon-image {
  width: 80px;       /* oder z. B. 2.5rem */
  height: 80px;
  object-fit: contain;  /* sorgt für korrektes Einpassen */
}

.accessibility-toggle .toggle-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.accessibility-toggle .toggle-text:focus-visible{
  outline: 3px solid #00fac9;  /*grün */
  border-radius: 4px;
}

.accessibility-toggle .toggle-text > .label-text {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.1;
  color: #000;
}

.toggle-description {
  font-size: 0.875rem;
  color: #555;
  margin-top: 0.2rem;
}


/* ----------------------------------------
   SWITCH STYLES
---------------------------------------- */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch input:focus + .slider {
  outline: 3px solid #00fac9;
  outline-offset: 4px;  
  border-radius: 12px;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}

.slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #00fac9 !important;
}

input:checked + .slider::before {
  transform: translateX(26px);
}






@media (max-width: 767.98px) {
  #accessibility-popup .popup-content {
    width: 90vw;    
    padding: 1rem;
    font-size: 0.95rem;
    border-radius: 10px;
  }

  .popup-header h2 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .popup-header p {
    font-size: 0.95rem;
  }

  .accessibility-toggle {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.5rem;
  }

  .icon-and-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .accessibility-toggle {
  flex-wrap: wrap;
}

.icon-and-text {
  flex: 1 1 auto;
  min-width: 0; /* verhindert, dass Text zu breit wird */
}

  .icon-image {
    width: 40px;
    height: auto;
  }

  .toggle-text {
    font-size: 0.95rem;
  }

  .switch {
    margin-top: 0.5rem;
  }

  .popup-close {
    font-size: 1.5rem;
    top: 0.5rem;
    right: 0.5rem;
  }
}



@media (max-width: 767.98px) {
  .accessibility-toggle {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    min-height: auto;
  }

  .icon-and-text {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .accessibility-toggle .icon {
    width: 3rem;
    height: 3rem;
  }

  .icon-image {
    width: 48px;
    height: 48px;
  }

  .accessibility-toggle .toggle-text {
    font-size: 0.95rem;
  }

  .accessibility-toggle .label-text {
    font-size: 0.6rem;
  }

  .toggle-description {
    font-size: 0.85rem;
  }

  .switch {
    align-self: flex-end;
    margin-left: 0;
    margin-top: 0.5rem;
    width: 44px;
    height: 22px;
  }

  .slider::before {
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
  }

  input:checked + .slider::before {
    transform: translateX(22px);
  }
}