/*own stylesheet*/
/* ==========================================================================
Colors
--green: #A8C686;
--darkyellow: #CCA43B;
--niceblue: #75B9BE;
--melon: #F9B5AC;
--darkblue: #283044;
--pink: #EF8275;
--whitishgrey: #F0F8EA;
--twinny: #ADFC92;
--lila: #473198;
--hauptlink: #A57982;
--zweitbester: #79B473;
--linkhover: #FFFD82; /*#EDF060;
--tomato: #F06543;
========================================================================== */

/*:root {
--onegreen: #70A37F;
--twogreen: #79B473;
--text: #24384C;
--accent: #78A1BB;
--twinnygreen: #B1CF5F;
}*/

:root {
	--text: #313638;
	--onegreen: #3E6990;
	--twogreen: #3E5A75;
	--apricot: #F2B880;
	--language: #B1CF5F;
	--threegreen: #C89FA3;
	--phonetikbg1: #a1c3e3;
	--phonetikbg2: #d0e2f2;
	--phonetikachtung: #f06449;
	--phonetikbeispiel: #fffd82;
}

/* ==========================================================================
.end klappt nicht, verrutscht nach links
========================================================================== */

/* ==========================================================================
FONTS
========================================================================== */

@font-face {
	font-family: 'Mixo';
	src: url('../webfonts/VTF_Mixo-Regular_web.woff2') format('woff2'),
	url('../webfonts/VTF_Mixo-Regular_web.woff') format('woff'),
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Sligoil';
	src: url('../webfonts/Sligoil-Micro.woff2') format('woff2'),
	url('../webfonts/Sligoil-Micro.woff') format('woff'),
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Sporting Grotesque';
	src: url('../webfonts/SportingGrotesque.woff2') format('woff2'),
	url('../webfonts/SportingGrotesque.woff') format('woff'),
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Louise';
	src: url('../webfonts/Louise-Regular.woff2') format('woff2'),
	url('../webfonts/Louise-Regular.woff') format('woff'),
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Compagnon';
	src: url('../webfonts/Compagnon-Roman.woff2') format('woff2'),
	url('../webfonts/Compagnon-Roman.woff') format('woff'),
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Karrik';
	src: url('../webfonts/Karrik-Regular.woff2') format('woff2'),
	url('../webfonts/Karrik-Regular.woff') format('woff'),
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Karrik';
	src: url('../webfonts/Karrik-Italic.woff2') format('woff2'),
	url('../webfonts/Karrik-Italic.woff') format('woff'),
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Mini';
	src: url('../webfonts/Minipax-Regular.eot');
	src: url('../webfonts/Minipax-Regular.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/Minipax-Regular.woff2') format('woff2'),
	url('../webfonts/Minipax-Regular.woff') format('woff'),
	url('../webfonts/Minipax-Regular.ttf') format('truetype'),
	url('../webfonts/Minipax-Regular.svg#minipax') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Mini';
	src: url('../webfonts/Minipax-Bold.eot');
	src: url('../webfonts/Minipax-Bold.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/Minipax-Bold.woff2') format('woff2'),
	url('../webfonts/Minipax-Bold.woff') format('woff'),
	url('../webfonts/Minipax-Bold.ttf') format('truetype'),
	url('../webfonts/Minipax-Bold.svg#minipax') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Grenadine';
	src: url('../webfonts/Grenat0.2Trial-Black.eot');
	src: url('../webfonts/Grenat0.2Trial-Black.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/Grenat0.2Trial-Black.woff2') format('woff2'),
	url('../webfonts/Grenat0.2Trial-Black.woff') format('woff'),
	url('../webfonts/Grenat0.2Trial-Black.ttf') format('truetype'),
	url('../webfonts/Grenat0.2Trial-Black.svg#grenadine') format('svg');
	font-weight: normal;
	font-style: normal;
}
/*** TESTFONTS TT
> Schrift hochladen und hier eintragen, auch ganz unten im CSS zuweisen – GANZ UNTEN NICHT VERGESSEN!
Ordner kopieren und im HTML Titel und style ändern
***/
@font-face {
	font-family: 'Sul';
	src: url('../webfonts/SulSansTest-Regular.eot');
	src: url('../webfonts/SulSansTest-Regular.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/SulSansTest-Regular.woff2') format('woff2'),
	url('../webfonts/SulSansTest-Regular.woff') format('woff'),
	url('../webfonts/SulSansTest-Regular.ttf') format('truetype'),
	url('../webfonts/SulSansTest-Regular.svg#sul') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Sul';
	src: url('../webfonts/SulSansTest-Bold.eot');
	src: url('../webfonts/SulSansTest-Bold.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/SulSansTest-Bold.woff2') format('woff2'),
	url('../webfonts/SulSansTest-Bold.woff') format('woff'),
	url('../webfonts/SulSansTest-Bold.ttf') format('truetype'),
	url('../webfonts/SulSansTest-Bold.svg#sul') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Azo';
	src: url('../webfonts/AzoSans2Test-Regular.eot');
	src: url('../webfonts/AzoSans2Test-Regular.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/AzoSans2Test-Regular.woff2') format('woff2'),
	url('../webfonts/AzoSans2Test-Regular.woff') format('woff'),
	url('../webfonts/AzoSans2Test-Regular.ttf') format('truetype'),
	url('../webfonts/AzoSans2Test-Regular.svg#azo') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Azo';
	src: url('../webfonts/AzoSans2Test-Bold.eot');
	src: url('../webfonts/AzoSans2Test-Bold.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/AzoSans2Test-Bold.woff2') format('woff2'),
	url('../webfonts/AzoSans2Test-Bold.woff') format('woff'),
	url('../webfonts/AzoSans2Test-Bold.ttf') format('truetype'),
	url('../webfonts/AzoSans2Test-Bold.svg#azo') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Covik';
	src: url('../webfonts/CovikSansDemo-Regular.eot');
	src: url('../webfonts/CovikSansDemo-Regular.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/CovikSansDemo-Regular.woff2') format('woff2'),
	url('../webfonts/CovikSansDemo-Regular.woff') format('woff'),
	url('../webfonts/CovikSansDemo-Regular.ttf') format('truetype'),
	url('../webfonts/CovikSansDemo-Regular.svg#azo') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Covik';
	src: url('../webfonts/CovikSansDemo-Bold.eot');
	src: url('../webfonts/CovikSansDemo-Bold.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/CovikSansDemo-Bold.woff2') format('woff2'),
	url('../webfonts/CovikSansDemo-Bold.woff') format('woff'),
	url('../webfonts/CovikSansDemo-Bold.ttf') format('truetype'),
	url('../webfonts/CovikSansDemo-Bold.svg#azo') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Aktiv';
	src: url('../webfonts/AktivGroteskTrialRg.eot');
	src: url('../webfonts/AktivGroteskTrialRg.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/AktivGroteskTrialRg.woff2') format('woff2'),
	url('../webfonts/AktivGroteskTrialRg.woff') format('woff'),
	url('../webfonts/AktivGroteskTrialRg.ttf') format('truetype'),
	url('../webfonts/AktivGroteskTrialRg.svg#aktiv') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Soleil';
	src: url('../webfonts/SoleilRegular.eot');
	src: url('../webfonts/SoleilRegular.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/SoleilRegular.woff2') format('woff2'),
	url('../webfonts/SoleilRegular.woff') format('woff'),
	url('../webfonts/SoleilRegular.ttf') format('truetype'),
	url('../webfonts/SoleilRegular.svg#soleil') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Signal';
	src: url('../webfonts/signal-regular-TRIAL.eot');
	src: url('../webfonts/signal-regular-TRIAL.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/signal-regular-TRIAL.woff2') format('woff2'),
	url('../webfonts/signal-regular-TRIAL.woff') format('woff'),
	url('../webfonts/signal-regular-TRIAL.ttf') format('truetype'),
	url('../webfonts/signal-regular-TRIAL.svg#signal') format('svg');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'Calibre';
	src: url('../webfonts/TestCalibre-Regular.eot');
	src: url('../webfonts/TestCalibre-Regular.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/TestCalibre-Regular.woff2') format('woff2'),
	url('../webfonts/TestCalibre-Regular.woff') format('woff'),
	url('../webfonts/TestCalibre-Regular.ttf') format('truetype'),
	url('../webfonts/TestCalibre-Regular.svg#calibre') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Degular';
	src: url('../webfonts/DegularTextDemo-Regular.eot');
	src: url('../webfonts/DegularTextDemo-Regular.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/DegularTextDemo-Regular.woff2') format('woff2'),
	url('../webfonts/DegularTextDemo-Regular.woff') format('woff'),
	url('../webfonts/DegularTextDemo-Regular.ttf') format('truetype'),
	url('../webfonts/DegularTextDemo-Regular.svg#degular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Degular';
	src: url('../webfonts/DegularTextDemo-Bold.eot');
	src: url('../webfonts/DegularTextDemo-Bold.eot?#iefix') format('embedded-opentype'),
	url('../webfonts/DegularTextDemo-Bold.woff2') format('woff2'),
	url('../webfonts/DegularTextDemo-Bold.woff') format('woff'),
	url('../webfonts/DegularTextDemo-Bold.ttf') format('truetype'),
	url('../webfonts/DegularTextDemo-Bold.svg#degular') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Flex';
	src: url('../webfonts/GT-Flexa-Standard-Regular.woff2') format('woff2'),
	url('../webfonts/GT-Flexa-Standard-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
/* ==========================================================================
Google Fonts
========================================================================== */
@font-face {
	font-family: 'Bitter';
	src: url('../webfonts/Bitter-Regular.woff2') format('woff2'),
	url('../webfonts/Bitter-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DMSans';
	src: url('../webfonts/DMSans-Regular.woff2') format('woff2'),
	url('../webfonts/DMSans-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Karla';
	src: url('../webfonts/Karla-Regular.woff2') format('woff2'),
	url('../webfonts/Karla-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Podkova';
	src: url('../webfonts/Podkova-Regular.woff2') format('woff2'),
	url('../webfonts/Podkova-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Coriolis';
	src: url('../webfonts/coriolis_trial-regular-webfont.woff2') format('woff2'),
	url('../webfonts/coriolis_trial-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}






/* ==========================================================================
MAIN STYLES
========================================================================== */
html {
	font-size: 62%;
	font-family: "Mini", "Libre Baskerville", "Merriweather", "PT Serif", serif;
}

body,
p,
table p {
	font-size: 2.2rem;
	line-height: 1.6em;
	color: var(--text);
}


h3 {
	font-size: 120%;
	color: var(--accent);
	margin-top: 8rem;
}


/* ==========================================================================
NAVIGATION & LINKS
========================================================================== */
a {
	color: var(--onegreen);
}

a:visited {
	color: var(--twogreen);
}

a:hover, a:focus, a:active {
	color: var(--twogreen);
}

a:focus {
	outline: thin dotted var(--text);
}

a:hover, a:active {
	outline: 0;
}

/* Referenzlinks dezenter ohne Unterstrich */
a.referenz {text-decoration:none;
	color:var(--onegreen);}
	a.referenz:hover {text-decoration:none;
		color:var(--twogreen);
}

		/* ==========================================================================
		NEUES
		========================================================================== */
		span.neu {
			color: var(--apricot);
		}

		/*.portrait {
		background: url(./img/wordcamp2020_byKlausProkop_KP5_3785.jpg) 50% 50% no-repeat;
		width: 250px;
		height: 250px;
	}

	.thumb1:hover { YOUR HOVER STYLES HERE }*/

	.portrait3 {
		object-fit:cover;
		filter: grayscale(100%) brightness(1.1);
	}

	.portraitm {
		width:300px;
		height:300px;
		object-fit:cover;
		filter: grayscale(100%) brightness(1.1);
	}
	/*oben alt vom Vortrag
	.portrait4 {
	width:360px;
	height:360px;
	object-fit:cover;
	filter: grayscale(100%) brightness(1.1);
	}*/

	/*oben width 500, height 360*/
	img.portrait5 {
		/*width:100%;*/
		max-width:100%;
		height:500px;
		object-fit:cover;
	}

	.img40 {
		/*object-fit:cover;*/
		/*filter: grayscale(100%) brightness(1.1);*/
		max-width: 95%;
	}

	.imgk {max-width: 100%;}

	.img402 {
		object-fit:cover;
		/*filter: grayscale(100%) brightness(1.1);*/
		max-width: 95%;
	}


	/* ==========================================================================
	Extra small devices (phones, 600px and down)
	========================================================================== */
	@media only screen and (max-width: 768px) {
		li {line-height: 1.6em;}

		section.language {
			margin: 5rem 5% 1rem 5%;
			max-width: 800px;
			font-size: 1.3rem;
		}

		section.tellmeeverything,
		section.tellmeeverything p {
			margin: 4rem 5% 3rem 5%;
			max-width: 800px;
			font-size: 1.6rem;
		}

		/*	section.contact,
		section.contact p {
		margin: 6rem 3rem 6rem 3rem;
		font-size: 1.6rem;
		}*/

		section.workingon,
		section.workingon p {
			margin: 6rem 5% 2rem 5%;
			max-width: 800px;
			font-size: 1.6rem;
		}

		section.phonetik,
		section.phonetik p	{
			margin: 6rem 5% 2rem 0;
			max-width: 800px;
			font-size: 1.6rem;
		}



		section.expertise,
		section.expertise p,
		section.finale,
		section.finale p,
		section.contact,
		section.contact p {
			margin: 1rem 5% 2rem 5%;
			max-width: 800px;
			font-size: 1.6rem;
		}



		section.literatur p {
			margin: 6rem 5% 2rem 5%;
			max-width: 1000px;
			font-size: 1.6rem;
		}

		section.end,
		section.end p {
			margin: 6rem 5% 2rem 5%;
			max-width: 800px;
			font-size: 1.5rem;
		}

		section.footer {
			margin: 6rem 5% 12rem 5%;
		}

		section.footer p {
			font-size: 1.3rem;
			color: var(--onegreen);
		}

		img.portrait3 {display:none;}

		img.portrait5 {max-width: 250px;}
	}

	/* ==========================================================================
	Large devices (laptops/desktops, 992px and up)
	========================================================================== */
	@media only screen and (min-width: 768px) and (max-width: 1199px) {

		section.language {
			margin: 8rem 10% 2rem 10%;
			max-width: 800px;
			font-size: 1.3rem;
		}

		section.tellmeeverything {
			margin: 2rem 10% 3rem 10%;
			max-width: 800px;
			font-size: 1.5rem;
		}

		/*section.contact {
		margin: 6rem 20rem 6rem 30rem;
		font-size: 1.6rem;
		}*/

		section.phonetik,
		section.phonetik p	{
			margin: 6rem 10% 2rem 5%;
			max-width: 800px;
			font-size: 2.2rem;
		}

		section.phonetikdetails {
			margin-top: 1rem !important;
			margin-bottom: 2rem !important;
		}

		section.workingon,
		section.expertise,
		section.expertise p,
		section.finale,
		section.finale p,
		section.contact,
		section.contact p {
			margin: 6rem 10% 2rem 10%;
			max-width: 800px;
			font-size: 2.2rem;
		}

		section.literatur p {
			margin: 6rem 10% 2rem 5%;
			max-width: 1000px;
			font-size: 2.2rem;
		}

		section.end {
			margin: 6rem 10% 2rem 10%;
			font-size: 1.7rem;
		}
		section.footer {
			margin: 6rem 10% 12rem 10%;
		}

		section.footer p {
			font-size: 1.4rem;
			color: var(--onegreen);
		}

		img.portraitm {display:none;}
	}

	/* ==========================================================================
	Extra large devices (large laptops and desktops, 1200px and up)
	========================================================================== */

	@media only screen and (min-width: 1200px) {

		section.language {
			margin: 12rem 20% 2rem 20%;
			max-width: 800px;
			font-size: 1.3rem;
		}

		section.tellmeeverything {
			margin: 4rem 20% 3rem 20%;
			max-width: 800px;
		}

		/*section.contact {
		margin: 6rem 30rem 6rem 40rem;
		font-size: 1.6rem;
		}*/

		section.phonetik,
		section.phonetik p	{
			margin: 6rem 20% 2rem 5%;
			max-width: 800px;
			font-size: 2.2rem;
		}

		section.workingon,
		section.finale,
		section.finale p,
		section.contact,
		section.contact p {
			margin: 6rem 20% 2rem 20%;
			max-width: 800px;
			font-size: 2.2rem;
		}

		section.expertise,
		section.expertise p {
			margin: 1rem 20% 2rem 20%;
			max-width: 800px;
			font-size: 2.2rem;
		}

		section.literatur p {
			margin: 6rem 5% 2rem 5%;
			max-width: 1000px;
			font-size: 2.2rem;
		}

		section.end {
			margin: 6rem 20% 2rem 20%;
			font-size: 1.7rem;
		}

		section.footer {
			margin: 6rem 20% 18rem 20%;
		}

		section.footer p {
			font-size: 1.4rem;
			color: var(--onegreen);
		}

		img.portraitm {
			display:none;
		}
	}

	/* ==========================================================================
	MM
	========================================================================== */

	.mm h4 {
		font-size: 110%;
		color: var(--accent);
		margin-top: 6rem;
	}

	.mm p {margin-top: 1rem !important;}

	.mm code {color: var(--language) !important;}


	/* ==========================================================================
	PHONETIK
	========================================================================== */

	/*.phonetik {font-family: "Flex";}*/

	/* INTRO und REGELN */
	/* Text in p ist div.phonetikintro p */
	div.phonetikintro {
		font-size: 2rem;
		background-color: var(--phonetikbg1); /*lightblue add8e6 ginge auch*/
		padding: 10px;
		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	div.phonetikintro p {
		font-size: smaller;
	}

	.ausnahme {color: var(--phonetikachtung);}

	span.phonetikbeispiel {color: var(--phonetikbeispiel);}

	/* Details Collapsibles, wenn Details offen: details open
	geschachtelt scheint es nicht zu funktionieren*/
	.collapsibledetails {
		padding: 1rem;
		font-size: 2rem;
	}

	div.collapsibledetails p {
		font-size: smaller;
	}

	.collapsibledetails details {
		border: 1px solid #ddd;
		background: var(--phonetikbg2);
		padding: 1rem;
		margin-bottom: 1.5rem;
		border-radius: 0.35rem;
		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	.collapsibledetails summary {
		background: var(--phonetikbg2);
		cursor: pointer;
		padding: 1rem;
	}

	.collapsibledetails div {
		padding: 1rem 1.5rem;
	}

	dl dt {font-weight: bold;}

	/* LÖSUNGEN */
	/* Lösungen Collapsibles geschachtelt klappt es nicht! */
	.loesung {
		padding: 1rem;
	}

	.loesung details {
		border: 1px solid #ddd;
		background: #fff;
		margin-bottom: 1.5rem;
		border-radius: 0.35rem;
		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	.loesung details div {
		padding: 1rem 1.5rem;
	}

	.loesung summary {
		cursor: pointer;
		padding: 1rem;
		border-bottom: 1px solid #ddd;
	}

	/* Phonetik-Textbilder leicht abgesetzt */
	.img40phon {
		max-width: 95%;
		padding-top: 1.5rem;
	}

	/* ==========================================================================
	font & tt
	========================================================================== */

	.sligoil {font-family: "Sligoil"; }
	.sporting {font-family: "Sporting Grotesque"; }
	.mixo {font-family: "Mixo"; }
	.louise {font-family: "Louise"; }
	.compagnon {font-family: "Compagnon"; }
	.karrik {font-family: "Karrik"; }
	.sul {font-family: "Sul"; }
	.azo {font-family: "Azo";}
	.covik {font-family: "Covik";}
	.coriolis {font-family: "Coriolis";}
	.aktiv {font-family: "Aktiv";}
	.soleil {font-family: "Soleil";}
	.signal {font-family: "Signal";}
	.calibre {font-family: "Calibre";}
	.degular {font-family: "Degular";}
	.karla {font-family: "Karla";}
	.dmsans {font-family: "DMSans";}
	.podkova {font-family: "Podkova";}
	.bitter {font-family: "Bitter";}
	.flex {font-family: "Flex";}

	.loos {
		font-family: "Loos Nrm Reg";
		font-display: swap;
		font-style: normal;
		font-weight: normal;
	}

	.loosbold {
		font-family: "Loos Nrm Bd";
		font-display: swap;
		font-style: normal;
		font-weight: normal;
	}

	.img50 {max-width: 30%;}