*, *: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: "neue-haas-grotesk-text", sans-serif; font-weight: 400; font-style: normal; font-size: 1.3rem; color: black; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; }

#background { position: fixed ; width: 100%; height: 100%; z-index: -10; background: url("https://www.sophiaguttenhoefer.de/site/files_extra/SzoloDuo_032_3_darker_with_lights.jpg") center; background-size: cover; background-repeat: no-repeat; }


#header_start { width: 90%; margin: 0 auto; padding-top: 10px; }
#header_fixed { position: fixed;
	top: 0px;
	right: 5%;
	width: 400px;
	height: 100px;
	z-index: 100; }
	
#header_content #header_fixed { background: rgba(0, 0, 0, 1); width: 100%; height: 80px; right: 0; }
#header_content #header_fixed_inner { width: 90%; margin: 0 auto; }

#header_loose { padding-top: 1rem; }
#sophia_start { font-family: "neue-haas-grotesk-display", sans-serif;
	font-weight: 600;
	font-style: normal; font-size: 4.2rem; }

#wrapper_sophia_top { float: left; margin-top: 0.65rem; }	
#sophia_content { display: inline-block; font-family: "neue-haas-grotesk-display", sans-serif;
	font-weight: 600;
	font-style: normal; font-size: 3rem; }
#sophia_content a, #sophia_content a:active { text-decoration: none; color: #00a590; }

.atmen_sophia { opacity: 0; animation: fadeInSophia 2s alternate infinite ease-in-out;  }	
@keyframes fadeInSophia { from { opacity: 1; } to { opacity: 0.5; }}

#bereichsinfo_content { display: inline-block; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; font-size: 1.3rem; margin-left: 0.3rem; }


/* Hamburger start und generell */	
#wrapper_hamburger_navi_top { display: inline-block; position: absolute; top: 0px; right: 0px; z-index: 99; }
		
.hamburger { position: absolute; top: 2.9rem; right: 0; height: 50px; width: 50px; background: url("https://www.sophiaguttenhoefer.de/site/files_extra/navi/closed_gelb_SG.png") center; background-size: contain; background-repeat: no-repeat; cursor: pointer; cursor: grabpointer; z-index: 200; }
.hamburger_x { position: absolute; top: 2.9rem; right: 0; height: 50px; width: 50px; background: url("../../files_extra/navi/open_gelb_SG.png") center; background-size: contain; background-repeat: no-repeat; cursor: pointer; cursor: grabpointer; z-index: 200; }
	
	
/* Navi und Hamburger content Abweichungen */	
#header_content #wrapper_sophia_top { width: 90%; }	
#header_content #wrapper_hamburger_navi_top { display: inline-block; position: static; float: right; margin-top: 0.5rem; }

#header_content .hamburger { position: static; top: 0; right: 0; margin-top: 0.5rem; margin-right: -5px;}
#header_content .hamburger_x { position: static; top: 0; right: 0; }


/* Hamburger overlay */
#wrapper_hamburger_navi_top_overlay { display: inline-block; position: absolute; top: 0px; right: 0px; z-index: 98; }
#navi_top_hamburger { display: none; 
	padding-top: 5.2rem;
	padding-bottom: 2rem;
	text-align: right;
	}	
	
#navi_top_hamburger li { display: block; margin-top: 0.9rem; list-style: none; } 
#navi_top_hamburger li:first-of-type { margin-top: 2rem; }
#navi_top_hamburger a { text-decoration: none; color: black; background: rgba(255, 255, 0, 1); padding: 0.2rem 1rem 0.2rem 1.2rem;}
#navi_top_hamburger a:hover { background: rgba(255, 255, 0, 0.8); cursor: grabpointer; }	
		
.nav { font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; }	


/* Hamburger overlay content Abweichungen */
#header_content #wrapper_hamburger_navi_top_overlay { display: inline-block; position: static; top: 0px; right: 0px; float: right; }
#header_content #navi_top_hamburger { padding-top: 0; padding-bottom: 0; }



/* Startseite Waben */

#content_start { margin-bottom: 2rem; }
#content_start.mobile { display: none; }
#waben_platzhalter { width: 95%; margin: 0 auto; aspect-ratio: 158 / 100; }
#waben { position: absolute; width: 95%; top: 3rem; left: 2.5%; }
.waben_inner { position: absolute; width: 100%; margin-top: 5rem; aspect-ratio: 158 / 100; }
.waben_innerst { top: 0; width: 100%; aspect-ratio: 158 / 100; background: center; background-size: contain; background-repeat: no-repeat; } 
.waben_innerst img { width: 100%; }

.waben_inner.info { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/SG_Grafik-Startseite_info_00.png") center; background-size: contain; background-repeat: no-repeat; }
.waben_inner.pct { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/SG_Grafik-Startseite_pct_00.png") center; background-size: contain; background-repeat: no-repeat; }
.waben_inner.vermittlung { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/SG_Grafik-Startseite_vermittlung_00.png") center; background-size: contain; background-repeat: no-repeat; }
.waben_inner.somatik { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/SG_Grafik-Startseite_somatik_00.png") center; background-size: contain; background-repeat: no-repeat; }

.info { animation: atmen_info 6s alternate infinite ease-in-out; }
.waben_inner.all .info { animation: atmen_info_spot 6s alternate infinite ease-in-out; }
.pct { animation: atmen_pct 4s alternate infinite ease-out; }
.waben_inner.all .pct { animation: atmen_pct_spot 4s alternate infinite ease-out; }
.vermittlung { animation: atmen_vermittlung 10s alternate infinite ease-in-out; }
.waben_inner.all .vermittlung { animation: atmen_vermittlung_spot 10s alternate infinite ease-in-out; }
.somatik { animation: atmen_somatik 3s alternate infinite ease-out; }
.waben_inner.all .somatik { animation: atmen_somatik_spot 3s alternate infinite ease-out; }

@keyframes atmen_info { to { transform: scale(1.03); } }
@keyframes atmen_info_spot { to { transform: translate(-8px, 20px); } }
@keyframes atmen_pct { to { transform: scale(1.055); } }
@keyframes atmen_pct_spot { to { transform: translate(-12px, 40px); } }
@keyframes atmen_vermittlung { to { transform: scale(1.075); } }
@keyframes atmen_vermittlung_spot { to { transform: scale(1.03); } }
@keyframes atmen_somatik { to { transform: scale(1.05); } }
@keyframes atmen_somatik_spot { to { transform: scale(1.02); } }



/* Hintergründe */

body.body_content .background { position: fixed;
width: 100%;
height: 100%;
top: 80px;
right: 0;
}



body.body_content .background_waben_info { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/SG_Grafik-Waben_HG_4.png") center;
background-size: cover;
background-repeat: no-repeat;
z-index: -10; }
body.body_content .background_underneath_info { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/hg/Kristin-Burkhard_Sheets_Hamburg_2018_bearb.jpg") center;
background-size: cover;
background-repeat: no-repeat;
z-index: -10; }

body.body_content .background_waben_p_c_t { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/SG_Grafik-Waben_HG_3.png") center;
background-size: cover;
background-repeat: no-repeat;
z-index: -10; }
body.body_content .background_underneath_p_c_t { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/hg/IMG_0812_tuerkis.jpg") center;
background-size: cover;
background-repeat: no-repeat;
z-index: -10; }

body.body_content .background_waben_vermittlung { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/SG_Grafik-Waben_HG_1.png") center;
background-size: cover;
background-repeat: no-repeat;
z-index: -10; }
body.body_content .background_underneath_vermittlung { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/hg/20180720_treffen_total_0294-Kopie.jpg") center;
background-size: cover;
background-repeat: no-repeat;
z-index: -10; }

body.body_content .background_waben_somatik { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/SG_Grafik-Waben_HG_2.png") center;
background-size: cover;
background-repeat: no-repeat;
z-index: -10; }
body.body_content .background_underneath_somatik { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/hg/Bildschirmfoto-2026-01-15-um-12.08.14_bearb.jpg") center;
background-size: cover;
background-repeat: no-repeat;
z-index: -10; }

body.body_content .background_waben_kontakt { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/SG_Grafik-Waben_HG_5.png") center;
background-size: cover;
background-repeat: no-repeat;
z-index: -10; }
body.body_content .background_underneath_kontakt { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/hg/2lips_Regina_Rossi_AnjaBeutler.de_217_test_1.jpg") center;
background-size: cover;
background-repeat: no-repeat;
z-index: -10; }

body.body_content .background_waben_content { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/SG_Grafik-Waben_HG_6.png") center;
background-size: cover;
background-repeat: no-repeat;
z-index: -10; }
body.body_content .background_underneath_content { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/hg/BLM_Jammermobil_Tour_2021_Hamburg_©Gmelin_bearb.jpg") center;
background-size: cover;
background-repeat: no-repeat;
z-index: -10; }

.fade_in_eins { opacity: 0; animation: fadeInEins 2s ease-out forwards; }
.fade_in_zwei { opacity: 0; animation: fadeInZwei 2s ease-out forwards; }

@keyframes fadeInEins { from { opacity: 0; } to { opacity: 0.1; }}
@keyframes fadeInDrei { from { opacity: 0; } to { opacity: 0.1; }}
@keyframes fadeInZwei { from { opacity: 0; } to { opacity: 0.2; }}
@keyframes fadeInFuenf { from { opacity: 0; } to { opacity: 0.2; }}



.goup-container { margin-right: 5.1%; margin-bottom: 90px; background-color: #ffff00 !important; opacity: 0.9; }
.goup-container:hover { opacity: 0.6; }
.goup-container.fancybox-margin { margin-right: 5%; }


#wrapper_content { width: 90%; margin: 0 auto; margin-top: 12rem; margin-bottom: 3rem; }
#wrapper_content.p_c_t { width: 90%; margin: 0 auto; margin-top: 12rem; margin-bottom: -1rem; }
#content { line-height: 2rem; }

#content a, .petrol a { color: #079381; font-weight: 600; hyphens: auto; }

.wrappy { padding: 0 0 8rem 0; }
.wrappy.abstand_klein { padding: 0 0 2rem 0; }
.wrappy.abstand_mittel { padding: 0 0 4rem 0; }

.wrappy.projekt.mix { padding: 0 0 12rem 0; }
.wrappy_p_c_t_unten { padding: 3rem 0 0 0; }


.volle_breite { width: 100%; }

.container { }

.typ { font-size: 1rem; line-height: 1.5rem; }
.typ li { list-style: none; display: inline-block; padding-right: 0.2rem; }
.typ li::after { content: " / "; }
.typ li:last-of-type::after { content: ""; }

.projekt .projekttitelei { width: 48%; float: right; margin-bottom: 2rem; }
.projekttitel { display: inline-block; }
.projekttitel h2 { margin-block-start: 0.5rem; margin-block-end: 0rem; }
.projektuntertitel h3 { margin: 0.5rem 0 0 0; }

.projekt_body { display: flex; justify-content: space-between; clear: both; }

.left { width: 48%; }
.left_eins { width: 31%; }
.left_zwei { width: 65%; }
.left_korr { margin-top: -5px; }
.right { width: 48%; }
.right_eins { width: 31%; }
.right_zwei { width: 65%; }
.right_korr { margin-top: -5px; }

.p_c_t_oben { padding-bottom: 0.8rem; }
.p_c_t_oben:last-of-type { padding-bottom: 0; }
.projekt_body .left  { width: 48%;
		position: sticky;
		top: 17rem;
		height: fit-content;
		padding-bottom: 6rem; }
.p_c_t_video { margin-top: 2rem; }		

.right:has(.video_rechts) { display: flow-root; }
.video_rechts { float: right; }

.vermittlung_body { display: flex; justify-content: space-between; clear: both; }
.vermittlung_body .left { position: sticky;
		top: 14rem;
		height: fit-content;
		padding-bottom: 4rem; }
.vermittlung_body .projekttitelei { margin-bottom: 2rem; padding-top: 2rem; }
.vermittlung_body .projekttitelei:first-of-type { margin-bottom: 2rem; padding-top: 0; }

.somatik_body { display: flex; justify-content: space-between; clear: both; }
.somatik_body .left {position: sticky;
		top: 14rem;
		height: fit-content;
		padding-bottom: 4rem; }
.somatik_body .projekttitelei { margin-bottom: 2rem; padding-top: 2rem; }
.somatik_body .projekttitelei:first-of-type { margin-bottom: 2rem; padding-top: 0; }


.bild.einzelbild { height: 300px; width: auto; }
.bild.einzelbild.volle_breite { height: auto; }
.bild img { width: 100%; }
.bild.einzelbild img { height: 100%; width: auto; }
.bild.einzelbild.volle_breite img { width: 100%; }

.bildreihe_single { height: 160px; width: auto; float: left; margin-right: 1rem; margin-bottom: 1rem; }
.bildreihe_single:last-of-type { margin-right: 0; }
.bildreihe_single img { height: 100%; width: auto; }

.video_klein { height: 160px; width: auto; aspect-ratio: 16 / 9; }

.zweispaltig { display: flex; justify-content: space-between; }


.teaser { margin-bottom: 2rem; }
.activator::after { content: "weitere Infos …"; color: #079381; }
.activator.activated::after { content: "weitere Infos … / close"; color: #079381; }
.activator { cursor: pointer; color: #079381; ; font-weight: 600; text-decoration: underline; }
.activator:hover { cursor: pointer; }
.hidden { display: none; margin-top: 2rem; margin-bottom: 1rem; }
.workshops_einzeln .hidden, .buehne_einzeln .hidden, .veranstaltungen_einzeln .hidden { margin-top: 2rem; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }



/* Slider */
.wrap_the_slider { position: relative;
	top: 0; left: 0;
	width: 100%;
	aspect-ratio: 3 / 2; 
	z-index: 1; opacity: 1; 
	justify-content: center; 
	}
	
.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;
	  }
	  
.rslides_tabs { 
	display: block;
	font-size: 1rem;
	list-style: none;
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
	width: 100%;
	color: pink;
	}	 
	
/* .rslides_tabs { margin-top: -32px; } */
	
.rslides_tabs li {
	display: inline;
	float: none;
	margin-right: 4px; }
	
#content .rslides_tabs li a {
	font-weight: 400;
	text-decoration: none;
	color: black; }
	
.rslides_tabs li a::after {
	content: " /"; 
	color: black; }
	
.rslides_tabs li:last-of-type a::after {
	content: ""; }
	
#content .rslides_tabs li.rslides_here a {
	color: #079381; }		
	
#content .rslides_tabs li a:hover {
	color: #079381; }	


.sub { font-size: 1rem;
	line-height: 1.4rem;
	text-align: end;
	}
.wrap_the_slider .sub { line-height: 2.4rem; }
.right .bild + .sub, .right_eins .bild + .sub, .right_zwei .bild + .sub { margin-bottom: 1rem; }
.left .bild + .sub, .left_eins .bild + .sub, .left_zwei .bild + .sub { margin-bottom: 1rem; }

.wrap_the_slider:has(ul.rslides_content > li[class^="rslides"][class*="_on"] > .sub) .rslides_tabs {
  margin-top: -18px;
}

.zusatzinfos { font-size: 1rem; line-height: 1.5rem; margin-top: 1.5rem; }

.abstand { margin-bottom: 2rem; }



p:first-of-type { margin-block-start: 0; }
p:last-of-type { margin-block-end: 0; }

h1 { font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; font-size: 2.1rem; }
h2 { font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; font-size: 2rem; line-height: 2.7rem; border-bottom: 2px solid #ffff00; display: inline; }
h3 { font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; font-size: 1.5rem; margin-block-start: 0; margin-block-end: 0.8rem; }

.heading { }

.gelb { color: #ffff00; }

.petrol { color: #079381; }

/* Petrol alt: .petrol { color: #00a590; } */

.clear { clear: both; }

.trennbereich { margin-top: 0rem; padding-bottom: 4rem; }
.trennbereich.petrol { border-top: 2px solid #079381; }
.trennbereich.gelb { border-top: 2px solid #ffff00; }
.trennbereich.schwarz { border-top: 2px solid black; }






/* Filterbuttons etc. */
#content .controls button { background: #ffff00; border: 1px solid #ffff00; border-radius: 0; margin-right: 0.8rem; margin-bottom: 0.5rem; cursor: pointer; font-size: 1.2rem; color: black; font-weight: 600; }
#content .controls button:hover { background: #00a590; border: 1px solid #00a590; }
#content .controls button.mixitup-control-active { cursor: auto; background: #00a590; border: 1px solid #00a590; color: black; }

#content .controls button.ani { transition: 1s; }

#content .controls { margin-block-start: 1em; margin-block-end: 3rem; border: 0; }



/* Buttons Seitennavigation etc. */
#content .seitennavigation button { background: #ffff00; border: 1px solid #ffff00; border-radius: 0; margin-right: 0.8rem; margin-bottom: 0.5rem; cursor: pointer; font-size: 1.2rem; color: black; font-weight: 600; }
#content .seitennavigation button:hover { background: #00a590; border: 1px solid #00a590; }
#content .seitennavigation button.mixitup-control-active { cursor: auto; background: #00a590; border: 1px solid #00a590; color: black; }

#content .seitennavigation button.ani { transition: 1s; }

#content .seitennavigation  { margin-block-start: 0rem;
margin-block-end: 6rem; }

.in_fo #content .seitennavigation, .ver_mitt_lung #content .seitennavigation, .so_ma_tik #content .seitennavigation { margin-block-start: 1em; margin-block-end: 3rem; border: 0; } /* wenn Navigation als erster Block am Kopf der Seite genutzt wird */

#content .seitennavigation a, #content .seitennavigation a:hover { text-decoration: none; color: black; }




#footer { width: 100%; padding-top: 3rem; font-size: 1.3rem; position: static; }
#footer.footer_start { color: #ffff00; }
#wrapper_bottom { width: 90%; margin: 0 auto; position: relative; border-top: 2px solid  #ffff00; }
#wrapper_bottom_inner { }


#navigation_bottom_right { padding-top: 1rem; padding-bottom: 2rem; float: right; }
#navigation_bottom_right div { display: inline-block; margin-left: 1.5rem; }
#footer li { list-style: none; } 
#footer a { text-decoration: none; } 
#footer.footer_start a { color: #ffff00; }
#footer a:hover { text-decoration: underline; }

.social_wrapper { display: inline-block; }
.social { margin-left: 15px; }
.social div#social_insta { display: inline-block; width: 25px; height: 25px; margin-left: 5px; background: url("https://www.sophiaguttenhoefer.de/site/files_extra/instagram_gelb_SG.png") no-repeat center; background-size: contain; vertical-align: text-bottom;}


/* Footer content Abweichungen */	
#footer.footer_content { color: #079381; }
#footer.footer_content #wrapper_bottom { border-top: 2px solid  #079381; }
#footer.footer_content a { color: #079381; }









/* sehr große Ausgabegeräte */
@media screen and (min-width: 1296px) { 
	#header_content #header_fixed_inner { width: 1080px; }
	#wrapper_content, #wrapper_content.p_c_t { width: 1080px; }
	#wrapper_bottom { width: 1080px; }

	}	
	
	
	
	
@media screen and (max-width: 960px) { 
	
	#header_content #header_fixed { height: 88px; }	
	#wrapper_sophia_top { margin-top: -0.1rem; }
	#bereichsinfo_content { display: block;  font-size: 1.2rem; margin-top: -0.2rem; margin-left: 0.3rem; }
	#header_content #wrapper_hamburger_navi_top { margin-top: 0.7rem; }
	
	#wrapper_content, #wrapper_content.p_c_t { margin-top: 10rem; }
	
	}	
	
	
@media screen and (max-width: 768px) { 
	
	#content_start.desktop { display: none; }
	#content_start.mobile { display: block; margin-bottom: 5rem; }
	
	#waben_platzhalter {aspect-ratio: 160 / 135; }
	#waben { top: 5rem; left: 2.5%; }
	.waben_inner { margin-top: 5rem; aspect-ratio: 160 / 135; }
	.waben_innerst { aspect-ratio: 160 / 135; } 
	.waben_innerst img { width: 100%; }

	.waben_inner.info { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/mobile/SG_Grafik-Startseite_mobile_info.png") center; background-size: contain; background-repeat: no-repeat; }
	.waben_inner.pct { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/mobile/SG_Grafik-Startseite_mobile_pct.png") center; background-size: contain; background-repeat: no-repeat; }
	.waben_inner.vermittlung { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/mobile/SG_Grafik-Startseite_mobile_vermittlung.png") center; background-size: contain; background-repeat: no-repeat; }
	.waben_inner.somatik { background: url("https://www.sophiaguttenhoefer.de/site/files_extra/waben/mobile/SG_Grafik-Startseite_mobile_somatik.png") center; background-size: contain; background-repeat: no-repeat; }
	
	}		
		
		
		
@media screen and (max-width: 720px) { 
	
	#sophia_start { font-size: 3rem; }
	.body_start .hamburger, .body_start .hamburger_x { top: 2rem; }
		
	.wrappy.projekt.mix { padding: 0 0 8rem 0; }

	.projekt .projekttitelei { width: 100%; float: none; }

	.projekt_body, .vermittlung_body, .somatik_body, .zweispaltig { display: block; }
	.projekt_body .left, .vermittlung_body .left, .somatik_body .left { position: static; width: 100%; padding-bottom: 1rem; }
	.left_eins, .left_zwei, .right, .right_eins, .right_zwei { width: 100%; }
	
	.zweispaltig div.left, .zweispaltig div.left_eins, .zweispaltig div.left_zwei { padding-bottom: 2rem; }

	.slider.volle_breite { aspect-ratio: 3 / 2; overflow: hidden; align-content: center; }
	.slider.volle_breite.slider_hoch { aspect-ratio: 2 / 3; overflow: hidden; align-content: center; }
	
	#footer { font-size: 1.2rem; }

	}	
	
	
	
@media screen and (max-width: 520px) { 
	
	#sophia_start { font-size: 2.2rem; }
	.body_start .hamburger, .body_start .hamburger_x { top: 1.8rem; height: 38px; width: 38px; }
	
	#header_content #header_fixed { height: 76px; }	
	#wrapper_sophia_top { margin-top: 0.2rem; }
	#sophia_content { font-size: 2.2rem; }
	#bereichsinfo_content { font-size: 1rem; }
	#header_content #wrapper_hamburger_navi_top { margin-top: 0.7rem; }
	.body_content .hamburger, .body_content .hamburger_x { height: 38px; width: 38px; }
	#header_content #navi_top_hamburger li:first-of-type { 	margin-top: 1.5rem; }
	#header_content #wrapper_hamburger_navi_top_overlay { margin-right: -0.5rem; }
	
	#wrapper_content { margin-top: 10rem; }
	
	#content .seitennavigation button { margin-right: 0.5rem; }
	
	.bildreihe_single { width: 100%; height: auto; float: none; margin-right: 0; }
	.bildreihe_single:last-of-type { margin-bottom: 0; }
	.bildreihe_single img { height: auto; width: 100%; }
	
	.video_klein { height: auto; width: 100%; aspect-ratio: 16 / 9; }
	
	#navigation_bottom_right div { margin-left: 1rem; }
	
	}	
	
	
@media screen and (max-width: 400px) { 
	
	#header_content #header_fixed { height: 74px; }	
	#wrapper_sophia_top { margin-top: 0.2rem; }
	#sophia_content { font-size: 2.1rem; }
	#bereichsinfo_content { font-size: 0.95rem; }
	#header_content #wrapper_hamburger_navi_top { margin-top: 0.8rem; }
	.body_content .hamburger, .body_content .hamburger_x { height: 36px; width: 36px; }
	#header_content #wrapper_hamburger_navi_top_overlay { margin-right: -0.3rem; font-size: 1.1rem; }
	#header_content #navi_top_hamburger li:first-of-type { 	margin-top: 1.5rem; }
	#header_content #navi_top_hamburger a { box-shadow: 5px 5px 5px black; }
	
	#wrapper_content { margin-top: 9rem; }
	#content .controls button { font-size: 1.1rem; }
	
	#footer { font-size: 1.1rem; }
	#navigation_bottom_right { padding-bottom: 0rem; float: none; }
	
	}		
	
	
@media screen and (max-width: 380px) { 
	
	.body_start #header_loose { padding-top: 0rem; }
	#sophia_start { font-size: 2.6rem; line-height: 3rem; }
	.body_start .hamburger, .body_start .hamburger_x { top: 1.9rem; height: 36px; width: 36px; }
	
	}