/* ---------------------------------------------------------------------------
   Eigene Anpassungen am Theme "Solid State".
   ---------------------------------------------------------------------------
   Bewusst als eigene Datei nach main.css geladen, damit das Theme selbst
   unveraendert bleibt und man jederzeit sieht, was von uns stammt.
   --------------------------------------------------------------------------- */

/* --- Bilder passen sich der Bildschirmbreite an ---------------------------
   Dem Theme fehlt eine allgemeine Regel dafuer. Das Logo (680 px breit) und
   das Vereinslogo im Banner liefen deshalb auf dem Handy aus dem Bild. */

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

/* --- Banner ---------------------------------------------------------------
   #banner .inner stand auf einer festen Breite von 55em (880 px). Auf allem,
   was schmaler ist, erzwang das horizontales Scrollen. */

#banner .inner {
    width: auto;
    max-width: 55em;
}

#banner .logo img {
    max-width: 100%;
    height: auto;
}

/* Die kleinere Fassung der Hintergrundillustration: 252 KB statt 13 MB.
   Der Unterschied ist nicht zu sehen, weil ohnehin ein zu 90 % weisser
   Schleier darueberliegt - aber jeder Seitenaufruf wird spuerbar schneller. */

@media screen and (orientation: portrait), screen and (orientation: landscape) {
    #banner {
        background-image:
            linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
            url("../../images/illustration_web.jpg");
        background-size: auto, cover;
        background-position: center, center;
    }
}

/* --- Rundes Bild im Spotlight ---------------------------------------------
   Das Theme schneidet Spotlight-Bilder per border-radius:100% zu einem Kreis.
   Beim quadratischen Vereinslogo lag die rechte untere Ecke dadurch knapp
   ausserhalb des Kreises. Gemessen reicht das Logo bis 92,8 % der Breite und
   82,7 % der Hoehe, das ergibt einen Abstand von 0,539 Seitenlaengen zur
   Mitte - noetig waeren also rund 4 % Rand. 8 % geben etwas Luft, ohne das
   Logo unnoetig zu verkleinern. */

.wrapper.spotlight .image img {
    background: #fff;
    padding: 8%;
    box-sizing: border-box;
}

/* --- Kleine Bildschirme --------------------------------------------------- */

@media screen and (max-width: 736px) {

    #banner {
        padding: 3em 1.5em 3.5em 1.5em;
    }

    /* Der Schriftzug soll nicht die halbe Hoehe des Handys einnehmen */
    #banner .logo img {
        max-width: 88%;
    }

    /* Bild und Text im Spotlight untereinander statt nebeneinander */
    .wrapper.spotlight .inner {
        display: block;
    }

    .wrapper.spotlight .image {
        width: 100%;
        max-width: 20em;
        margin: 0 auto 1.5em auto;
    }
}