/* Style-Sheets für WEbsite EDV-Vogel GbR*/
/* Farbschema definieren */
:root {
	--grundtext: #333333;
	--akzent1: #ffffff;
	--akzent2: #557799;
/*	--akzent3: #ee8800; */
	--akzent3: #0066aa;
	--tabTextBg: #eeeeee;
	--hintergrund1: #fbf8f8;
	--hintergrund2: #aaaaaa;
	--hintergrund3: #eeeeee;
	/* Navigation */
	--naviLeiste: #ffffff;
	--btnNormalH: #88aacc;
	--btnNormalT: #ffffff;
	--btnHoverH: #ffbb44;
	--btnHoverT: #224466;
	--btnActiveH: #ffffff;
	--btnActiveT: #88aacc;
	--btnCurPageH: #aaaaaa;
	--btnCurPageT: #ffffff;
}


/* alternatives Boxmodell */
html { 
  box-sizing: border-box; 
  /* background: #eeeeff;	 */
  background: var(--hintergrund1);
} 

*, ::before, ::after { 
  box-sizing: inherit; 
}

@media (min-width: 50em)
{
	body {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
	}

	#titel1 {
		font-size: 1.0em;
	}
}

body {
	margin: 5px auto;
	max-width: 70em;
	font-family: Verdana, Arial, sans-serif;
	color: var(--grundtext);
	background-color: var(--hintergrund1);
	/* im body Grid-Layout verwenden mit 3 Spalten); */
	/* display: grid; */
	/* grid-template-columns: repeat(5, 1fr); */
/*	grid-template-rows: repeat(3, 7fr);  */
}

#imgH1 {
	width: 58%;
}

#imgH2 {
	width: 40%;
}

#imgHU {
	width: 300px;
}

article {
	padding-top: 0.2em;
	padding-bottom: 0.0em;
	padding-left: 1.0em;
	padding-right: 1.0em;
}

#kopf {
	background-color: white;
	padding: 0.4em;
	border-radius: 15px 15px;
}

#titel {
	padding-top: 1.2em;
	padding-bottom: 0.8em;
	text-align: center;
	color: var(--akzent3);
}

#titel1 {
	font-size: 2.0em;
	font-weight: bold;
}

#titel2 {
	font-size: 1.5em;
}

#titel3 {
	font-size: 2.0em;
	/* font-weight: bold; */
}
#titel4 {
	font-size: 1.2em;
}

/* Titel für Unterseiten aus Menü */
#titelU {
	font-size: 2.4em;
	font-weight: bold;
	color: var(--akzent3);
	vertical-align: super;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

/* Seminarbereich mit Seminarnummer und Datum */
.semDateNr {
	font-size: 1.4em;
	/* color: var(--akzent3); */
	color: var(--grundtext);
	margin-bottom: 1.6em;
}
.semBold
{
	font-weight: bold;
}
.semZusatz {
	color: var(--akzent3);
}

/* Titel für Maßnahmen und Seminare */
#titelM {
	font-size: 2.6em;
	font-weight: bold;
	color: var(--btnNormalH);
	vertical-align: super;
}

#kontakt {
	padding-top: 0.1em;
	padding-bottom: 0.1em;
}

.ArtikelH1 {
	color: var(--akzent1);
	font-size: 1.6em;
	font-weight: normal;
	margin-bottom: 0.4em;
	background-color: var(--hintergrund2);
	padding-top: 0.2em;
	padding-bottom: 0.3em;
	padding-left: 1em;
	padding-right: 0.3em;
	border-radius: 15px;
}

.ArtikelH2 {
	color: var(--akzent2);
	font-size: 1.2em;
	margin-bottom: 0.3em;
}

.ArtikelH2Box {
	color: var(--akzent2);
	font-size: 1.2em;
	margin-bottom: 0.3em;
	background-color: var(--hintergrund3);
	padding: 0.2em;
}

.ArtikelH3 {
	color: var(--akzent2);
	font-size: 1.0em;
	margin-bottom: 0.0em;
}

.SemTitel {
	color: var(--akzent2);
	font-weight: bold;
}
.SemTermin {
	color: var(--akzent2);
}

.DivPreisBox
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}


/* --- zentrale Navigationsleise in Homepage und auf Unterseiten --- */
#navbar {
	background-color: var(--naviLeiste);
	/* background-image: linear-gradient(var(--hintergrund1) 25%,
	var(--btnNormalH) 50%, var(--hintergrund1) 75%); */
	
	/* background-image: linear-gradient(var(--hintergrund1) 25%,
	var(--hintergrund1) 50%, var(--btnNormalH) 100%); */
	
	background-image: linear-gradient(white 25%,
	white 50%, var(--hintergrund2) 100%);
	
	text-align: center;
	/* height: 50px; */
	border-radius: 0px 0px 15px 15px;
}

/* unerwünschte Aufzählungszeichen und Abstände entfernen */
nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* nebenenander, Abstände */
nav {
	float: left;
	padding: 0.4em;
}

nav li {
	display: inline;
	margin: 0px;
}

nav a {
	background-color: var(--btnNormalH);
	color: var(--btnNormalT);
	font-size: 1.1em;
	height:2.2em;
	width: auto;
	line-height:30px;
	display: inline-block;
	margin: 4px 2px;
	padding: 4px 10px;
/*	float:left;  */
	text-decoration: none;
	border-radius: 15px;
}

/* Link-Button aktueller Seite kennzeichnen */
nav a[aria-current=page]{
	background-color: var(--btnCurPageH);
	color: var(--btnCurPageT)
}

/* Hover bei Auswahl */
nav a:hover {
	background-color: var(--btnHoverH);
	color: var(--btnHoverT);
}

/* nav a:active { */
	/* background-color: var(--btnActiveH); */
	/* color: var(--btnActiveT); */
	/* font-weight: bold; */
/* } */

/* einzelner Button im Text */

.btnImText {
	background-color: var(--btnNormalH);
	color: var(--btnNormalT);
	font-size: 1.2em;
	height:2.2em;
	width: 8.8em;
	line-height:30px;
	/* display: inline-block; */
	margin: 4px 2px;
	padding: 5px 0px;
/*	float:left;  */
	text-decoration: none;
	border-radius: 15px;
}

/* Styles für die Tabelle Impressum  */
td {
	vertical-align: top;
	padding: 0.3em;
}
#tabAkzent {
	box-sizing: border-box;
	border-radius: 0px 15px 15px 0px;
	background-color: var(--akzent3);
}
#tabText {
	padding-left: 10px;
}

/* Styles für die Tabelle in Seminarübersicht  */
#tabSemListe
{
	width: 100%;
	/* background-color: var(--tabTextBg); */
}

.tabSemListeSp1
{
	width: *;
	background-color: var(--tabTextBg);
}

.tabSemListeSp2
{
	width: 75%;
	background-color: var(--tabTextBg);
}

.tabSemListeSp3
{
	width: *;
}


/* Style für Bilder in Tabelle in Visitenkarte */
.tdbildTab {
	width: 33.33%;
	font-size: 1.2em;
	text-align: center;
}

.bildTab {
	width: 98%;
	padding: 0.1em;
}

/* Styles für Bild im Textabsatz */
.floatleft {
	float: left;
	margin-right: 1.5em;
}

.floatright {
	float: right;
	margin-left: 1.5em;
}


/* Style für Elemente von Aufzählungslisten */
.listenpunkt {
	padding-bottom: 0.6em;
	padding-left: 0.4em;
}

/* Style für Textakzente */
.textakzent {
	color: var(--akzent2);
	font-weight: bold;
}

.textakzent2 {
	color: var(--akzent2);
}


::marker {
  color: var(--akzent3);
  /* content: "I ♥  "; */
  font-size: 1.6em;
}

	
/* Eigenschaften der Fusszeile */
footer {
	background-image: linear-gradient(var(--hintergrund1), var(--btnNormalH));
	padding-left: 1.0em;
}

/* Eigenschaften von eingerückten Hinweis blöcken*/
blockquote {
	border: 2px solid darkred;
	padding: 0.5em;
}


/* --- Grid-Design, Aufteilen der Grid-Items auf das Raster --- */

#kopf {
	grid-column: 1/6;
	grid-row: 1/2;
}
#navbar {
	grid-column: 1/6;
	grid-row: 2/3;
}
#titel {
	grid-column: 1/6;
	grid-row: 3/4;
}
#artikel1 {
	grid-column: 1/3;
	grid-row: 4/6;
}
#artikel2 {
	grid-column: 3/5;
	grid-row: 4/6;
}	
#artikel3 {
	grid-column: 5/6;
	grid-row: 4/6;
}
#fuss {
	grid-column: 1/6;
	grid-row: 6/7;
}

/* zusätzlich für Unterseiten */
#artikel4 {
	grid-column: 1/5;
	grid-row: 4/6;
}



/* -------------------------------------------------------- */
/* Styles für die Klasse infoPlusbutton */

.infoPlusbutton {
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    text-align: left;
	line-height: 1.5em;
}

.infoPlusbutton a {
    background-color: var(--btnNormalH);
    color: white;
    text-decoration: none;
    /* padding mit 2 WErten: 
       1. Wert oben u. unten, 
       2.Wert: links u. rechts */
    padding: 2px 12px;
    border-radius: 0 0.6em 0 0.6em;
    margin: 0.2em;
}

.infoPlusbutton a:hover {
    background-color: limegreen;
}