/* *********************************************************************************************** */
/* Allgemein gültige Einstellungen zu Rändern und Textabständen ----- */
/* *********************************************************************************************** */
* {
    padding:0;
    margin:0;
}

/* *********************************************************************************************** */
/* BODY - Aussehehn Hintergrund ------------------------------------- */
/* *********************************************************************************************** */
body {
    background: orange;           /* Alternative (mit Bild): background-image:url("DSC04687.jpg"); Vorlage war Farbe #333 (Dunkelgrau)*/
}

/* *********************************************************************************************** */
/* TITEL h1 - Schrifteinstellungen im Titel-------------------------- */
/* *********************************************************************************************** */
h1 {
    font-family:arial;
    font-size:30px;
    font-weight:bolder;
    max-width:800px;
}

/* *********************************************************************************************** */
/* TITEL h2 - Schrifteinstellungen im Titel-------------------------- */
/* *********************************************************************************************** */
h2 {
    font-family:arial;
    font-size:25px;
    font-weight:bold;
    max-width:800px;
}

/* *********************************************************************************************** */
/* Paragraph - Schrifteinstellungen für Fliesstext ------------------ */
/* *********************************************************************************************** */
p {
    font-family:arial;
    font-size:15px;
    padding-top:2px;
    padding-bottom:15px;
    max-width:800px;
}

b {
    font-family:arial;
    font-size:20px;
    font-weight:bold;
}

/* *********************************************************************************************** */
/* Container - Einstellungen für ges. Container --------------------- */
/* Container enthält alle weiteren Elemente, inkl. Seitenleisten ---- */
/* *********************************************************************************************** */
#container {
    background: white;             /* Alternative: leichtes Blau-Grau: #B9D3EE, ist dann allerdings Hintergrund Bilder und Rahmen um alles */
    margin: 15px;                  /* steuert auch Textfluss (Abstand zu Umgebeung), besser als in "#container *" */
    max-width:1600px;              /* maximale Breite des Containers bei Vollbildanzeige */
    flex-wrap:wrap;
    flex-direction:row;
}
#container * {                     /* Einstellungen der Verteilung der Elemente im Container auf der Seite */
        padding-top: 35px;
//        padding-left:15px;        /* Steuert auch Abstand der Links im Fliesstext ?!?!? */
        text-align: left, 15px;
}

/* *********************************************************************************************** */
/* Kopfzeile - alle Einstellungen für Formatierung ------------------ */
/* *********************************************************************************************** */
#header { 
        background: #FEEC8B;          /* urspr: #aa8147 (helles Kackbraun) */
        font-size:35px;
        font-family:arial;
        font-weight:bold;
        padding:25px;
        text-align:center;
}

/* *********************************************************************************************** */
/* Navigationsleiste - alle Einstellungen für Formatierung ---------- */
/* *********************************************************************************************** */
#nav-main { 
        background: chocolate;      /* urspr: #97a2aa (etwas gar dunkles Grau */
        font-size:20px;
        font-family:Arial;
        font-weight:bold;
        padding-left:225px;
        padding-bottom:15px;
        padding-top:15px;
}
/* Behelfs-Navigation, damit etwas rechts ausgerichtet werden kann. Allerdings nur mit grossem Abstand zum linken Rand */
#nav-main-left {                    /* extra eingefügt, dass oben ein Link "zurück" eingefügt werden kann. Ausrichtung rechts */
        background: chocolate;      /* urspr: #97a2aa (etwas gar dunkles Grau */
        font-size:20px;
        font-family:Arial;
        font-weight:bold;
        text-align:right;          /* Text-Ausrichtung rechts */
        padding-right:15px;        /* Textabstand zum rechten Rand */
        padding-bottom:15px;
        padding-top:15px;
}

#content {padding:0;}               /* noch keine Ahnung, was das bewirkt */

#main { background: white; }        /* noch keine Ahnung, was das bewirkt */

/* *********************************************************************************************** */
/* linke Seitenleiste - alle Einstellungen für Formatierung --------- */
/* *********************************************************************************************** */
#sidebar { 
        background: #f0f3f5;
        font-size:16px;
        font-family:Arial;
        padding-left:25px;
        max-width:200px;
        min-width:150px;
}

/* *********************************************************************************************** */
/* rechte Seitenleiste - alle Einstellungen für Formatierung -------- */
/* *********************************************************************************************** */
#sidebar2 { 
        background: #f0f3f5;              /* Urspr: komisches grün #daedc1; */
        font-size:16px;
        font-family:Arial;
        padding-left:25px;
}

/* *********************************************************************************************** */
/* Fusszeile - alle Einstellungen für Formatierung ------------------ */
/* *********************************************************************************************** */
#footer {
        background: #353535;
        color: white;
        padding:35px;
        font-family:arial;
}
.right {
	position: right;
}

/* *********************************************************************************************** */
/* Anordnung der obigen Elemente auf der Seite für kleine Bildschirme ---------------------- */
/* *********************************************************************************************** */
@media screen and (min-width:800px) {
    
    body {
        margin:20px;
    }
    
    #content {
        display:-webkit-flex;
        display:flex-row;
    }
    
    #main {
        -webkit-flex:3;             /* steuert ??? */
        flex:3;                     /* steuert ??? */
        -webkit-order:2;            /* steuert ??? */
        order:2;                    /* steuert ??? */
    }
    
    #sidebar {
        -webkit-flex:1;
        flex:1; 
        -webkit-order:1;
        order:1;
    }
    
    #sidebar2 {
        -webkit-flex:1;
        flex:1;
        -webkit-order:3;
        order:3;
    }
}

/* *********************************************************************************************** */
/* Boxen im Hauptteil der Seite ---------------------- */
/* *********************************************************************************************** */
#box1 {
    background:rgba(255,255,255,0);         /* Hintergrund transparent, Wert am Schluss: 0 = 100% Transparenz */
    -webkit-flex: 1;
    flex: 0 1 auto;
    -webkit-order:1;
    order:1;
    font-family:arial;
    font-size:20px;
    padding-left:20px;
    flex-wrap; wrap;
    flex-direction: row;
}

#box2 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:3;
    order:3;
    font-family:arial;
    font-size:20px;
    padding-left:20px;
    flex-wrap; wrap;
    flex-direction: row;
}

#box3 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:3;
    order:3;
    font-family:arial;
    font-size:20px;
    padding-left:20px;
    flex-wrap; wrap;
    flex-direction: row;
}

/* *********************************************************************************************** */
/* Boxen in der Seiteleiste links, beginnend mit Nr. 100 ---------------------- */
/* *********************************************************************************************** */
#box100 {
    background:rgba(255,255,255,0);         /* Hintergrund transparent, Wert am Schluss: 0 = 100% Transparenz */
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:1;
    order:2;
/*    position:fixed; */
    
}

#box101 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
}

#box101-1 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:15px;
    padding-bottom:15px;
}

#box101-2 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:5px;
    padding-bottom:15px;
}

#box101-3 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:5px;
    padding-bottom:15px;
}

#box101-4 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:5px;
    padding-bottom:15px;
}

#box101-5 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:5px;
    padding-bottom:15px;
}

#box101-6 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:5px;
    padding-bottom:15px;
}
#box101-7 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:5px;
    padding-bottom:15px;
}
#box101-8 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:5px;
    padding-bottom:15px;
}
#box101-9 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:5px;
    padding-bottom:15px;
}
#box101-10 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:5px;
    padding-bottom:15px;
}
#box101-11 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:5px;
    padding-bottom:15px;
}
#box101-12 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:5px;
    padding-bottom:15px;
}

#box101-13 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:2;
    order:3;
    padding-left:35px;
    padding-top:5px;
    padding-bottom:15px;
}


#box102 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:3;
    order:4;
}

#box103 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:4;
    order:5;
}

#box125 {
    background:rgba(255,255,255,0);
    -webkit-flex: 1;
    flex: 1;
    -webkit-order:4;
    order:25;
    padding-top:100px;
    padding-bottom:25px;
}
/* *********************************************************************************************** */
/* Ende Boxen in der Seiteleiste links ---------------------- */
/* *********************************************************************************************** */


/* *********************************************************************************************** */
/* Aussehen der Links (alle Varianten) steuern */
/* *********************************************************************************************** */
a:link {                                    /*wie soll ein Link generell aussehen? */
    font-family:Arial;
    color:#000000;
    text-decoration:none;
}
a:visited {                                 /* wie sieht ein besuchter Link aus? */
    font-family:Arial;
    color:#000000;
    text-decoration:none;
}
a:hover {                                   /* beim Überfahren mit dem Mauszeiger */
    font-family:Arial;
    font-weight:bold;
    color:#000000;
    text-decoration:underline;
}
a:active {                                  /* Aktiver Link. Ist solange 'aktiv', wie die Maustaste gedrückt ist */
    color:#000000;
    font-weight:bolder;
    font-size:14pt;
    text-decoration:underline;
} 

/* Dropdown-Versuch, Beispiel von:https://www.w3schools.com/howto/howto_css_dropdown.asp */
/* Dropdown Button */
.dropbtn {
    background-color: #f1f1f1;      /* Urspr.: #4CAF50 */
    color: black;                     /* Urspr.: white */
    padding: 10px;
    font-size: 16px;
    border: none;
    max-width:140px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding-left: 20px;
    padding-bottom: 0px;
    padding-top: 0px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #f1f1f1;}       /* Urspr.: #3e8e41 */