@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans|Open+Sans');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* === ALT: @import url('https://fonts.googleapis.com/css?family=Merriweather+Sans|Open+Sans'); */
/* ===================================================== */
/* VARIABLEN
/* ===================================================== */
:root {
	--dark-color:maroon;
	--medium-color:sienna;
	--light-color:tan;
	--link-color:darkslategrey;
	/* background:linear-gradient(to right, dark, dark, medium, light); */
}
/* ===================================================== */
/* ALLGEMEINE ANGABEN
/* ===================================================== */
*               { margin:0; padding:0; }
body            { display:flex; min-height:100vh; flex-direction:column; }
main            { flex:1; }
html, body      { font-family:'Open Sans', Arial; font-size:90%; }
#schatten       { background:url(../images/schatten.png) repeat-x; height:12px; }
/* Standard-Text: grün */
.sgt-norm        { color:green;    font-weight:normal; }
/* Bold Text: grün fett */
.sgt-bold        { color:green;    font-weight:bold; }
/* Black Text: schwarz */
.sgt-black       { color:black;    font-weight:normal; }
/* Black Text bold */
.sgt-blackbold   { color:black;    font-weight:bold; }
/* Gray Text: dunkelgrau */
.sgt-gray        { color:darkgray; font-weight:normal; }
/* Gray Text bold */
.sgt-graybold    { color:darkgray; font-weight:bold; }
/* Text zentriert */
.sgt-center      { text-align: center; }
/* Text linksbündig */
.sgt-left      { text-align: left; }
/* Text rechtsbündig */
.sgt-right     { text-align: right; }
/* Fußnote */
.sgt-footnote    { font-size: 0.8em; }
/* ===================================================== */
/* KOPFBEREICH (HEADER)
/* ===================================================== */
header {
	background:linear-gradient(to right, var(--dark-color), var(--dark-color), var(--medium-color), var(--light-color));
	height:35px;
}
header p   { font-size:1.3em; color:white; padding:5px 0 0 10px; }
header img { position:absolute; right:0.5em; top:1em; }
/* ===================================================== */
/* NAVIGATIONSBEREICH (NAV)
/* ===================================================== */
nav                { background-color:var(--light-color); }
nav ul             { list-style-type:none; overflow:hidden; margin:0; padding:0; }
nav li             { float:left; }
nav li.float-right { float:right; }
nav li a           { display:block; color:white; text-align:center; padding:5px 5px; text-decoration:none; }
.image             { padding:5px 8px 3px 5px; }
nav li a:hover:not(.active) { background-color:var(--medium-color); color:white; }
.active            { background-color:var(--dark-color); color:white; }
nav li a img       { width:18px; height:18px; }
/* ===================================================== */
/* FUSSBEREICH (FOOTER)
/* ===================================================== */
footer             { color:green; font-size:0.8em; margin:0; }
footer p           { padding-left:1em; }
footer a           { color:darkgrey; text-decoration:none; }
footer a:link      { text-decoration:none; }
footer a:hover     { text-decoration:underline; }
footer nav         { background:url(../images/silver.png) lightgrey; }
footer nav a:hover { text-decoration:none; }
footer nav li      { float:right; }
footer nav li a    { display:block; color:darkgrey; text-align:center; padding:3px 8px; text-decoration:none; }
/* ===================================================== */
/* INHALTSBEREICH (MAIN)
/* ===================================================== */
/* ----------------------------------------------------- */
/* Farben und Schriftarten
/* ----------------------------------------------------- */
p                             { padding-bottom:0.4em; }
h1, main h2, main h3, main h4 { font-family:'Merriweather Sans',Calibri,Arial,sans-serif; 
                                color:var(--dark-color); padding-top:0.5em; padding-bottom:0.4em; }
h1                            { font-size:1.2em; }
h2                            { font-size:1.1em; }
h3                            { font-size:1.0em; }
h4                            { font-size:0.8em; }
ul, main ol                   { padding-left:2em; padding-bottom:0.4em; }
a                             { color:var(--link-color); text-decoration:none; }
a:link                        { text-decoration:none; }
a:hover                       { text-decoration:underline; }
/* ----------------------------------------------------- */
/* Link-Auswahlen in einer vertikalen Menüliste
/* ----------------------------------------------------- */
ul.vertical-menu            { list-style-type:none; margin:0; padding:0; 
	                            border-top:1px solid var(--dark-color); 
	                            border-left:1px solid var(--dark-color); 
	                            border-right:1px solid var(--dark-color); }
ul.vertical-menu li         { border-bottom:1px solid var(--dark-color); }
ul.vertical-menu li a       { display:block; padding:3px 0 3px 6px; text-decoration:none; }
ul.vertical-menu li a:hover { background-color:var(--medium-color); cursor:pointer; color:white; }
ul.vertical-menu li img     { vertical-align:middle; padding-right:1em; }
/* ----------------------------------------------------- */
/* Tabellen allgemein
/* ----------------------------------------------------- */
table              { border-spacing:0; border-collapse:collapse; }
tr.reference       { visibility: collapse; }
table td, table.th { padding:5px; }
table.border td,
table.border th    { border:1px solid black; }
/* sgt-nob-t/r/b/l/h/v/a: NOBorder = kein Rahmen oben/rechts/unten/links/links+rechts/oben+unten/alle */
table td.sgt-nob-t, table th.sgt-nob-t { border-top:none !important; }
table td.sgt-nob-r, table th.sgt-nob-r { border-right:none !important; }
table td.sgt-nob-b, table th.sgt-nob-b { border-bottom:none !important; }
table td.sgt-nob-l, table th.sgt-nob-l { border-left:none !important; }
table td.sgt-nob-h, table th.sgt-nob-h { border-left:none !important; border-right:none !important; }
table td.sgt-nob-v, table th.sgt-nob-v { border-top:none !important; border-bottom:none !important; }
table td.sgt-nob-a, table th.sgt-nob-a { border-top:none !important; border-right:none !important;
	border-bottom:none !important; border-left:none !important;
}
/* sgt-bob-l/h/r: BOldBorder = dicker Rahmen links/rechts/links+rechts */
table td.sgt-bob-l, table th.sgt-bob-l { border-left:3px solid var(--dark-color) !important; }
table td.sgt-bob-h, table th.sgt-bob-h { border-left:3px solid var(--dark-color) !important;
																				 border-right:3px solid var(--dark-color) !important; }
table td.sgt-bob-r, table th.sgt-bob-r { border-right:3px solid var(--dark-color) !important; }
/* sgt-bgg: BackGround Gray = grauer Hintergrundfarbe */
table td.sgt-backgray, table th.sgt-backgray { background-color:lightgray; }
/* ----------------------------------------------------- */
/* Hover-Tabellen: Gesamte Zelle ist ein Link. Beim Überfahren mit der Maus wird
/* die Zelle hervorgehoben (weiß auf grün) und der Mauszeiger wie bei einem Link verändert.
/* Zellen haben standardmäßig einen Rahmen. Durch style- bzw. class-Angaben
/* kann das angepasst werden.
/* ----------------------------------------------------- */
table.hover-table                    { border-collapse:collapse; }
table.hover-table td,
table.hover-table th                 { border:1px solid var(--dark-color); padding:3px 5px; }
/* Gesamte Tabelle mit sgt-tight: Kleinere Font, schmaleres Padding */
table.hover-table.sgt-tight td, table.hover-table.sgt-tight th { padding:3px; }
/* Einzelne Zellen mit sgt-tight: Kleinere Font, schmaleres Padding */
table.hover-table td.sgt-tight, table.hover-table th.sgt-tight { padding:3px; }
/* Gerade Zeilennummer: Andere Hintergrundfarbe */
table.hover-table tr:nth-child(even) { background-color:#e2e2e2; }
table.hover-table td:hover           { background-color:seagreen; color:white; }
table.hover-table td:hover a         { color:white; }
table.hover-table td a:hover         { cursor:pointer; color:white; text-decoration:none; }
table.hover-table tr.blank-row       { line-height:0.7px; }
table.hover-table tr.blank-row td    { background-color:seagreen; padding:0px; }
table.hover-table a img              { vertical-align: middle; }
/* ----------------------------------------------------- */
/* Images: Verschiedene Varianten für Symbole
/* png 43x32, png2 22x16, pngx 32x16, icon 16x16
/* ----------------------------------------------------- */
img.png  { border:0; width:43px; height:32px; }
img.png2 { border:0; width:22px; height:16px; }
img.pngx { border:0; width:32px; height:16px; }
img.icon { border:0; width:16px; height:16px; }
/* ----------------------------------------------------- */
/* responsive-symbol für Altersklassen-Icon in DM-Jugend Übersichten.
/* Standardbreite 33px für normale Displays und 24px für Smartphones.
/* ----------------------------------------------------- */
img.responsive-symbol { max-width: 100%; height: auto; width: 33px;}
@media (max-width: 600px) { img.responsive-symbol { width: 44px;} }
/* ===================================================== */
/* SONSTIGE EINSTELLUNGEN
/* ===================================================== */
/* ----------------------------------------------------- */
/* Spezielle Steuerungen für Side-by-Side Bereiche
/* und iFrame-Inhalte (aus Excel)
/* ----------------------------------------------------- */
.grid-container { display:grid; grid-template-columns:1fr 1fr; grid-gap:20px; row-gap:15px; width:660px; }
.small-variation { width:470px; }
/* ----------------------------------------------------- */
/* ALT und offenbar nicht mehr benötigt:
/*     .clear { clear:both; }
/*     .scroll-wrapper {
/*        -webkit-overflow-scrolling:touch !important;
/*        position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }
/*     .scroll-wrapper iframe {
/*	      border:0; position:absolute; top:0; left:0; width:100%; height:100%; }
/* ----------------------------------------------------- */
#disclaimer {
	margin:20px 0; padding:1em 2em; background-color:#f1f1f1; box-sizing:border-box; border-radius:0.5em;
	box-shadow:0 2px 4px 0 lightgrey, 0 2px 10px 0 black !important;
	color:#555;
}
@media only screen and (max-device-width:600px) {
	header p              { font-size:1.8em; }
	nav                   { font-size:1.5em; }
	main                  { font-size:1.5em; }
	ul.vertical-menu li a { padding:6px 0 6px 12px; }
	.sgt-footnote         { font-size: 0.55em; }
}