/* FONTS */
@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto-black-webfont.woff2') format('woff2'),
         url('fonts/roboto-black-webfont.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('fonts/roboto-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto-italic-webfont.woff2') format('woff2'),
         url('fonts/roboto-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto-light-webfont.woff2') format('woff2'),
         url('fonts/roboto-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto-medium-webfont.woff2') format('woff2'),
         url('fonts/roboto-medium-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'robotor';
    src: url('fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
	font-family: 'roboto', 'Helvetica Neue', 'Helvetica';
  background: #fff;
  color: #3c3c3c;
}
p, #component li {
  font-family: "roboto", "Candara", "Segoe", "Sego UI", "Optima", "Arial", Sans-Serif;
}

/* MainMenu */
#logoAndMenuContainer {
  position: relative;
  z-index: 9999;
  background-color: transparent; /* TRANSPARENT */
  padding: 0.75em 0;
  transition: background-color ease 1s, padding ease 1s;
}
#logoAndMenuContainer.scrolledActive {
  background-color: #fff;
  /* Shadow? */
  -webkit-box-shadow: 0px 11px 17px 0px rgba(50, 50, 50, 0.22);
  -moz-box-shadow:    0px 11px 17px 0px rgba(50, 50, 50, 0.22);
  box-shadow:         0px 11px 17px 0px rgba(50, 50, 50, 0.22);
}
/* Logo */
@media(min-width: 40rem) {
  #logo > div,
  #logo > a {
    position: absolute; /* ABSOLUTE ? (WKK) */
    top: 0;
  }
}

#logoAndMenuContainer.scrolledActive #logo > div,
#logoAndMenuContainer.scrolledActive #logo > a {

}
#logoAndMenuContainer #logo img {
  max-height: 20em;
  transition: all ease 0.2s;
  display: block;
  border-radius: 50%;
}
#logoAndMenuContainer.scrolledActive #logo img {
  -webkit-box-shadow: 0px 11px 17px 0px rgba(50, 50, 50, 0.22);
  -moz-box-shadow:    0px 11px 17px 0px rgba(50, 50, 50, 0.22);
  box-shadow:         0px 11px 17px 0px rgba(50, 50, 50, 0.22);
}

#logoAndMenuContainer.scrolledActive #logo img {
  max-height: 7em;
}

@media (max-width: 59.99rem) {
  #logo img {
    max-width: 8em;
  }
}
@media (min-width: 60rem) {
  /* Logo Absolute ? */
  #logo  {
    position: relative;
  }
  #logoAndMenuContainer.scrolledActive #mainmenu > ul {
    padding: 0.25em 0;
  }
  #logoAndMenuContainer.scrolledActive #mainmenu > ul > li > a {
    color: #020202;
  }
  #logoAndMenuContainer.scrolledActive #mainmenu > ul > li.active > a {
    color: #FF2600;
  }
  #mainmenu > ul {
    padding: 1.5em 0;
  }
  #mainmenu > ul > li > a {
    color: #fff;
  }
}
.headerBg1 #header {
  background-position: top center;
}

h1, h2 {
    line-height: 1.1em;
    font-weight: 400;
    font-size: 2.5em;
    padding-bottom: 0.2em;
}
p {
  font-size: 1em;
}
p.narrow {
  max-width: 60rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.bgColor1 {
  background: rgba(255, 38, 0, 0.8);
}
#header1 svg {
  fill: #fff;
  margin-left: 1em;
}
[class*=bg] > *.overlayCol1 {
	background: rgba(255, 38, 0, 0.8);
  color: #fff;
}
#copyright {
  background: rgba(255, 38, 0, 1);
  color: #fff;
}
#copyright .nkFlexBox p {
  font-size: 0.6em;
  color: #fff;
}
#copyright .nkFlexBox > div:last-child p {
  text-align: right;
}
#copyright .nkFlexBox a {
  color: #fff;
}
#copyright .nkFlexBox a:hover {
  color: #020202;
}

#component > div {
    color: #020202;
    padding: 2em 0;
}
@media(min-width: 60rem) {
  #component > div {
      padding: 3em 0;
  }
  #content {
    padding-top: 2em;
  }
}
#component .page-header {
	text-align: center;
}
#component .page-header h1 {

}
#component > div h1,
#component > div h2,
#precontent h2,
#bottom div h2 {
	color: #020202;
  font-weight: 400;
  font-size: 1.5em;
	text-transform: none;
	padding-bottom: 0.5em;
	border-bottom: none;
	margin-bottom: 0;
  text-align: center;
  display: inline-block;
  border-bottom: solid 0.1em #FF2600;
  margin-bottom: 1.5em;
  width: auto;
}
#component h2:first-child,
#bottom h2:first-child {
	padding-top: 0;
}
#component h3 {
	color: #020202;
	font-size: 1em;
	font-weight: 400;
	text-transform: none;
	padding-bottom: 2.5em;
  text-align: center;
}
#component div p > a:hover {
  color: #FF2600;
}
#bottom .bg1 {
  background-position: top center;
}
#component .nkFlexBox .bigPicLink a {
  width: 90%;
  margin: 2em auto 2em auto;
  display: block;
}
.nkFlexBox p > img {
  display: block;
  width: 80%;
  max-width: 25em;
  margin: auto;
}
#component .nkFlexBox p > img.maxHImg,
.maxHImg {
  max-height: 15em;
  width: auto;
}
@media(max-width: 59.999rem) {
  #component .nkFlexBox p > img {
  	display: block;
    margin: 0 auto 2em auto;
  }
  .minH50vw-at60r {
    min-height: 10rem;
  }
  #slider .minH50vw-at60r {
    min-height: 0;
  }
  .maxHImg,
  #component .nkFlexBox p > img.maxHImg {
    max-height: 8em;
    margin-top: 3em;
  }
}
p > b {
  font-weight: 400;
}
.fontXXL {
  font-size: 1.5em;
  font-weight: normal;
}
img + h3 + p {
  padding: 0 1em;
}
#bottom h2:first-child {
    padding-top: inherit;
}
#component a.button:before {
  background-color: #FF2600;
}
#component a.button[class*="icon-"]:before {
  -webkit-transition: background-color ease-in-out 0.25s;
  -o-transition: background-color ease-in-out 0.25s;
  transition: background-color ease-in-out 0.25s;
}
#component a.button:hover:before,
#component a.button[class*="icon-"]:hover:before {
  background-color: #020202;
}
#component a.button[class*="icon-"]:hover {
  color: #fff;
}
@media(min-width: 60rem) {
  .nkFlexBox[class*="rowAt"].littleSpaces > *:nth-child(odd) {
    margin-right: 0.5em;
    margin-left: 0.5em;
  }
  .nkFlexBox[class*="rowAt"].littleSpaces > *:first-child {
    margin-left: 0;
  }
  .nkFlexBox[class*="rowAt"].littleSpaces > *:last-child {
    margin-right: 0;
  }
}


#nkjsimplecontact-submit   {
  border: solid 2px #fff;
  text-align: center;
  display: block;
  width: 100%;
}
#nkjsimplecontact.nkForm textarea {
  margin-bottom: 1em;
}
p.big > a:hover,
#nkjsimplecontact-submit:hover {
  cursor: pointer;
  color: #fff;
}
#nkjsimplecontact.nkForm input[type="text"],
#nkjsimplecontact.nkForm input[type="email"],
#nkjsimplecontact.nkForm textarea {
    color: #020202;
    font-size: 0.8em;
}
h1 > span {
  padding-top: 0.25em;
  display: block;
  font-size: 0.568em;
  line-height: 1.2em;
}
body.header1-dark #header1 {
  background: #FF2600;
}
#header1 > *,
#header1 p {
  font-weight: 300;
  color: #b8b8b8;
}
#header1 > * .contactDetails p > a:hover,
body.header1-dark #header1 a:hover {
    color: #020202;
}
#logofull {
  border-bottom: solid 3px #3E3E3E;
}
#logofull a {
    margin: 1.5em auto;
}
#logofull a > img {
    max-height: 5em;
}
@media (max-width: 59.99rem) {
	#mainmenu {
		background: #FF2600;
		border: solid 2px #FF2600;
	}
  body.mobilemenu-outside #mainmenu.jsActivated > a,
  body.notalwaysmobilemenu #mainmenu.jsActivated > a {
		background: #FF2600;
	}
  body.mobilemenu-outside #mainmenu > ul,
  body.notalwaysmobilemenu #mainmenu > ul {
		background: #FF2600;
		color: #fff;
	}
  #mainmenu > ul > li.current {
		background: #535353;
		color: #fff;
	}
  #mainmenu > ul > li > a {

	}
  /*
  #mainmenuContainer:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent url('../../../images/logo.png') no-repeat center right;
    background-size: contain;
    width: 70%;
  }*/
}
@media (max-width: 960px) {
  #slider h1, #slider h2 {
    text-align: center;
  }
}
#slider .bgColor1 {
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}
@media (min-width: 60rem) {
  #slider .bgColor1 {
    padding-top: 2em;
    padding-bottom: 2em;
  }
}
section {
  padding-top: 3em;
  padding-bottom: 3em;
}

/* Seit Template 6 ist der Slider selbst ein semantisches section-Element.
   Die Innenabstände kommen beim Hero aus dem Slider und dürfen hier nicht
   ein zweites Mal aufgeschlagen werden. */
#slider {
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 60rem) {
  #header1 > *,
  #logoAndMenu,
  .wrapperWidth,
  .nkFlexBox.wrapperWidth,
  section > *,
  #component  {

  }
  #logoAndMenu {
    font-size: 1em;
  }
  #logo {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 20rem;
            flex: 1 1 20rem;
    max-width: 20rem;
  }
  .logo p {
  	font-size: 1em;
  }
  #header2 {
    font-size: 0.9em;
  }
	#mainmenu {
		font-weight: 400;
		font-size: 0.64em;
    letter-spacing: 0;
	}
  #mainmenu > ul > li {

	}
  #mainmenu > ul > li > a {
    text-transform: none;
    font-size: 1.5em;
    padding: 0.7em 1em;
    -webkit-transition: color ease-in-out 0.5s;
    -o-transition: color ease-in-out 0.5s;
    transition: color ease-in-out 0.5s;
	}
  #mainmenu > ul > li:last-child > a {
    padding: 0.7em 0 0.7em 1em;
	}
  #mainmenu > ul > li > a.button {
    color: #fff;
    font-size: 1.35em;
    font-weight: 700;
	}
  #mainmenu > ul > li > a.button:hover {
    color: #fff;
	}
  #mainmenu > ul > li > a.button:before {
    background-color: #FF2600;
    -webkit-transition: background-color ease-in-out 0.5s;
    -o-transition: background-color ease-in-out 0.5s;
    transition: background-color ease-in-out 0.5s;
	}
  #mainmenu > ul > li > a.button:hover:before {
    background-color: #020202;
	}
	#mainmenu > ul li a:hover,
	#mainmenu > ul li.active a,
	#mainmenu > ul li.current a,
  #mainmenu > ul > li:hover > a {
    color: #FF2600;
	}
  #mainmenu > ul li a.button:hover,
	#mainmenu > ul li.active a.button,
	#mainmenu > ul li.current a.button,
  #mainmenu > ul > li:hover > a.button {
    color: #fff;
	}
  #mainmenu > ul > li > ul.nav-child > li > a {
    background: #D7A87D;
    -webkit-transition: background-color ease-in-out 0.5s;
    -o-transition: background-color ease-in-out 0.5s;
    transition: background-color ease-in-out 0.5s;
  }
  #mainmenu > ul > li > ul.nav-child > li > a:hover {
    background: #3ea9e0;
    color: #fff;
  }
	.custom.logo {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}
	.logo p > a {
		font-size: 1.2em;
    line-height: 1.66em;
	}
  .logo a > span {
		font-weight: 400;
	}
	section {
    padding-top: 5em;
    padding-bottom: 5em;
	}
  .bg5 {
    background-position: center center;
  }
  .bg5 {
    background-position: top center;
  }
  .bg5, .bg7 {
      background-attachment: fixed;
  }
  [class*=sliderBg] #slider {
    background-position: left center;
  }
}
@media (min-width: 75rem) {

}
@media (min-width: 90rem) {
  [class*=sliderBg] #slider {
    background-position: center center;
  }

}
#slider .sliderBox > div > div > * {
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 105rem) {
	.logo p > a {
		font-size: 1.5em;
    line-height: 1.33em;
	}
}
.threeIconLinkBoxes span.likeh3 {
	color: #FF2600;
}
.threeIconLinkBoxes a svg {
	fill: rgb(60,60,60);
}
.threeIconLinkBoxes span {
	color: rgb(60,60,60);
  font-weight: 300;
  font-size: 0.8em;
}
.threeIconLinkBoxes a:hover span {
  color: #FF2600;
}
.threeIconLinkBoxes a:hover svg {
	fill: #FF2600;
}
.threeIconLinkBoxes a img,
.threeIconLinkBoxes a svg,
.threeIconLinkBoxes .nkFlexBox > * svg  {
  width: auto;
  height: 5em;
  display: block;
  margin: 0 auto 2em auto;
}
#logoAndMenu {

}
#gmaps p a, #component .dsgvoShowcase p a, .dsgvoShowcase p a, #nkjsimplecontact-submit, .nkForm button[type="submit"], .nkForm input[type="submit"], button[type="submit"], #slider a.button, #slider a.transbutton, #component a.button, button.btn {
  background: #FF2600;
}
#gmaps p a:hover,
.dsgvoShowcase p a:hover,
#component .dsgvoShowcase p a:hover,
#nkjsimplecontact-submit:hover,
.nkForm button[type="submit"]:hover,
.nkForm input[type="submit"]:hover,
button[type="submit"]:hover,
#slider a.button:hover,
#component a.button,
button.btn:hover {
    background: #000000;
    cursor: pointer;
    color: #fff;
}
#gmaps p a,
.dsgvoShowcase p a,
#nkjsimplecontact-submit,
.nkForm button[type="submit"],
.nkForm input[type="submit"],
button[type="submit"],
#slider a.button {
    background: #FF2600;
}
#gmaps p a:hover,
.dsgvoShowcase p a:hover,
#nkjsimplecontact-submit:hover,
.nkForm button[type="submit"]:hover,
.nkForm input[type="submit"]:hover,
button[type="submit"]:hover,
#slider a.button:hover {
    background: #333;
}
#gmaps div, .dsgvoShowcase div {
    background: rgba(83, 83, 83, 0.4);
}
#gmaps p a:hover,
.dsgvoShowcase p a:hover,
#nkjsimplecontact-submit:hover,
.nkForm button[type="submit"]:hover,
.nkForm input[type="submit"]:hover,
button[type="submit"]:hover,
#slider a.button:hover {
    background: #020202;
}
/* SLIDER */
.nkSliderSetActiveButtons a:hover {
    background: #3ea9e0;
}



/* NKSimpleContact */
h2.introtitle {
  text-align: center;
  padding-bottom: 0.75em;
}
#nkjsimplecontact fieldset {
  padding-bottom: 0;
  margin-bottom: 0;
}
#nkjsimplecontact .inlineInsides > div {
  display: block;
}
#nkjsimplecontact fieldset.inlineInsides > div > * {
  padding-right: 0;
}
#nkjsimplecontact fieldset:last-child {
  padding-top: 1em;
}
.nkForm textarea {
    margin-bottom: 0em;
}

#nkmsq-c90-qs1-q1-opt1:before {
  content: "";
  display: block;
  margin: 0 auto 1em auto;
  width: 10em;
  height: 10em;
  background: url('/images/online2.png') no-repeat center center;
  background-size: contain;
}
#nkmsq-c90-qs1-q1-opt2:before {
  content: "";
  display: block;
  margin: 0 auto 1em auto;
  width: 10em;
  height: 10em;
  background: url('/images/online1.png') no-repeat center center;
  background-size: contain;
}
#nkmsq-c102 > div  {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.submitPositive {
  text-align: center;
}
[id^="nkmsq-c"][id*="-opt"].isSelected {
	border-color: #00b6c4;
}


#precontent .dsgvoShowcase h2 {
  color: #fff;
  border-bottom: solid 2px #fff;
}
.bigBottomRightHeading {
  text-align: center;
}
#bottom .bigBottomRightHeading h2,
.bigBottomRightHeading h2 {
  font-weight: 700;
  text-transform: none;
  color: #fff;
}
#bottom .bigBottomRightHeading h2 > span ,
.bigBottomRightHeading h2 > span {
  font-size: 0.66em;
}
#bottom .bigBottomRightHeading a:before {
  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z'/></svg>");
  transition: all ease-in-out 0.5s;
  display: inline-block;
  width: 0.75em;
  height: auto;
  position: relative;
  left: -0.2em;
}
#bottom .bigBottomRightHeading a,
#bottom .bigBottomRightHeading a:visited,
#bottom .bigBottomRightHeading a:focus,
#bottom .bigBottomRightHeading a:active {
  -webkit-transition: color ease 0.5s;
  -o-transition: color ease 0.5s;
  transition: color ease 0.5s;
}
#bottom .bigBottomRightHeading a:hover {
  color: #FF2600;
}
#bottom .bigBottomRightHeading.small-large-small h2 ,
.bigBottomRightHeading.small-large-small h2  {
  font-size: 3.5rem;
  font-weight: 700;
}
#bottom .bigBottomRightHeading.small-large-small h2 > span ,
.bigBottomRightHeading.small-large-small h2 > span {
  font-size: 1.5rem;
  font-weight: 400;
}

@media(min-width: 60rem) {
  .bigBottomRightHeading {
    text-align: right;
  }
  .bigBottomRightHeading .wrapperWidth {
    position: relative;
    min-height: 20em;
  }
  #bottom .bigBottomRightHeading h2,
  .bigBottomRightHeading h2 {
    font-size: 4em;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  #bottom .bigBottomRightHeading.small-large-small h2 ,
  .bigBottomRightHeading.small-large-small h2  {
    font-size: 3.5rem;
  }
  #bottom .bigBottomRightHeading.small-large-small h2 > span ,
  .bigBottomRightHeading.small-large-small h2 > span {
    font-size: 1.5rem;
  }
}
@media(min-width: 80rem) {
  #bottom .bigBottomRightHeading.small-large-small h2 ,
  .bigBottomRightHeading.small-large-small h2  {
    font-size: 4.5rem;
  }
  #bottom .bigBottomRightHeading.small-large-small h2 > span ,
  .bigBottomRightHeading.small-large-small h2 > span {
    font-size: 2.5rem;
  }
}
.nkSliderSetActiveButtons a {
  width: 1rem;
  height: 1rem;
}
.nkSliderSetActiveButtons.transparent a {
  border: solid 3px #fff;
}
.nkSliderSetActiveButtons[class*="rotate45"] a {
  border: solid 2px #FF2600;
}
.nkSliderSetActiveButtons a.jsActive {
  background: #fff;
}
.nkSliderSetActiveButtons[class*="rotate45"] a:hover {
  background: #FF2600;
}
/*
@media(max-width: 59.99rem) {
  .nkMellowSlides [class*="bg"] {
    padding-bottom: 4em;
  }
}
*/
.nkSliderPrevNextButtons a svg {
  fill: #ffffff;
}

/* NKBooking */
#nkBooking .serviceInfoContainer h2,
#nkBooking .nkbServiceShortInfo h2 {
  padding-bottom: 0;
}
#nkbActualCalendarMonthWrapper {
    font-size: 1.25em;
}
#nkbActualCalendarMonthBox caption {
    border-bottom: solid 0.25em #FF2600;
}
div.nkbCalenderBox table td.hasBookables {
    background: #FF2600;
}
.nkBookingContainer a.button {
    background: #FF2600;
}
#nkbsignup textarea {
    margin-bottom: 1em;
}
.serviceInfoContainer h2,
.nkbServiceShortInfo h2 {
  padding-bottom: 0;
  text-align: left;
}

div.nkbCalenderBox table td.hasBookables {
    -webkit-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    transition: all ease 0.5s;
}
div.nkbCalenderBox table td.hasBookables:hover {
    background: #333;
}
div.nkbCalenderBox table td.hasBookables a.jsActive {
    background: #020202;
    -webkit-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    transition: all ease 0.5s;
}
#nkbCalPreviousMonthBtn,
#nkbCalNextMonthBtn {
    -webkit-transition: all ease-in 0.5s;
    -o-transition: all ease-in 0.5s;
    transition: all ease-in 0.5s;
}
#nkbCalPreviousMonthBtn:hover,
#nkbCalNextMonthBtn:hover {
    cursor: pointer;
    color: #FF2600;
}

.nkForm .jsDdOpened [id^="jsAltDd-"][id$="-Current"]::before {
    background: #FF2600 !important;
}
.nkForm .jsDdOption:hover {
    background: #FF2600;
}
.redLabels .nkFlexBox:nth-child(even) > div:first-child > div,
.redLabels .nkFlexBox:nth-child(odd) > div:last-child > div {
  background: #f3f3f3;
  color: #020202;
  padding: 2em;
  box-sizing: border-box;
}
.redLabels .nkFlexBox:nth-child(even) > div:first-child > div {
  background: #f3f3f3;
}
#component .redLabels .nkFlexBox > div h2 {
  color: #fff;
  padding-bottom: 0.2em;
}
#component .redLabels .nkFlexBox > div img {
  display: block;
}
@media (min-width: 60rem) {
  .redLabels .nkFlexBox:nth-child(even) > div:first-child > div,
  .redLabels .nkFlexBox:nth-child(odd) > div:last-child > div {
    width: 100%;
    position: relative;
  }
  .redLabels .nkFlexBox:nth-child(odd) > div:last-child > div {
    left: 0;
  }
  .redLabels .nkFlexBox {
    margin-bottom: 2em;
  }
}
@media (max-width: 59.99rem) {
  .redLabels .nkFlexBox:nth-child(even) > div:first-child,
  .redLabels .nkFlexBox:nth-child(odd) > div:last-child {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .redLabels .nkFlexBox {
    margin-bottom: 1em;
  }
}
.item-page > [itemprop*="articleBody"] > :last-child {
    padding-bottom: 0;
}
.blog-items {
  clear: both;
  float: none;
}
.blog-items > .blog-item {
  padding-top: 4em;
}
@media(max-width: 60rem) {
  .nkFlexBox.rowAt60r .basis30p > img {
    margin-top: 1em;
  }
}
/* SPecial Modules
@media screen and (min-width: 60rem)  {
  #mod-custom114 .imgLayer-bottom + p {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 2em;
    margin-bottom: 2em;
    transition: all ease-in 0.5s;
  }
  #mod-custom114 .imgLayer-bottom:hover + p {
    max-height: 1000px;
  }
} */


/* VERY CUSTOM -----> */
@media(max-width: 59.999rem) {
  body.home #toAnimate-1.nkjsObjOldClass {
    opacity: 1;
  }
}
div.nkbCalenderBox h2 {
  text-align: left;
}
div.nkbCalenderBox table {
    margin: 0 auto 0 0;
}
div.nkbCalenderBox, div.nkbSignupFormBox {
    padding: 0 0 0 4em;
}
.nkbServiceShortInfo > img, .serviceInfoContainer > img {
    margin: 0 auto 1em 0;
}
/* Login */
.login {
  text-align: center;
  margin: 1.5em auto;
  padding: 1.5em;
}
.login > form {
  display: inline-block;
}
#component .input-password-toggle,
.input-password-toggle  {
   display: none;
 }
 .mod-login__userdata > *{
   margin-bottom: 0.5em;
 }
.mod-login__options {
  display: none;
}

/* Joomla 6 / NK Simple Contact 1.7: Modul-IDs sind instanzbezogen. */
.nkjsimplecontactBox .nkForm fieldset {
  padding-bottom: 0;
  margin-bottom: 0;
}
.nkjsimplecontactBox .nkForm .inlineInsides > div {
  display: block;
}
.nkjsimplecontactBox .nkForm fieldset.inlineInsides > div > * {
  padding-right: 0;
}
.nkjsimplecontactBox .nkForm fieldset.buttonBox {
  padding-top: 1em;
}
.nkjsimplecontactBox .nkForm textarea {
  margin-bottom: 0;
}
body .nkjsimplecontactBox.nkjsc-layout-lines.nkjsc-button-standard .nkForm button[type="submit"] {
  color: #fff;
  border-color: #FF2600;
}
body .nkjsimplecontactBox.nkjsc-layout-lines.nkjsc-button-standard .nkForm button[type="submit"]:hover,
body .nkjsimplecontactBox.nkjsc-layout-lines.nkjsc-button-standard .nkForm button[type="submit"]:focus-visible {
  color: #fff;
  border-color: #020202;
  background: #020202;
}

/* Bereinigter Aktuelles-Kopf ohne die früheren, ungeschlossenen Tabellen. */
.wkk-current-links {
  text-align: center;
}
.wkk-current-links p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2em;
}
.wkk-current-links a.btn {
  display: inline-block;
  padding: 0.75em 1.25em;
  border: 0;
  background: #FF2600;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.wkk-current-links a.btn:hover,
.wkk-current-links a.btn:focus-visible {
  background: #020202;
  color: #fff;
}
.wkk-current-links hr {
  height: 2px;
  width: 100%;
  margin-bottom: 2.5em;
  border: 0;
  background-color: #dcdcdc;
}

/* Joomla 6: aktuelle Inhalts- und Modulstruktur der WKK-Seiten. */

/* Der aktuelle MellowSlides-Renderer bringt 32 px Innenabstand mit. Der
   farbige Abschlussbalken soll dagegen über die vollständige Bühne laufen. */
#slider .nkms-slide.nkms-slide-html.nkms-content-left-bottom {
  padding: 0 !important;
}
#slider .nkms-slide.nkms-slide-html.nkms-content-left-bottom > .bgColor1 {
  width: 100%;
  margin: auto 0 0;
  box-sizing: border-box;
  color: #fff;
}
#slider .bgColor1,
#slider .bgColor1 h1,
#slider .bgColor1 h2,
#slider .bgColor1 h3,
#slider .bgColor1 p,
#slider .bgColor1 span {
  color: #fff;
}

/* Joomla 6 setzt den Komponentenbereich als Flexzeile. Vorcomponent-Module
   und die eigentliche Komponente müssen bei WKK jedoch untereinander stehen. */
#component {
  display: block;
}
#component > #precomponent,
#component > #precomponent + div {
  width: 100%;
  box-sizing: border-box;
}
#component > #precomponent {
  margin: 0;
}

/* WKK / Template 6.3.66, 08.10.2026
   Diese Datei heisst custom.css (ohne s). customs.css wird vom aktuellen
   Template nicht mehr automatisch geladen. Bestehende Website-Regeln oben
   bleiben erhalten; die folgenden Regeln sind auf Inhalte/Formular begrenzt. */

/* Vorcomponent-Kopf oberhalb der Beitraege, nicht als linke Seitenleiste.
   Verschachtelte wrapperWidth-Elemente duerfen nicht breiter als ihr
   Elterncontainer werden. Die Seitenbreite liefert weiterhin das Template. */
body #component {
  display: block;
  min-width: 0;
}
body #component > #precomponent,
body #component > #precomponent + div {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}
#component #precomponent .wrapperWidth,
#component .com-content-category-blog {
  max-width: 100%;
  min-width: 0;
}

/* Aktuelles: vorhandenes Template-Raster nutzen, Bilder immer links.
   Ein eigener Textblock verhindert, dass Ueberschrift, Datum und Text auf
   separate schmale Grid-Spalten verteilt werden. Einzelbeitraege unberuehrt. */
#component .com-content-category-blog__items .blog-item > .item-content {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
}
#component .com-content-category-blog__items .blog-item .page-header,
#component .com-content-category-blog__items .blog-item .page-header h2 {
  text-align: left;
}
#component .com-content-category-blog__items .blog-item .page-header h2 {
  margin-bottom: 0.75em;
}
@media (min-width: 60rem) {
  #component .com-content-category-blog__items .blog-item:has(> .item-image) {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: 1.5em;
    align-items: start;
  }
  #component .com-content-category-blog__items .blog-item > .item-image,
  #component .com-content-category-blog__items .blog-item > .item-image.right {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    float: none;
  }
  #component .com-content-category-blog__items .blog-item:has(> .item-image) > .item-content {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 59.99rem) {
  #component .com-content-category-blog__items .blog-item:has(> .item-image) {
    display: block;
  }
  #component .com-content-category-blog__items .blog-item > .item-image {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 1em;
    float: none;
  }
}

/* Roter HTML-Abschlussbalken: bleibt Teil des vorhandenen Slider-Inhalts,
   keine neue Slide oder Extension-Einstellung notwendig. */
#slider .nkms-slide.nkms-slide-html > .bgColor1 {
  background-color: rgba(255, 38, 0, 0.8);
}
#slider .nkms-slide.nkms-slide-html > .bgColor1 > .wrapperWidth {
  max-width: 96%;
}

/* NK Simple Contact: Linien-Layout liefert sonst #244e73 als Grundfarbe.
   Nur die Website-Darstellung ueberschreiben, keine Extension-Datei aendern.
   Fehlermeldungen und Invalid-Markierungen behalten ihre Signalfarben. */
body .nkjsimplecontactBox.nkjsc-layout-lines,
body .nkjsimplecontactBox.nkjsc-layout-lines .nkForm {
  color: #020202;
}
body .nkjsimplecontactBox.nkjsc-layout-lines .nkForm .norm > label,
body .nkjsimplecontactBox.nkjsc-layout-lines .nkForm .norm > input:not([type="submit"]):not([type="button"]),
body .nkjsimplecontactBox.nkjsc-layout-lines .nkForm .norm > textarea,
body .nkjsimplecontactBox.nkjsc-layout-lines .nkForm .norm > select,
body .nkjsimplecontactBox.nkjsc-layout-lines .nkForm .nkfCheckbox,
body .nkjsimplecontactBox.nkjsc-layout-lines .nkForm .jsCbLabel {
  color: #020202;
}
body #component .nkjsimplecontactBox.nkjsc-layout-lines .nkForm .jsCbBox {
  border-color: #020202;
}
body #component .nkjsimplecontactBox .nkForm .nkfCheckbox a {
  color: #020202;
  text-decoration: underline;
}
body #component .nkjsimplecontactBox .nkForm .nkfCheckbox a:hover,
body #component .nkjsimplecontactBox .nkForm .nkfCheckbox a:focus-visible {
  color: #c21d00;
}
body #component .nkjsimplecontactBox.nkjsc-button-standard .nkForm button[type="submit"],
body #component .nkjsimplecontactBox.nkjsc-button-standard .nkForm input[type="submit"] {
  background: #FF2600;
  border-color: #FF2600;
  color: #fff !important;
}
body #component .nkjsimplecontactBox.nkjsc-button-standard .nkForm button[type="submit"]:hover,
body #component .nkjsimplecontactBox.nkjsc-button-standard .nkForm input[type="submit"]:hover,
body #component .nkjsimplecontactBox.nkjsc-button-standard .nkForm button[type="submit"]:focus-visible,
body #component .nkjsimplecontactBox.nkjsc-button-standard .nkForm input[type="submit"]:focus-visible {
  background: #020202;
  border-color: #020202;
  color: #fff !important;
}
body #component .nkjsimplecontactBox .nkForm button[type="submit"]:focus-visible,
body #component .nkjsimplecontactBox .nkForm input[type="submit"]:focus-visible {
  outline: 2px solid #020202;
  outline-offset: 3px;
}

/* Die generierten Menuefarben werden nach custom.css geladen. Auf dem
   Headerfoto bleiben normale Links weiss, im fixierten weissen Header dunkel. */
@media (min-width: 60rem) {
  body.notalwaysmobilemenu #logoAndMenuContainer:not(.scrolledActive) #mainmenu > ul > li > a {
    color: #fff;
  }
  body.notalwaysmobilemenu #logoAndMenuContainer.scrolledActive #mainmenu > ul > li > a {
    color: #020202;
  }
  body.notalwaysmobilemenu #logoAndMenuContainer #mainmenu > ul > li.active > a,
  body.notalwaysmobilemenu #logoAndMenuContainer #mainmenu > ul > li.current > a,
  body.notalwaysmobilemenu #logoAndMenuContainer #mainmenu > ul > li > a:hover,
  body.notalwaysmobilemenu #logoAndMenuContainer #mainmenu > ul > li > a:focus-visible {
    color: #FF2600;
  }
}