/************************************************
 Für die Beispiele relevanter Code
 ***********************************************/

/* Styles für alle Beispielbilder: 
    Besteht ein Beispielbild aus einem HTML-Element mit einem Hintergrundbild, so hat es eine Klasse die mit css-bg-img beginnt, z.B. css-bg-img-2. Mit dem Attribut-Selektor [] können wir alle HTML-Elemente ansprechen die ein bestimmtes Attribut haben (hier: 'class') und das einen bestimmten Wert hat; hier: 'css-big-img' kommt irgendwo ('*=') im Klassenattribut vor.
    */
img,
[class*="css-bg-img"]{
    /* Alle Beispielbilder bekommen dieselbe Breite und Höhe. Hintergrundbilder werden flächendeckend eingesetzt */
    width: 200px;
    height: 50px;
    background-size: cover;
}

/* Das HTML-Element im dritten Beispiel hat das Hintergrundbild 'bild3.jpeg' im Ordner 'bilder' */
.css-bg-img-3{
    background-image: url(../bilder/bild3.jpg);
}

/************************************************
 Code um die Website zu verschönern
 ***********************************************/

/*** Styles für das ganze Dokument. Gleichzeitig wird der Body als Spalte gestylt ***/
body{
    /* Die Schriftgrösse orientiert sich an der im Browser eingestellten Standard-Schriftgrösse und ist 12.5% grösser als diese.
    Die meisten Browser haben 16px als Standard eingestellt und werden so den Fliesstext mit 18px Grösse anzeigen.
    Hat jemand 20px als Standard eingestellt, wird man den Fliesstext mit 22.5px Grösse angezeigt bekommen.
    */
    font-size: 1.125rem;
    /* Maximale Spaltenbreite, damit der Fliesstext lesbar bleibt. 40x die Schriftgrösse. Also je nach Zeichenbreite ca. 45-60 Zeichen pro Spalte */
    max-width: 40em;
    /* Oben und unten kein Aussenabstand.
        Der Abstand links und rechts wird automatisch (je hälftig) verteilt. So kommt die Spalte in die Mitte der Website zu liegen.
    */
    margin: 0 auto;
}

/*** Styles die die Seite strukturieren ***/

/* Jedes Beispiel ist in einer  eigenen <section>. Gib jedem Beispiel etwas Abstand zu den anderen Inhalten. Oben 1.5x die Schriftgrösse, links und rechts nichts, nach unten 3x die Schriftgrösse. */
section{
    padding: 1.5em 0 3em;
}

/* Gib einer Section, die auf eine andere Section folgt, einen Rahmen oben.
    2 Pixel Dicke, durchgehend und mit einem nicht ganz dunklen schwarzen.
    So erzielt man eine Trennlinie zwischen 2 Sections, ohne dass die erste Section einen oberen Rahmen hat.
    */
section + section{
    border-top: 2px solid #333;
}

/*** Allgemeine Styles für einzelne Elemente ***/

/* Zeige alle Bilder auf einer eigenen Zeile an und gib ihnen oben und unten Abstand zu den anderen Inhalten */
img{
    display:block;
    margin: 1em 0;
}

/* Code-Beispiele sollen als eigener Block dargestellt werden, weisse Schrift auf schwarzem Grund, mit etwas Innenabstand, einer besser lesbaren Zeilenhöhe (142% der Schriftgrösse) und Abstand zu weiteren Inhalten. */
code{
    display:block;
    background-color: #333;
    color: white;
    line-height: 1.42;
    padding: 0.5em; /* 50% Innenabstand auf alle Seiten */
    max-width: 78ch;    /* Für bessere Lesbarkeit: Maximale Breite von 78x der Breite des Buchstaben '0' (die Zahl Null). Da in Code-Blöcken Monospace-Fonts verwendet werden, sind diese nun maximal 78 Buchstaben breit */
    margin-bottom: 1em; /* Abstand zu nachfolgenden Inhalten */
}

samp{
    margin: 0.5em;
    background-color: #ddd;
}


/*** Styles für den ersten Abschnitt mit dem Bild der Dateistruktur ***/

figure{
    margin: 1em 0;
}
figure img{
    margin: 0;
}
figcaption{
    font-size: 0.85em;
}
.dateistruktur{
    width: 70%;
    height:auto;
}