/*ANCHOR - funk.css*/

#kopf-funk {
	margin: 0 auto;
	display: flex;
	width: 100vw;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: auto;
	min-height: 800px;
}

.bg-kopf-alphabet {
  background-color: #141b2d;
  background-image: url("../grafiken/alphabet/bg-kopf-alpha.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

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

/*ANCHOR - Fülltext*/
.text-fuell {
	text-align: left;
	font-family: "Outfit";
	font-size: 8rem;
	font-weight: 900;
  position: relative;
	transition: all 0.5s;
}

small {font-size: 87%;}

smaller {font-size: 75%;}

.posfuell {
	height: 140px;
	transition: all 0.5s;
}

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

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

/* Füllung*/
.fuelltext span:nth-child(2) {
	color: orange;
	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*/


/*ANCHOR - flex-test*/
.flex-item-funk-lr {
  flex-basis: 45%;
  flex-grow: 1;
  flex-shrink: 1;
	position: relative;
}

.txt-kopf-alpha {
	font-size: 4rem;
	font-family: 'Outfit';
	font-weight: 600;
	color: whitesmoke;
  letter-spacing: 0.05em;
	transition: all 0.5s;
}

.txt-aktuell {
	font-family: 'Outfit';
	font-size: 1.5rem;
	color: #dfe0e1;
	transition: all 0.5s;
}


/*ANCHOR - container*/
.container1-funk {
	margin: 0 auto;
	display: flex;
	width: 100vw;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 10px;
	column-gap: 10px;
	height: auto;
}

.bg-container2 {
	background-color: white;
	background-image: url("../grafiken/alphabet/bg-kopf-alpha-2.webp");
	background-position: right 50px top -230px;
	background-repeat: no-repeat;
}

.container1-innen-funk {
	margin: 0 auto;
	padding: 10px;
	display: flex;
	flex-direction: row;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	row-gap: 30px;
	column-gap: 10px;
	width: 75%;
}

.txt-funk-ueber2 {
	font-size: 2.5rem;
	font-family: 'Oswald';
	font-weight: 300;
}

.txt-alpha-ueber-klein {
	font-size: 1.65rem;
	font-family: 'Oswald';
	font-weight: 400;
	letter-spacing: 0.05em;
	color: #141b2d;
}

.txt-funk-norm {
	text-align: left;
	font-size: 1.5rem;
	font-family: 'Outfit';
	font-weight: 300;
	color: #141b2d;
}

.txt-alpha-klein {
	text-align: left;
	font-size: 1.25rem;
	font-family: 'Outfit';
	font-weight: 300;
	color: #141b2d;
	font-style: italic;
}

.txt-alpha-norm-fett {
	text-align: left;
	font-size: 2.2rem;
	font-family: 'Outfit';
	font-weight: 300;
	color: whitesmoke;
	transition: all 0.5s;
}

/*ANCHOR - mehrfarbiger Text*/
.txt-bg-alpha {
	background: linear-gradient(to right, #1475fd,#ffa500, #1cf608, #f80303 100%);
	background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*ANCHOR - dialog*/
dialog, dialog2 {
  width: 0;
  background-color: #b1aeae;
  color: #141b2d;
	border: none;
  border-radius: 10px;
  padding: 0;
	box-shadow: 6px 6px 8px #4f4f4f;
}

dialog[open], dialog2[open] {
  animation: fadein 0.5s ease-in forwards;
}

@keyframes fadein{
  100%{
    opacity:1;
		width: 50%;
  }
}

dialog p {
  margin: 0;
}

.txt-dialog-ueber {
	text-align: center;
	font-family: 'Outfit';
	font-weight: 600;
	font-size: 1.65rem;
}

.txt-dialog2 {
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: 0.07em;
	text-decoration: underline;
}

.txt-dialog {
	text-align: left;
	font-family: 'Outfit';
	font-weight: 400;
	font-size: 1.2rem;
}

.txt-abk {
	color: crimson;
	font-weight: bold;
}

.button-dialog {
	background-color: transparent;
	border: 0;
	cursor: help;
	letter-spacing: 0.05em;
	color: #141b2d;
	font-size: 1.5rem;
	font-family: 'Roboto';
	font-weight: 400;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px;
}

.close {
	font-family: 'Outfit';
	font-size: 1rem;
	background-color: #b6e1f9;
	border: 0;
	border-radius: 5px;
	padding: 5px;
	transition: all 0.7s;
}

.close:hover {
	cursor: pointer;
	color: white;
	background-color: crimson;
	transition: all 0.7s;
}

/*ANCHOR - dialog ende*/

/*ANCHOR - underline*/
.u-strich {
	text-decoration: underline; 
	text-underline-offset: 0.33em; 
	text-decoration-color: #807f7f;
}

.linie-grau {
	color: #d6d2d2;
}
/*ANCHOR - underline ende*/

/*ANCHOR - border*/
.txt-technik-border-grau {
	border-left: 10px solid #dcdcdc;
}

.txt-funk-border-pink {
	border-left: 15px solid #c41187;
	border-radius: 50% 50%;
}

.txt-funk-border-gruen {
	background-color: white;
	border-right: 35px solid #9fbe54;
	border-radius: 50% 50%;
}

.txt-funk-border-crim {
	background-color: white;
	border-right: 35px solid crimson;
	border-radius: 50% 50%;
}

.txt-funk-border-olive {
	background-color: white;
	border-right: 35px solid #96a102;
	border-radius: 50% 50%;
}

.txt-funk-border-tuerk {
	background-color: white;
	border-right: 35px solid #05a2a2;
	border-radius: 50% 50%;
}

.txt-funk-border-blau {
	background-color: whitesmoke;
	border-right: 35px solid #5854be;
	border-radius: 50% 50%;
}

.txt-funk-border-hblau {
	background-color: whitesmoke;
	border-right: 35px solid #10cdf3;
	border-radius: 50% 50%;
}

.txt-alpha-border-blau {
	background-color: #e1e1e1;
	border-right: 35px solid #2194ce;
	border-radius: 50% 50%;
}

.txt-funk-border-orange {
	background-color: #e1e1e1;
	border-right: 35px solid orange;
	border-radius: 50% 50%;
}

/*ANCHOR - border ende*/


/*ANCHOR - tabelle alphabet*/
table, th, td, caption {
	text-align: center;
  border: thin solid #e7e4e4;
}

caption {
	font-size: 2.5rem;
	font-family: 'Oswald';
	font-weight: 600;
	line-height: 1em;
	color: orange;
}

.caption-klein {
	font-size: 1.5rem;
	font-family: 'Oswald';
	font-weight: 400;
	color: #141b2d;
	line-height: 0.5rem;
}

table {
	border-collapse: collapse;
  border-spacing: 0;
  border-width: thin 0 0 thin;
	width: 80%;
}

/*.table-sicht {
	display: inline;
}*/

caption, thead {
	background: #e3e2e2;
	padding: 10px;
}

td {
	font-size: 1.5rem;
	padding: 5px 10px;
}

.tdbg-kw {background-color: #bef8ed;}
.tdbg-vhf {background-color: #bedef8;}
.tdbg-uhf {background-color: #a6d4f9;}
.tdbg-shf {background-color: #82c4fa;}
.tdbg-ehf {background-color: #63b7fb;}
.tdbg-tehf {background-color: #1f95f6;}
.tdbg-swert {background-color: #f61ff651;}

th {
	background: orange;
	color: #141b2d;
	font-size: 1.5rem;
	font-weight: 600;
	font-family: 'Oswald';
	padding: 10px;
	
}

.th-frist-hg > th {
	background-color: #f8a1b3;
}

.th-hg {background: #41633e}

tr {
	padding: 5px;
	letter-spacing: 0.1em;
}

tr:nth-child(even) {background-color: #e3e2e2}

col:nth-child(1) {width: 10%;}
col:nth-child(2), col:nth-child(3), col:nth-child(4), col:nth-child(5), col:nth-child(6), col:nth-child(7), col:nth-child(8) {width: 12.1%;}


tr:hover {background: #7ed8f3}

/***tabelle funk ende***/


/*ANCHOR - farben */
.colpink {color: #c41187;}
.colgrhell {color: rgb(235, 233, 233);}
.colblack {color: black;}
.coldblau {color: #141b2d;}
.colgruen {color: #738a3c;}
.colblau {color: #5854be;}
.colwhite {color: white;}
.colblau-titel {color:#2194ce;}
.colcrim {color: crimson;}
.colorange {color: orange;}

.bgcolwhite {background-color: white;}

/*qcols*/
.qcolgruen {color: #95b456;}
.qcolblau {color: #5854be;}
.qcolorange {color: orange;}
.qcolhblau {color: #10cdf3;}
.qcolmblau {color: #458df9;}
.qcolcrim {color: crimson;}
.qcoltuerk {color: #00a3be;}
.qcololive {color: #96a102;}
.qcolrosa {color: #fcb8fc;}


/*ANCHOR - border*/
.bord-left {
	padding-left: 10px;
	border-left: 12px solid #d1cece;
}

/*ANCHOR - button download*/
.btn-download {
	padding: 15px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 400;
	font-family: 'Outfit';
	color: #141b2d;
	border: none;
	border-left: 25px solid orange;
	border-radius: 8px;
	background-color: gainsboro;
	transition: all 0.7s;
}

.btn-download a {
	color: #141b2d;
}

.btn-download img {
	padding-left: 10px;
	vertical-align: middle;
}

.btn-download:hover {
	background-color: #c2c0c0;
	box-shadow: 5px 5px 8px gray;
	color: whitesmoke;
	border-radius: 15px;
	border-left: 25px solid crimson;
	transition: all 0.7s;
}

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

#navfarbe-alpha a {
	color: var(--menue-farbe);
  text-decoration: underline 3px;
}

#navfarbe-funk {
	color: var(--menue-farbe);
  text-decoration: underline double 2px;
}

/*ANCHOR - media screens*/

@media screen and (max-width: 1440px) {
	.container1-innen-funk {
		width: 85%;
	}
	
}

@media screen and (max-width: 1220px) {
	.flex-item-funk-lr {
		flex-basis: 60%;
	}

	table {
		width: 97%;
	}
}

@media screen and (max-width:962px) {
	.txt-kopf-alpha {
		font-size: 3rem;
		transition: all 0.5s;
	}
	.text-fuell {
		font-size: 6rem;
		transition: all 0.5s;
	}
	.txt-alpha-norm-fett {
		font-size: 1.5rem;
		transition: all 0.5s;
	}
}

@media screen and (max-width: 872px) {
	th, td {
		font-size: 1.1rem;
	}
	
}

@media screen and (max-width: 762px) {
	.kopf-innen-funk {
		width: 95%;
	}
	
	.container1-innen-funk {
		width: 95%;
	}
	
	.txt-funk-ueber2 {
		font-size: 2rem;
	}
	table {
		width: 100%;
	}
	th, td {
		font-size: 1rem;
	}
	
}

@media screen and (max-width: 660px) {
	table {
		width: 100%;
	}
	th, td {
		font-size: 0.8rem;
	}
	.txt-kopf-alpha {
		font-size: 2rem;
		transition: all 0.5s;
	}
	.text-fuell {
		font-size: 5rem;
		transition: all 0.5s;
	}
	.txt-alpha-norm-fett {
		font-size: 1.25rem;
		transition: all 0.5s;
	}
	.posfuell {
		height: 120px;
		transition: all 0.5s;
	}
}

@media screen and (max-width: 600px) {
	.posfuell {
		height: 80px;
		transition: all 0.5s;
	}
	.text-fuell {
		font-size: 4rem;
		transition: all 0.5s;
	}
	.container1-innen-funk {
		width: 100%;
	}

}

@media screen and (max-width: 560px) {
	.txt-funk-norm-fett, .txt-funk-norm {
		font-size: 1.3rem;
	}
	caption {
		font-size: 2rem;
	}
	
	.caption-klein {
		font-size: 1.2rem;
	}

}

@media screen and (max-width: 460px) {
	.txt-funk-ueber {
		font-size: 3.5rem;
		line-height: 3rem;
	}
	.text-fuell {
		font-size: 3rem;
		transition: all 0.5s;
	}
	.txt-aktuell {
		font-size: 1.2rem;
		transition: all 0.5s;
	}
	
}