/*ANCHOR - wetter.css*/

#wetter-container1 {
	display: flex;
	width: 100%;
	height: auto;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 10px;
	justify-content: center;
	align-items: stretch;
	background-color: #4686c4;
	background: url(../grafiken/wetter/wetter-neu/svg/extreme-day-drizzle-fill.svg) no-repeat 80% 50% / contain;
}

#wetter-container1 img {margin-right: 20px;}

#wetter-container2 {
	display: flex;
	width: 100%;
	height: auto;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 10px;
	justify-content: center;
	align-items: stretch;
	background-color: #ffc524;
	background: url(../grafiken/wetter/wetter-neu/svg/thunderstorms-night-extreme-snow-fill.svg) no-repeat 80% center / contain;
}

#wetter-container3 {
	display: flex;
	width: 100%;
	height: auto;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 10px;
	justify-content: center;
	align-items: stretch;
	background-color: #00f4ca;
	background: url(../grafiken/wetter/wetter-neu/svg/barometer.svg) no-repeat 80% center / contain;
}

.wetter-container-links {
	opacity: 0;
	display: block;
	box-sizing:border-box;
	margin-left: 80px;
	width: 100%;
	height: auto;
	flex-wrap: wrap;
}

.wetter-container-links.vonlinks {
	opacity: 1;
	animation:rollIn; 
	animation-duration: 1.2s;
}

.wetter-container-links2 {
	opacity: 0;
	display: block;
	box-sizing:border-box;
	margin-left: 80px;
	width: 100%;
	height: auto;
	flex-wrap: wrap;
}

.wetter-container-links2.vonoben {
	opacity: 1;
	animation: backInDown;
	animation-duration: 2s;
}

.wetter-container-links3 {
	opacity: 0;
	display: block;
	box-sizing:border-box;
	margin-left: 80px;
	width: 100%;
	height: auto;
	flex-wrap: wrap;
}

.wetter-container-links3.vonrechts {
	opacity: 1;
	animation:backInRight;
	animation-duration: 2s;
}

.wetter-container-links img, .wetter-container-links2 img, .wetter-container-links3 img {
	padding-left: 20px;
	vertical-align: middle;
}

/*ANCHOR - Titel Kopf*/
#kopf-wetter {
	margin: 0 auto;
	display: flex;
	width: 100vw;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: auto;
	min-height: 800px;
}

.bg-kopf-wetter {
	background-image: url("../grafiken/wetter/hg-wetter.webp");
	background-repeat: no-repeat;
	background-size: cover;
}

.kopf-innen-wetter {
	margin: 60px 0;
	margin-top: 100px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	row-gap: 50px;
	column-gap: 10px;
	width: 75%;
}

.flex-item-wetter-lr {
  flex-basis: 45%;
  flex-grow: 1;
  flex-shrink: 1;
	position: relative;
}

/*ANCHOR - Fülltext*/
.text-fuell {
	text-align: left;
	font-family: "Outfit";
	/*font-size: 8rem;*/
	font-size: clamp(3rem, 8vw, 8rem);
	font-weight: 900;
  position: relative;
}

.posfuell {
	height: 200px;
}

.fuelltext span {
	margin-left: -0.15em;
	position: absolute;
}

/* Rand und Füllung Farbe*/
.fuelltext span:nth-child(1) {
	color: #141b2d;
	/*-webkit-text-stroke: 1px #c41187; Rahmen um Text*/
}

/* Füllung*/
.fuelltext span:nth-child(2) {
	color: #ff6100;
	animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
	0%, 100% {
		clip-path: polygon(
			0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%
		);
	}

	50% {
		clip-path: polygon(
			0% 60%,
			15% 65%,
			34% 66%,
			51% 62%,
			67% 50%,
			84% 45%,
			100% 46%,
			100% 100%,
			0% 100%
		);
	}
}
/*ANCHOR - Fülltext Ende*/

.wetter-ueber-1 {
	font-family: 'Outfit';
	font-weight: 400;
	text-align: left;
	font-size: 3rem;
	color: #141b2d;
}

.li-inhalt, .li-inhalt a {
	padding: 10px;
	text-align: center;
	font-family: 'Roboto';
	font-size: 1.75rem;
	color: #141b2d;
	list-style-type: none;
	transition: all 0.5s;
}

.li-inhalt li a::after  {
	content: none;
}

.li-inhalt li:hover, .li-inhalt a:hover {
	cursor: pointer;
	color: crimson;
	text-decoration: underline;
	transition: all 0.5s;
}

.txt-wetter {
	font-family: 'Outfit';
  font-weight: 600;
	font-size: 2rem;
	color: #141b2d;
	padding: 10px 80px;
	background-color: #ff6100;
	border-radius: 10px;
}

.bg-flex-item-wetter {
	background-color: #8080804e;
	border-radius: 30px;
}

.txt-aktuell {
	font-family: 'Outfit';
	font-size: 1.3rem;
	font-weight: 300;
	color: #141b2d;
}

.txt-aktuell img {
	padding-right: 10px;
	vertical-align: middle;
}

/*ANCHOR - Titel Kopf ende*/

.border_wetter {
	border-bottom: 8px solid #ff6100;
}

.scalez_w {transition: all 0.8s ease-in}

.scalez_w:hover {
	margin-left: -100px;
	transform: scale(2);
	transition: all 0.8s;
	/*box-shadow: 5px 5px 5px 0 rgba(80,80,80,0.8);*/
}

/*ANCHOR - accordion*/
.bereich-faq {
	display: flex;
  height: 100%;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
	background-color: #e3dfdf;
}

.bg-faq {
	background-color: #e3dfdf;
	background-image: url("../grafiken/wetter/tropfen.webp");
	background-position: right 5% top 10%;
	background-repeat: no-repeat;
}

.list {
  width: 100%;
  max-width: 70%;
}

.list .accordion-w {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 0 1rem 0;
}

.list .accordion-w input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.list .accordion-w input:checked ~ label img {
  transform: translate(0, -50%) rotate(180deg);
}

.list .accordion-w input:checked ~ .content {
  height: auto;
  opacity: 1;
  transform: translate(0, 0);
}

.content-border-br {
	border-bottom: 10px solid #ec8e7d;
}

.content-border-hbl {
	border-bottom: 10px solid #a2d5ea;
}

.content-border-dbl {
	border-bottom: 10px solid #6f91ed;
}

.content-border-gruen {
	border-bottom: 10px solid #69e180;
}

.content-border-grau {
	border-bottom: 10px solid #c1bfc1;
}

.list .accordion-w label {
  width: 100%;
	color: #141b2d;
	font-size: clamp(1.35rem, 2vw, 1.8rem);
	font-family: "Outfit";
	font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.7rem;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 350ms;
  position: relative;
  z-index: 2;
}

.list .accordion-w label span {
	padding-left: 25px;
}

.bgc-cards-orange {
  background-color: #ffa60085;
	border-right: 30px solid #ec8c05;
}

.bgc-cards-grau {
  background-color: #a6a7a990;
	border-right: 30px solid #8c8d8f;
}

.bgc-cards-hblau {
  background-color: #74d1f690;
	border-right: 30px solid #74bbf6;
}

.bgc-cards-dblau {
  background-color: #1555f890;
	border-right: 30px solid #0461ad;
}

.bgc-cards-gruen {
  background-color: #0ae33690;
	border-right: 30px solid #16b704;
}

.bgc-cards-rot {
  background-color: #f34f3290;
	border-right: 30px solid #de0202;
}

.bgc-cards-gelb {
  background-color: #e1f50990;
	border-right: 30px solid #f9d60b;
}

.list .accordion-w label:hover {
  transform: scale(1.02);
}

.list .accordion-w label img {
  width: 1.75rem;
  position: absolute;
  top: 50%;
  right: 4rem;
  transform: translate(0, -50%);
  transition: 500ms all;
}

.list .accordion-w .content {
  color: #141b2d;
	font-size: 1.2rem;
	font-family: "Outfit";
	font-weight: 400;
  width: 100%;
  background-color: #f0ebeb;
  border-radius: 1rem;
  position: relative;
  z-index: 1;
  transform: translate(0, -20%);
  height: 0;
  opacity: 0;
  overflow: hidden;
	transition: 500ms all;
}

.list .accordion-w .content a {
  color: crimson;
  font-weight: 600;
  text-decoration: underline;
	transition: all 0.5s;
}

.list .accordion-w .content a img {
  width: auto;
  padding-left: 10px;
  vertical-align: middle;
}

.list .accordion-w .content ul li {
	padding: 0 20px 10px 10px;
}

.list .accordion-w .content p {
  padding: 2rem;
  margin: 0;
}

.content-txt2 {
  padding-top: 13px;
  font-size: 1.3rem;
	font-family: "Outfit";
	font-weight: 400;
	color: #141b2d;
}
/*ANCHOR - accordion ende*/

/*ANCHOR - Wetter Erklärungen*/
.txt-liste-titel {
  /*padding: 20px 0 20px 0;*/
	padding: 0;
	margin: 0 auto;
  text-align: center;
  font-family: 'Outfit';
  font-size: 3rem;
  font-weight: 600;
  color: black;
  background-color: #e3dfdf;
}

.txt-liste-titel img {
  padding-left: 30px;
  vertical-align: middle;
}

.figimg2 {
	scale: 1;
	transition: all 1.5s;
}
.figimg2:hover {
	scale: 1.3;
	cursor: pointer;
	transition: all 1.5s ;
}
/*ANCHOR - Erklärungen ende*/


/*ANCHOR - Wetterberichte*/
#container_3 {background: url(../grafiken/wetter/hg_wetter_1.webp)}

#wetterbox {
	display: flex;
	flex-flow: row wrap;
}

#wetter_d {
	background-color: #4686c4;
	/*opacity: .9;
	filter: alpha(opacity=90);*/
}

.padd50-left {padding-left: 50px}

.wetterbild {
	padding-left: 10px;
	text-align: left;
}

.wetter-tag-txt {
	color: #141b2d;
	text-align: left;
	line-height: 1.3em;
	letter-spacing: 0.15em;
	font-size: 1.5em;
	font-family: 'Oswald';
}

.phptext {
	font-family: 'Oswald';
	letter-spacing: 0.1em;
	color: white;
	font-size: 1.1em;
}

.figtxt-wetterbild {
	font-size: 18px;
	font-family: 'Roboto';
	font-weight: 400;
	color: whitesmoke;
}

.button-wetter3 {
	padding: 10px;
	height: auto;
	border: none;
	border-radius: 5px;
	background-color: #fe6100;
	font-family: 'Outfit';
	font-size: 1.2em;
	font-weight: 300;
	color: #141b2d;
	cursor: pointer;
	transition: 0.5s;
}

.button-wetter-link:hover, .button-wetter3:hover {
	background-color: #00f4ca;
	box-shadow: 3px 3px #141b2d;
	border-radius: 15px;
	transition: 0.5s;
}

.button-wetter-link2:hover {
	background-color: #ffc524;
	box-shadow: 3px 3px #141b2d;
	border-radius: 15px;
	transition: 0.5s;
}

.abstand-blau {
	width: 100%;
	height: 50px;
	background-color:  #4b87c2;
	border-top: 5px solid #ff6100;
}

.wetter-container1_txt {
	text-align: left;
	font-family: 'Outfit';
	font-size: 1.3em;
	font-weight: 400;
}

.txtcol-blau {
	font-size: 2.5em;
	color: #141b2d;
}

.button-wetter-link, .button-wetter-link2 {
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 10px;
	height: auto;
	min-width: none;
	border: 1px solid black;
	border-radius: 10px;
	background-color: transparent;
	font-family: 'Outfit';
	font-size: 1.5em;
	font-weight: 400;
	color: #141b2d;
	cursor: pointer;
	transition: 0.5s;
}

.video-responsiv {
	width: 800px;
	height: auto;
	border: none;
}

.abstand-blaugelb {
	width: 100%;
	height: 200px;
	background-image:linear-gradient(to bottom, #4b87c2 50%, #ffc524 50%);
	
}

.abstand-gelbgruen {
	width: 100%;
	height: 200px;
	background-image:linear-gradient(to bottom, #ffc524 50%, #00f4ca 50%);
	background-size: cover;
}

.abstand-gruen {
	width: 100%;
	height: 100px;
	background-color: #00f4ca;
	background-size: cover;
}

/*ANCHOR - Laufschrift Unwetterwarnung*/
.unwetter {
	max-width: 100vw; /* iOS braucht das */
	white-space: nowrap;
	overflow: hidden;
	font-family: 'Roboto';
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	line-height: 2.5rem;
	color: #141b2d;
	background-color: yellow;
}

.unwetter span {
	display: inline-block;
	padding-left: 105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
	animation: unwetter 1s linear infinite;
}

.unwetter img {
	vertical-align: middle;
}

/* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
.unwetter span:hover {
	animation-play-state: paused 
}

/* Make it move */
@keyframes unwetter {
		0%   {transform: translate3d(0,0,0);}
		100% {transform: translate3d(-100%,0,0);}
}

/*ANCHOR - unwetterlaufschrift ende*/

/*ANCHOR - navigation*/
#navfarbe-wetter a {
	color: var(--menue-farbe);
  text-decoration: underline 3px;
}

/*ANCHOR - media querys*/
@media screen and (max-width: 920px) {

	.video-responsiv {
		width: 95%;
		height: auto;
	}
	.list {
		max-width: 85%;
	}
	
}

@media screen and (max-width:880px) {
	#wetter-container1, #wetter-container2, #wetter-container3 {
		background-image: none;
	}
}

@media screen and (max-width:600px) {
	#wetterbox {
		display: flex;
		flex-flow: column wrap;
	}
	.wetter-container-oben {
		display: flex;
		height: auto;
		background-color: whitesmoke;
	}
	.border_wetter {
		font-size: 0.6em;
	}
	.scalez_w:hover {
		transform: none;
	}
	#wetter_d {
		padding-left: 10px;
		width: 100%;
	}
	.wetter-container-links, .wetter-container-links2, .wetter-container-links3 {
		margin: 10px;
		text-align: center;
	}
	.wetter-container1_txt {
		font-size: 1.35em;
		text-align: center;
	}
	.txtcol-blau {
		font-size: 1.35em;
		text-align: center;
	}
	.wetter-tag-txt {
		text-align: center;
	}

	.figtxt-wetterbild {
		font-size: 1em;
		text-align: center;
	}
	.button-wetter-link, .button-wetter-link2 {
		font-size: 1.3em;
		padding: 5px;
		max-width: 330px;
	}
	#wetter-container1, #wetter-container2, #wetter-container3 {
		background: none;
	}
	.list .accordion-w label img {
		width: 1.3rem;
		right: 1rem;
		transition: 500ms all;
	}
	.list {
		max-width: 90%;
	}

}

@media screen and (max-width: 480px) {
	.list .accordion-w label img {
		top: 17%;
		right: 50%;
	}
	.li-inhalt li a {
		font-size: 1.3rem;
	}
	
}

@media screen and (max-width: 412px) {
	#topnav.img {
		display: none;
	}
	.kopf-innen-wetter {
	width: 85%;
	}
}

/*ANCHOR - media querys ende*/