/* raleway-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('raleway-v37-latin-300.woff2') format('woff2');
}

/* raleway-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('raleway-v37-latin-regular.woff2') format('woff2');
}

/* raleway-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url('raleway-v37-latin-500.woff2') format('woff2');
}

/* raleway-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('raleway-v37-latin-600.woff2') format('woff2');
}

/* raleway-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('raleway-v37-latin-700.woff2') format('woff2');
}

/* raleway-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  src: url('raleway-v37-latin-800.woff2') format('woff2');
}

* {
  outline: none;
  font-family: "Raleway", sans-serif;
  font-size: 21px;
  box-sizing: border-box;
  font-weight: 400;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  background-color: #672b59;
  overflow-y: scroll;
}

body,
footer {
  width: 100%;
}

main {}

section {
  width: 100%;
  max-width: 1360px;
  padding: 0;
  margin: 0 auto;
  position: relative;
}

div.white {
  background-color: #fff;
  padding-bottom: 100px;
}

div.wrap {
  max-width: 1400px;
  margin: 0 auto;
}

#logoarea {
  display: inline-block;
}

#logoarea i {
  display: inline-block;
  background-color: #672b59;
  color: #fff;
  font-weight: 400;
  font-style: normal;
  padding: 4px 8px;
  font-size: 40px;
}

#logoarea b {
  display: inline-block;
  background-color: #14a9b1;
  color: #fff;
  font-style: normal;
  font-weight: 900;
  font-size: 40px;
  padding: 4px 8px;
}

@media screen and (max-width: 550px) {
	#logoarea i { font-size: 7vw;}
	#logoarea b { font-size: 7vw;}
}

footer > section {
  padding: 30px;
}

/* NAVI */
@media screen and (min-width: 1190px) {
  nav {
    display: inline-block;
    float: right;
    padding-top: 45px;
  }

  nav > ul {
    display: table;
    z-index: 1000;
    width: 100%;
  }

  nav > ul > li {
    display: table-cell;
    vertical-align: top;
    padding-right: 15px;
    text-decoration: none;
  }

  #mainnav {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 0;
  }

  nav > ul > li ul {
    display: none;
  }

  nav > ul > li > a {
    display: inline-block;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 18px;
    transition: color 200ms;
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    border-top: 4px solid #fff;
    line-height: 160%;
    padding: 3px 8px;
  }

  nav > ul > li:last-of-type {
    padding-right: 0;
  }

  nav > ul > li > a:hover {
    color: #672b59;
    transition: color 200ms;
  }

  nav > ul > li.current > a {
    background-color: #672b59;
    color: #fff;
  }

  nav > ul > li ul > li a {
    line-height: 160%;
    border-top: 0 solid #fff;
    color: #000;
    font-size: 16px;
  }

  nav > ul > li ul > li a:hover {
    color: #cb181b;
  }

  nav > ul > li:hover > ul.main_subnav {
    list-style: none;
    display: block;
    position: absolute;
    padding-top: 0;
    padding-left: 0;
    z-index: 500;
    background-color: #fff;
  }

  nav > ul > li:hover > ul.main_subnav li {
    text-align: left;
    border-bottom: 1px solid #ccc;
  }

  nav > ul > li:hover > ul.main_subnav li a {
    border-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
    color: #000;
    text-decoration: none;
    text-transform: initial;
    font-size: 16px;
    min-width: 120px;
    z-index: 100;
    white-space: nowrap;
    font-family: "Raleway";
  }

  nav > ul > li:hover > ul.main_subnav li:hover {
    background-color: #f2f2f2;
  }

  nav > ul > li:hover > ul.main_subnav li:hover a {
    color: #000;
  }
}

/* Typo */
h1 {
  font-family: "Raleway", sans-serif;
  font-size: 42px;
  font-weight: 400;
  margin-top: 50px;
  margin-bottom: 30px;
  color: #672b59;
  line-height: 140%;
  text-align: center;
}

h1 > * {
  font-size: inherit;
  line-height: inherit;
}

main > div {
  font-family: "Raleway", sans-serif;
  font-size: 28px;
  color: #672b59;
  font-weight: 400;
  margin-top: 30px;
  margin-bottom: 20px;
  line-height: 125%;
  text-align: center;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

main > p, main > form{
	  font-family: "Raleway", sans-serif;

  font-weight: 400;
  margin-top: 30px;
  margin-bottom: 50px;
  line-height: 130%;
  text-align: left;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
	
}
main > h2 {
	  text-align: left;
  max-width: 70%;
	  margin-left: auto;
  margin-right: auto;
}



main > h1 {
	  text-align: center;

	  margin-left: auto;
  margin-right: auto;
}

}

#page1 main > h1 {
 text-align: center;	
}


main > h3 {
	  text-align: left;
	
  max-width: 70%;
  margin-left: auto ! important;
  margin-right: auto ! important;
	
}

main > ul {
	  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
   line-height: 130%;
}

main > ol {
	  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
   line-height: 130%;
}

h2 {
  font-family: "Raleway", sans-serif;
  font-size: 28px;
  color: #672b59;
  font-weight: 700;
  
  margin-top: 30px;
  margin-bottom: 30px;
  line-height: 140%;
}


.page1 h2 {
  font-family: "Raleway", sans-serif;
  font-size: 42px;
  color: #672b59;
  font-weight: 500;
  
  margin-top: 30px;
  margin-bottom: 30px;
  line-height: 140%;
}

main h3 > u {
display: table;
  background-color: #fab300;
  color: #fff;
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  padding: 2px 6px;
  margin: 2px 0;
  line-height: 120%;
  text-decoration: none;

}

main p {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 21px;
  line-height: 140%;
  color: #000000;
}

main a {
  color: #14a9b1;
  font-weight: 500;
  text-decoration: none;
}

main a:hover {
  color: #672b59;
}

main p a {
  font-family: "Raleway", sans-serif;
  color: #672b59;
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 30px;
  line-height: 140%;
  text-align: center;
  border-bottom: 3px solid #fab414;
}
main p a:hover {
	  border-bottom: 3px solid #672b59;
}


/* Dreispalter */


div.dreispalter > div {
  width: 33.3%;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  color: #000;
  margin-bottom: 20px;
}

@media screen and (min-width: 1001px) {
	div.dreispalter > div:nth-of-type(1) {
	  padding-right: 20px;
	}

	div.dreispalter > div:nth-of-type(2) {
	  padding-right: 20px;
	  padding-left: 20px;
	}

	div.dreispalter > div:nth-of-type(3) {
	  padding-left: 20px;
	}
}

div.dreispalter > div > h2alt {
  display: table;
  background-color: #672b59;
  color: #fff;
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  padding: 0 6px;
  margin: 2px 0;
}

div.dreispalter > div > h2 {
  display: inline;
  background-color: #672b59;
  color: #fff;
  padding: 2px 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 900;
  font-size: 24px;  
  margin: 1px 0;
   line-height: 110%;
 }

div.dreispalter > div > h3 {
  display: inline;
  background-color: #fab300;
  color: #fff;
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
 padding: 2px 6px;
  margin: 1px 0;
    line-height: 110%;
	  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
    margin: 1px 0;
  line-height: 110%;
}




@media screen and (max-width: 1000px) {
	
	div.dreispalter > div {
		width: 100%;
	}
}



/* zweispalter */


div.zweispalter > div {
  width: 50%;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  color: #000;
  margin-bottom: 50px;
}

@media screen and (min-width: 1001px) {
	div.zweispalter > div:nth-of-type(1) {
	  padding-right: 20px;
	}

	div.zweispalter > div:nth-of-type(2) {

	  padding-left: 20px;
	}

}

div.zweispalter > div > h2 {
  display: table;
  background-color: #672b59;
  color: #fff;
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  padding: 0 6px;
  margin: 2px 0;
}

div.zweispalter > div > h2::after {
  content: "";
  display: block;
  height: 0;
}

div.zweispalter > div > h3 {
display: inline;
  background-color: #fab300;
  color: #fff;
  padding: 2px 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 900;
  font-size: 24px;
  margin: 1px 0;
  line-height: 110%;
	width: 100%;
	max-width: 85%;

}

@media screen and (max-width: 1000px) {
	
	div.zweispalter > div {
		width: 100%;
	}
}



/* Flächen */
div.flaeche {
  width: 100%;
  max-width: 100%;
  padding: 50px 100px;
  padding-bottom: 50px;
  padding-left: 15%;
  padding-right: 15%;
  position: relative;
}
@media screen and (max-width: 800px) {
	div.flaeche {
		padding: 40px 20px;
	}
}
div.blau > div {color: #fff;}

div.flaeche > div {
  font-size: 28px;
  line-height: 130%;
}

div.gelb {
  background-color: #fab414;
}

div.lila {
  background-color: #672b59;
}

div.lila > div {
  font-size: 28px;
  line-height: 130%;
  color: #fab414;
}

div.lila > h1 {
  color: #fab414;
}

div.lila > h2 {
  color: #fab414;
}

div.lila > p {
  color: #fff;
}

div.blau {
  background-color: #14a9b1;
}

div.blau > h1 {
  color: #fff;
  margin-bottom: 0;
}

div.blau > h2 {
  color: #672b59;
  margin-top: 0;
  text-transform: none;
  font-weight: 800;
  font-size: 34px;
}

div.blau > p {
  color: #fff;
}

.flaeche:has(.dreieck) {
  padding-bottom: 150px;
}

/* Bild-/Textmodule */
.innerheadlines b {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  line-height: 140%;
  display: table;
  background-color: #672b59;
  color: #fff;
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  padding: 0 6px;
  margin: 0;
}

.innerheadlines i {
  font-family: "Raleway", sans-serif;
  line-height: 140%;
  display: table;
  background-color: #fab414;
  color: #fff;
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  padding: 0 6px;
  margin: 3px 0 0 0;
}

.btn {
  padding: 8px 20px;
  background: #fab300;
  color: #fff;
  border-radius: 0px;
  font-size: 28px;
  cursor: pointer;
  display: inline-block;
}

.btn:hover {
  background: #672b59;
  color: #fff;
}
@media screen and (max-width: 550px) {
	.btn { font-size: 7vw;}
}

#navbtn {
  display: none;
}

@media screen and (max-width: 1190px) {
  nav {
	position: absolute;
	top: 30px;
	right: 30px;
    padding-top: 5px;
    padding-bottom: 15px;
  }

  #logoarea {
    left: 25px;
  }

  #navbtn {
    position: absolute;
    top: 0px;
    right: 0;
    display: initial;
    z-index: 3000;
  }

  #mainnav {
    display: none;
    z-index: 2000;
    background-color: #fff;
    position: relative;
    padding: 30px;
margin-top: -10px;
margin-right: -4px;
  }

  #mainnav.shown {
    display: block;
		border: 6px solid #672b59;
	z-index: 500;
  }

  nav ul,
  nav li {
    list-style: none;
  }

  #mainnav a {
    text-decoration: none;
    font-weight: normal;
    color: #515054;
    display: block;
    padding: 20px 10px;
    width: 100%;
    border-bottom: 1px solid #eee;
    font-size: 21pt;
  }

  #mainnav a:hover {
    background-color: #672b59;
    color: #fff;
  }

  h1 {
    font-size: 36px;
    line-height: 120%;
  }

  h1 * {
    font-size: inherit;
    line-heigt: inherit;
  }

  aside section,
  footer section {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Footer */
footer {
  display: block;
  position: relative;
  padding-top: 50px;
  padding-bottom: 100px;
}

footer section {
  padding-top: 30px;
}

footer section > ul {
  list-style: none;
  display: table;
  padding-left: 0;
  margin: 0 auto;
}

footer section > ul > li {
  display: table-cell;
  padding-right: 20px;
}

footer section > ul > li > a {
  color: #fff;
  transition: color 200ms;
  text-transform: initial;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 20px;
  display: block;
  font-family: "Raleway", sans-serif;
  white-space: nowrap;
}

footer section > ul ul {
  display: block;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

footer section > ul ul li {
  display: block;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

footer section > ul ul li:last-of-type {
  padding-right: 0;
}

footer section > ul ul li a {
  color: #fff;
  transition: color 200ms;
  text-transform: initial;
  line-height: 35px;
  text-decoration: none;
  white-space: nowrap;
}

footer section > ul ul li a:hover {
  color: #14a9b1;
  transition: color 200ms;
}

footer section > ul > li > a:hover {
  color: #fff;
  transition: color 200ms;
}

#lastrow {
  text-align: center;
  color: #fff;
  font-size: 11pt;
  padding-top: 40px;
  width: 100%;
}

#lastrow img {
  display: inline-block;
  height: 25px;
}

@media screen and (max-width: 1000px) {
  #lastrow {
    padding-top: 0;
  }

  footer section {
    padding-top: 0;
  }

  footer > section > ul {
    
  }
  
  
  footer section > ul > li {
  display: block;
  padding-bottom: 30px;
  padding-right: 20px;
  text-align: center;
}
}

@media screen and (max-width: 600px) {
  footer section {
    padding: 20px 0;
  }

  h1 {
    font-size: 42px;
  }

  #logoarea {
    left: 0;
  }

  section {
    padding: 0;
  }
}

/* Back to top */
#backtotop {
  background-color: #fab300;
  position: fixed;
  border-radius: 100%;
  padding: 9px 16px;
  bottom: 20px;
  right: 20px;
  z-index: 400;
  color: #fff;
  transition: opacity 500ms;
}

.backtotophidden {
  opacity: 0;
  transition: 500ms;
}


@media screen and (max-width: 1400px) {
	main > p {padding-left: 15%; padding-right: 15%; width: 100%; margin-left: 0;margin-right: 0;}
	main > form {padding-left: 15%; padding-right: 15%; width: 100%; margin-left: 0;margin-right: 0;}
	main > h1 {padding-left: 15%; padding-right: 15%;width: 100%; margin-left: 0;margin-right: 0;}
	main > h2 {padding-left: 15%; padding-right: 15%;width: 100%; margin-left: 0;margin-right: 0;}
	main > h3 {padding-left: 15%; padding-right: 15%;width: 100%; margin-left: 0;margin-right: 0;}
}

@media screen and (max-width: 1000px) {
	.schmal {max-width: 90% ! important;}
	.zweispalter {max-width: 90% ! important;}
	.blog {max-width: 90% ! important; padding: 0! important;}
	main > p {padding-left: 5%; padding-right: 5%; width: 100%; margin-left: 0;margin-right: 0;}
	main > form {padding-left: 5%; padding-right: 5%; width: 100%; margin-left: 0;margin-right: 0;}
	main > h1 {padding-left: 5%; padding-right: 5%;width: 100%; margin-left: 0;margin-right: 0;}
	main > h2 {padding-left: 5%; padding-right: 5%;width: 100%; margin-left: 0;margin-right: 0;}
	main > h3 {padding-left: 5%; padding-right: 5%;width: 100%; margin-left: 0;margin-right: 0;}
}



.bilddreispalter {width: 100%; max-width: 85%; margin: 0 auto; line-height: 50%; margin-top: 80px; margin-bottom: 40px;}
.bilddreispalter > a {display: inline-block; vertical-align: top; width: 30%;  aspect-ratio: 4 / 3;}
.bilddreispalter > a:nth-of-type(3n+2) {margin-left: 5%; margin-right: 5%;}

@media screen and (max-width: 1400px) {
		.bilddreispalter {padding-left: 3%; padding-right: 3%;}
}

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

	.bilddreispalter > a {margin: 0 ! important; margin-bottom: 40px ! important;  width: 100%;}
	
}


.bildzweispalter {width: 100%; max-width: 85%;  margin: 0 auto; line-height: 50%; margin-top: 80px; margin-bottom: 40px;}
.bildzweispalter > a {display: inline-block; vertical-align: top; width: 47%;  aspect-ratio: 4 / 3;}
.bildzweispalter > a:nth-of-type(2n+2) {margin-left: 6%;}

@media screen and (max-width: 800px) {
	.bildzweispalter > a {margin: 0 ! important; margin-bottom: 40px ! important;  width: 100%;}
}

.headline {
	width: 100%;
	background-color: #672b59;
	color: #fff;
	text-align: center;
	margin-top: 30px;
	padding: 30px;
	font-family: "Raleway", sans-serif;
  font-size: 28px;
	
}




.blog {width: 100%; max-width: 70%; margin: 0 auto; line-height: 50%; margin-top: 10px; margin-bottom: 40px;}
.blog > div {display: inline-block; vertical-align: top; width: 30%;  text-align: left; margin-bottom: 50px;}
.blog > div:nth-of-type(3n+2) {margin-left: 5%; margin-right: 5%;}
.blog > div > a > img {width: 100%; margin-bottom: 10px;}
.blog > div > a.titel {
	 
	
}
.blog > div > a.titel  {
  color: #672b59;
  font-style: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 120%;
  text-align: left;
  
}
@media screen and (max-width: 1400px) {
		.blog {padding-left: 3%; padding-right: 3%;}
}

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

	.blog > div {margin: 0 ! important; margin-bottom: 40px ! important;  width: 100%;}
	
}

#kieznews {
	font-weight: 900;
	font-family: "Raleway", sans-serif;
	color: #672b59;
	position: absolute;
	top: 35px;
	right: 35px;
	
}
#kieznews:hover {color: #fff;}

@media screen and (max-width: 1190px) {
	#kieznews {top: 58px; right: 0px;}
}
@media screen and (max-width: 610px) {
	#kieznews {
		top: 25vw;
		right: 0px;
		font-size: 5vw;
	}
	#logoarea {margin-bottom: 12vw;}
}
.headline {width: 100%; max-width: 100%;}

main > p > img {max-width: 100%;}
@media screen and (max-width: 1400px) {
		main p, main > form  {max-width: 100%;}
}

.pageimg {
	margin: 0; line-height: 50%;
	
}


.schmal {
	  text-align: left;
	
  max-width: 70%;
  margin-left: auto ! important;
  margin-right: auto ! important;
  margin-top: 0;
  margin-bottom: 0;
	
}
.bildmodus1 {
	float: left;
	width:100%;
	max-width: 400px;
	margin-right: 30px;
}
.bildmodus2 {
	display: inline-block;
	
}
strong {font-weight: bold;}

.flaeche > .zweispalter {margin: 0 auto;}

.quadrat-lila {
	display: block;
	padding: 20px;
	color: #fff;
	font-size: 28px;
	background-color:#672b59;
	width: 100%;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
}
.quadrat-lila p {
	color: #fff;
	font-size: 28px;
	font-weight: bold;
}

.lila .button {
	background-color: #fab414;
	color: #672b59;
	padding: 10px 20px;
	margin: 30px;
	border: 0;
	display: inline-block;
}
.lila .button:hover {
		background-color: #14a9b1;
		color: #fff;
}

.gelb .button {
	background-color: #672b59;
	color: #fff;
	padding: 10px 20px;
	margin: 30px;
	border: 0;
	display: inline-block;
}
.gelb .button:hover {
		background-color: #14a9b1;
		color: #fff;
}

main > div > strong {font-size: inherit; line-height: 140%; font-weight: inherit;}

.schmal > h2 {
display: inline;
  background-color: #fab300;
  color: #fff;
  padding: 2px 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 900;
  font-size: 24px;
  margin: 1px 0;
  line-height: 110%;
	width: 100%;
	max-width: 85%;

}

button {
	background-color: #672b59;
	padding: 10px 20px;
	color: #fff;
	bordeR: 0;
	cursor: pointer;
	
}
label {cursor: pointer;}

@media screen and (max-width: 1300px) {
	.deskbr {display: none;}
}

#lastrow a {color: inherit; font-family: "Raleway", sans-serif; font-size: 21px; text-decoration: none;}


@media screen and (max-width: 800px) {
	.dreispalter {max-width: 90%;}
	main > div { max-width: 90%;}
	.main_blog_img {
		float: initial ! important;
		width: 100% ! important;
		padding-left: 0 ! important;
		
	}
}
@media screen and (max-width: 1400px) {
.pageimg  {max-width: 100%;}
.pageimg img {max-width: 100%;}
}

@media screen and (max-width: 850px) {
	
.nllink {margin: 0 auto ! important;
  display: block! important;
  padding: 0! important;
    padding-bottom: 0px! important;
  padding-bottom: 30px! important; 
}}


#page31 .blau .zweispalter > div{margin-bottom: 0;}


.mobilepageimg {display: none;}



#page31 .schmal  {margin-top: 50px ! important;}
@media screen and (max-width: 800px) {
	 main > h1 { text-align: left;}
	 .flaeche {text-align: left;}
	 .flaeche > h1 { text-align: left;}
	 .flaeche > h2 { text-align: left;}
	 main > div { text-align: left;}
	div.dreispalter > div { margin-top: 30px }
	.mobilepageimg {display: inline-block;}	
	.desktoppageimg {display: none;}	
	#page3 .schmal {margin-top: 50px ! important;}
	
	.flaeche .button {margin-left: 0;}
	#page3 main p a {text-align: left;}
	.bildmodus1 {width: 100%; float: initial; margin-right: 0; max-width: 100%; margin-bottom: 50px}
	.quadrat-lila {aspect-ratio: initial ! important;}

}

@media screen and (min-width: 1000px) {
#page31 .quadrat-lila {padding-top: 120px;}	
}