/*Allgemein  */

* {                                             /* * für ganze Auswahl*/
    margin: 0;                                  /* Aussenabstand*/
    padding: 0;                                 /* Innenabstand*/
    
    font-family: calibri;                       /* Schrift*/
}
            /*Navigation  */

.wrapper {
    width: 960px;                              /*unsichtbarer Rhamen*/
    max-width: 90%;
    margin: 0 auto;
}

#navigation {
    position: fixed; /*Navigation Banner*/
    top: 0;
    z-index: 10;
    width: 100%; /* breite*/
    height: 100px; /* Höhe*/
    background-color: rgba(204, 255, 255,0.6); /* Farbe, Transparents*/
}


#logo {   
    
    width: 60px;                                /*Breite*/
    height:  60px;                              /*Höhe*/
    float: left;                                /*Links ausrichten*/
    margin: 20px;                               /*Aussenabstand*/
    
}

    #logo p {                                   /*SchachAir Design (Logo)*/
        font-family: Calibri;
        text-align: left;
        padding: 20px;                          /*Randabstand*/
        font-size: 1.3em;
        line-height: 0.8;
        color: #274e71;
        float: right;
    }
    
#menu {
    float: right;
    margin-top: 35px;
    margin-right: 30px;
}
                              /**/
    #menu a { /*Schrift und Ausrichtung!*/

        padding-right: 10px;
        padding-top: 35px;
        font-family: Calibri;
        font-size: 1.2em;
        color: #274e71;
        float:  unset;
    }                            /**/

#menu a:hover {
    
    border-top: solid #284e81;                /*Balken über der Menuanzeige*/
    
}
    

    /*Banner*/

#banner {
    text-align: center;
    width: 100%;                                /*Das width-CSS-Property ist eine Eigenschaft, die bestimmt, wie breit ein HTML-Element dargestellt wird. 
                                                Der Wert 100% in dem Beispiel width: 100%; bedeutet, dass das Element die gesamte verfügbare Breite des übergeordneten Elements ausfüllen soll.
                                                Du kannst auch andere Werte für das width-Property angeben, um die Breite von Elementen zu steuern. 
                                                Zum Beispiel könntest du width: 50px; verwenden, um das Element auf eine festgelegte Breite von 50 Pixel zu setzen, 
                                                oder width: 30%; verwenden, um die Breite des Elements in Prozent der verfügbaren Breite des übergeordneten Elements zu definieren.
                                                Das width-Property kann auf alle HTML-Elemente angewendet werden, aber es hat unterschiedliche Auswirkungen auf die Art und Weise, wie das Element dargestellt wird. 
                                                Zum Beispiel wird das width-Property für Block-Elemente wie div und p verwendet, um die Breite des Elements und den Platz, den es auf der Seite einnimmt, zu steuern. 
                                                Für inline-Elemente wie span und a wird das width-Property verwendet, um die Breite des Elementinhalts, aber nicht den Platz, den das Element auf der Seite einnimmt, zu steuern.*/

    height: 600px;                              /*Höhe*/                      
    z-index: 0;
    margin-bottom: 50px;
    background: url(konturen.svg);
    background-size: cover;
    padding-top: 140px;
}

#banner3 {
    text-align: center;
    height: 600px;
    z-index: 0;
    margin-bottom: 50px;
    background: url(konturen2.svg);
    background-size: cover;
    padding-top: 140px;
    font-family: Calibri;
}

    #banner3 h1 {
        text-align: center;
        color: #274e71;
        font-size: 3em;
        opacity: 0.8;
        font-family: Calibri;
    }






#banner2 {
    width: 100%;
    height: 300px;
    z-index: 0;
    margin-bottom: 50px;                           /*margin-bottom: 50px; ist ein CSS (Cascading Style Sheets) Befehl, der den unteren Rand eines HTML-Elements um 50 Pixel erhöht. 
                                                   Es gibt auch die Möglichkeiten margin-top, margin-left und margin-right zu verwenden, um die Ränder oben, links und rechts zu verändern. 
                                                   Der Wert kann in Pixeln (px) oder anderen Einheiten wie Prozent (%), em oder rem angegeben werden.*/



    background: url(konturen3.svg);
    background-size: cover;
    padding-top: 200px;
}

#banner2 h1{
    

    
    text-align: center;
    color: #274e71;
    font-size: 3em;
    opacity: 0.8;
    font-family: Calibri; 
  
}
#banner h1{
    

    
    text-align: center;
    color: #274e71;
    font-size: 3em;
    opacity: 0.8;
    font-family: Calibri; 
  
}


#content{
    
    margin-top: 50px;
}

#bild1 {    
    
/*Bild Basel 2.0 Esche mit Lasergravur
Um das gesamte Element mit der ID "bild1" zu zentrieren, 
können Sie die Eigenschaft margin: auto; hinzufügen. Diese Eigenschaft sorgt dafür, dass der obere, 
untere, linke und rechte Rand automatisch berechnet werden und das Element in der Mitte ausgerichtet wird.*/

    width: 29%;
    height: 249px;
    background: url(basel3.jpg);
    background-size: cover;
    margin: auto;
}


#bild2 {


    width: 50%;
    height: 249px;
    background: url(3dbossi.svg);
    background-size: cover;
    margin: auto;
}



#texthome2 {
    text-align: center;
    font-size: 1.5em;
    padding-top: 20px;
    padding: 20px;
    border-style: dotted;
}

#texthome5 {
    text-align: center;
    font-size: 1.5em;
    padding-top: 20px;
    padding: 20px;
    border-style: dotted;
}












#texthome3 {
    padding: 50%;                           /*Innenabstand    ------------------------------------------------------*/
    font-family: Arial;                     /*Schriftfamilie*/
    text-align: left;
                                            /*text-decoration: underline;
                                            line-height: 2.0em; /* Abstand zwischen dem Text und Unterstreichung */ 
    padding: 20px;                          /*Randabstand*/
    font-size: 1.2em;                       /*Schriftgrösse*/
    line-height:1.6em;

}
#texthome4 {
    padding: 50%; 
    font-family: Arial; 
    text-align: left;
    padding: 20px; 
    font-size: 1.2em; 
    line-height: 1.6em;
}


#texthome {                                 /*Text-Rand*/


    padding: 50%;                           /*Innenabstand    ------------------------------------------------------*/
    font-family: Arial;                     /*Schriftfamilie*/
    text-align: center;
                                            /*Das text-align-CSS-Property ist eine Eigenschaft, die bestimmt, wie Text innerhalb eines Elements ausgerichtet wird. 
                                            Mit dem Wert center wird der Text in der Mitte des Elements ausgerichtet. border: 6px;*/


    border-style: dotted;                   /*Das border-style-CSS-Property ist eine Eigenschaft, die bestimmt, wie die Grenzen von HTML-Elementen 
                                            gestaltet werden. Es gibt verschiedene mögliche Werte für das border-style-Property, die unterschiedliche Designs für die 
                                            Grenzen von Elementen ermöglichen.
                                            Der Wert dashed ist einer dieser möglichen Werte und erzeugt eine gestrichelte Grenze um das Element. 
                                            Die Linie wird durch kurze Striche dargestellt, die sich wiederholen und von einem festgelegten Abstand unterbrochen werden. 
                                            Die Länge und Dicke der Striche und der Abstand zwischen ihnen können mit anderen CSS-Properties wie border-width oder 
                                            border-spacing gesteuert werden.solid: Erzeugt eine durchgehende, solide Linie um das Element.

                                            dotted: Erzeugt eine Linie aus Punkten um das Element. Die Punkte sind durch festgelegte Abstände voneinander getrennt.
                                            double: Erzeugt eine doppelte Linie um das Element. Die Linien sind voneinander getrennt und haben die festgelegte Linienbreite.
                                            groove: Erzeugt eine "Nute" um das Element. Die Nute besteht aus dunkleren und hellen Bereichen, die sich abwechseln und die Linienbreite und Farbe des Elements widerspiegeln.
                                            ridge: Ähnlich wie groove, aber die dunklen und hellen Bereiche befinden sich auf der gegenüberliegenden Seite.
                                            inset: Erzeugt eine "eingebettete" Grenze um das Element. Die Grenze wird durch dunklere und hellere Bereiche dargestellt, die sich abwechseln und das Element einrahmen.
                                            outset: Ähnlich wie inset, aber die dunklen und hellen Bereiche befinden sich auf der gegenüberliegenden Seite*/








    border-color: Black;                    /*Schriftfarbe*/
    padding: 20px;                          /*Randabstand*/
    font-size: 1.5em;                       /*Schriftgrösse*/
    line-height: 1.4em;                     /*Zeilenabstand*/
}