@font-face {
	font-family: 'Geek a byte';
	src: url('fonts/geekabyte.eot');
	src: url('fonts/geekabyte.eot?#iefix') format('embedded-opentype'),
		 url('fonts/geekabyte.woff2') format('woff2'),
		 url('fonts/geekabyte.woff') format('woff'),
		 url('fonts/geekabyte.ttf')  format('truetype'),
		 url('fonts/geekabyte.svg#Geek a byte') format('svg');
}



	*, *:before, *:after {
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}

body { width: 100%; margin: 0; padding: 0; 
	font-family: "europa", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.3rem; color: #2169a1; }
	
body.body_start .background { position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background: url("../../files_extra/signal-2025-10-06-115057_sw.jpg") no-repeat fixed center;
	background-size: cover;
	opacity: 0.2;
	z-index: -20; }	


#header_outer { width: auto; }
#header_fixed { position: fixed; top: 0px; width: 50%; height: 100px;  z-index: 50; }

#header_left { height: 100%; margin-left: 20%; }
#logo_wrapper { transition: margin-top 0.4s ease; }
#logo { display: inline-block; height: 100%; margin-top: 20px; margin-left: -12px; position: relative; z-index: 60; transition: height 0.4s ease, transform 0.4s ease; }
#logo.logo_ani { height: 60%; }
#logo.logo img { height: 100%; width: auto; }
#logo_sub, h1 { font-family: arvo, serif;
	font-size: 0.85rem;
	font-weight: 700; 
	margin-top:0.3rem; 
	transition: font-size 0.4s ease, }
.logo_ani h1 { font-size: 0.65rem; }	

.nav { display: none; }




#content_wrapper_start { width: 80%; margin: 0 auto; margin-top: 180px; }

	
.slogan { width: 82%;
	height: 240px;
	background: url("../../files_extra/splg-slogan_website.png") no-repeat center;
	background-size: contain; 
    margin: 0 auto;
	margin-bottom: 3rem; }
	


.container { width: 100%; }

.container_inner { width: 23.5%; height: auto; float: left; margin-right: 2%; }
.container_inner:nth-child(4) { margin-right: 0; }


.teaser, .teaser_bottom { cursor: pointer; }
.teaser img { width: 100%;
	height: auto; }	


.content_wrapper { display: none; position: fixed; bottom: 0;
	left: 0; z-index: 40; width: 100%; height: 100%; overflow: scroll; }

.content_bg { position: fixed; top: 0;
left: 0; z-index: 41; width: 100%; height: 100%; background: white; }

.stripe { position: fixed; top: 0;
left: 0; width: 100%; height: 145px; background: white;
opacity: 0.95; z-index: 45; }

.wrap_the_page { position: relative; top: 3rem; left: 0; width: 100%; margin: 0 auto; z-index: 42; padding-bottom: 4rem; }

.close_button { position: fixed;
	right: 0;
	top: 3.4rem;
	width: 130px; height: 50px; 
	margin-right: 10%;
	background: url("../../files_extra/splg_website_x_schliessen.png") no-repeat center;
	background-size: contain;
	z-index: 60; 
	cursor: pointer; }

.content { margin-top: 8rem; }	

.content a, #overlay-content a { color: #007233; }
	

.wrappy { padding: 0 10% 2rem 10%; }
.wrappy_bild { padding: 0 10% 2rem 10%; }


.bild { width: 100%; aspect-ratio: 16 / 7; }
.bild.lg { aspect-ratio: 16 / 9; }
.bild img { width: 100%; height: 100%; object-fit: cover;
	  object-position: center; }

.baum { position: relative;
	width: 100%;
	aspect-ratio: 100 / 53.6;
	background: url("https://www.splg.de/site/files_extra/splg-baum_website_bg.png") center; background-size: contain; background-repeat: no-repeat; }
.baum_innerst {   position: relative;
	  width: 100%;
	  height: 100%; } 	
.baum_innerst.mobile { display: none; } 



/* svg Baum */

.baum_innerst svg {
  position: relative;
  z-index: 5;
}

/* Zoom & Cursor auf den Baumhotspot-Gruppen */
.hotspot {
	cursor: pointer;
	pointer-events: all;           /* wichtig! */
	transform-box: fill-box;       /* damit scale aus der Gruppe korrekt funktioniert */
	transform-origin: center;      /* Mittelpunkt der Gruppe */
	transition: transform 0.25s ease-out;
  }

.hotspot:hover {
  transform: scale(1.18);
}


/* Typo & Farbe */
.cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15 {
	font-family: arvo, serif;
	font-size: 70.98px;
	font-weight: 700;
  }
  
.cls-10 {
	fill: #2169a1;
  }
	
.cls-11 {
	fill: #e2007a;
  }

.cls-12 {
	fill: #009ab5;
  }

.cls-13 {
	fill: #f49e00;
  }

.cls-14 {
	fill: #fdc400;
  }

.cls-15 {
	fill: #007233;
  }






.karte {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 67.7;
  background: url("https://www.splg.de/site/files_extra/splg-karte-lebensgemeinschaften_website_bg.png") center;
  background-size: contain;
  background-repeat: no-repeat;
}

.karte_innerst {
  position: relative;
  width: 100%;
  height: 100%;
}
.karte_innerst.mobile { display: none; } 



/* svg Karte */

.karte_innerst svg {
  position: relative;
  z-index: 5;
}

/* Zoom & Cursor auf den City-Gruppen */
.city {
  	cursor: pointer;
  	pointer-events: all;           /* wichtig! */
  	transform-box: fill-box;       /* damit scale aus der Gruppe korrekt funktioniert */
	transform-origin: center;      /* Mittelpunkt der Gruppe */
	transition: transform 0.25s ease-out;
  }

.city:hover {
  transform: scale(1.35);
}

/* Typo & Farbe */
.cls-1, .cls-2, .cls-3 {
  font-family: arvo, serif;
  fill: #2169a1;
}
.cls-1 { font-size: 30.86px; font-weight: 700; }
.cls-3 { font-size: 24.6px; font-weight: 700; }





#overlay {
	position: fixed;
	inset: 0;
	background: rgba(236, 235, 109, 0.8);
	transition: display 0.4s ease; 
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
  }
  
  #overlay.overlay_bigger {
	overflow: scroll;
  }
  
  #overlay.open { display: flex; }
  #overlay.overlay_bigger.open { display: grid; }
  
  #overlay-content {
	position: relative;
	background: white;
	padding: 2em;
	border-radius: 8px;
	max-width: 600px;
	z-index: 10000;
  }
  
  #overlay-content.overlay_bigger {
	max-width: none;
	width: 900px;
  }
  
  #overlay-content .wrappy_bild { padding: 0 0 2rem 0; }
  
  #close-overlay { position: fixed;
  right: 10%;
  top: 3.4rem;
  width: 130px; height: 50px; 
  padding-block-start: 0px;
  padding-block-end: 0px; 
  border: none; 
  background: url("../../files_extra/splg_website_x_schliessen_gruen.png") no-repeat center;
	background-size: contain;
  cursor: pointer;
  z-index: 10001; 
  }



/* Slider */
.wrap_the_slider { position: relative;
	top: 0; left: 0;
	width: 100%;
	aspect-ratio: 16 / 7; 
	padding-bottom: 4rem;
	z-index: 1; opacity: 1; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	overflow: hidden; }
	
.wrap_the_slider.wrappy_bild { padding: 0 0 2rem 0;  }	
	
.wrap_the_slider.lg { aspect-ratio: 16 / 9; }	
	
.rslides {
	position: relative;
	list-style: none;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0; }
	
.rslides li {
	 -webkit-backface-visibility: hidden;
	  position: absolute;
	  display: none;
	  width: 100%;
	  left: 0;
	  top: 0;
	  }
	
.rslides li:first-child {
	  position: relative;
	  display: block;
	  float: left;
	  }
	
.rslides img {
	  display: block;
	  height: auto;
	  float: left;
	  width: 100%;
	  border: 0;
	  }
	  



.title { padding: 0 10% 2rem 10%; 
			  font-family: arvo, serif;
			  font-weight: 700;
			  margin-top: 0rem; 
			  margin-left: -3px;
		  	  color: #91af21; }
p  { display: block;
			  line-height: 1.7rem;
			  margin-block-start: 0;
			  margin-inline-start: 0px; }
h2 { font-family: arvo, serif;
			  font-weight: 700; 
			  font-size: 2.4rem;
			  margin-block-start: 0; 
		  	  margin-block-end: 0; }	
h3 { font-family: arvo, serif;
			  font-weight: 700; 
			  font-size: 1.4rem;
		  	  margin-block-start: 0; 
			  margin-block-end: 1rem;}	
.bold { font-weight: 700; }		  
		  
		  
	  .absatz { padding-bottom: 1rem; }	
	  .abstand_top { padding-top: 1.5rem; }	
	  .abstand_top_plus { margin-top: 2.5rem; }
	  
	  
.clear { clear: both; }




#footer { bottom: 0; width: 100%; padding: 1.5rem 0 1rem 0; margin-top: 8rem; border-top: 2px solid #91af21; color: #91af21; font-family: arvo, serif; font-weight: 700; font-size: 1.3rem; letter-spacing: 0.2px; }
#wrapper_bottom { width: 80%; margin: 0 auto; position: relative; }
#wrapper_bottom_inner { padding-bottom: 3rem; }

#infos_bottom_left { float: left; font-style: normal; }
  
#navigation_bottom_right { float: right; display: inline-block; }
#navigation_bottom_right div.container_inner_bottom, #navigation_bottom_right div.teaser_bottom  { display: inline-block; margin-left: 1.5rem; }
  
#footer li { list-style: none; } 
#footer .nav { font-size: 1.3rem; letter-spacing: 0.2px; cursor: pointer; }
#footer a { color: #2169a1; text-decoration: none; cursor: pointer; } 
#footer a:hover { color: #91af21; text-decoration: none; } 
#footer .nav a:hover { color: #91af21; }  

#footer .content { font-family: "europa", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.3rem; color: #2169a1; }
	
	
	
	



	
	
/* sehr große Ausgabegeräte */
	@media screen and (min-width: 1460px) { 
		#header_outer { width: 1140px; margin: 0 auto; }
		#header_left { margin-left: 0; }
		
		#content_wrapper_start { width: 1140px; margin: 0 auto; margin-top: 200px; }
		
		.slogan { margin-bottom: 6rem; }			
		
		.wrap_the_page { width: 1140px; top: 3.8rem; }
		.wrappy { padding: 0 0 2rem 0; }
		.wrappy_bild { padding: 0 0 2rem 0; }
		.close_button_outer { position: relative; width: 1140px; margin: 0 auto; }
		.close_button { left: 50%; margin-left: 390px; } /* Hälfte von 1140px minus Buttonbreite */
		
		#close-overlay { left: 50%; margin-left: 390px; }
		
		.title { padding: 0 0 2rem 0; }
		
		#footer { position: absolute; }
		#wrapper_bottom { width: 1140px; }

		}	
		

/* kleiner werdende Ausgabegeräte */
	@media screen and (max-width: 1120px) { 
		#content_wrapper_start { margin-top: 170px; }
		.slogan { margin-bottom: 2rem; }	
		
		.stripe { height: 140px; }
		.content { margin-top: 7rem; }
		
		#footer { position: absolute; }
		}
		
	@media screen and (max-width: 880px) { 
		#content_wrapper_start { margin-top: 200px; }
		.slogan { width: 90%; aspect-ratio: 2440 / 466; height: auto; margin-bottom: 3rem; }
		
		.container_inner { width: 49%; margin-right: 2%; margin-bottom: 12px; }
		.container_inner:nth-child(2) { margin-right: 0; }
		
		.baum {	aspect-ratio: 1800 / 1200; background: url("https://www.splg.de/site/files_extra/splg-baum_website_bg_mobile.png") center; background-size: contain; background-repeat: no-repeat; }
		.baum_innerst.desktop { display: none; } 
		.baum_innerst.mobile { display: block; } 
		.hotspot:hover { transform: scale(1.02); }
		.baum_innerst.mobile .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15 {
			font-size: 64px;
		  }
		.karte{	aspect-ratio: 1355 / 1010; background: url("https://www.splg.de/site/files_extra/splg-karte-lebensgemeinschaften_website_bg_mobile_fetzig.png") center; background-size: contain; background-repeat: no-repeat; width: 106%; margin-left: -3%; }  
		.karte_innerst.desktop { display: none; } 
		.karte_innerst.mobile { display: block; } 
		
		#overlay-content.overlay_bigger { max-width: 800px; width: 100%; }  
		#overlay-text h3 { width: 70%; }
		
		#footer { position: static; margin-top: 4rem; font-size: 1.1rem; }
		#footer .nav {font-size: 1.1rem; }
		#navigation_bottom_right div.container_inner_bottom, #navigation_bottom_right div.teaser_bottom  { margin-left: 1rem; }
		}	

		
	@media screen and (max-width: 630px) { 
		#header_fixed { width: 62.5%; height: 80px; }
		#header_left { margin-left: 16%; }
		
		#content_wrapper_start { margin-top: 190px; }
		.slogan { width: 96%; }
		
		.close_button, #close-overlay { top: 3rem; width: 100px; height: 40px; }
		.close_button { margin-right: 9%; }
		#close-overlay { right: 9%; background: url("../../files_extra/splg_website_x_schliessen_gruen_reduced.png") no-repeat center;
			background-size: contain;}
		
		.title, .wrappy, .wrappy_bild { padding: 0 10% 2rem 10%; }
		.title { hyphens: auto; font-size: 2rem; line-height: 2.4rem; }
		
		#overlay-content { border-radius: 0; } 
		#overlay-content .wrappy_bild { margin-right: -10%; margin-left: -10%; width: 120%; } 
		
		.bild:has(source) { aspect-ratio: unset; height: auto; }
		
		#navigation_bottom_right div.container_inner_bottom, #navigation_bottom_right div.teaser_bottom { display: block; text-align: right; }
		#footer div.content_wrapper { text-align: left; }
		}		

		
	@media screen and (max-width: 520px) { 
		#overlay-content .wrappy_bild { margin-right: -14%; margin-left: -14%; width: 128%; } 
		.wrap_the_slider { aspect-ratio: 16 / 9; }
		}		
		
		
		
	@media screen and (max-width: 420px) { 
		#header_fixed { position: static; width: 50%; height: 70px; }
		#header_left { margin-left: 20%; }
		
		
		#header_left { height: 100%; margin-left: 20%; }
		#logo_wrapper { position: relative; }
		
			
		#logo { margin-left: -8px; transition: height 0.4s ease, transform 0.4s fade, position 0.4s fade; }
		#logo.logo_ani { margin-left: -8px; position: fixed; height: 50px; top: -4px; }
		#logo_sub { width: 200%; }

		#content_wrapper_start { margin-top: 120px; }
		.slogan { width: 112%; margin-left: -6%; }
		
		.close_button, #close-overlay { top: 1.7rem; width: 90px; }
		
		.container_inner { width: 100%; margin-right: 0; margin-bottom: 12px; }
		
		.stripe { height: 80px; }
		.content { margin-top: 3.5rem; }
	
		#footer { position: static; margin-top: 4rem; font-size: 0.9rem; }
		#footer .nav {font-size: 0.9rem; }	
	}