@charset "utf-8";
@font-face {
    font-family: 'Inter';
    src: 	url('fonts/Inter-Regular.woff2') format('woff2'),
			url('fonts/Inter-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Inter';
    src: 	url('fonts/Inter-Italic.woff2') format('woff2'),
			url('fonts/Inter-Italic.ttf') format('truetype');
    font-style: italic;
    font-display: block;
}

@font-face {
    font-family: 'Fredoka';
    src: url('fonts/Fredoka-Light.eot');
    src: url('fonts/Fredoka-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Fredoka-Light.woff2') format('woff2'),
        url('fonts/Fredoka-Light.woff') format('woff'),
        url('fonts/Fredoka-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fredoka';
    src: url('fonts/Fredoka-Bold.eot');
    src: url('fonts/Fredoka-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Fredoka-Bold.woff2') format('woff2'),
        url('fonts/Fredoka-Bold.woff') format('woff'),
        url('fonts/Fredoka-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Fredoka';
    src: url('fonts/Fredoka-SemiBold.eot');
    src: url('fonts/Fredoka-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Fredoka-SemiBold.woff2') format('woff2'),
        url('fonts/Fredoka-SemiBold.woff') format('woff'),
        url('fonts/Fredoka-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

html {
  font-weight: 300;
  font-size: 1rem; /* body scales from this basic value in mediaqueries */
}
body {
	font-family: 'Inter', 'Helvetica Neue', 'Helvetica';
	font-weight: 300;
  	color: #545463;
}
body,
#logoAndMenuContainer {
	background: #fff;
}
h1, h2, h3 {
	font-family: 'Fredoka', 'Helvetica Neue', 'Helvetica';
  	color: #1e1e1e;
}

/* ------------------------------ LAYOUT ------------------------------------------------------- */
/*
 * NK Ultimate 6 no longer applies the site width to direct section children.
 * This site uses full-width sections with centred content wrappers throughout,
 * so retain the layout contract from the previous template version.
 */
section > * {
  width: 96%;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 75rem) {
  body section > * {
    width: 68rem;
  }
}
@media (min-width: 95rem) {
  body section > * {
    width: 86%;
  }
}
@media (min-width: 105rem) {
  body section > * {
    width: 76%;
  }
}
/* Sections */
section {
  padding-top: 2em;
  padding-bottom: 2em;
}
@media (min-width: 60rem) {
  section {
    padding-top: 5em;
    padding-bottom: 5em;
  }
}

/* The slider became a semantic section in NK Ultimate 6. It must remain
 * edge-to-edge and must not inherit the generic section spacing/width. */
#slider {
  padding-top: 0;
  padding-bottom: 0;
}
#slider > *:not(.slider-page-heading) {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

/* ------------------------------ COLORS ------------------------------------------------------- */
.col1 {
  color: #16479b;
}
.bgCol1 {
  background-color: #16479b;
}
.bgCol1,.bgCol1 h1, .bgCol1 h2, .bgCol1 h3 {
  color: #fff;
}
.bgCol2 {
  background-color: #d1daeb;
}
.bgCol2,.bgCol2 h1, .bgCol2 h2, .bgCol2 h3 {
  color: #16479b;
}
#header1 svg {
  fill: #fff;
}
#header1 a:hover svg {
  fill: #d0daeb;
}
/* search */
#header1 .search form {
	border-color: #BABABA;
}
#header1 .search input {
	color: #bababa;
}
#header1 .search input:focus {
	outline-color: #16479b;
}
/* contact details */
#header1 > * .contactDetails a > svg {
	fill: #fff;
}
@media screen {
	#header1 > * .contactDetails p > a,
	#header1 a {
		transition: color ease-in-out 0.5s;
	}
	#header1 > * .contactDetails p > a:hover,
	#header1 a:hover {
		color: #d0daeb;
	}
}
/* logoandmenuContainer */
#logoAndMenuContainer {
	background: #fff;
  box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.22);
}
#logoAndMenuContainer.scrolledActive {
	background: #fff; /* scrolledActive */
}
/* logo */
#logo img {
  box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.22);
}
#logo a svg {
	fill: #545463;
}
#logo a:hover svg {
	fill: #545463;
}
/* MAIN MENU Mobile */
@media (max-width: 59.99rem) {
	/* Menu Hamburger Button */
	#mainmenu > a {
		background-color: #16479b;
	}
	#mainmenu > a > span {
		background-color: #fff;
	}
	#mainmenu.jsActivated ul {
		transition: max-height ease 1s;
	}
	#mainmenu li > a {
		border-color: #fff;
	}
	#mainmenu li.current.active > a {
		background: #16479b;
	}
	/* Submenue ----- */
	#mainmenu > ul {
		background-color: #1e1e1e; /* First level */
		color: #fff;
	}
	#mainmenu > ul > li > ul {
		background-color: #808080; /* Second level */
	}
	#mainmenu > ul > li > ul > li > ul {
		background-color: #999; /* Third level */
	}
	#mainmenu li.deeper.parent span.toggleButton {
		border-left-color: #fff;
	}
	#mainmenu li.deeper.parent span.toggleButton > svg {
		fill: #fff;
		transition: all ease 0.5s;
	}
	#mainmenu li.deeper.parent.jsActive span.toggleButton > svg {
		fill: #fff;
	}
}
/* mainmenu DESKTOP --- */
@media (min-width: 60rem) {
	#mainmenu > ul > li > a,
	#mainmenu > ul > li > span.separator {
		color: #1e1e1e;
		transition: all ease-in-out 0.5s;
	}
	#mainmenu > ul > li > a:hover,
	#mainmenu > ul > li.current > a,
	#mainmenu > ul > li:hover > a,
  #mainmenu li.deeper.parent.current > a,
	#mainmenu li.deeper.parent.active > a,
	#mainmenu > ul > li.current > span.separator {
		color: #16479b;
	}
	#mainmenu li.deeper.parent.current > span.toggleButton > svg,
	#mainmenu li.deeper.parent.active > span.toggleButton > svg,
	#mainmenu li.deeper.parent:hover > span.toggleButton > svg {
		fill: #16479b;
	}
	/* SVG Arrow */
	#mainmenu li.deeper.parent span.toggleButton > svg {
		fill: #1e1e1e;
		transition: all ease-in-out 0.5s;
	}
	#mainmenu > ul > li > ul.mod-menu__sub > li.deeper.parent span.toggleButton > svg,
	#mainmenu > ul > li > ul.mod-menu__sub > li.deeper.parent span.toggleButton > svg  {
		fill: #fff; /* Second Level Arrow */
	}
	#mainmenu > ul > li > ul.mod-menu__sub > li.deeper.parent.current span.toggleButton > svg,
	#mainmenu > ul > li > ul.mod-menu__sub > li.deeper.parent.active  span.toggleButton > svg,
	#mainmenu > ul > li > ul.mod-menu__sub > li.deeper.parent:hover span.toggleButton > svg {
		fill: #fff; /* Second level Arrow hover / active */
	}
	#mainmenu > ul > li > ul.mod-menu__sub > li > a,
	#mainmenu > ul > li > ul.mod-menu__sub > li > ul.mod-menu__sub > li > a,
	#mainmenu > ul > li > ul.mod-menu__sub > li > span.separator,
	#mainmenu > ul > li > ul.mod-menu__sub > li > ul.mod-menu__sub > li > span.separator  {
		background: #1e1e1e;
		color: #fff;
		border-color: #fff;
		transition: all ease 0.5s;
	}
	#mainmenu > ul > li > ul.mod-menu__sub > li:hover > a,
	#mainmenu > ul > li > ul.mod-menu__sub > li > ul.mod-menu__sub > li:hover > a,
	#mainmenu > ul > li > ul.mod-menu__sub > li.current > a,
	#mainmenu > ul > li > ul.mod-menu__sub > li > ul.mod-menu__sub > li.current > a,
	#mainmenu > ul > li > ul.mod-menu__sub > li:hover > span.separator,
	#mainmenu > ul > li > ul.mod-menu__sub > li > ul.mod-menu__sub > li:hover > span.separator,
	#mainmenu > ul > li > ul.mod-menu__sub > li.current > span.separator,
	#mainmenu > ul > li > ul.mod-menu__sub > li > ul.mod-menu__sub > li.current > span.separator   {
		background-color: #16479b;
	}
	#mainmenu > ul > li > ul.mod-menu__sub > li:last-child > a,
	#mainmenu > ul > li > ul.mod-menu__sub > li:last-child > span.separator {
		border-bottom-color: #fff;
	}
	/* Special Button Style menu item */
	#mainmenu > ul > li.specialStyleButton > a,
	#mainmenu > ul > li > a.specialStyleButton {
		background: #16479b;
		color: #fff;
		transition: all linear 0.25s;
	}
	#mainmenu > ul > li.specialStyleButton > a:hover,
	#mainmenu > ul > li > a.specialStyleButton:hover {
		background: #545463;
		color: #fff;
	}
	/* Both header action buttons use the same black hover treatment. */
	#header2-other a.button:hover,
	#header2-other a.button:focus {
		background-color: #1f1f1f;
		border-color: #1f1f1f;
		color: #fff;
	}
}
/* component */
#component div p > a:hover,
#footer div p > a:hover {
  color: #16479b;
}
#component .bgCol1 p > a:hover {
  color: #d1daeb;
}
#component .bgCol2 p > a:hover {
  color: #16479b;
}
#component div p > a.button:hover {
  color: #fff;
}
/* footer */
#footer a:hover svg rect {
  fill: #1f1f1f;
}
/* additional to NK Framework */
.gradTCol1::before,
.gradTBCol1::before {
	background: linear-gradient(
		to top,
		rgba(22, 71, 155, 0),
		rgba(22, 71, 155, 1)
	);
}
.gradBCol1::after,
.gradTBCol1::after {
	background: linear-gradient(
		to bottom,
		rgba(22, 71, 155, 0),
		rgba(22, 71, 155, 1)
	);
}


/* TYPOGRAPHY ---------------------------------------------------------------------------------- */
p, 
blockquote, 
ol > li {
  line-height: 2em;
}
table {
  font-size: 0.8em;
}



/* HEADER1 -------------------------------------------------------------------------------------- */
#header1 {
	border-bottom: none;
}
#header1 > * {
	font-size: 1rem;
}

@media (max-width: 59.99rem) {
  #header1 > * > * {
    padding: 0;
  }
}
/* Header 1 Search Form */
#header1 .search form {
	border-style: solid;
  border-width: 2px;
}
#header1 .search input:focus {
  outline-width: 2px;
  outline-style: solid;
}


/* HEADER 2 ------------------------------------------------------------------------------------ */

/* LOGO AND MENU -------------> */
#logoAndMenuContainer #logo {
	transition: all ease 0.2s;
}
.parentscrolledInactive > div:first-child {
	transition: paddingTop ease 0.1s;
}
#logo a,
#logo a img,
#logo a svg  {
	display: block;
  transition: all ease 0.2s;
}
#logo img {
  max-height: 20em;
  border-radius: 50%;
}
/* Scrolled Active */
#logoAndMenuContainer.scrolledActive #logo {
	padding: 0.5em 1.5em 0.5em 0;
}
#logoAndMenuContainer.scrolledActive #logo a img,
#logoAndMenuContainer.scrolledActive #logo a svg  {
	max-height: 20em;
}
/* Tablet / Mobile */
@media (max-width: 59.99rem) {
  #logo {
    overflow: visible;
  }
  #logoAndMenuContainer #logo a img,
	#logoAndMenuContainer #logo a svg {
		max-height: 8em;
	}
	#logoAndMenuContainer.scrolledActive #logo a img,
	#logoAndMenuContainer.scrolledActive #logo a svg  {
		max-height: 8em;
	}
}
@media (max-width: 39.99rem) {
	#logoAndMenuContainer #logo a img,
	#logoAndMenuContainer #logo a svg {
		max-height: 5em;
	}
	#logoAndMenuContainer.scrolledActive #logo a img,
	#logoAndMenuContainer.scrolledActive #logo a svg  {
		max-height: 3em;
	}
}

/* When Logofull */
#logofull + #header2 > * {
	transition: padding ease-in-out 1s;
}

/* MAINMENU ------------------------------------------------------------------------------------ */
#mainmenu {
	font-size: 0.9em;
}
/* MOBILE -------- */
@media (max-width: 59.99rem) {
	#mainmenu.jsActivated ul {
		transition: max-height ease 1s;
	}
}
/* mainmenu DESKTOP --- */
@media (min-width: 60rem) {
  #mainmenu {
    font-weight: normal;
  }
	#mainmenu > ul > li > a,
	#mainmenu > ul > li > span.separator {
		text-transform: none;
	}
	/* Submenu itself */
	#mainmenu > ul > li > ul.mod-menu__sub,
	#mainmenu > ul > li > ul.mod-menu__sub > li > ul.mod-menu__sub {
		transition: max-height ease-in-out 0.5s, opacity ease-in-out 0.5s;
	}
	#mainmenu > ul > li:hover > ul.mod-menu__sub {
		transition: max-height ease-in-out 0.5s, opacity ease-in-out 0.5s;
	}
	/* Special Button Style menu item */
	#mainmenu > ul > li.specialStyleButton > a,
	#mainmenu > ul > li > a.specialStyleButton {
		border-radius: 0.25em;
		padding: 0.5em 1.5em;
	}
}


/* HeaderImage Position ------------------------------------------------------------------------ */
#headerimage > div {
	min-height: 10em;
}
@media (min-width: 40rem) {
	#headerimage > div {
		min-height: 15em;
	}
}
@media (min-width: 60rem) {
	#headerimage > div {
		min-height: 18em;
	}
}
#headerimage h1,
#headerimage h2 {
	padding: 0.25em 1rem;
	margin-bottom: 0.5rem;
}
#headerimage h1 {
	margin-top: 1em;
	font-weight: 400;
}
#headerimage h1:first-child,
#headerimage h2:first-child {
	margin-top: 1em;
  }
#headerimage h1:last-child,
#headerimage h2:last-child {
	margin-bottom: 1em;
}
#headerimage h1 + h2:last-child {
	margin-bottom: 3.8em; /* 3.6 / 1.5 * 2em (- 1em) */
}
#headerimage h2 {
	margin-top: 0.2em;
	font-size: 1.5em;
}
#headerimage h1,
#headerimage h2,
.separateLabels.white span,
.nkMellowSlides .separateLabels.white span {
	background: rgba(255,255,255,0.8);
	color: #545463;
	border-radius: 0.25rem;
	border: solid 1px rgba(255,255,255,0.9);
}


/* Slider Position ----------------------------------------------------------------------------- */

#slider .nkMellowSlides .separateLabels span,
.separateLabels span,
#slider .nkMellowSlides .separateLabels span.big,
.separateLabels span.big,
#slider .nkMellowSlides .separateLabels span.small,
.separateLabels span.small {
	padding: 0.25em 2rem;
}
h1 > span {
   font-size: inherit;
   font-weight: inherit;
	padding-bottom: 0.25em; /* Template Override */
}
#slider .nkMellowSlides .separateLabels span,
.separateLabels span {
	font-size: 2em;
	font-weight: normal;
	padding: 0.2.5em 2rem;
}
#slider .nkMellowSlides .separateLabels span.big,
.separateLabels span.big {
	font-size: 3.5em;
	font-weight: 600;
	line-height: 1em;
}
#slider .nkMellowSlides .separateLabels span.small,
.separateLabels span.small {
	font-size: 1em;
	padding: 1em 2rem;
}
@media(max-width: 39.99rem) {
	#headerimage h1,
	#headerimage h2 {
		font-size: 2em;
	}
	#slider .nkMellowSlides .separateLabels span.big,
	.separateLabels span.big {
		font-size: 2.5em;
	}
	#slider .nkMellowSlides .separateLabels span,
	.separateLabels span {
		font-size: 1.5em;
	}
	#slider .nkMellowSlides .separateLabels span.small,
	.separateLabels span.small {
		font-size: 1em;
		padding: 0.5em 2rem;
	}

}



/* Precontent -----------------------------------------------------------------------------------*/
#precontent {
	border-bottom: none;
}
/* Breadcrumbs ----------------------------------*/
#breadcrumbs {
	font-size: 1rem;
	border-bottom: none;
}



/* Component ------------------------------------------------------------------------------------*/
#component {
	
}
#componentContainer p > a {
	text-decoration: underline;
}
#componentContainer > div h2,
#postcontent .likeComponent h2,
#precontent .likeComponent h2,
#bottom div h2,
.nkBookingContainer h2.introTitle {
	font-size: 2.5em;
	font-weight: 600;
	text-transform: none;
	padding-bottom: 0.3em;
  border-bottom: none;
	margin-bottom: 0;
}
#componentContainer h2:first-child {
  padding-top: 0;
}
.item-page h3,
.likeComponent h3  {
	
}
.item-page h3 > span,
.likeComponent h3 > span {
	
}
#postcomponent h3 {
	padding-bottom: 1.1em;
}
#componentContainer > div,
.likeComponent > div  {
	
}


/* Hover and Download SVG */
#postcomponent .moduletable > ul > li > a:hover,
#postcomponent .moduletable > .custom > ul > li > a:hover {
	color: #545463;
}
#postcomponent .moduletable > ul > li > a[download]:after ,
#postcomponent .moduletable > .custom > ul > li > a[download]:after  {
	content: url("data:image/svg+xml;charset=utf8,%3Csvg data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23e30613' d='M6,15H1v6H23V15H18V14h6v8H0V14H6v1Zm14,2a1,1,0,1,1-1,1,1,1,0,0,1,1-1ZM12.5,0V14.88l4.74-5.72.76.65L12,17,6,9.8l.76-.65,4.74,5.73V0Z' fill-rule='evenodd'/%3E%3C/svg%3E");
}
#postcomponent .moduletable > ul > li > a[download]:hover:after,
#postcomponent .moduletable > .custom > ul > li > a[download]:hover:after  {
	content: url("data:image/svg+xml;charset=utf8,%3Csvg data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23111111' d='M6,15H1v6H23V15H18V14h6v8H0V14H6v1Zm14,2a1,1,0,1,1-1,1,1,1,0,0,1,1-1ZM12.5,0V14.88l4.74-5.72.76.65L12,17,6,9.8l.76-.65,4.74,5.73V0Z' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* UL.Icons */
#postcomponent ul.withIcons > li.icon-home:before {
	background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" fill="%233fa335" clip-rule="evenodd"><path d="M6 23h-3v-10l8.991-8.005 9.009 8.005v10h-3v-9h-12v9zm1-2h10v2h-10v-2zm0-3h10v2h-10v-2zm10-3v2h-10v-2h10zm-5-14.029l12 10.661-1.328 1.493-10.672-9.481-10.672 9.481-1.328-1.493 12-10.661z"/></svg>');
}
#postcomponent ul.withIcons > li.icon-phone:before {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%233fa335" viewBox="0 0 24 24"><path d="M20 2c0-1.105-.896-2-2-2h-12c-1.105 0-2 .896-2 2v20c0 1.104.895 2 2 2h12c1.104 0 2-.896 2-2v-20zm-9.501 0h3.001c.276 0 .5.224.5.5s-.224.5-.5.5h-3.001c-.275 0-.499-.224-.499-.5s.224-.5.499-.5zm1.501 20c-.553 0-1-.448-1-1s.447-1 1-1c.552 0 .999.448.999 1s-.447 1-.999 1zm6-3h-12v-14.024h12v14.024z"/></svg>');
}
#postcomponent ul.withIcons > li.icon-mail:before {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%233fa335" viewBox="0 0 24 24"><path d="M12 12.713l-11.985-9.713h23.97l-11.985 9.713zm0 2.574l-12-9.725v15.438h24v-15.438l-12 9.725z"/></svg>');
}


#postcomponent .postcompSlider h2 i.fa-solid:before {
	content: "\e537"; /* Set icon at postcompSlider */
}
@media (min-width: 60rem) {
	#postcomponent .nkMellowSlides > .sliderBox .sliderInitiated > div {
		justify-content: center;
	}
}
#component [id^="nkSliderBoxControl"],
#postcomponent [id^="nkSliderBoxControl"] {
	padding-bottom: 0.75em;
	padding-top: 1.25em;
}
#component [id^="nkSliderBoxControl"] a,
#postcomponent [id^="nkSliderBoxControl"] a {
	border: solid 2px #545463;
	border-radius: 2px;
	margin: 0 0.125em;
}
#component [id^="nkSliderBoxControl"] a.jsActive,
#postcomponent [id^="nkSliderBoxControl"] a.jsActive {
	background: #545463;
}
#postcomponent .imgLayer-bottom {
	overflow: hidden;
}
#postcomponent .imgLayer-bottom > img {
	display: block;
	max-width: 100%;
	height: auto;
}
.imgLayer-bottom > p {
	background: rgba(112,112,112,0.75);
	border-top-color: rgba(136,136,136,0.75);
}
#postcomponent .imgLayer-bottom > p  {
	margin-bottom: 0;
	transition: all ease 0.25s;
	overflow: hidden;
	transform: translate(0,0);
}
#postcomponent .imgLayer-bottom > p > span {
  font-size: 0.9em;
  text-transform: none;
  font-weight: normal;
}
#postcomponent .imgLayer-bottom > p > span > b {
	font-size: 1.3em;
	font-weight: 900;
}
#postcomponent .postcompSlider .activeSlide .imgLayer-bottom > p {
	transition: all ease 0.25s 0.5s;
}
#postcomponent .postcompSlider .inActiveSlide .imgLayer-bottom > p {
	padding: 0;
	transform: translate(0,101%);
}

/* BOTTOM ----------------------------------------------------------------------------------------*/
/* NEWS Bottom */
#bottom,
#newsBottom {
	
	padding: 0;
}




/* DSGVO SHowcase -------------------------------------------------------------------------------*/
#gmaps,
.dsgvoShowcase {
	background-color: #ddd;
}
#gmaps div,
.dsgvoShowcase div {
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	border-color: #888;
	border-radius: 0.25em;
}
#gmaps p a,
#component .dsgvoShowcase p a,
.dsgvoShowcase p a {
	background: #545463;
	color: #fff;
}
#gmaps p a:hover,
.dsgvoShowcase p a:hover,
#component .dsgvoShowcase p a:hover{
    background: #545463;
		color: #fff;
}


/* PRE FOOTER -----------------------------------------------------------------------------------*/
#prefooter {
	background: #34495e;
	color: #fff;
	font-size: 0.9em;
}
@media (max-width: 59.99rem) {
	#prefooter {
		padding-bottom: 2em;
	}
}
#prefooter > div {
	padding-top: 0;
	padding-bottom: 0;
}
#prefooter > div > div {
	padding-right: 1em;
}
#prefooter > div > div:last-child {
	padding-right: 0;
}
#prefooter,
#prefooter span,
#prefooter a,
#prefooter li,
#prefooter p,
#prefooter h3,
#prefooter td {
	font-size: 1em;
	color: #fff;
	font-weight: 300;
	line-height: 1.5em;
}
#prefooter span,
#prefooter a,
#prefooter li,
#prefooter p,
#prefooter h3,
#prefooter td {
	padding-bottom: 0;
	margin-bottom: 0;
}
#prefooter h2 {
	font-size: 1.1em;
	font-weight: 600;
	padding: 0;
  	padding-bottom: 0.5em;
}
#prefooter a,
#prefooter a:hover > svg,
footer a {
	transition: color ease 0.25s, fill ease 0.25s;
}
#prefooter a:hover,
footer a:hover {
	color: #111;
}
#prefooter a:hover > svg {
	fill: #111;
}
#prefooter .nkFlexBox.rowAt60r > div {
	padding-bottom: 2em;
}
#footer-a div:last-child {
  text-align: right;
}
@media(max-width: 60rem) {
  #prefooter .module.padRL2 {
    padding-right: 0;
    padding-left: 0;
  }
  #footer-a  {
    text-align: center;
  }
  #footer-a div:last-child {
    text-align: center;
  }
}
@media (max-width: 39.99rem) {
  #copyright .nkFlexBox.rowAt20r {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.5em;
  }
  #copyright .nkFlexBox.rowAt20r > div {
    width: 100%;
  }
  #copyright .nkFlexBox.rowAt20r > div p {
    text-align: left;
  }
}

.menu-sidebar li.level1 {
    border-top: none;
		line-height: 1em;
}
.menu-sidebar a.level1 > span, .menu-sidebar span.level1 > span {
    padding: 0;
    line-height: 1.6em;
}
.padRL2 {
	padding-right: 2em;
	padding-left: 2em;
}
@media (max-width: 59.99rem) {
  #prefooter .padRL2 {
    padding-right: 0;
  	padding-left: 0;
  }
}



/* FOOTER ---------------------------------------------------------------------------------------*/
footer, footer a {

}
footer {
	border-top: solid 2px #545463;
	font-weight: normal;
	text-transform: none;
	border-top: none;
}
#footer3 {
	display: flex;
	justify-content: flex-end;
}
#footer .logo a,
#footer .logo img {
  display: block;
}
#footer .logo a,
#footer .logo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 10em;
  height: 10em;
}

#footer .logo.pullUp a {
  position: relative;
  top: -5em;
  margin-bottom: -5em;
}
#footer .logo.circle a {
  border-radius: 50%;
  overflow: visible;
  background-color: #fff;
}
#footer .logo.whiteBorder a {
  border: solid 2px #fff;
}
#copyright .wrapperWidth {
  border-top: solid 1px #d2d2d2; /* 1e1e1e mit 20% opacity */
}
@media (min-width: 40rem) {
  #copyright .nkFlexBox > div:first-child p {
    text-align: left;
  }
  #copyright .nkFlexBox > div:last-child p {
    text-align: right;
  }
}
/* ------------------------------ GENERAL HTML TAGS ---------------------------------------------*/
/* HEADINGS ------------------------------------- */
h1 {
	font-size: 3.6em;
	font-weight: 600;
  	padding-bottom: 0.25em;
}
h2 {
	font-size: 2em;
	font-weight: 600;
}
h3 {
	font-size: 1.4em;
	font-weight: 600;
  	padding-bottom: 0.5em;
}
h4 {
	font-size: 1em;
	font-weight: 600;
	margin-bottom: 1em;
}
main h2,
#afterMain h2  {
	margin-bottom: 0.75em;
}
main h3, main h4,
#afterMain h3, #afterMain h4 {
	margin-bottom: 0;
}
main p + h2,
main p + h3,
main p + h3,
main ul ~ h2,
#afterMain p + h2,
#afterMain p + h3,
#afterMain p + h3,
#afterMain ul ~ h2  {
	padding-top: 0.2em;
}
/* underline rounded */
body.h2UnderlineRounded #componentContainer h2,
body *.h2UnderlineRounded h2,
*.underlineRounded,
.childH2UnderlineRounded h2,
body.h2UnderlineRounded .news-list-view {
	position: relative;
	padding-bottom: 0.25em;
}
body.h2UnderlineRounded #componentContainer h2:after,
body *.h2UnderlineRounded h2:after,
*.underlineRounded:after,
.childH2UnderlineRounded h2:after,
body.h2UnderlineRounded .news-list-view:after {
	content: "";
	position: absolute;
	bottom: 0;
	display: block;
	left: 0;
	right: 0;
	height: 0.25rem;
	background: #888;
	border-radius: 0.09em;
	opacity: 0.8;
}
/* PARAGRAPHS, LISTS ------------------------------------- */
/* Paragraph */
main p, main li, main td,
#afterMain p, #afterMain li, #afterMain td  {
	line-height: 1.5em;
}
p b, li b {
	font-weight: normal;
}
p strong, li strong {
	font-weight: normal;
}
/* Lists */
/* Rounded Squares (global or single) */
body.listsRoundedSquares #componentContainer ul > li:before,
#componentContainer ul.roundedSquares > li:before {
	background-color: #545463;
	opacity: 0.7; /* less visibility */
}


/* BUTTONS ----------------------------------------------- */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
a.button,
#component a.button,
#slider a.button,
.btn-default,
.btn-default:visited,
.btn-default:focus,
.btn-default:active {
	transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
	background-color: transparent;
	border: 0;
	/* box-shadow: inset 0 0 0 1px rgba(112, 112, 112, 0.3); */
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	font-weight: 500;
	letter-spacing: normal;
	padding: 0.7em 1.5em;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	border-radius: 0.25em;
	background-color: #16479b;
	color: #fff;
}
button.white,
a.button.white,
#component a.button.white,
#slider a.button.white {
  background-color: #fff;
  color: #1e1e1e;
}
a.button + a.button {
  margin-left: 0.75em;
}
button.emptyBor,
a.button.emptyBor,
#component a.button.emptyBor,
#slider a.button.emptyBor {
  background-color: transparent;
  color: #16479b;
  border: solid 2px #16479b;
}
input[type="submit"]:hover:active,
input[type="reset"]:hover:active,
input[type="button"]:hover:active,
button:hover:active,
a.button:hover:active,
.btn-default:hover:active,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
#slider a.button:hover,
.button:hover,
#component a.button:hover,
.btn-default:hover,
button.emptyBor:hover,
a.button.emptyBor:hover,
#component a.button.emptyBor:hover,
#slider a.button.emptyBor:hover {
	background-color: #1f1f1f;
	color: #fff;
}
button.emptyBor:hover,
a.button.emptyBor:hover,
#component a.button.emptyBor:hover,
#slider a.button.emptyBor:hover {
  border-color: #1f1f1f;
}
.threeIconLinkBoxes a svg,
.threeIconLinkBoxes .nkFlexBox > * svg {
	fill: #16479b;
}

.threeIconLinkBoxes a {
  padding: 0;
}

/* NK-Formulare: Darstellung über Modul- und Template-Parameter. */

/* ################################    ONLY    THIS     WEBSITE    ################################## */

/* Labels vor Gesichtern auf STartseite abschwächen */
@media (max-width: 39.99rem) {
	#headerimage h1,
	#headerimage h2,
	.separateLabels.white span,
	.nkMellowSlides .separateLabels.white span {
		background: rgba(255,255,255,0.7);
		color: #545463;
		border-radius: 0.25rem;
		border: solid 1px rgba(255,255,255,0.9);
	}
}


/* Hide "STEP" Header in this form */
#kontaktformular-59 > h2 {
	display: none;
}

.b5f3c6b4-35ce-4e30-87cc-c02e3b3b85dd {
	fill: none;
	fill: transparent;
	stroke: #545463;
	stroke-miterlimit: 10;
	stroke-width: 3px;
	transition: all ease 0.5s;
  }
a:hover .b5f3c6b4-35ce-4e30-87cc-c02e3b3b85dd {
	stroke: #545463;
}

/* News extension erzeugt h1 */
.news-single h1 {
	font-size: 2em;
}

/* Newsflash Image */
.newsflash-image {

}
#component .newsflash-image {
	max-width: 100%;
	width: 80%;
	min-width: 15em;
	margin-bottom: 1em;
}
@media (min-width: 30rem) {
  #component 	.newsflash-image {
		max-width: 20em;
		width: 45%;
		min-width: 15em;
		margin-bottom: 1.8em;
	}
	#component .newsflash-image {
		float: left;
		margin-right: 1.8em;
	}
  #component .imagesRight .newsflash-image {
    float: right;
		margin-left: 1.8em;
    margin-right: 0;
	}
}
#component .newsflash-image > a,
#component .newsflash-image > a > img {
	display: block;
}
.newsflash > div {
  float: none;
  clear: both;
  padding-top: 2em;
  margin-top: 2em;
  border-top: solid 1px #ddd;
}
.newsflash > div:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.newsflash > div h2 {
  padding-top: 0 !important;
  margin-top: 0;
}
/* FUSSBALL DE BANNER */
div.fussballde {
  position: relative;
}
div.fussballde button {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  white-space: normal;
  font-size: 1rem;
}
body.fussballdeWidgetsLoaded div.fussballde  {
  display: none;
}

.textShadWhite {
  text-shadow: 1px 1px 6px rgba(255, 255, 255, 1);
}

.bg1 {
  background-position: top center;
}

.likeSlider {
  position: relative;
  min-height: 20em;
  display: flex;
}
.likeSlider > div {
    margin: auto;
}
#bottom .likeSlider h2 {
  font-size: 2.2em;
  border-bottom: none;
  padding-top: 0;
  padding-bottom: 0;
}
.likeSlider h2 > span {
  font-size: 0.5em;
  font-weight: 300;
  text-transform: none;
}
.likeSlider h2 > span {
  padding-top: 2em;
  display: block;
  position: relative;
  line-height: 1.2em;
}
.likeSlider h2:first-child:last-child > span {
  padding-top: 1.75em;
}
.likeSlider h2 > span:before {
    content: "";
    display: block;
    width: 20%;
    height: 3px;
    background: #fff;
    position: absolute;
    top: 0.8em;
    top: calc(0.8em - 1px);
    left: 0;
}
.likeSlider.allCentered h2 > span::before {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.likeSlider h2.col2 {
    color: #34495e;
}
.likeSlider h2.col2 > span:before {
    background: #34495e;
}
.likeSlider h2.col1 {
    color: #16479b;
}
.likeSlider h2.col1 > span:before {
    background: #16479b;
}
@media (min-width: 60rem) {
  .likeSlider > .padTB25 {
    padding-top: 5em;
    padding-bottom: 5em;
  }
}
.likeSlider.allCentered {
  text-align: center;
}

/* TRANS OVERLAY */
.transOverlay1,
.transOverlay1 > * {
  position: relative;
}
.transOverlay1 > * {
  z-index: 2;
}
.transOverlay1:before {

}
.transOverlay1:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
}

ul.square {
  font-size: 0.8em;
  font-weight: 300;
  line-height: 1.5em;
  list-style: none;
  padding: 0 0 1em 0;
}
ul.square li {
  padding-left: 3em;
  position: relative;
}
ul.square li:before {
  content: "";
  position: absolute;
  left: 1.5em;
  top: 0.5em;
  width: 0.5em;
  height: 0.5em;
  background: #34495e;
  border-radius: 10%;
}

.fullWidthComponent #component > div {
    padding: 0;
}
.page-header,
#bottom .page-header,
#component .page-header {
	text-align: left;
}
@media (min-width: 60rem) {
  .fullWidthComponent #component > div > div {
    padding: 0;
  }
}
.comTextAlignCenter #component {
  text-align: center;
}
.emptyComponent #component > div > div {
  padding: 2.5em 0 0 0;
}
.item-content {
  margin-bottom: 2.5em;
}
#component .item-page .page-header,
#component .item-content .page-header {
  padding-bottom: 0;
}

.article-info .published {
  text-align: left;
  margin-bottom: 2em;
}







/* NO EDIT BUTTONS IN CONTENT */
.item-content > .icons,
.item-page > .icons {
	display: none;
}

/* Trainingsplan Toggles */
.nksimpletogglesContainer > div > a {
	text-transform: none;
	font-weight: bold;
}


/* Bottom Backgrounds */




/* IMAGE BORDERS */
.imgBorders img {
  display: block;
  box-sizing: border-box;
  border: solid 0.4em #34495e;
}
.imgBorders.col2 img {
  border-color: #16a085;
}
.imgBorders.col3 img {
  border-color: #e67e22;
}
.imgBorders.col4 img {
  border-color: #2980b9;
}
/* LABELED H3 */
.labeledH3 h3 {
  display: inline-block;
  padding: 0.5em 1em;
  font-weight: bold;
  color: #fff;
  background-color: #34495e;
  margin-bottom: 0.5em;
}
.labeledH3.col2 h3,
#component .labeledH3.col2 a.button {
  background-color: #16a085;
}
.labeledH3.col3 h3,
#component .labeledH3.col3 a.button  {
  background-color: #e67e22;
}
.labeledH3.col4 h3,
#component .labeledH3.col4 a.button  {
  background-color: #2980b9;
}
#component .labeledH3 a.button:hover,
#component .labeledH3.col4 a.button:hover,
#component .labeledH3.col4 a.button:hover,
#component .labeledH3.col4 a.button:hover {
  background-color: #545463;
}
/* H2 Colors */
.h2Col1 h2,
h2.col1 {
  color: #34495e;
  border-color: #34495e;
}
.h2Col2 h2,
h2.col2 {
  color: #16a085;
  border-color: #16a085;
}
.h2Col3 h2,
h2.col3 {
  color: #e67e22;
  border-color: #e67e22;
}
.h2Col4 h2,
h2.col4 {
  color: #2980b9;
  border-color: #2980b9;
}
/* A BUTTON  Colors */
a.button.col1 {
  background-color: #34495e;
}
a.button.col2 {
  background-color: #16a085;
}
a.button.col3 {
  background-color: #e67e22;
}
a.button.col4 {
  background-color: #2980b9;
}
a.button[class*="col"]:hover {
  background-color: #545463;
}





.imgH3p img,
h3 > img,
.nkFlexBox > div > img,
.item-image > img {
  border-radius: 0.25em;
}
@media (min-width: 60rem) {
  #component .item-image, #component .item-image.pull-right, #component .item-image.right, #component .item-image.pull-left, #component .item-image.left {
    max-width: 30%;
    width: 30%;
    min-width: 15em;
    margin-bottom: 1.8em;
  }
}
.minHXL {
  min-height: 15em;
}
@media (min-width: 60rem) {
  .minHXL {
    min-height: 20em;
  }
}
@media (max-width: 39.99rem) {
  .noMobile {
    display: none !important;
  }
}
@media (max-width: 59.99rem) {
  .noTablet {
    display: none !important;
  }
}
#logo img {
  background: #fff;
  border-radius: 50%;
  border: solid 5px #fff;
  box-shadow:
}

.nkFlexBox > div.rounded {
  border-radius: 1.5em;
  overflow: hidden;
}

/* Comic List */
.comic-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: comic-counter;
}
.comic-list li {
  counter-increment: comic-counter;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #16479b;
  font-weight: bold;
}
.comic-list li::before {
  content: counter(comic-counter) ".";
  min-width: 42px;
  height: 42px;
  background: #16479b;
  color: #fff;
  font-weight: bold;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Comicartige Form */
  border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%;
  box-shadow:
    2px 3px 0 rgba(0,0,0,0.15),
    inset -2px -2px 0 rgba(255,255,255,0.25);
  transform: rotate(-2deg);
}
/* leichte Variation pro Punkt */
.comic-list li:nth-child(even)::before {
  background: #16479b;
  transform: rotate(2deg);
}
.comic-list li:nth-child(3n)::before {
  background: #16479b;
}
.comic-list.center {
	display: inline-block;
}

.com-content-category-blog__children.cat-children {
  display: none;
}

/*
 * Keep the one-column news listing in the established editorial layout:
 * heading first, image floated left, copy alongside it. NK Ultimate 6's new
 * card layout turns item-content into a column and reorders the image/title.
 */
.com-content-category-blog__items.blog-items {
  margin-right: 0;
  margin-left: 0;
}
.com-content-category-blog__items .blog-item {
  display: block;
  padding-right: 0;
  padding-left: 0;
  overflow: visible;
}
.com-content-category-blog__items .item-content {
  display: block;
}
.com-content-category-blog__items .item-content > p:not(.readmore) ~ p:not(.readmore) {
  display: block;
}
.com-content-category-blog__items .item-content > p:not(.readmore) strong {
  font-weight: 700;
}

/* Simple Toggles now use real buttons. Prevent the site's global button
 * active state from flashing black while a panel is opened or closed. */
#component .nksimpletogglesContainer > div > button:hover,
#component .nksimpletogglesContainer > div > button:focus,
#component .nksimpletogglesContainer > div > button:active {
  background-color: transparent !important;
  border-color: transparent;
}

/* Square BG (Karomuster) */
.squarebg {
  background-image: url('/images/backgrounds/whitesquarerepeat1px.png');
  background-repeat: repeat;
  background-size: 3.57% auto;
  background-position: top left;
}

.nkFlexBox.thinBorderBoxes.boxShadow > div {
	box-shadow:
	0px 10px 22px 0px rgba(22, 71, 155, 0.14),
	0px 40px 40px 0px rgba(22, 71, 155, 0.12),
	0px 90px 54px 0px rgba(22, 71, 155, 0.07),
	0px 160px 64px 0px rgba(22, 71, 155, 0.02),
	0px 249px 70px 0px rgba(22, 71, 155, 0);
}

/* Project overview: keep the section title visually attached to its cards. */
#mod-custom155 > h2:first-child {
  padding-top: 2em;
  padding-bottom: 0.75em !important;
}

/* The association news page uses the same full-width editorial flow as News. */
#component:has(#mod-custom140) {
  display: block;
}
#component:has(#mod-custom140) > #precomponent,
#component:has(#mod-custom140) > div {
  width: 100%;
  max-width: 100%;
}
#component:has(#mod-custom140) .com-content-category-blog {
  padding-top: 0;
}
#component:has(#mod-custom140) .com-content-category-blog__items .blog-item {
  margin-block: 0 1em;
  padding-bottom: 1em;
}
#component:has(#mod-custom140) .item-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 70 / 47;
  object-fit: cover;
}

/* Joomla's blog read-more links should look like the site's standard buttons. */
#componentContainer .com-content-category-blog__items .item-content > p.readmore a {
  padding: 0.7em 1.5em;
  border: 0;
  border-radius: 0.25em;
  background-color: #16479b;
  color: #fff;
  font-weight: 500;
  text-align: center;
}
#componentContainer .com-content-category-blog__items .item-content > p.readmore a:hover,
#componentContainer .com-content-category-blog__items .item-content > p.readmore a:focus,
#componentContainer .com-content-category-blog__items .item-content > p.readmore a:active {
  border-color: #1f1f1f !important;
  background-color: #1f1f1f !important;
  color: #fff !important;
}

/* Contact header: let the square pattern fade softly into the page below. */
#nkMellowSlidesBox-141 .nkms-slide.squarebg {
  position: relative;
}
#nkMellowSlidesBox-141 .nkms-slide.squarebg::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
#nkMellowSlidesBox-141 .nkms-slide.squarebg > div {
  position: relative;
  z-index: 1;
}
#nkMellowSlidesBox-141 .nkms-slide.squarebg .wrapperWidth {
  padding-bottom: 1.5em;
}

/* Das neue Unterrichtsbild auf der Schul-Seite bleibt erhalten. */
body.gsrheinwhv .gsr-unterricht-bild {
  background-image: url('/images/schule/2026/unterricht.jpg');
}
body.gsrheinwhv .gsr-fotostreifen img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
/* Die alte allgemeine Button-Regel darf lange Toggle-Fragen nicht einzeilig halten. */
body.gsrheinwhv .nksimpletogglesContainer > div > button { white-space: normal; }
body.gsrheinwhv .nksimpletogglesContainer > div > button > span:not(.theIcon) { min-width: 0; overflow-wrap: anywhere; }
/* Silbentrennung nur beim langen Wort in der Betreuungsüberschrift. */
@media (max-width: 39.99rem) {
  body.gsrheinwhv #mod-custom153 h2 { overflow-wrap: anywhere; hyphens: auto; }
}
body.gsrheinwhv #mod-custom120 h2 { overflow-wrap: normal; hyphens: none; }

/* The two-word slider ending stays visible even on the narrowest phones. */
@media (max-width: 39.99rem) {
  body.gsrheinwhv #nkMellowSlidesBox-111 h1 {
    font-size: clamp(3rem, 15.5vw, 3.6rem);
  }
}