/* Roboto, sans-serif-300 - latin */
@font-face {
  font-family: roboto300;
  src: url('../fonts/roboto-v27-latin-300.woff2') format('woff2'), 
       url('../fonts/roboto-v27-latin-300.woff') format('woff');
}

/* Roboto, sans-serif-regular - latin */
@font-face {
  font-family: roboto400;
  src: url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), 
       url('../fonts/roboto-v27-latin-regular.woff') format('woff');
	}
	
/* Roboto, sans-serif-500 - latin */
@font-face {
  font-family: roboto500;
  src: url('../fonts/roboto-v27-latin-500.woff2') format('woff2'),
       url('../fonts/roboto-v27-latin-500.woff') format('woff');
}

/* Roboto, sans-serif-700 - latin */
@font-face {
  font-family: roboto700;
  src: url('../fonts/roboto-v27-latin-700.woff2') format('woff2'),
       url('../fonts/roboto-v27-latin-700.woff') format('woff');
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
	font:300 1rem roboto300, sans-serif;

}
/* ----------------------------------------------------
	seiten hintergrund
------------------------------------------------------- */
body {
	background:#E5E4E1;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
#all {
	max-width: 1170px;
	margin: auto;
	box-shadow:0 0 8px #aeadac;
	background:#fff;
}




/* ----------------------------------------------------
	topheader
------------------------------------------------------- */
#topheader {
	display: flex;
	align-items: left;

	height: 100px;
	padding: 0 18px;
}
/* -------------------------
	topheader spez. moblie
---------------------------- */
@media (max-width:950px) {
	#topheader img {
		padding: 10px 0 0 0;
		height: 85px; 
		justify-content: left;
	}
}
/* -------------------------
	topheader spez. desktop
---------------------------- */
@media (min-width:951px) {
	#topheader {
		height: 145px;
		padding: 10px 70px;
	}
}

/* ----------------------------------------------------
	navi
------------------------------------------------------- */
input[id*="checker"] {display: none;}

/* -------------------------
	navi für moblie
---------------------------- */
@media (max-width:950px) {
	/* Burger-Button -------------------*/

	#burger {
		position: fixed;
		top: 150px;
		right: 0px;
		height: 3.5rem;
		width: 3.5rem;
		background: #F9A01Bb0;
		display: block;
		z-index: 101;
		transition: 1s;
	}


	/* Linien des Burgermenu ---*/
	#burger .line {
		height: 2px;
		width: 60%;
		position: absolute;
		left: 20%;
		background: #fff;
		transition: 0.5s 0.5s;
	}

	#burger .line:nth-of-type(1) {
		top: 34%;
	}

	#burger .line:nth-of-type(2) {
		top: 49%;
	}

	#burger .line:nth-of-type(3) {
		top: 64%;
	}

	#navchecker:checked+#burger .line:nth-of-type(1) {
		transform: rotate(45deg);
		top: 49%;
	}

	#navchecker:checked+#burger .line:nth-of-type(2) {
		transform: rotate(-135deg);
	}

	#navchecker:checked+#burger .line:nth-of-type(3) {
		transform: rotate(-45deg);
		top: 49%;
	}


	/* navi -----*/

	#navchecker {
		display: none;
	}
	#topnav {
		position: fixed;
		top: 0;
		right: 0;
		transform: translateX(100%);
		max-width: 400px;
		height: 100vh;
		line-height: 40px;
		background: #EAB817;
		z-index: 99;
		transition: .5s;
	}

	#navchecker:checked~#topnav {
		transform: translateX(0%);
	}

	#topnav ul {
		list-style: none;
		margin-top: 78px
	}

	#topnav ul a {
		text-decoration: none;
		text-align: left;
		display: block;
		font-size: 1.2rem;
		color: #333;
		margin: 0 22vw 0 6vw;
		transform: scale(1);
		font-weight: 400;
		transition: 0.5s;
	}

	#topnav a:hover,
	#topnav a.akt {
		color: #ffffff;
		transform: scale(1.2) translateX(8px);
	}
	/* Zwischenschicht #backnav ---*/

	#backnav label {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		background: rgba(0,0,0,0.1);
		cursor: pointer;
		transition:0.5s;
	}

	#navchecker:checked~#backnav label {
		z-index: 98;
	}


}

/* -------------------------
	navi für desktop
---------------------------- */
@media (min-width:951px) {
	#topnav {
		padding: 0 70px;
		background: #FBBA00;
	}
	#topnav ul {
		list-style: none;
		display: flex;
		justify-content: space-between;
	}
	#topnav li {
		flex-basis:0;
		flex-grow: 0;
	}
	#topnav a {
		color: #fff;
		text-decoration: none;
		letter-spacing: 0.03em;
		line-height: 26px;
		white-space: nowrap;
		font-weight: 400;
	}
	#topnav a:hover,
	#topnav a.akt {
		color: #871811;
		font-weight: 700;

	}
}

/* ----------------------------------------------------
	main
------------------------------------------------------- */
main {
	margin-top: 50px;
	display: block;
	padding: 0 18px;
}
/* -------------------------
	main für desktop
---------------------------- */
@media (min-width:700px) {
	main {
		margin-top: 60px;
		padding: 0 70px;
	}
}

/* ----------------------------------------------------
	text
------------------------------------------------------- */
h1 {
	color: #7A7A7A;
	font:700 1.7rem roboto, sans-serif;
	line-height: 1.5rem;
	letter-spacing: 0.01rem;
}
h2 {
	color: #7F1C17;
	font:500 1.25rem roboto, sans-serif;
	line-height: 1.4rem;
	letter-spacing: 0.02rem;
	margin-top: 20px;
}

h3 {
	color: #F7A600;
	font:500 1.0rem roboto, sans-serif;
	line-height: 1.4rem;
	letter-spacing: 0.02rem;
	margin-bottom: 1.5em;
}

h4 {
	color: #F7A600;
	font:700 1rem roboto, sans-serif;
	line-height: 1.3rem;
	letter-spacing: 0.01rem;
	padding: 5px 0 5px 0;
}
strong {
	color:#000000;
	font: 500 1rem roboto500;
}
.header2 {
	color: #F9A01B;
	font:700 1.5rem roboto, sans-serif;
	line-height: 1.875rem;
	letter-spacing: 0.02rem;
}
.header1 {
	color: #7A7A7A;
	font:300 2rem roboto, sans-serif;
	line-height: 3rem;
	letter-spacing: 0.01rem;
}
.teaser {
	font:400 1.375rem roboto, sans-serif;
	line-height: 1.625rem;
	letter-spacing: 0.05rem;
}
.teaser:hover {
	color: #F9A01B;
}
ol {
	list-style: none;
    padding: 0 0 0 15px;
    text-indent: -15px;
	text-decoration: none;
}
ol li::before {
	content:"\25CF"; 
	padding-right: 5px;
	color: #F9A01B;
	line-height: 1.375rem;
} 

p {
	line-height: 1.375rem;
}
main ul {
	list-style: none;
    padding: 0 0 0 12px;
    text-indent: -12px;
	text-decoration: none;
}
main ul li::before {
	content:"\276F"; 
	padding-right: 5px;
	font: 500 1rem roboto500;
	color: #F9A01B;
	line-height: 1.375rem;
} 
main a {
	text-decoration: none;
	color:#000;
}
main a:hover {
	background: #F6F6F6;
}
.aktiv {
	color:#fff;
}
.button {
	font: 400 1rem roboto400, sans-serif;
	color: #ffffff;
	cursor: pointer;
	padding: 2px;
    padding-right: 5px;
    padding-left: 5px;
	background: #c2c0ba
}
.button:hover
{
	background: #F9A01B;
}
.cookie {
	font:300 0.8rem roboto300, sans-serif;
	letter-spacing: 0.05rem;
	padding-top: 5px;
}
.zitiert {
	font:300 0.7rem roboto300, sans-serif;
	letter-spacing: 0.05rem;
	padding-top: 5px;
	color: #4a4a4a;
}
.beschreibung {
	font:300 1rem roboto300, sans-serif;
	margin-top: 10px;
	margin-left: 16px;
	line-height: 22px;
	color: #000;
}
.beschreibung2 {
	font:300 1rem roboto300, sans-serif;
	margin-top: 10px;
	margin-left: 0px;
	line-height: 22px;
	color: #000;
}


/* ----------------------------------------------------
	section unten
------------------------------------------------------- */
.verlauf {
		background: linear-gradient(to right, #FBB900 0%, #F39200 50%);
	}
.foto {
	background-image: url(../img/dagmar_scharff.jpg);
	background-position: center;
    }
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
	
/* -------------------------
	Zweispalter section
---------------------------- */
.zweispalter2 > div {
	margin: 0 0;
}
@media (min-width:700px) {
	.zweispalter2 {
		display: flex;
		justify-content: space-between;
	}
	.zweispalter2 > div {
		flex-basis: 50%;
	}
}

/* ----------------------------------------------------
	footer
------------------------------------------------------- */
footer {
	margin-top: 36px;
	color: #fff;
	font: 300 1rem roboto300, sans-serif;
	font-size: 0.938rem;
	line-height: 1.5rem;
	letter-spacing: 0.03rem;
	background: #727272;
	padding: 23px 18px;
}
footer > section {
	margin-bottom: 2rem;
}
footer > section:last-of-type {
	margin-bottom: 1rem;
}
footer a {
	text-decoration: none;
	color: #fff;
}
footer a:hover {
	color: #000;
}
/* -------------------------
	footer spez. desktop
---------------------------- */
@media (min-width:700px) {
	footer {
		height: 230px;
		display: flex;
		justify-content: space-between;
		margin: 30px 0 0;
		padding: 35px 70px;	
	}
	footer > section {
		margin: 0;
	}
}
/* -------------------------
	bild-container
---------------------------- */
   .bild-container {
    overflow: hidden; /* Verhindert, dass das Bild über den Rand hinauswächst */
    width: 330px; /* Breite des Containers festlegen */
  }

  .bild-container img {
    width: 100%;
    transition: transform 0.3s ease; /* Sanfter Übergang */
  }

 /* .bild-container:hover img {
    transform: scale(1.3); /* Vergrößert das Bild auf 130% */
  }

/* -------------------------
	bild-container 2
---------------------------- */
/* Container, um Überlappungen zu vermeiden */
.image-wrapper {
    overflow: hidden; /* Bild wird beim Zoomen innerhalb des Containers beschnitten */
    display: inline-block; /* Container passt sich an Bildgröße an */
}

.zoom-move-image {
    width: 250px; /* Anfangsgröße */
    transition: transform 0.4s ease-in-out; /* Weiche Animation */
}

/* Hover-Effekt: Vergrößern und Verschieben */
.zoom-move-image:hover {
    /* Skalierung auf 1.3 (20% größer) und
       Verschiebung um 20px nach rechts (X) und 10px nach unten (Y) */
    transform: scale(1.3) translate(-5px, 5px);
}

/* ----------------------------------------------------
	impressum
------------------------------------------------------- */
.impressum {
	color: #444;
	font:400 0.9rem roboto, sans-serif;
	line-height: 0.5rem;
	letter-spacing: 0.03rem;
	background: linear-gradient(to right, #F39200 0%, #FBB900 80%);
	padding: 8px 70px 0px;
	text-align: right;
	padding-bottom: 0.5rem;
}
.impressum a {
	text-decoration: none;
	color: #444;
}
.impressum a:hover {
	color: #7F1C17;
}
.impspalten > div {
	margin: 0;
}
@media (min-width:700px) {
	.impspalten {
		display: flex;
		justify-content: space-between;	
	}
	.impspalten > div {
		flex-basis: 0px, 0%;
	}
}
.impressum-mobi {
	color: #444;
		font:400 0.8rem roboto, sans-serif;
	line-height: 0rem;
	letter-spacing: 0.03rem;
	background: linear-gradient(to right, #FBB900 0%, #F39200 50%);
	padding: 5px 20px 5px;
}
.impressum-mobi a {
	text-decoration: none;
	color: #444;
}
.impressum-mobi a:hover {
	color: #7F1C17;
}

/* ----------------------------------------------------
	frei Klassen
------------------------------------------------------- */
@media (max-width:950px) {
	.nomobile { display: none;}
}
@media (min-width:951px) {
	.nodesk { display: none;}
}

/* -------------------------
	Zweispalter
---------------------------- */
.zweispalter > div {
	margin: 2% 0;
}
@media (min-width:700px) {
	.zweispalter {
		display: flex;
		justify-content: space-between;
	}
	.zweispalter > div {
		flex-basis: 45%;
	}
}


/* ----------------------------------------------------
	eigen
------------------------------------------------------- */
	.div2 { margin-left:15%;}
	.div3 { margin-left:16%;}
	
	
.button {
	font: 400 1rem roboto400, sans-serif;
	color: #ffffff;
	cursor: pointer;
    padding-right: 5px;
    padding-left: 5px;
	background: #c2c0ba
}
.buttonohne {
	font-family: roboto400, sans-serif;
	font-size: 12px;
	color: #ffffff;
	cursor: pointer;
	padding: 2px;
	padding-right: 5px;
	padding-left: 5px;
	background: #c2c0ba
}
.button:hover {
	color: #ffffff;
	background: #F9A01B;
}