@charset "UTF-8";

/* CSS Document */

@media all {
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 120%;
        color: #038bd2;
        text-align: center;
        background: #d0eaf6;
    }

    .clear {
        clear: both;
    }

    h1 {
        font-size: 160%;
    }

    /* Überschrift mit ID */
    h2#sonderangebot {
        color: #008000;
        background-color: #ffffa0;
        font-size: 130%;
        font-weight: bold;
    }

    /* Klasse */
    .wichtig {
        color: #ffffff;
        background-color: #ff0000;
    }

    /* ID "hm" für die Hausmesse */
    #hm {
        background: #008000;
        color: #ffffa0;
    }

    h2 {
        font-size: 120%;
        font-style: italic;
        /* kursiv */
    }

    /*
    Kaskadierung: weiter oben steht "italic" (kursiv)
    hier steht jetzt: normal - das zuletzt Gesagte gilt - also "normal"
    */
    h2 {
        font-style: normal;
    }

    /*
    Spezifität: hier steht zwar weiter oben "blau" und weiter unten "rot"
    dh nach dem Prinzip der Kaskasdierung müsste h1 eigentlich  "rot" sein
    h1 mit der Klasse .produkte ist aber "wichtiger" (spezifischer)
    daher gilt hier: "blau"
    */
    h1.produkte {
        color: #008ad1;
        /* blau */
    }

    h1 {
        color: #ff0000;
        /* rot */
    }

    #wrapper {
        width: 60%;
        margin: 0 auto;
        text-align: left;
        background: #ffed00;
        overflow: hidden;
    }

    #inhalt {
        background: #ffffa0;
    }

    #logo {
        background: #ffed00;
    }

    #menu {
        text-align: left;
        margin: 1%;
        background: #ffffa0;
    }

    #menu ul {
        text-align: left;
    }

    #menu ul li {
        list-style-type: none;
        display: inline;
        margin-right: 10px;
    }

    #menu ul li a {
        color: #008ad1;
        font-weight: bold;
        text-decoration: none;
    }

    #menu ul li a:hover {
        color: #004d8d;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    #produkte {
        float: left;
        color: #008ad1;
        background: #ffed00;
        width: 50%;
    }

    #termine {
        float: right;
        text-align: center;
        color: #008ad1;
        background: #ffed00;
        border-left: 4px solid #ffffa0;
        width: 20%;
    }

    article {
        padding-bottom: 2%;
        text-align: center;
    }

    header {
        text-align: center;
    }

    footer {
        margin-top: 5px;
        padding: 0.1% 0;
        background: #ffffa0;
        font-size: 90%;
        text-align: center;
    }
}