/*------------------------------ HTML-TAGS -----------------------------------*/

/*
 * Tags die nicht mit . oder # beginnen nehmen direkten Bezug auf HTML-Tags,
 * denen keine id oder class zugewiesen wird.
 * 
 * Das body-Tag findest Du in der HTML-Seite index.html wieder.
 * Hier wird mit background-color die Hintergrundfarbe festgelegt.
 * Mit width wird die Breite des body auf 50% der Seitenbreite festgelegt.
 * Durch margin: auto wird der body auf der Seite zentriert.
 * Aufgrund der Prozent-Angaben passen sich untergeordnete Objekte der Größe 
 * automatisch an, wenn der Benutzer die Fenstergröße verändert.
 * Grundsätzlich erzeugt margin Platz um das Objekt (hier der body) herum.
 */
body
{
    background-color: #D6F5FA;
    width: 50%;
    margin: auto;
}

/*
 * footer werden gerne am unteren Ende der Seite eingesetzt und kapseln
 * meistens das Impressum. Das footer-Tag findest Du unten in der index.html
 */
footer
{
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #0482B4;
}

/*
 * figcaption gehört zum figure-Tag und stellt eine Beschriftung, z.B. für ein
 * image dar. Du findest das figure-Tag in der index.html als Container
 * für den QR-Code.
 *
 * Durch text-align: center wird der Text zentriert dargestellt,
 * margin-top: 0.5em setzt den Abstand zum übergeordneten Container.
 * Im englischen System gibt es kein Dezimalkomma, da wird der Punkt genutzt.
 * Daher 0.5em NICHT 0,5em.
 */
figcaption
{
    text-align: center;
    margin-top: 0.5em;
}

/*------------------------------ KLASSEN-TAGS --------------------------------*/

/*
 * CSS-Tags, die mit einem . beginnen bezeichnen eine Klasse und werden
 * in der index.html mehrfach verwendet. Das unterscheidet sie zu CSS-Tags,
 * die mit # beginnen.
 *
 * Du findest die class="center" bei der Angabe der Musiker.
 *
 * display: inline-block ist zwingend notwendig, um den Text zu zentrieren.
 * text-align: center Zentriert den Text auf der Seite.
 * width: 100% ist wichtig für automatische Größenapassung.
 * color: #0482B4 Setzt die Text-Farbe.
 */
.center
{
    display: inline-block;
    text-align: center;    
    width: 100%;
    color: #0482B4;
}

/*
 * Diese Klasse wird auf mehrere Container in der index.html angewendet.
 * Die Breitenanbage iat wichtig, damit sich die Container automatisch 
 * an die Fenstergröße anpassen.
 */
.width_hundred
{
    width: 100%;
}

/*
 * font-size: 2em Setzt die Schriftgröße. Wir werden weiter unten sehen,
 * wozu das wichtig ist. 
 * 
 * Zur Beachtung: Die class="musicians" wird in der index.html zusammen mit
 *                der class="center" den p- und a-Tags zugewiesen, in denen
 *                die Musiker angezeigt werden. 
 *                Man kann also einem HTML-Tag mehrere Klassen zuweisen:
 *                class="center musicians" Wichtig ist hier das Leerzeichen
 *                zwischen center und musicians.
 */
.musicians
{
    margin-bottom: 0.5em;
    font-size: 2em;
}

/*------------------------------ ID-TAGS -----------------------------------*/

/*
 * CSS-Tags, die mit einem # beginnen bezeichnen Objekte in der index.html,
 * denen eine id zugewiesen wird. Du findest die id="language" oben gleich
 * dort, wo der <div> beginnt. WICHTIG: Diese id darf in der index.html nur
 * einmal benutzt werden. Eine Mehrfachnutzung produziert einen Fehler.
 *
 * Mit position: absolute wird die Position auf der Seite fixiert, so dass
 * sie nicht verändert werden kann. Mit right und top wird der Abstand 
 * zum oberen und rechten Rand der Seite festgelegt.
 */
#language
{
    position: absolute;
    right: 10px;
    top: 5px;
}

/*
 * Die id heading wird NUR auf das Bild mit dem Titel angewendet.
 */
#heading
{
    margin-top: 2em;
    margin-bottom: 1em;
}

/*
 * Die id contact wird NUR auf das Bild mit der E-Mailadresse angewendet.
 */
#contact
{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/*
 * Für den QR-Code werden feste Werte für Breite und Höhe angegeben,
 * da bei Prozentangaben das Bild so unscharf werden kann, dass es nicht
 * mehr fehlerlos gescannt wird. Sie werden weiter unten in den media-queries
 * noch angepasst.
 *
 * display: block und margin: auto sind wichtig, um das Bild zentriert 
 * anzuzeigen.
 */
#qrcode
{
    height: 200px;
    width: 200px;
    display: block;
    margin: auto;
}

#spende
{
    font-size: 1.2em;
    margin: 0;
}

#imprint
{
    font-size: 1.5em;    
}

#imprint_contact
{
    width: 60%;
    height: 10%;
}

/*----------------------------- MEDIAQUERIES ---------------------------------*/
/*
 * Mit media-queries erweitert man das responsive Design.
 * In Abhängigkeit der Fenstergröße werden einige Tags, die Du oben
 * findest, weiter angepasst. Bei den musicians z.B. wird die Schriftgröße
 * verändert, damit das Gesamtbild besser aussieht.
 * 
 * Hier kann man unheimlich viel rumspielen. Dabei hilft die Größenangabe am
 * unteren Ende der HTML-Seiten.
 */
@media only screen and (max-width: 1204px)
{
    .musicians
    {
        font-size: 1.8em;
    }
}

@media only screen and (max-width: 760px)
{
    .musicians
    {
        font-size: 1.5em;
    }
}

@media only screen and (max-width: 550px)
{
    .musicians
    {
        font-size: 1.2em;
    }
    
    /*
     * Passe das Bild mit dem QR-Code an, damit es weiterhin zentriert wird.
     */
    #qrcode
    {
        height: 150px;
        width: 150px;
    }
    
    #spende
    {
        font-size: 1em;
    }
}