/* allgemeine Festlegungen */
:root {
	--sggrün: #3B722E;
	--linkfarbe: #3B722E;
	--schriftfarbe: #333333;
	--sghellgrau: #EEEEEE /*#F3F3F3*/;
	--sgweiß: #FEFEFE;
	--tabellenkopf: #EEEEEE;
	--grauerlink: #555555;
}

html {
	background-color: var(--sgweiß);
}

body {
	color: var(--schriftfarbe);
	font-size: 1.1rem;
	font-family: 'SourceSans3';
	font-weight: 400;
	margin: 0 auto;
}

h1, h2, h3 {
	font-weight: 650;
}

h1, h2, h3, p, li, th, td, dt, dd {
	line-height: 1.7em;
}

ul {
	list-style-type: "\25A0\0020";
}


ol {
	list-style-type: decimal;	
}

li {
	margin-inline-start: 1.2em;
}

table, td, th {
	border-width: 1px 0;
	border-style: solid;
	border-color: var(--schriftfarbe);
}

td, th {
	padding: 0.5rem;
}

th {
	background-color: var(--tabellenkopf);
	font-weight: 600;
	vertical-align: middle;
}

sub, sup {
	font-size: 0.8em;
	vertical-align: baseline;
	position: relative;
}

sub {
	inset-block-start: 0.4em;
}

sup {
	inset-block-start: -0.4em;
}

abbr {
	border-block-end: 1px dotted;
}

strong, span.strong, .ipa strong {
	font-weight: 650;
}

em {
	font-style: italic;
}

a {
	color: var(--schriftfarbe);
	text-decoration-line: underline;
}

a:hover {
	background-color: var(--sggrün) !important;
	color: var(--sgweiß) !important;
	text-decoration-line: none;
	transition: all 1s;
}

/*a:hover {
      background: linear-gradient(90deg, #e05, #f90, #ed0, #0c6, #09f, #c3f, #e05);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: rainbow 4s linear infinite;
      text-decoration: none !important;
    }*/

a:focus {
	background-color: var(--sggrün) !important;
	color: var(--sgweiß) !important;
	text-decoration: none;
}

:is(p, li, td):lang(de) {
	hyphens: auto;
}

*:lang(fr) {
	hyphens: none;
}





/* Grundstruktur */
header a, main, footer {
	width: 100%;
	max-width: 45rem;
	margin: 0 auto;
	box-sizing: border-box;
}

main {
	background-color: var(--seitenmain);
	padding: 0 1rem 1rem 1rem;
	overflow: auto;
	border-block-end: 0.3rem solid var(--gvblau);
}

footer {
	padding: 1rem;
	font-size: 1rem;
}





/* Seitenkopf */
header {
	border-block-end: 0.2rem solid var(--sggrün);
}

header a {
	color: var(--sggrün);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	display: block;
	padding: 0.5rem 1rem 0.5rem 1rem;
}

header a:hover {
	color: var(--schriftfarbe);
	transition: all 1s;
}


/* Hauptbereich */


/* - Überschriften */
main > h1 {
	font-size: 2.2rem;
	line-height: 1.2em;
	color: var(--sggrün);
	margin-block: 0rem;
	margin-inline: -1rem;
	padding: 2rem 1rem 1rem 1rem;
}

main > h1 > a {
	color: var(--seitenmain);
}

main h2 {
	font-size: 1.6rem;
	line-height: 1.3em;
	margin-block: 3rem 1rem;
}

main h3 {
	font-size: 1.3rem;
	line-height: 1.3em;
	margin-block: 3rem 0.8rem;
}

main h2 + h3 {
	margin-block-start: 1rem;
}



/* - Brotkrumen */
main nav.brotkrumen {
	color: var(--grauerlink);
	font-size: 0.95rem;
	line-height: 1.5em;
	margin: 0 0 1.8rem 0;
}

main nav.brotkrumen a {
	color: var(--grauerlink);
}

main nav.brotkrumen span.nobc {
	display: none;
}

main nav.brotkrumen + * {
	margin-block-start: 0;
}



/* - Tabellen */

div.tabellenrahmen {
  overflow: auto;
  margin: 0 0 1em;
}

.nowrap {
	white-space: nowrap;
}

.nowraptd td {
	white-space: nowrap;
} 


/* - Absätze */

main :is(p, table) {
	margin-block-start: 1.2em;
}

main :is(h2, h3) + p {
	margin-block-start: 0;
}



/* - Listen */

main ul.archiv li + li {
	margin-block-start: 0.3em;
}

main ul.archiv a {
	display: block;
}

main .veröffentlichtungsdatum {
    color: var(--grauerlink);
    font-size: 0.95rem;
	margin-block-start: 2rem;
}

main ol.abiturschwerpunkte {
    list-style-type: abi1;
}

main ol.abiturschwerpunkte ol {
    list-style-type: abi2;
}

main ol.abiturschwerpunkte ol ol {
    list-style-type: abi3;
}

@counter-style abi1 {
  system: cyclic;
  symbols: 'I' 'II' 'III' 'IV' 'V' 'VI' 'VII' 'VIII' 'IX' 'X';
  suffix: '  ';
}


@counter-style abi2 {
  system: cyclic;
  symbols: '1' '2' '3' '4' '5' '6' '7' '8' '9' '10';
  suffix: '  ';
}


@counter-style abi3 {
  system: cyclic;
  symbols: 'a' 'b' 'c' 'd' 'e' 'f' 'g' 'h' 'i' 'j';
  suffix: ') ';
}


ul.quellen {list-style: none;}
ul.quellen li {margin-inline-start: 0; padding-inline-start: 1rem; text-indent: -1rem;}
.autor {font-variant: small-caps;}
.titel {font-style: italic;}




/* Footer */
footer nav a {
	color: #555555;
	display: block;
}

footer nav ul {
	list-style-type: none;
}

footer nav > ul {
	display: flex;
	flex-flow: row wrap;
	gap: 2em;
	padding-block-end: 2em;
}

footer nav ul li {
	margin-inline-start: 0;
}



/* Vokabeln */

ul.vok {
		list-style-type: none;
		padding: 0em;
		width: 100%;
}

.themenbox + ul.vok {
	margin-block-start: 2em;
}

p + ul.vok {
	margin-block-start: 1em;
}

ul.vok li {
	background-color: #DFF0FF;
	margin: 0;
	border-block-end: 0.1em solid #CCCCCC;
}

ul.vok.suppl li, ul.vok li.suppl {
	background: #F2F9FF;
}

ul.vok li.neuegruppe {
	margin-block-start: 1.3em;
}

ul.vok li.commentaire::before {font-family: 'FontAwesome'; color: var(--gvblau); display: inline-block; width: 1.5em; line-height:0.1em;}
ul.vok li.commentaire {display:list-item;  padding: 0.3em; background-color: #FEF5EE;}
ul.vok li.civilisation::before {content:'';}
ul.vok li.grammaire::before {content:'';}
ul.vok li.prononciation::before {content:'';}
ul.vok li.usage::before {content:'';}
ul.vok li.vocabulaire::before {content:'';}

ul.vok span.feld-vokabel {}
ul.vok span.feld-aussprache {color: #666;}




.ex {	font-style: italic;}




@media screen and (min-width: 650px) {
	
ul.vok li {display: grid; padding: 0.3em 0 0.3em 0;}
ul.vok li:has(> :nth-child(2):last-child)  {grid-template-columns: 0.6fr 0.4fr;}
ul.vok li:has(> :nth-child(3):last-child)  {grid-template-columns: 0.38fr 0.31fr 0.31fr;}
	
ul.vok span.feld-vokabel {padding-inline: 0.3em 0.2em;}
ul.vok span.feld-aussprache {padding-inline: 0.2em 0.2em;}	
ul.vok span.feld-uebersetzung {padding-inline:0.2em 0.2em; line-height: 1.6em; padding-block: 0.3em 0;}	
}


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

body {
	padding: 0;
}

ul.vok li {padding: 0.3em 0.3em 0.3em 0.3em;}
ul.vok span.feld-vokabel {display: inline; padding: 0;}
ul.vok span.feld-aussprache {display: inline; padding-inline-start: 0.3em;}
ul.vok span.feld-uebersetzung {display: block; padding-inline-start: 1.5em; line-height: 1.6em;}
ul.vok li.commentaire span.feld-vokabel {display: inline; padding:0;}
ul.vok li.commentaire span.feld-uebersetzung {display: inline; padding:0;}
}



@media print {
	#grid {display: block;}
	header, aside, ul.ez-toc-list {display: none;}	
	tr, th, td, ul, span {color-adjust: exact}
}