*, *:before, *:after {
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
@font-face {
		font-family: "CCHeroSandwichMeat";
		src: url("fonts/CCHeroSandwichMeat.eot");
		src: url("fonts/CCHeroSandwichMeat.woff2")format("woff2"),
		url("fonts/CCHeroSandwichMeat.woff")format("woff"),
		url("fonts/CCHeroSandwichMeat.ttf")format("truetype"),
		url("fonts/CCHeroSandwichMeat.svg#CCHeroSandwichMeat")format("svg");
		}
	

body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: proxima-nova, 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: #fffae9; }

#header { width: 100%; position: fixed; top: 0; z-index: 100; background-color: #fffae9; }

#header_top { position: sticky; top: 0; z-index: 100; width: 1180px; margin: 0 auto; margin-bottom: 1rem; padding-top: 1rem; display: flow-root; }
/* ehemals z-index: 1000; ??? */

#header_left { width: 40%; float: left; }
#kk_start { display: inline-block; height: 80px; width: 100%; margin-top: 6rem; margin-bottom: 1.5rem;background: url("https://www.kinderkinder.de/site/files_extra/KinderKinder-Logo_Schriftzug.png") no-repeat center; background-size: contain; vertical-align: text-bottom; }

#header_right { width: 30%; float: right; position: relative; }
#header_right_inner { }

#social_wrapper { display: inline-block; margin-top: 9rem; }
#social_wrapper a { text-decoration: none; }
.social { margin-left: 15px; }
.social div#social_facebook { display: inline-block; width: 30px; height: 30px; margin-left: 5px; background: url("https://www.kinderkinder.de/site/files_extra/social/facebook_lila_2_KinderKinder.png") no-repeat center; background-size: contain; vertical-align: text-bottom; }
.social div#social_vimeo { display: inline-block; width: 30px; height: 30px; margin-left: 5px; background: url("https://www.kinderkinder.de/site/files_extra/social/vimeo_lila_KinderKinder.png") no-repeat center; background-size: contain; vertical-align: text-bottom; }
.social div#social_insta { display: inline-block; width: 30px; height: 30px; margin-left: 5px; background: url("https://www.kinderkinder.de/site/files_extra/social/instagram_lila_KinderKinder.png") no-repeat center; background-size: contain; vertical-align: text-bottom; }

#mops_start { float: right; display: inline-block; height: 200px; width: 50%; position: absolute; top: 0; right: -5px; background: url("https://www.kinderkinder.de/site/files_extra/KinderKinder-Logo_Mops.png") no-repeat center; background-size: contain; vertical-align: text-bottom; }




/* Navigation Start und Content Pages */

#wrapper_hamburger_navi_top, #wrapper_hamburger_navi_top_overlay { display: none; }

#navigation_top { width: 100%; border-top: 2px solid #ffd744; border-bottom: 2px solid #ffd744; }
#wrap_the_lis { width: 1180px; margin: 0 auto; }
#navigation_top li { display: inline-block; margin-right: 1.5rem; list-style: none; } 
#navigation_top a { font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal; color: #954b97; text-decoration: none; } 
#navigation_top a:hover { color: #cb93c2; }
#navigation_top li.current > a { color: #cb93c2; }
	
#navigation_top li.level-1, #navigation_top li.current { position: relative; display: inline-block; margin-top: 2px; }	



/* Navigation Top Dropdown Start und Content Pages */

.dropdown div { display: none; position: absolute; z-index: 100; }
#navigation_top li.current-parent > a { color: #cb93c2; }
li.dropdown:hover .dropdown-content { display: block; }
li.dropdown:focus-within .dropdown-content { display: block; }
.dropdown div ul { margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0; }
#navigation_top li.dropdown div.dropdown-content ul li.level-2 { display: block; white-space: nowrap; margin-bottom: 0.5rem; }
#navigation_top li.dropdown > .dropdown-content > ul > li.level-2:first-child  { margin-top: 1rem; }
.dropdown ul li.level-2 a span { padding: 0.3rem 0.5rem 0.1rem 0.5rem; margin-left: -0.4rem; margin-bottom: 1rem; }
.dropdown ul li.level-2 a span { text-decoration: none; }
.dropdown ul li.level-2 span { background: #ffd744; } 



/* Hamburger start und generell */	
#wrapper_hamburger_navi_top { display: none; }
		
.hamburger { position: absolute; top: 5.6rem; right: 5%; height: 38px; width: 38px; background: url("https://www.kinderkinder.de/site/files_extra/navi/closed_lila_kk.png") center; background-size: contain; background-repeat: no-repeat; cursor: pointer; cursor: grabpointer; z-index: 200; }
.hamburger_x { position: absolute; top: 5.6rem; right: 5%; height: 38px; width: 38px; background: url("../../files_extra/navi/open_lila_kk.png") center; background-size: contain; background-repeat: no-repeat; cursor: pointer; cursor: grabpointer; z-index: 200; }
	
	


/* Hamburger overlay "droppi" */
#wrapper_hamburger_navi_top_droppi { display: none; position: relative; z-index: 102; }
#navi_top_hamburger { display: none; 
	padding-top: 0; padding-bottom: 0; 
	text-align: right;
	}	
	
#navi_top_hamburger li { display: block; margin-top: 2rem; list-style: none; } 
#navi_top_hamburger li:first-of-type { margin-top: 0.5rem; }
#navi_top_hamburger a { font-weight: 700; font-style: normal; text-decoration: none; color: #954b97; background: #ffd744; padding: 0.1rem 0.3rem 0.1rem 0.3rem; }
#navi_top_hamburger a:hover { color: #cb93c2; cursor: grabpointer; }	

#navi_top_hamburger .dropdown div { display: block; position: relative; margin-top: 0.4rem; }
#navi_top_hamburger .dropdown div ul { max-width: none; }

#navi_top_hamburger .dropdown div ul li.level-2 { display: inline; white-space: pre-wrap; margin-left: 0.4rem;margin-bottom: 0.2rem; }
#navi_top_hamburger .dropdown ul li.level-2:first-of-type { }
#navi_top_hamburger .dropdown ul li.level-2 { margin-left: -1rem; }
#navi_top_hamburger .dropdown ul li.level-2 a { display: inline-block; white-space: nowrap; font-size: 1.1rem; background: #ffd744; margin-top: 0.4rem; }
#navi_top_hamburger .dropdown ul li.level-2 a span { padding: 0; margin-left: 0rem; }
#navi_top_hamburger li.level-2.current>a span { color: #cb93c2; } 
#navi_top_hamburger .dropdown ul li.level-2, #navi_top_hamburger .dropdown ul li.level-2 a, .nav #navi_top_hamburger ul { font-size: 1.1rem; }

#navi_top_hamburger .level-2 a:hover { color: #cb93c2; border-bottom: 0; }

.overlay { display: none; position: fixed; top: 0;
left: 0; z-index: 96; width: 100%; height: 100%; background: rgba(203, 147, 194, 0.6); }





/* Laufschrift */

#laufschrift_wrapper { margin-top: 20rem; padding-bottom: 0; }
.marquee3k { width: 100%; padding: 0; }
.marquee3k p { margin-block-start: -0.2rem; margin-block-end: 0.2rem; }
.marquee3k a { color: white; text-decoration: none; }
.marquee3k a:hover { text-decoration: underline; }
.laufschrift { background: #cb93c2; color: white; font-size: 1.4rem; padding: 5px 5px 0px 5px; }	



#content { width: 1180px; margin: 0 auto; margin-top: 4rem; }
.body_content #content { margin-top: 21rem; }

#content a { color: #954b97; text-decoration: none; font-weight: 700; }
#content a:hover { color: #cb93c2; }

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

.wrappy.abstand_null { padding: 0 0 0 0; }



/* Teaser Startseite + Programmunterseiten + Rasterhaltige Bildreihen */

#teaser_start_main { margin-bottom: 4rem; }
#teaser_start { margin-bottom: 8rem; }
#teaser_programm { margin-bottom: 8rem; }

.dreier_raster { display: grid; grid-column-gap: 2%;
	grid-template-columns: 32% 32% 32%; margin-block-start: 1.5rem; }
.vierer_raster { display: grid; grid-column-gap: 2%;
	grid-template-columns: 23.5% 23.5% 23.5% 23.5%; margin-block-start: 1.5rem; }
.fuenfer_raster { display: grid; grid-column-gap: 2%;
	grid-template-columns: 18.4% 18.4% 18.4% 18.4% 18.4%; margin-block-start: 1.5rem; }
.sechser_raster { display: grid; grid-column-gap: 2%;
	grid-template-columns: 15% 15% 15% 15% 15% 15%; margin-block-start: 1.5rem; }
	
#teaser_start_main .teaser { margin-bottom: 25px; aspect-ratio: 8 / 11; overflow: hidden; }
#teaser_start .teaser { margin-bottom: 25px; aspect-ratio: 5 / 3; overflow: hidden; }

#teaser_programm .teaser { margin-bottom: 25px; aspect-ratio: 5 / 3; overflow: hidden; }
.rasterimg { margin-bottom: 25px; }
		
#teaser_start_main img, #teaser_start img, #teaser_programm img { width: 100%; border-radius: 32px; }
.rasterimg img { width: 100%; }



/* Kalender ohne grid-Layout

.termin { display: flow-root; border-top: 2px solid #ffd744; }
.termin:last-of-type { border-bottom: 2px solid #ffd744; }
.t_teaserbild { float: left; width: 15%; aspect-ratio: 1 / 1; overflow: hidden; align-content: center;margin-right: 5%; }
.t_teaserbild img { width: 100%; }
.t_textinfos_rechts { padding-top: 1rem; } // um den rechten Bereich, alles außer dem Bild also, herum
.t_dat_uhr { float: left; width: 15%; margin-right: 5%; color:  #cb93c2; text-align: center; line-height: 2rem; }
.t_datum { font-size: 1.8rem; font-weight: 700; }
.t_maininfos { float: left; width: 45%; margin-right: 5%; }
.t_titel { display: inline-block; margin-left: -0.2rem; }
.t_titel h3 { float: left; font-size: 2rem; font-weight: 700; line-height: 2rem; margin-block-start: 0;
	margin-block-end: 0;}
.t_titel a { text-decoration: none; color: #954b97; }
.t_alter { font-weight: 400; font-style: normal; font-size: 1.1rem; }
.t_ort { margin-top: -1rem; padding-bottom: 1rem; }
.t_text a { text-decoration: none; color: #954b97; }
.t_ticketlink { width: 10%; float: right; background: #cb93c2; margin-top: 1rem; padding: 0.5rem; border-radius: 15px; text-align: center; font-weight: 700; }
.t_ticketlink a { text-decoration: none; color: white; } */


/* Kalender grid-Layout*/

.termin { display: grid; grid-column-gap: 3%; grid-template-columns: 19% 15% 47% 10%; align-items: start; border-top: 2px solid #ffd744; }
.termin:last-of-type { border-bottom: 2px solid #ffd744; }
.t_teaserbild { overflow: hidden; align-content: center; }
.t_teaserbild img { display: block; width: 100%; }
.t_textinfos_rechts { padding-top: 1rem; }
.t_dat_uhr { margin-right: 5%; margin-top: 1rem; color:  #cb93c2; text-align: center; line-height: 2rem; }
.t_datum { font-size: 1.8rem; font-weight: 700; }
.t_maininfos { margin-top: 1rem; padding-bottom: 1rem; }
.t_typ { line-height: 2rem; }
.t_titel { display: inline-block; }
.t_titel h3 { float: left; font-family: proxima-nova, sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.6rem; margin-block-start: 0; margin-block-end: 0; color: #954b97; }
#content .termin h3 a { font-weight: 700; line-height: 2rem; }
#content .termin h3 span.t_titel_ev_korr { line-height: 2rem; }
.t_titel h3 span.unterueberschrift { font-size: 1.3rem; font-weight: 700; line-height: 1.4rem; color: #cb93c2; }
.t_titel h3 span.unterueberschrift::before { content: '/ '; }
.t_titel a { text-decoration: none; color: #954b97; }
.t_alter { font-weight: 400; font-style: normal; font-size: 1.1rem; line-height: 1.8rem; color: #954b97; }
.t_ort { margin-top: -1rem; padding-bottom: 1rem; font-weight: 600; }
.t_text p { margin-block-end: 0; }
.t_text a { text-decoration: none; color: #954b97; }
.t_ticketlink { background: #cb93c2; margin-top: 3rem; padding: 0.5rem; border-radius: 15px; text-align: center; font-weight: 700; }
#content .t_ticketlink a { text-decoration: none; color: #954b97; }
#content .t_ticketlink a:hover { color: white; }



/* Veranstaltungen */

.wrappy.veranstaltung { padding-bottom: 4rem; }
.v_titel { color: #954b97; }
.v_untertitel { margin-top: -0.3rem; font-size: 1.6rem; font-weight: 700; color:  #cb93c2; }
.v_alter { display: inline; }
.v_dauer { display: inline; }
.veranstaltung_body { display: flex; flex-direction: row; column-gap: 5%; margin-top: 2rem; } 
.v_ort { margin-top: 2rem; }
.v_adresse {}
.v_bildbereich { }
.v_bildbereich img { width: 100%; }



/* 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: 12px 0;
	text-align: center;
	width: 100%;
	}	 
	
/* .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: #954b97; }		
	
#content .rslides_tabs li a:hover {
	color: #954b97; }	


.sub { font-size: 1rem;
	line-height: 1.4rem;
	text-align: end;
	}
.wrap_the_slider .sub { line-height: 2rem; }
.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(div.sub) .rslides_tabs {
	  margin-top: -15px; 
	}
	
	
.volle_breite { width: 100%; }

.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; }

.veranstaltung_body .right div div:nth-of-type(n+2) { margin-top: 1.5rem; }

.bild img { width: 100%; }


.bildreihe_single:not(.rasterimg .bildreihe_single) {
	height: 180px;
	width: auto;
	display: inline-block;
	margin-right: 10px;
}

.bildreihe_single:not(.rasterimg .bildreihe_single) img {
	height: 100%;
	width: auto;
}

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



h1 { font-family: 'CCHeroSandwichMeat'; font-size: 3.2rem; font-weight: normal; line-height: 3.5rem; margin-block-start: 0; margin-block-end: 0; margin-left: -1px; color: #954b97; }
h2 { font-family: 'CCHeroSandwichMeat'; font-size: 2.2rem; font-weight: normal; line-height: 2.8rem; margin-block-start: 0; margin-block-end: 1rem; margin-left: -1px; color: #954b97; }
h2.h_termine { font-size: 2.5rem; }
h3 { font-family: 'CCHeroSandwichMeat'; font-size: 1.6rem; font-weight: normal; line-height: 2.2rem; margin-block-start: 0; margin-block-end: 1rem; margin-left: -1px; color: #954b97; } 
.text h3 { margin-block-start: 0; margin-block-end: 1rem; }
p { margin-block-start: 0; margin-block-end: 1rem; }
p:last-of-type { margin-block-end: 0; }
p.t_alter:last-of-type { margin-block-end: 1rem; }
strong { font-weight: 700; font-style: normal; }
.titel { margin-bottom: 2rem; }
.sub { font-size: 0.9rem; }



/* Footer */

#footer.footer_mobile { display: none; }
#footer {  width: 100%; padding-top: 1rem; font-size: 1.3rem; position: static; border-top: 2px solid #ffd744; }
#wrapper_bottom { width: 1180px; margin: 0 auto; position: relative; }
#wrapper_bottom_inner { }

#social_wrapper_mobil { display: none; margin-bottom: 1rem; }
#social_wrapper_mobil a { text-decoration: none; }

#navigation_bottom_right { padding-bottom: 2rem; float: right; }
#navigation_bottom_right div { display: inline-block; margin-left: 1.5rem; }
#footer li { list-style: none; } 
#footer a { font-family: proxima-nova, sans-serif;
	font-weight: 700;
	font-style: normal; color: #954b97; text-decoration: none; } 
#footer a:hover { text-decoration: underline; }








/* kleiner werdende Ausgabegeräte */
@media screen and (max-width: 1280px) { 
	
	#header_top, #wrap_the_lis, #content, #wrapper_bottom { width: 90%; }
	#social_wrapper { margin-top: 8.5rem; }
}



@media screen and (max-width: 1180px) { 
	
	.termin { grid-column-gap: 4%; grid-template-columns: 20% 22% 36% 10%; }
}



@media screen and (max-width: 1080px) { 
	
	#header_left {  width: 50%; }
	
	.bildreihe_single:not(.rasterimg .bildreihe_single) { height: 160px; }
}



@media screen and (max-width: 880px) { 
	
	#header_top { margin-bottom: 0rem; }
	#header_left {  width: 60%; }
	#header_right {  width: 38%; }
	
	#social_wrapper { margin-top: 8rem;} 
	.social div#social_facebook, .social div#social_insta, .social div#social_vimeo { width: 25px; height: 25px; margin-left: 3px; } 
	
	#teaser_start_main img, #teaser_start img, #teaser_programm img { border-radius: 28px; }
	
	.bildreihe_single:not(.rasterimg .bildreihe_single) { height: 150px; }
	
	.termin { grid-column-gap: 4%; grid-template-columns: 28% 49% 15%; }
	.t_teaserbild { display: none; }
	.t_ticketlink { padding: 0.4rem; border-radius: 12px; }
}



@media screen and (max-width: 720px) { 
	
	#social_wrapper { display: none; }
	#mops_start { width: 60%; }
	
	#navigation_top li { margin-right: 1.1rem; } 
	
	.bildreihe_single:not(.rasterimg .bildreihe_single) { height: 140px; }
	
	#footer.footer_mobile { display: block; padding-top: 0.8rem; }
	
	#wrapper_bottom_right { float: none; text-align: right; }
	#social_wrapper_mobil { display: inline-block; }
	#navigation_bottom_right div:first-of-type { margin-left: 0; }
	#navigation_bottom_right div { display: inline-block; margin-left: 1.1rem; }
}



/* Wechsel zu mobile-Navigation */
@media screen and (max-width: 700px) { 
	
	#header { background: none; }
	#header_top { background-color: #fffae9; border-bottom: 2px solid #ffd744; width: 100%; padding: 0 5%; }
	#kk_start { margin-top: 4rem; margin-bottom: 1rem; }
	#header_right {  width: 40%; }
	#mops_start { width: 50%; height: 150px; right: 25%; }
	#navigation_top { display: none } 
	
	#wrapper_hamburger_navi_top { display: block; position: absolute; top: 0px; right: 0; z-index: 101; width: 100%; }
	#wrapper_hamburger_navi_top_droppi { display: inline-block; margin-right: -0.5rem; } 
	
	#laufschrift_wrapper { margin-top: 16rem; }
	.body_content #content { margin-top: 16rem; }
	
	#teaser_start_main img, #teaser_start img, #teaser_programm img { border-radius: 24px; }
	
	.bildreihe_single:not(.rasterimg .bildreihe_single) { height: 120px; }
	
	.veranstaltung_body { display: block; flex: none; }   
	.left, .right { width: 100%; }
	.left { margin-bottom: 4rem; }
}



@media screen and (max-width: 640px) { 
	
    #navi_top_hamburger .dropdown ul li.level-2, #navi_top_hamburger .dropdown ul li.level-2 a, .nav #navi_top_hamburger ul { font-size: 0.95rem; }
	
	.laufschrift { font-size: 1.2rem; }	
	
	#teaser_start_main img, #teaser_start img, #teaser_programm img  { border-radius: 20px; }
	
	.bildreihe_single:not(.rasterimg .bildreihe_single) { height: 100px; margin-right: 6px;}
	
	.termin { display: flow-root; padding-bottom: 2rem; }
	.t_dat_uhr { margin-right: 0; text-align: right; line-height: 1.6rem; }
	.t_dat_uhr div { display: inline; font-size: 1.3rem; }
	.t_wochentag::after { content: ', '}
	.t_datum { font-weight: 600; }
	.t_datum::after { content: ', '}
	.t_uhrzeit::after { content: ' '}
	.t_dauer { white-space: nowrap; }
	.t_dauer::before { content: '('}
	.t_dauer::after { content: ')'}
	.t_maininfos { padding-bottom: 0; }
	.t_ticketlink { display: inline-block; float: right; margin-top: 1rem; padding: 0.4rem 0.8rem 0.4rem 0.8rem; }
	
	h1 { hyphens: auto; font-size: 2.8rem; line-height: 3rem; }
	h2 { font-size: 2.4rem; line-height: 2.6rem; }
}



@media screen and (max-width: 600px) { 
	
	#mops_start { width: 55%; height: 160px; }
	
	.hamburger, .hamburger_x { height: 32px; width: 32px; }
	
	#laufschrift_wrapper { margin-top: 14rem; }
	.body_content #content { margin-top: 14rem; }
	
}



@media screen and (max-width: 480px) { 
	
	#kk_start { margin-top: 1.6rem; margin-bottom: 0rem; }
	#mops_start { height: 105px; }
	
	.hamburger, .hamburger_x { top: 3.35rem; height: 30px; width: 30px; }
	
	.dreier_raster, .vierer_raster, .fuenfer_raster, .sechser_raster { display: block; }
	
	#laufschrift_wrapper { margin-top: 12rem; }
	.body_content #content { margin-top: 12rem; }
	
	#teaser_start_main img, #teaser_start img, #teaser_programm img  { border-radius: 24px; }
}



@media screen and (max-width: 420px) { 
	
	#header_left { width: 65%; }
	#kk_start { height: 70px; }
	#header_right { width: 35%; }
	#mops_start { height: 105px; right: 30%; }
	
	.hamburger, .hamburger_x { top: 3.1rem; height: 28px; width: 28px; }
	
	#laufschrift_wrapper { margin-top: 10rem; }
	.body_content #content { margin-top: 10rem; }
}





/* Transitions zu is-scrolled-Bereichen */
@media (prefers-reduced-motion: no-preference) {
  #kk_start,
  #header_right,
  #social_wrapper,
  #mops_start,
  #laufschrift_wrapper,
  .hamburger, .hamburger_x,
  .body_content #content {
	transition: transform .5s ease, top .5s ease, margin-top .5s ease, margin-bottom .5s ease, height .5s ease, width .5s ease, min-width .5s ease, max-width .5s ease;
  }
}



/* Header kompakter */
body.is-scrolled #kk_start {
  /* Höhe ggf. etwas kleiner */
  height: 55px;
  width: 80%;
  /* statt margin-top hart zu animieren: transform ist meist smoother */
  margin-top: 0;                 /* wichtig: Layout "oben" kompakt */
  margin-bottom: 1rem;
  transform: translateY(12px);   /* optischer Feinschliff */
}

@media screen and (max-width: 1200px) { 
	
body.is-scrolled #kk_start {
  width: 90%;
}
}

@media screen and (max-width: 1080px) { 
	
body.is-scrolled #kk_start {
  width: 82%;
}
}

@media screen and (max-width: 880px) { 
	
body.is-scrolled #kk_start {
  margin-bottom: 2rem;
}
}

@media screen and (max-width: 720px) { 
	
body.is-scrolled #kk_start {
  width: 90%;
  margin-bottom: 2rem;
}
}

@media screen and (max-width: 720px) { 
	
body.is-scrolled #kk_start {
  margin-bottom: 1.2rem;
  transform: translateY(6px);
}
}

@media screen and (max-width: 420px) { 
	
body.is-scrolled #kk_start {
  width: 100%;
  margin-top: 0.2rem;
  transform: translateY(6px);
}
}



/* Social Icons nach oben ziehen */
body.is-scrolled #social_wrapper {
  margin-top: 2.1rem;;
  transform: translateY(18px);
}


/* Mops kleiner + weiter nach oben/rechts */
body.is-scrolled #header_right {
  width: 24%;
  margin-top: -1.5rem;
  transform: translateY(6px);
}


@media screen and (max-width: 1260px) { 
	
body.is-scrolled #header_right {
  width: 30%;
  transform: translateY(6px);
}
}

@media screen and (max-width: 1000px) { 
	
body.is-scrolled #header_right {
  width: 36%;
  transform: translateY(6px);
}
}

@media screen and (max-width: 840px) { 
	
body.is-scrolled #header_right {
  width: 40%;
  transform: translateY(6px);
}
}

@media screen and (max-width: 700px) { 
	
body.is-scrolled #header_right {
  margin-top: -1rem;
  transform: translateY(6px);
}
}

@media screen and (max-width: 420px) { 
	
body.is-scrolled #header_right {
  width: 35%;
  transform: translateY(6px);
}
}



body.is-scrolled #mops_start {
  height: 145px;
  min-width: 42%;
  transform: translateY(6px);
}

@media screen and (max-width: 1000px) { 
	
body.is-scrolled #mops_start {
  height: 145px;
  min-width: 42%;
  transform: translateY(6px);
}
}

@media screen and (max-width: 840px) { 
	
body.is-scrolled #mops_start {
  margin-top: 0.2rem;
  transform: translateY(6px);
}
}

@media screen and (max-width: 720px) { 
	
body.is-scrolled #mops_start {
  max-width: 55%;
  transform: translateY(6px);
}
}

@media screen and (max-width: 700px) { 
	
body.is-scrolled #mops_start {
  margin-top: 0.5rem;
  max-width: 55%;
  height: 100px;
  transform: translateY(6px);
}
}

@media screen and (max-width: 480px) {

body.is-scrolled #mops_start {
  margin-top: 0.6rem;
  transform: translateY(6px);
}
}

@media screen and (max-width: 420px) {
	
body.is-scrolled #mops_start {
  margin-top: -0.2rem;
  max-width: 45%;
  height: 90px;
  transform: translateY(6px);
}
}


@media screen and (max-width: 700px) { 
	
body.is-scrolled .hamburger {
  top: 1.5rem;
  transform: translateY(6px);
}
}

@media screen and (max-width: 600px) { 
	
body.is-scrolled .hamburger {
  top: 1.25rem;
  transform: translateY(6px);
}
}

@media screen and (max-width: 480px) { 
	
body.is-scrolled .hamburger {
  top: 1.2rem;
  transform: translateY(6px);
}
}


@media screen and (max-width: 700px) { 
	
body.is-scrolled .hamburger_x {
  top: 1.5rem;
  transform: translateY(6px);
}
}

@media screen and (max-width: 600px) { 
	
body.is-scrolled .hamburger_x {
  top: 1.25rem;
  transform: translateY(6px);
}
}

@media screen and (max-width: 480px) { 
	
body.is-scrolled .hamburger_x {
  top: 1.6rem;
  transform: translateY(6px);
}
}