/* nunito-latin-400-normal */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: 
  local('nunito latin 400 normal'), 
  local('nunito-latin-400-normal'), 
  url('fonts/nunito-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-latin-400-italic.woff2') format('woff2');
  font-style: italic;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-latin-800-normal.woff2') format('woff2');
  font-weight: bold;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-latin-800-italic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
}



body {
	font-family: 'Nunito', sans-serif;
	/* background: silver; */
	/* Folgezeile: Hintergrund Weltkugel: */
	background: url(Weltkugel.png) ;
	background-repeat: no-repeat; /* Kugel sonst 2x nebeneinander  */
	background-size: 280% auto;
	/* margin-top: 0px; */
	margin: 0px;
}
@media all and (min-width: 40em) {
body {
	background: url(Weltkugel.png) ;
	background-repeat: no-repeat; /* Kugel sonst 2x nebeneinander  */
	background-size: 240% auto;
}
}
@media all and (min-width: 60em) {
body {
	background: url(Weltkugel.png) ;
	background-repeat: no-repeat; /* Kugel sonst 2x nebeneinander  */
	background-size: 160% auto;
}
}
@media all and (min-width: 90em) {
body {
	background: url(Weltkugel.png) ;
	background-repeat: no-repeat; /* Kugel sonst 2x nebeneinander  */
	background-size: 100% auto;
}
}


/* Der LOGO-Block: <section class="logos"> */
/* Der LOGO-Block: <section class="logos"> */
/* Der Navigations-Block <section class="nav"> */
/* Der Navigations-Block <section class="nav"> */
/* Logo und Nav stecken in .HEADER  */
/* Logo und Nav stecken in .HEADER  */



h1 {font-size: 1.2em; color: #c11c5d; font-family: Nunito, Corbel, Verdana, Arial, Helvetica, sans-serif; font-weight: bold; letter-spacing: 0.04em; }

h2 {font-size: 1em; color: #c11c5d; font-family: Nunito, Corbel, Verdana, Arial, Helvetica, sans-serif; font-weight: bold}
h3 {font-size: 0.9em; color: #c11c5d; font-family: Nunito, Corbel, Verdana, Arial, Helvetica, sans-serif; font-weight: bold}

p {font-size: 1em; color: #868786;
 font-family: Nunito, Corbel, Verdana, Arial, Helvetica, sans-serif; }

b {font-family: Nunito, Corbel, Verdana, Arial, Helvetica, sans-serif; }
i {font-family: Nunito, Corbel, Verdana, Arial, Helvetica, sans-serif; }
ul {font-size: 1em; color: #868786;; font-family: Nunito, Corbel, Verdana, Arial, Helvetica, sans-serif; }
li {font-size: 1em; color: #868786;; font-family: Nunito, Corbel, Verdana, Arial, Helvetica, sans-serif; }
center {color: #868786;; font-family: Nunito, Corbel, Verdana, Arial, Helvetica, sans-serif; }

a {font-family: Nunito, Corbel, Verdana, Arial, Helvetica, sans-serif; }
a:visited {color:#c11c5d; text-decoration: none; font-weight:bold; }
a:link  {color:#c11c5d; text-decoration: none; font-weight:bold;}
a:hover {color:#c11c5d; text-decoration: none; background-color: silver; }

input { font-family: Nunito, Corbel, Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1em; padding: 2px;
	border: 2px solid silver;
	accent-color: #868786;
	/* background-color: #F1F5F6;  */
}
#subm {
font-family: Nunito, Corbel, Verdana, Arial, sans-serif; 
background-color: #F1F5F6; padding: 1px; margin: 5px;
border: 1px solid #586A92;
}
select { font-family: Nunito, Corbel, Verdana, Arial, sans-serif; 
font-size: 0.9em;  line-height: 0.9em; 
background-color: #ffffffd0; padding: 0 5px; margin: 0px;
border: 2px solid silver;}

/* select:hover {   box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1); }  */

option {
	font-family: Nunito, Corbel, Verdana, Arial, sans-serif; 
	font-size: 0.9em;  line-height: 0.9em; 
	padding: 0 5px; 	margin: 0px;
	/* Schriftart Nunito, line-height funktioniert überall außer Firefox */
}

div_norm { font-family: Nunito, Corbel, Verdana, Arial, Helvetica, sans-serif; } 
div_r { text-align: right; }






/* Mobile first - schmale Viewports > alle Dok > 100% Breite */
/* Mobile first - schmale Viewports > alle Dok > 100% Breite */
/* Mobile first - schmale Viewports > alle Dok > 100% Breite */
/* Mobile first - schmale Viewports > alle Dok > 100% Breite */



/* margin: Außenabstand */
/* padding: Innenabstand */


.headerFM {
	display: flex;
	flex-direction: column; /* Spalten kleine Viewports */
	background: black;
	margin-left: 0px;   
	margin-top: -0px;   	/* weniger Abstand oben. negativer wert: workaround */
}

.hauptcontainerFM {
	display: flex;
	flex-direction: column;
	padding-left: 2px;
	padding-right: 2px;
}

.roterstrich_unter_kopf {
	flex-direction: row; 
	background: #c11c5d;   /* Rot */
	margin: 0px;
	padding: 0px;
	height: 8px;
}

roter_strich { }


section {
	background: black;
	padding: 5px;
}

header { background: black; }

header img {
	width: 250px; /* test logos kleiner bei schmalen viewports height: 40%;  */
}

/* nav, logos { width: 50%; } >> GEHT NICHT, das ist in <section> drin */

nav {
	font-size: 0.7em;  
	/* justify-content: space-around;  tut nicht; mit &160 gelöst */
	/* justify-content: space-between; tut nicht; mit &160 gelöst */
	text-align: left;  /* unten: large Screens: rigth */
	background: black; 
	/* flex-wrap: nowrap; */
}


nav a {
	display:inline-block;
	color: white;
	background: black; 
	font-weight: bold;
	border: none;
	/*margin: 0;*/
	margin: 2px;
	padding: 2px;
	text-decoration: none;
	text-align: center;
}

nav a:link    { color: white; }
nav a:visited { color: white; }
nav a:hover   { color: #c11c5d; background-color: black;}
/* Versteh ich nicht, aber offenbar muss hover nach link stehen */

/* url_rechts a { */
	/* display:inline-block; */
	/* background: #D8D8D8;   */
	/* border: 0px solid blue; */
	/* margin: 0; */
	/* padding:10px; */
	/* text-decoration: none; */
	/* text-align: center; */
/* } */
/* url_rechts a:hover { 	background-color: white; } */

main, article, aside, aside_hoehe_begrenzt {
	border: none;
	padding: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 5px;
	margin-bottom: 5px;
}

/* Mindestbreite für MAIN, damit die Auswahllisten für Länder */
/* auf Aktual/Eingabe-Auswahlseite nicht einspaltig werden. */
main {min-width: 24em;}


HerzWillk { 
	width: 100%; 
	padding: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: -10px;
	margin-bottom: -30px;
	/* background: #ffffff; */
}
HerzWillk p { 	color: black; }


article {
	background: #ffffffe8; /* weiß leicht transparent */
	/* Wenn man noch 2 Stellen an den 6stelligen HexFarbcode anhängt, geben die letzten beiden die Transparenz an */
	/* -webkit-flex: 1 1 100%; */
	 /* flex: 1 1 100%; */
}

aside_hoehe_begrenzt {
	height: 8em;
	background: #ffffffe8; /* weiß leicht transparent */
}

aside {
	background: #ffffffe8; /* weiß leicht transparent */
}
#url { 	background: #D8D8D8;   }
#url h2 { 	text-align: right;  	}  
#url a { 	text-decoration: none; }
#url a:hover { 	background-color: white;	} 


.footer_hrsg {
	background: white;
	margin: 0px;
	padding-left: 60px;
	text-align: left;
	margin-bottom: -20px;
}

.footer_logozeile {
	display: flex;
	flex-direction: column;
	
	background: white;
	margin: 0px;
	padding-left: 60px;
	padding-bottom: 0px;
	text-align: left;
}

article_logo_unten {
	background: #ffffff;
	width: 50%;
	padding-top: 1px;
	padding-bottom: 20px;
	/* height: 3em; */

}
aside_logo_unten {
	background: white;
	width: 50%;
	padding-top: 16px;
	padding-bottom: 20px;
	/* height: 3em; */

}

.roterstrich_unter_daad_logo {
	flex-direction: row; 
	background: #c11c5d;   /* Rot */
	margin: 0px;
	padding: 0px;
	height: 8px;
}

roter_strich_unter_daad_logo { }

footer { 
	background: black; 
	padding: 60px;
	}

footer p { 	color: white; }
footer a:link {color: white; text-decoration: none; font-size: 0.8em; font-weight: normal; }
footer a:visited {color: white; text-decoration: none }
footer a:hover {color: #c11c5d; text-decoration: none ; background-color: black;}


.tabelle_border_1 { 
	border-style: solid; 	border-width: 1px; margin: 0px; 
}
.tabelle_border_x { 	border-bottom: 1px solid black; }
.tabelle_border_0 { 	border: 0px; }

/* Keine zwei Linien für Tabelle und Zellen, sondern nur eine: */
.tabelle_border_collapse { 	border-collapse: collapse; border: 1px solid black; }

.schrift_schwarz { color: black; }






/* ENTFERNT: Smart Phones und Tablets mit mittlerer Auflösung */
/* ENTFERNT: Smart Phones und Tablets mit mittlerer Auflösung */

/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 40em) { 
}

/* Large screens */
/* Large screens */
/* Large screens */
/* Large screens */
@media all and (min-width: 50em) {

.headerFM {		flex-direction: row;	}

.hauptcontainerFM { flex-direction: row;	}

.footer_logozeile { flex-direction: row; 	}

nav {	 font-size: 0.9em; text-align: right; }

header img { 	width: 80%; }  /*  logos  bei großen viewports   */

main, article, aside, aside_hoehe_begrenzt { margin-left: 20px; margin-right: 20px; }

HerzWillk { width: 100%; margin-left: 20px; margin-right: 20px;}

article { width: 50%; }

aside {  width: 50%;  }
aside_hoehe_begrenzt {  width: 50%;  	height: 8em; }

section {
	background: black;
	width: 50%;
	padding: 20px;
}



}






/* <Vierspaltig für Eingabe/Aktualisierungsseite> */
/* <Vierspaltig für Eingabe/Aktualisierungsseite> */
/* <Vierspaltig für Eingabe/Aktualisierungsseite> */
/* <Vierspaltig für Eingabe/Aktualisierungsseite> */

/* Einspaltig Handys */
/* Einspaltig Handys */


.flex-container_vierspaltig {
	display: flex;
	flex-wrap: wrap;
	/* flex-direction: column; */
	/* flex-direction: auto; */
}

.flex-item_vierspaltig ul { 
	padding-left: 0.5em;  /* Einzug verkleinern */
	margin-left: 0.5em;
	list-style-position: outside;
	list-style-type: none ;
}
.flex-item_vierspaltig a:link {color: #868786; text-decoration: none }
.flex-item_vierspaltig a:visited {color: #868786; text-decoration: none }
.flex-item_vierspaltig a:hover {color: #c11c5d; text-decoration: none ; }

.flex-item_vierspaltig { 
	/* padding-left: 15px;   */
	margin: 5px;  
	padding: 3px;  
	/* margin-right: 20px;   */
	/* background: white;  */
	background: #ffffffd0;  /* weiß leicht transparent */
	width: 11em; 
}
/* .flex-item_vierspaltig:nth-of-type(2) { width: 10em; } */
/* .flex-item_vierspaltig:nth-of-type(3) { width: 10em;} */
/* .flex-item_vierspaltig:nth-of-type(4) { width: 10em; } */
/* <//Für Eingabe/Aktualisierungsseite> */




/* Wenn Platz für 4 Spalten: */
/* Wenn Platz für 4 Spalten: */
@media all and (min-width: 32em) {

.flex-container_vierspaltig { 
	display: flex;
	flex-direction: row; 
	margin: 10px;  
	padding: 5px; 
}

.flex-item_vierspaltig { margin: 20px; width: 12em;}

.flex-item_vierspaltig ul { 
	padding-left: 0.5em;  /* Einzug verkleinern */
	margin-left: 0.5em;
	padding-top: 1px;  
	padding-bottom: 1px;
}

section_vierspaltig {
	/* background: black; */
	padding: 20px;
}
}