/* Manueller Reset um mögliche (störende) Standards von HTML außer Kraft zu setzen | Hugo*/
body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* globale Schriftarten festlegen */
h1,h2,h3,h4,p,ul,ol,li,div,td,th,span,b,i,body {
    font-family:Verdana,Arial,Helvetica,sans-serif;
}
/* Default-Schriftgröße*/
    /* Gilt für alle Kinder-Elemente des html-Elements; Zugriff über die Einheit rem: 1rem = 16px (in diesem Fall) | Hugo*/
html{
    font-size: 16px;
}
/* p,ul,ol,li,div,td,th,span,body {
    font-size:.85rem;
} */

/* Definitionen, die für Netscape 4.x kritisch sind, werden mittels CSS-Weiche vor ihm versteckt;
Netscape 4.x kann @media all nicht interpretieren */
@media all {
    p,ul,ol,div,td,th,span {
            line-height:140%;
    }
    /* <li></li> kommt z. B. bei "Geänderte Rubriken zum Einsatz; die geringere Zeilenhöhe als sonst
    kennzeichnet zusammengehörige Textblöcke, da Aufzählungspunkt fehlt */
    li {
            line-height:120%;
            margin-bottom:6px;
    }
    .connorm li {
            line-height:140%;
    }
    /* Abstand zu Bildern, die rechts von Text umflossen werden (Bild ist links) */
    img.picleft {
                float:left;
                margin-right:10px;
                margin-top:6px;
                max-width: 250px;
                clear: left; /*clear-Property um floats zu containen, also störenden overflow durch andere gefloatete Bilder zu vermeiden | Hugo*/
    }
    /* Abstand zu Bildern, die links von Text umflossen werden (Bild ist rechts) */
    img.picright {
                 float:right;
                 margin-left:10px;
                 margin-top:6px;
                 max-width: 250px;
                 clear: right; /*clear-Property um floats zu containen, also störenden overflow durch andere gefloatete Bilder zu vermeiden | Hugo*/
    }
    /* Default-Abstände für Überschriften und Bereiche */
    h5 {
                 margin-bottom:2px;
                 margin-top:3px;
                 margin-left:3px;
    }
    #navi {
                 grid-column:1 /2; /* sorgt dafür, dass die Navigation am linken Rand ist, ohne html ändern zu müssen (Eigenschaft des CSS-Grid) | Hugo*/
                 margin-top:0;
                 padding:0px;
                 padding-top: 1em;
    }
    #anker {
                 padding:0px;
                 margin:0px;
                 visibility:hidden;
    }
    #content {
                 grid-row:1 /-1; /*soll sich über alle Reihen hinwegstrecken | Hugo */
                 grid-column-start: 2; /*legt Spalte 2 für den Content fest | Hugo */
                 padding:0px;
                 margin: 0px;
                 border:0px;
                 width:100%; /*Erfüllt komplette Breite des zugewiesenen Raums im Grid, statt fester Breite | Hugo */
                 background-color:#e1e1e1;
    }
    #content > *{
                /*Kindelement des #content-div soll um 1rem eingerückt sein | Hugo */
                padding-left: 1rem;
                padding-right: 1rem;
    }
    #vws {
                 padding:0px;
                 margin:0;
                 border:1px solid #003080;
    }
    #vwslarge {
                 padding:0px;
                 margin:0;
                 border:1px solid #003080;
    }
    #vwssmall {
                 padding:0px;
                 margin:0;
                 border:1px solid #003080;
    }
    #vwstop {
                 padding:0px;
                 margin:0;
                 border:1px solid #003080;
    }
    #banner {
                 padding:0px;
                 margin:0;
                 border:1px solid #003080;
    }
    /* Klasse für News mit blauem Rand oben und unten */
    .news {
                 margin-bottom:10px;
                 margin-top:2px;
                 padding:8px;
                 border-top:1px solid #003080;
                 border-bottom:1px solid #003080;
                 overflow: hidden; /*verhindert Overflow der Bilder in Newsboxen durch "vergrößerung" der Newskästen | Hugo*/
     }
    ul.vwsx {
            list-style-type:none;
            padding:0px;
            margin-left:5px;
            margin-bottom:7px;
            margin-top:2px;
    }
    .connorm ul {
            margin-left:25px;
    }
    li.vwsx {
            font-size:.85rem;
            margin-bottom:6px;
    }
    .little {
            font-size:11px;
            margin-bottom:0px;
    }
    table {
            padding: 2rem 0; /*etwas Abstand um die Tabelle, oben und unten | Hugo*/
    }
    .backg {
            background-color:#ffffff;
    }
    .maka {
            background-color:#ffffff;
            width:740px;
    }
    td,th {
            vertical-align:top;
            text-align:left;
            padding-left:4px;
            padding-right:4px;
            padding-top:2px;
            padding-bottom:2px;
    }
    .jugend td {
            padding-right:50px;
    }
    .foto td {
            margin:0;
            padding:0;
    }
    .fotonews td {
            margin:2px;
            padding:4px;
    }
    .fotoarchiv {
            width:564px;
            margin:0px;
            background-color:#ffffff;
    }
    .fotoarchiv td {
            padding:4px;

    }
    .congrey {
             padding-left:10px;
             padding-right:10px;
             padding-top:5px;
             padding-bottom:5px;
             margin-bottom:6px;
             border:1px solid #003080;
    }
    .congrey h5 {
             margin-left:0;
    }
}



/* beim Druck Navigationsbereiche verstecken; Druck derzeit nur halbwegs brauchbar in IE; separates Druck-Stylesheet soll mal kommen */
@media print {
   #navi {display:none}
   #brain {display:none}
   #gloss {display:none}
   #vws {display:none}
   #vwslarge {display:none}
   #vwssmall {display:none}
   #vwstop {display:none}
   #anker {display:none}
   #banner {display:none}
}
/* globale Text- und Hintergrundfarbe definieren */
body {
    color:#000000;
    background-color:#e1e1e1;
}
p {
    margin-top:1rem;
}
ul {
    margin-bottom:2px;
    margin-left:7px;
}
/* Strukturierung der Seite über CSS-Grid und die Minmax-Funktion | Hugo*/
body{
    width: 95%;
    margin: 1em auto;
    display: grid;
    grid-template-columns:minmax(174px, 1fr) 4fr;
    row-gap: 1rem; /*Abstand zwischen einzelnen Elementen der Infoleiste auf der linken Seite | Hugo*/
    grid-template-rows: auto auto 1fr;
    /*kleiner Trick mit 1fr zusätzlich, damit die ersten beiden Reihen tatsächlich nur so hoch sind, wie ihr Content | Hugo */
}

/* Bilder per default ohne Rand; sonst gäbe es dicken Rand in Linkfarbe wenn Bild gleichzeitig ein Link ist */
img {
    border-style:none;
}
/* Löberitzer Ergebnisse in Tabellen fett hervorheben */
tr.loeb {
    font-weight:bold;
}

/* Löberitzer Ergebnisse in Mannschaftskämpfen */
tr.mann {
    color:#ffffff;
    background-color:#6F6F6F;
}


/* DWZ in Blitztabellen kann zentriert werden; sieht etwas schöner aus, macht aber mehr Aufwand */
td.dwz {
    text-align:center;
}
/* Fotoarchiv, grey ist ein alter, unglücklich gewählter und überholter Name; ist jetzt blau */
td.grey {
    width:116px;
    height:108px;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    color:#000000;
    background-color:#003080;
}
td.teamblack {
    background-color:#e1e1e1;
    text-align:center;
}
td.teamblackl {
    background-color:#e1e1e1;
}
td.teamblack1 {
    background-color:#909090;
    text-align:center;
}
td.teamblack2 {
    background-color:#A2A2A2;
    text-align:center;
}
td.teamblack3 {
    background-color:#B7B7B7;
    text-align:center;
}
td.teamblack4 {
    background-color:#CACACA;
    text-align:center;
}
td.teamblack5 {
    background-color:#e1e1e1;
    text-align:center;
}
.grey a:link {
    color:#ffffff;
    text-decoration:none;
    font-size:.85rem;
}
.grey a:visited {
    color:#ffffff;
    text-decoration:none;
    font-size:.85rem;
}
.grey a:hover {
    color:#D0D0D0;
    text-decoration:underline;
    font-size:.85rem;
}
.grey a:active {
    color:#D0D0D0;
    text-decoration:underline;
    font-size:.85rem;
}
.grey a:focus {
    color:#D0D0D0;
    text-decoration:underline;
    font-size:.85rem;
}
td.greynew {
    width:116px;
    height:117px;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
    color:#000000;
    background-color:#003080;
}
.greynew a:link {
    color:#ffffff;
    text-decoration:none;
    font-size:.85rem;
}
.greynew a:visited {
    color:#ffffff;
    text-decoration:none;
    font-size:.85rem;
}
.greynew a:hover {
    color:#D0D0D0;
    text-decoration:underline;
    font-size:.85rem;
}
.greynew a:active {
    color:#D0D0D0;
    text-decoration:underline;
    font-size:.85rem;
}
.greynew a:focus {
    color:#D0D0D0;
    text-decoration:underline;
    font-size:.85rem;
}
/* Strichellinie */
.trenn {
    border-bottom:1px dashed #C0C0C0;
    margin-top: 2px;
    margin-bottom:10px;
}
/* Glossar- und Sitemapmenü (Alphabet in Schachbrettform) */
td.glossblack {
    width:22px;
    height:22px;
    color:#ffffff;
    background-color:#000000;
    text-align:center;
    margin:0px;
    border-style:none;
    padding:0px;
}
td.glossgrey {
    width:22px;
    height:22px;
    color:#000000;
    background-color:#ffffff;
    text-align:center;
    margin:0px;
    border-style:none;
    padding:0px;
}
td.black {
    color:#ffffff;
    background-color:#000000;
    text-align:center;
}
/* Seiten sollten immer mit <h1></h1> anfangen; deshalb große und kleine Variante; ist aber noch nicht konsequent so umgesetzt */
h1 {
    font-size:1.7rem;
    padding-top: 1em;
}
h1.smallh1 {
    font-size:1.5rem;
    padding-top: 1em;;
}
h2 {
    font-size:1.5rem;
}
h2.smallh2 {
    font-size:1.3rem;
    margin-bottom:5px;
}
h3 {
    font-size:1.3rem;
    margin-bottom:5px;
}
h4 {
    font-size:1.1rem;
    margin-bottom:3px;
}
h5 {
    font-size:1rem;
}
/* Globale Linkfarben und -auszeichnungen definieren */
a:link {
    color:#0000BF;
    text-decoration:none;
}
/* #7000C0 */
a:visited {
    color:#7000C0;
    text-decoration:none;
}
a:hover {
    color:#0060FF;
    text-decoration:underline;
}
a:active {
    color:#0060FF;
    text-decoration:none;
}
a:focus {
    color:#0060FF;
    text-decoration:none;
}

/* Abstand im Glossar unten, damit die letzten Anker oben angezeigt werden */
.glossbott {
    margin-bottom:600px;
}
/* Anker zum Springen an den Seitenanfang */
#anker {
   position:absolute;
   top:0px;
   left:0px;
}
/* Standardnavigation; position-fixed funktioniert nicht im IE unter Windows. D. h., die Navigation verschwindet beim vertikalen Scrollen. Bei anderen Browsern (Opera, Mozilla, Konqueror etc.) bleibt sie fixiert. */
#navi {
    position: sticky;
    top: 0;
    width: 95%;
    background-color:#e1e1e1;
}

/* Standard-Menübutton */
div.menu {
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-weight:bold;
    font-size:.85rem;
    color:#FFFFFF;
    background-color:#242222;
    text-align:center;
    margin-bottom:2px;
    padding:2px;
}
.menu a {
    display:block;
    width:100%;
}

.menu a:link {
    color:#ffffff;
    text-decoration:none;
    font-size:.85rem;
}

.menu a:visited {
    color:#ffffff;
    text-decoration:none;
    font-size:.85rem;
}
.menu a:hover {
    color:#ffffff;
    background-color:#0060FF;
    text-decoration:none;
    font-size:.85rem;
    z-index:100;
}
.menu a:active {
    color:#ffffff;
    background-color:#0060FF;
    text-decoration:none;
    font-size:.85rem;
}
.menu a:focus {
    color:#ffffff;
    background-color:#0060FF;
    text-decoration:none;
    font-size:.85rem;
}

/* Menübutton mit etwas Abstand nach unten; dient zur optischen Trennung von globaler Navigation,
z. B. -> Home von kontextbezogner, z. B. -> Adventsblitz 2001 */
div.menularge {
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-weight:bold;
    font-size:.85rem;
    color:#FFFFFF;
    background-color:#242222;
    text-align:center;
    margin-bottom:21px;
    padding:2px;
}
.menularge a {
    display:block;
    width:100%;
}

.menularge a:link {
    color:#ffffff;
    text-decoration:none;
    font-size:.85rem;
}

.menularge a:visited {
    color:#ffffff;
    text-decoration:none;
    font-size:.85rem;
}
.menularge a:hover {
    color:#ffffff;
    background-color:#0060FF;
    text-decoration:none;
    font-size:.85rem;
    z-index:100;
}
.menularge a:active {
    color:#ffffff;
    background-color:#0060FF;
    text-decoration:none;
    font-size:.85rem;
}
.menularge a:focus {
    color:#ffffff;
    background-color:#0060FF;
    text-decoration:none;
    font-size:.85rem;
}


div.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Navigation bei Blitztabellen, die am linken Bildschirmrand beginnen. Für diese recht breiten Tabellen soll die gesamte Fensterbreite des Browsers genutzt werden. In diesem Fall nicht zu viele Navi-Buttons und kein vws-Bereich verwenden. Beispiel: Nachtblitz 2002*/
/* Menübutton-Bereich breite Tabellen (z. B. Blitzserie) */
div.tab {
    width:178px;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-weight:bold;
    font-size:.85rem;
    color:#FFFFFF;
    text-align:center;
    margin-bottom:21px;
}
/* verschachtelte Selektoren, um den Links und verschachtelten divs (=einzelne Buttons) keine Klassen zuweisen zu müssen */
.tab div {
    margin-bottom:2px;
    background-color:#003080;
    padding:2px;
}
.tab a {
    display:block;
    width:174px;
}
.tab a:link {
    color:#ffffff;
    background-color:transparent;
    text-decoration:none;
    font-size:.85rem;
}
.tab a:visited {
    color:#ffffff;
    background-color:transparent;
    text-decoration:none;
    font-size:.85rem;
}
.tab a:hover {
    color:#ffffff;
    background-color:#0060FF;
    text-decoration:none;
    font-size:.85rem;
}
.tab a:active {
    color:#ffffff;
    background-color:#0060FF;
    text-decoration:none;
    font-size:.85rem;
}
.tab a:focus {
    color:#ffffff;
    background-color:#0060FF;
    text-decoration:none;
    font-size:.85rem;
}

/* Bereich unterhalb der Navigation, z. B. externe Kontextlinks, "Geänderte Rubriken" usw.; mit id="vws" statt id = "vwslarge" kann man in den Navibereich einbetten; er hat keine eigene Positionierung. Vorteil: der Abstand zum letzten Menüpunkt bleibt konstant, auch wenn Menüpunkte hinzukommen, wegfallen. Nachteil: Navi + vws dürfen wegen der fixen Positionierung nicht zu groß werden, da nicht scrollbar. Wenn doch, sollte man vwslarge nehmen.
IDs werden verwendet, da man die Linkfarben global definieren kann, ohne ihnen nochmals Klassen zuweisen zu müssen. Eine andere Möglichkeit ist der Einsatz von Klassen und verschachtelten Selektoren (siehe class tab) */
#vws {
    width:176px;
    color:#000000;
    background-color:#ffffff;
}
#vws a:link {
    font-size:.85rem;
    color:#0000BF;
    background-color:#ffffff;
}
#vws a:visited {
    font-size:.85rem;
    color:#7000C0;
    background-color: #ffffff;
}
#vws a:hover {
    font-size:.85rem;
    color:#0060FF;
    background-color:#ffffff;
}
#vws a:active {
    font-size:.85rem;
    color:#0060FF;
    background-color:#ffffff;
}
#vws a:focus {
    font-size:.85rem;
    color:#0060FF;
    background-color:#ffffff;
}
/* Verweise (vws) in Grid eingliedern */
#vwslarge, #vwssmall, #vwstop{
    grid-column: 1 / 2; /*Befindet sich immer in Spalte 1 | Hugo*/
    width:95%;          /*Um einen gewissen Abstand zum content zu ermöglichen*/
    height:fit-content; /* Kasten soll kompakt bleiben und sich nicht nach unten strecken | Hugo */
}
/* Bereich unterhalb der Navigation, z. B. externe Kontextlinks, "Geänderte Rubriken" usw., wenn beide Bereiche zu groß werden (siehe auch vws). vwslarge ist im Gegensatz zum in navi eingebetteten vws scrollbar und scrollt dann über die fixierte Navigation hinweg (gewollter Effekt; im IE derzeit natürlich nicht sichtbar, da position-fixed nicht funktioniert) */
#vwslarge {
    /* position:absolute;
    top:400px;
    left:15px; */
    color:#000000;
    background-color:#ffffff;
    /* z-index:3; */
}
#vwslarge a:link {
    font-size:.85rem;
    color:#0000BF;
    background-color:#ffffff;
}
#vwslarge a:visited {
    font-size:.85rem;
    color:#7000C0;
    background-color:#ffffff;
}
#vwslarge a:hover {
    font-size:.85rem;
    color:#0060FF;
    background-color:#ffffff;
}
#vwslarge a:active {
    font-size:.85rem;
    color:#0060FF;
    background-color:#ffffff;
}
#vwslarge a:focus {
    font-size:.85rem;
    color:#0060FF;
    background-color:#ffffff;
}

#vwssmall {
    /* position:absolute;
    top:270px;
    left:15px;
    width:176px; */
    color:#000000;
    background-color:#ffffff;
    /* z-index:3; */
}
#vwssmall a:link {
    font-size:.85rem;
    color:#0000BF;
    background-color:#ffffff;
}
#vwssmall a:visited {
    font-size:.85rem;
    color:#7000C0;
    background-color:#ffffff;
}
#vwssmall a:hover {
    font-size:.85rem;
    color:#0060FF;
    background-color:#ffffff;
}
#vwssmall a:active {
    font-size:.85rem;
    color:#0060FF;
    background-color:#ffffff;
}
#vwssmall a:focus {
    font-size:.85rem;
    color:#0060FF;
    background-color:#ffffff;
}

#vwstop {
    /* position:absolute;
    top:140px;
    left:15px;
    width:176px; */
    color:#000000;
    background-color:#ffffff;
    /* z-index:3; */
}
#vwstop a:link {
    font-size:.85rem;
    color:#0000BF;
    background-color:#ffffff;
}
#vwstop a:visited {
    font-size:.85rem;
    color:#7000C0;
    background-color:#ffffff;
}
#vwstop a:hover {
    font-size:.85rem;
    color:#0060FF;
    background-color:#ffffff;
}
#vwstop a:active {
    font-size:.85rem;
    color:#0060FF;
    background-color:#ffffff;
}
#vwstop a:focus {
    font-size:.85rem;
    color:#0060FF;
    background-color:#ffffff;
}

/* Schachbrett-Menü Glossar, Linkfarben */
#gloss {
    color:#000000;
    background-color:#f0f0f0;
    z-index:3;
}
#gloss a:link {
    font-size:11px;
    color:#0000BF;
    background-color:#ffffff;
}
#gloss a:visited {
    font-size:11px;
    color:#7000C0;
    background-color:#ffffff;
}
#gloss a:hover {
    font-size:11px;
    color:#0060FF;
    background-color:#ffffff;
}
#gloss a:active {
    font-size:11px;
    color:#0060FF;
    background-color:#ffffff;
}
#gloss a:focus {
    font-size:11px;
    color:#0060FF;
    background-color:#ffffff;
}
/* Box für Zusatzinformationen im Glossar, z. B. Ritter Rolandus, Chevalier */
#glossbox a {
      display:block;
      width:174px;
      font-family:Verdana,Arial,Helvetica,sans-serif;
      font-size:.85rem;
      text-decoration:none;
      padding:2px;
}

#glossbox a span {
      display:none;
}

#glossbox a:hover span {
      display:block;
      width:300px;
      color:black;
      background:#ffffff;
      font:normal .85rem verdana, sans-serif;
      border:1px solid black;
      padding:10px;
}
#glossbox2 a {
      display:block;
      width:174px;
      font-family:Verdana,Arial,Helvetica,sans-serif;
      font-size:.85rem;
      text-decoration:none;
      padding:2px;
}

#glossbox2 a span {
      display:none;
}

#glossbox2 a:hover span {
      display:block;
      width:300px;
      color:black;
      background:#ffffff;
      font:normal .85rem verdana, sans-serif;
      border:1px solid black;
      padding:10px;
}

/* Brain-Grafik in Brain's Corner */
#brain {
   position:absolute;
   top:330px;
   left:20px;
}
/* Rechter Bereich (Sponsoren) */
#banner {
     position:absolute;
     top:15px;
     right:30px;
     color:#000000;
     background-color:#ffffff;
     width:240px;
}
/* oft verwendete Klasse für eine gut lesbare Default-Zeilenlänge + weißer Hintergrund */
.connorm {
    width: 95%;/*Änderung der Breite, orientiert sich an parent-Elements, statt fester Wert | Hugo*/
     margin-bottom:10px;
     padding-bottom: 1rem; /*etwas mehr Abstand am Seitenende | Hugo*/
     background-color:#ffffff;
}
/* oft verwendete Klasse für eine gut lesbare Default-Zeilenlänge; dasselbe ohne weiße Hintergrundfarbe */
.contrans {
     width:95%;/*Änderung der Breite, orientiert sich an parent-Elements, statt fester Wert | Hugo*/
     background-color:#e1e1e1;
     margin-bottom:10px;
     margin-top:2px;
}
/* z. B. Impressum */
.conlitt {
     width:540px;
     font-size:11px;
     color:#000000;
     background-color:#ffffff;
     padding:3px;
     margin-bottom:10px;
}
.congrey {
     color:#000000;
     background-color:#ffffff;
}
table.congrey {
     width:600px;
}
.congrey td {
     width:300px;
}
.news {
     width:90%; /*Änderung der Breite auf 100% (des parent-Elements) | Hugo*/
     background-color:#ffffff;
}
.ausschr {
     font-size:16px;
     font-weight:bold;
}
/* Begin Various Tags & Classes */
abbr {
    cursor: help;
    }
a.loesung div{
display:none;
color:#000000;
text-decoration:none;
}
a.loesung:hover div{
display:block;
color:#000000;
text-decoration:none;
}

/* media-queries um die Schriftgröße an die Breite des Bildschirms anzupassen | Hugo*/
@media screen and (max-width: 1000px){
    html{
        font-size: 14px;
    }
}

@media screen and (max-width: 700px){
    html{
        font-size: 12px;
    }
}
@media screen and (max-width: 400px){
    html{
        font-size: 11px;
    }
}