@charset "utf-8";

/* KOPFZEILE */
header .main-header{
	background: url(../Bilder/kopf.jpg); 
	background-size: cover; 
	position: relative; 
	/* Inhalte sind unsichtbar */
	overflow: hidden; /* früher: für Gestaltung mehrspaltiger Layouts verwendbar */
	padding: 10%;
}

/* Hintergrundfarbe der kompletten Start-Seite */
.farbe{
	/* mattes Weiss */
	background-color: #fbfbef;
}

/* für 3x drei Button */
.wrapper {
	display: flex;
}
.wrapper > div {
	font-size: 300%; /* 40px */
	color: gray; /*white;*/
	background: #8258fa; /* 3x-Button-Hintergrund in Lila */		
	/*margin: 0; /* .1em */ /* null für alle Seiten */
	margin-top: .7%; /* Abstand zum 'Kegel'-Bild & zw. 3er Button */	
	padding: .3em; /*padding: .3em;*/
	border-radius: 0;
	flex: 1;
}

.wrapper a {
	display: inline-block; /* = quadratisch; "inline" = Rahmen in Zeilenhöhe; "block" = quadratisch untereinander */ 
	background: #8258fa; /* sofortige Hintergrundfarbe -> WO ? */
	/*background: #FFFFFF; /* Hintergrund der Vierecke (mit den Zahlen drin): Weiß */
	color: black; /* Schriftfarbe der Link-Wörter in Schwarz */
	padding: 2px 18px; /* Abstand vom Zeichen von oben und unten: "2"; Abstand vom Zeichen von links und rechts: "18" */
	border-radius: 2px; /* bei "8" schon fast ein Kreis */
	text-decoration: none; /* Unterstrich unter Zahlen und Doppelpfeile weglassen */
	/*border-color: black;*/
	/*border: 1px solid;*/
}

/* 24.08.2021 deaktiviert -> als optischer Hinweis, daß dieser Button 'Archiv' nur geht ! */
.gruen > a {
	background: green; /* sofortige Hintergrundfarbe */
}

.wrapper a:hover {  
	/* rot *//*yellow; alt */
	background-color: red;
	/* Schrift in Grau */
	color: gray;
}

/* FÜR FUSSZEILE DER START-SEITE */
/*Button Fußzeile (Änderung: margin-top: 19% margin-top 8-> 5% */
.box1{
	float:left;
	width:32%;
	margin-right:2%;
	margin-top: 8%;
	padding: 1%;
	padding: 10px;
	bottom: 0;
	background: #fbfbef; 
	box-sizing: border-box;
	font-size: 20px;
	color: black;
	text-align: center;
	margin-bottom: 20px; /* Abstand vom unteren Rand für 'Impressum', 'Datenschutz', 'Kontakt' */
}
.box1:last-child{margin-right:0;}

/* FÜR FUSSZEILE DER KONTAKT-SEITE*/
/*Button Fußzeile (Änderung: margin-top: 19% margin-top 8-> 5% */
.box2{
	float:left; 
	width:30%;
	margin-right:2%;	
	/* statt 8% auf 1%, dann Fußzeile ohne rechte Scrollbar zu sehen */
	margin-top: 1%;
	padding: 1%;
	padding: 10px;
	bottom: 0;
	background: #fbfbef; 
	box-sizing: border-box;
	font-size: 20px;
	color: black; /* 'a{color: black' ist vorrangig ! */
	text-align: center;
	margin-bottom: 20px; /* Abstand vom unteren Rand für 'Impressum', 'Datenschutz' */
}
.box2:last-child{margin-right:0;}

/* Linkfarbe */
/* wenn Maus NICHT über die Button oder dem Text ist / ??? weiter oben bei 'wrapper a:hover' */
a {color: black;}
/* wenn Maus über 'Delitzsch', 'Meisterschaften', 'Torgau/Oschatz', */
/* 'Links', 'Termine', 'Download', 'Aktuell 22.10.', 'Kegelbahnen', 'Archiv' ist / ??? weiter oben */
a:hover {color: red;}
/* 'Archiv' -> Text wird gelb */
/* .gelb a:hover {color: yellow;} */

/* 'a' ist irgendwie vorrangig !; funktioniert nur bei 'Meisterschaften' */
/* wenn Maus über Button 'Meisterschaften' ist (style="text-decoration:none;") ist dort NICHT eingetragen */
.box:hover {color: yellow;}

/* FUSSZEILE IN 'Datenschutz' */	
footer {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	border-bottom:1px solid #666;
	/* border-top:1px solid #666; */
}

/* In 'Datenschutz' in der Fußzeile: 'Kontakt' */
.ds-kontakt {
	/* Breite, Höhe und Hintergrund-Farbe (Gelb) des Kontakt-Fuß-Navi's */
	width:33%; height:50px; background:#FFFF99; float:left;
	/* Schriftgröße; mittiges Ausrichten der Schrift (waagerecht) */
	font-size: 30px; text-align:center;
	/* zum vertikalen mittigen Setzen des Textes */
	display: flex; flex-direction: column; justify-content:center;
}

/* In 'Datenschutz' in der Fußzeile: 'Impressum' */
.ds-impressum {
	/* Breite, Höhe und Hintergrund-Farbe (Hellgrün) des Impressum-Fuß-Navi's */
	width:33%; height:50px; background:#CCFF99; float:left;
	/* Schriftgröße; mittiges Ausrichten der Schrift (waagerecht) */
	font-size: 30px; text-align:center;
	/* zum vertikalen mittigen Setzen des Textes */
	display: flex; flex-direction: column; justify-content:center;
}

/* In 'Datenschutz' in der Fußzeile: 'Startseite' */
.ds-startseite {
	/* Breite, Höhe und Hintergrund-Farbe (Gelb) des Startseite-Fuß-Navi's */
	width:34%; height:50px; background:#FFFF99; float:left;
	/* Schriftgröße; mittiges Ausrichten der Schrift (waagerecht) */
	font-size: 30px; text-align:center;
	/* zum vertikalen mittigen Setzen des Textes */
	display: flex; flex-direction: column; justify-content:center;
}

/* In 'Impressum' in der Fußzeile: 'Startseite' */
.imp-startseite {
	/* Breite, Höhe und Hintergrund-Farbe (Gelb) des Kontakt-Fuß-Navi's */
	width:33%; height:50px; background:#FFFF99; float:left;
	/* Schriftgröße; mittiges Ausrichten der Schrift (waagerecht) */
	font-size: 30px; text-align:center;
	/* zum vertikalen mittigen Setzen des Textes */
	display: flex; flex-direction: column; justify-content:center;
}

/* In 'Impressum' in der Fußzeile: 'Datenschutz' */
.imp-datenschutz {
	/* Breite, Höhe und Hintergrund-Farbe (Hellgrün) des Impressum-Fuß-Navi's */
	width:33%; height:50px; background:#CCFF99; float:left;
	/* Schriftgröße; mittiges Ausrichten der Schrift (waagerecht) */
	font-size: 30px; text-align:center;
	/* zum vertikalen mittigen Setzen des Textes */
	display: flex; flex-direction: column; justify-content:center;
}

/* In 'Impressum' in der Fußzeile: 'Kontakt' */
.imp-kontakt{
	/* Breite, Höhe und Hintergrund-Farbe (Gelb) des Startseite-Fuß-Navi's */
	width:34%; height:50px; background:#FFFF99; float:left;
	/* Schriftgröße; mittiges Ausrichten der Schrift (waagerecht) */
	font-size: 30px; text-align:center;
	/* zum vertikalen mittigen Setzen des Textes */
	display: flex; flex-direction: column; justify-content:center;
}

/* In 'Datenschutz' für Fußzeile notwendig */
/* damit nachfolgende Elemente nicht in diesem 'float' hängen */
.clearing {
	clear:both;
}

/* In 'Datenschutz' in der Fußzeile 'Kontakt', 'Impressum', 'Startseite' */
/* wenn Maus über Label 'Kontakt', 'Impressum' oder 'Startseite' ist, dann Text in Rot einfärben */
.ds-kontakt:hover, .ds-impressum:hover, .ds-startseite:hover {color: red;}

/* In 'Impressum' in der Fußzeile 'Startseite', 'Datenschutz', 'Kontakt' */
/* wenn Maus über Label 'Kontakt', 'Impressum' oder 'Startseite' ist, dann Text in Rot einfärben */
.imp-startseite:hover, .imp-datenschutz:hover, .imp-kontakt:hover {color: red;}

/* für Impressum 'EMail' und 'Internetadresse' */
.atab {
	tab-size:30; -moz-tab-size:30; -ms-tab-size:30;
}

/* Zeilen-Höhe für eine Leerzeile in 'torgau_klf.php' */
.zeilenHoehe {
	font-size: 0.1em;
}

/* EHEMALIGES 'start_navbar.css' */
/* ----------------------------- */
/* Navbar container / umbenennen zu 'menue_bgc' = MenueBackgroundColor */
.navbar {
  overflow: hidden;
  /* Hintergrundfarbe der Menue-Kopfzeile in SCHWARZ */
  background-color: #333;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {  
  float: left;
  /* hiermit keine Änderung sichtbar ! (evtl. weil 'dropdown' danach 'left' einstellt ?!)
  float: right; ODER
  float: center;*/
  font-size: 16px;
  /*  */
  /*color: white;*/
  color: yellow;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;  
}

/* The dropdown container */
.dropdown {
  /* hiermit ist das DropDown-Menue rechtsbündig mit schwarzem Hintergrund */
  /* float: right; */
  float: left;
  /* float: center; */ /* hiermit ist das DropDown-Menue untereinander an der linken Seite */
  overflow: hidden;
  /* text-align: center; */ /* alle 4 DropDown-Menue-Button sind mittig, aber untereinander */
}

/* umbenennen zu 'von_rechts' */
.dropdn {
	/* bei 'center' sind alle untereinander */
	float: right;	
	overflow: hidden;
}

/* DROPDOWN BUTTON */
.dropdown .dropbtn , .dropdn .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;  
  color: white; /* DropDown-Menue-Text in weißer Schriftfarbe (auf schwarzem Hintergrund) */  
  padding: 6px 14px; /* Abstand oben und unten, Abstand zum nächsten Objekt */
  background-color: inherit;
  /* Schriftgröße des Elternelements */
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* blauer Hintergrund, wenn Maus über einem Dropdown-Menue ist (statt schwarzer Hintergrund) */
.navbar a:hover, .dropdown:hover .dropbtn, .dropdn:hover .dropbtn {
  background-color: blue;
}
/* bei 'Info-Seite' schwarz beibehalten/überschreiben */
.dropdown:hover .schwarz {
  background-color: black;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9; /* Hintergrundfarbe vom DropDown-Unter-Menue in Weiß */  
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  /* das ausgeklappte DropDown-Menue wird linksbündig ausgegeben */
  text-align: left;
}

/* GRAUER (GELBER) Hintergrund im DropDown-Menue bei Mannschafts-Name über dem die Maus ist */
.dropdown-content a:hover {
  /*background-color: #ddd;*/
  background-color: yellow;
}

/* Zeige das DropDown-Menue, wenn sich Mauszeiger darüber befindet */
.dropdown:hover .dropdown-content {
  display: block;
}
/* torgau_klf.php */
/* Überschrift über der Spieltag-Tabelle (weiblich) */
.ues_oben_w{
	margin-top: 7px; /* Abstand von oberem DropDown-Menue (25) */
	text-align: center; /* Text mittig ausgeben */
	font-size: 25px; /* Text-Höhe */
	margin-bottom: 10px; /* Abstand unten zur Spieltag-Tabelle (25) */	
	color: red; /* Männer (männlich) */
}
/* Überschrift über der Spieltag-Tabelle (männlich) */
.ues_oben_m {
	margin-top: 7px; /* Abstand von oberem DropDown-Menue (25) */
	text-align: center; /* Text mittig ausgeben */
	font-size: 25px; /* Text-Höhe */
	margin-bottom: 10px; /* Abstand unten zur Spieltag-Tabelle (25) */	
	color: blue; /* Männer (männlich) */
}
/* Überschrift über der Spieltag-Tabelle (männlich, 8 Mannschaften) */
.ues_oben_m_8er {
	margin-top: 5px; /* Abstand von oberem DropDown-Menue (25) 6px */
	text-align: center; /* Text mittig ausgeben */
	font-size: 20px; /* Text-Höhe 20px */
	margin-bottom: 5px; /* Abstand unten zur Spieltag-Tabelle (25) 8px */
	color: blue; /* Männer (männlich) */
}
/* torgau_klf.php */
.spieltag {
	text-align: center;
	font-size: 20px;
	color: blue;
	margin-bottom: 10px;
}

/* Überschrift über der Gesamt-Übersicht */
/* Muss vor 'Table' stehen, sonst geht es nicht ! */
.ues_ges_w {
	margin-top: 5px; /* Abstand von oberer Tabelle */
	text-align: center; /* Text mittig ausgeben */
	color: red; /* weiblich / color: blue;*/
	font-weight: normal; /* Strichstärke der Schrift */
	margin-bottom: 5px;  /* Abstand unter Überschrift zur nächsten Tabelle */
}
/* Überschrift über der Gesamt-Übersicht */
/* Muss vor 'Table' stehen, sonst geht es nicht ! */
.ues_ges_m {
	margin-top: 5px; /* Abstand von oberer Tabelle */
	text-align: center; /* Text mittig ausgeben */
	color: blue; /* männlich */
	font-weight: normal; /* Strichstärke der Schrift */
	margin-bottom: 5px;  /* Abstand unter Überschrift zur nächsten Tabelle */
}
.ues_ges_m_8er{
	margin-top: 5px; /* Abstand von oberer Tabelle */
	text-align: center; /* Text mittig ausgeben */
	font-size: 20px; /* Text-Höhe 20px */
	color: blue; /* männlich */
	font-weight: normal; /* Strichstärke der Schrift */
	margin-bottom: 5px;  /* Abstand unter Überschrift zur nächsten Tabelle */
}

/* für Sperren NL, wenn Space dazwischen ist ... im header */
/* wenn Spalte zu klein, dann wird der zu lange Text durch "..." ersetzt */
.no_NL {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table.redTable {
	border: 2px solid #A40808;
	background-color: #EEE7DB; /* Hintergrundfarbe der 1., 3., 5.Zeile und Fußzeile, Rosa */
	width: 100%;
	/* table-layout: fixed;  24.08.2021 dazu: nun alle Spalten gleich groß */
	text-align: center;
	/* = wie in Excel = einfach-Rahmen */
	/* separate (default) = ein Gesamtrahmen um die vielen Einzelrahmen */
	/* border-collapse: collapse;*/
}
/* Rahmen um alle Zellen */
table.redTable td, table.redTable th {
  border: 1px solid #AAAAAA; /* Farbe jeder einzelnen Zell-Umrandung: Grau */
  padding: 3px 2px;
}
table.redTable tbody td {
  font-size: 19px; /* Textgröße der Spiel-Ergebnisse */
}
/* 2n+0 oder 2n -> 2, 4, 6 usw. oder 'even' */
/* 2n+1 -> 1, 3, 5 usw. oder 'odd' */
table.redTable tr:nth-child(even) {
  background: #F5C8BF; /* Hintergrundfarbe der 2., 4.Zeile usw. */
}
table.redTable thead {
  /* background: #A40808; /* Dunkelrot (weiblich) (Tabellenkopf-Hintergrundfarbe) */
  background: #80B3FF; /* Hellblau (Tabellenkopf-Hintergrundfarbe) */
}
table.redTable thead th {
  font-size: 20px; /* Textgröße vom Tabellenkopf */
  font-weight: normal;
  color: #FFFFFF; /* Weiß 'Sp.-Nr.' (Tabellenkopf-Text) */
  text-align: center; /* mittig */  
  border-left: none; /* ohne den braunroten Rand zwischen den Überschriften-Spalten */
  /* border-left: 2px solid #A40808; /* Abstand zwischen den Tabellenkopf-Feldern */
}
/* keine sichtbare Änderung ??? */
/* der erste Eintrag kann anders formatiert werden (erstes Kind) */
table.redTable thead th:first-child {
  border-left: none;
}
table.redTable tfoot {
  font-size: 14px;
  font-weight: bold; /* Fettschrift von '>>', '<<' und Zahlen im Fußbereich */
  color: #FFFFFF;
  background: #EEE7DB; /* Farbe der Fußzeile */  
}
/* Schriftgröße der Fußzeile */
table.redTable tfoot td {
  font-size: 16px; /* Viereck, '>>', '<<' und Zahlen werden größer/kleiner (nach Pixel) */  
}
/* Spieltag-Zahlen in der Fußleiste ausrichten / Zahlen waren vorher schon mittig ??? */
table.redTable tfoot .links {
  text-align: center; /* die Link-Spieltabellen-Zahlen befinden sich mittig drunter */
  /* text-align: right; */ /* die Zahlen befinden sich rechts unten */
  /* text-align: left; */ /* die Zahlen befinden sich links unten */  
}
/* Zahlen quadratische Umrandung, weißer Hintergrund, blaue Schrift */
table.redTable tfoot .links a{
  display: inline-block; /* = quadratisch; "inline" = Rahmen in Zeilenhöhe; "block" = quadratisch untereinander */ 
  background: #FFFFFF; /* Hintergrund der Vierecke (mit den Zahlen drin): Weiß */
  color: blue; /* Schriftfarbe der Link-Zahlen in Blau */
  padding: 2px 18px; /* Abstand vom Zeichen von oben und unten: "2"; Abstand von der Zahl nach links und rechts: "18" */
  border-radius: 5px; /* bei "8" schon fast ein Kreis */
  text-decoration: none; /* Unterstrich unter Zahlen und Doppelpfeile weg lassen */
}
/* Hintergrund von Weiß auf Helles Lila beim Überfahren ändern */
table.redTable tfoot .links a:hover {
	/* helles Lila */
	background-color: #ffb3ff;
}

/* 'up arrow', 'dn arrow' entfernen bei type=numerisch */
/*input[type=number] {*/
	/* für Mozilla */
	/*-moz-appearance: textfield;
	appearance: textfield;
	margin: 0;
}*/
/* für Chrome */
/*input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}*/
/* fehlerhafte Eingabe */
input:invalid {	
	border: red solid 3px;
}
/* korrekte Eingabe - Schrift in Grün */
/*input:valid {
	color: green;
}*/
/* Pflichtfeld */
/*input[required] {
	background-color: #F08080;
}*/

.spTag  {
  text-align: center;
}
.spTag a{
  display: inline-block; /* = quadratisch; "inline" = Rahmen in Zeilenhöhe; "block" = quadratisch untereinander */ 
  background: #FFFFFF; /* Hintergrund der Vierecke (mit den Zahlen drin): Weiß */
  color: blue; /* Schriftfarbe der Link-Zahlen in Blau */
  padding: 2px 18px; /* Abstand vom Zeichen von oben und unten: "2"; Abstand von der Zahl nach links und rechts: "18" */
  border-radius: 5px; /* bei "8" schon fast ein Kreis */
  text-decoration: none; /* Unterstrich unter Zahlen und Doppelpfeile weg lassen */
}
.spTagGruen {
	background: limegreen;
	color: white;
	margin-right: 4px;
}

/* Start-Tabelle in 'index.php' - CSS geht Online nicht !*/
/*table.startTable {
	width: 100%;
	text-align: center;
}
table.startTable thead tr td {
	width: 100%;
}
table.startTable thead tr img {
	width: 100%;
}
table.startTable tbody {
	font-size: 320%;
}
table.startTable tbody tr td a{
	text-decoration: none;
}*/

/* test in tableGes.php */
#untererRand {
	position: absolute;
	bottom: 0;
	/*right: 10px;*/
}
/* Abstand der Gesamt-Tabelle vom unteren Rand */
.untererRand {
	/*position: relative;
	margin-top: 60px;*/
	width: 98.8%; /* 98.6% 20.08.2022 rechter Rand bündig unter rechten Button */
	position: fixed;
	left: 0.24%; /* 0.7% 20.08.2022 Abstand vom linken Rand */
	bottom: 0; /* 20px 20.08.2022 Abstand der unteren Leiste von unten */
}
/* blinkender Link ... geht nicht  */
.blink {
	animation-name: animation_blink;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
}
@keyframes animation_blink {
	0% { opacity: 1; }
	50% { opacity: 0.1; }
	100% { opacity: 1; }
}

/* 2.Versuch: läuft offline, nicht aber auf dem Server */
@keyframes blinken {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
span {
	animation: blinken 1s infinite;
}