/* ==================================================
   UEBERSCHRIFT IM KOPFBILD
   .col-headerbild_title h1 besteht aus zwei Teilen: normalem Text in Roboto
   und dem Schreibschrift-Teil in .header-style.

   In bc-style.min.css stehen dafuer acht ueber die Datei verstreute Regeln
   mit Bruechen bei 570, 500, 450, 435, 420 und 364 Pixeln, teils mit
   !important. Gemessen kam dabei heraus:

       ab 768px      42 / 59
       570px         46 / 42      <- groesser als am Desktop
       500px         46 / 30
       450px         46 / 48
       ab 420px      35 / 35

   Also wurde die Ueberschrift auf dem Tablet groesser statt kleiner, und die
   Schreibschrift sprang zwischen 30 und 48 hin und her.

   Diese Datei legt eine durchgehend fallende Staffel darueber. Sie wird nach
   bc-style.min.css eingebunden (get_gulp_sources) und setzt !important, weil
   ein Teil der alten Regeln das ebenfalls tut. Die alten Regeln bleiben
   unangetastet - sie greifen nur nicht mehr.

   Das Verhaeltnis der beiden Teile bleibt wie am Desktop, die
   Schreibschrift ist rund 1,4-mal so gross wie der Roboto-Teil.
   ================================================== */

@media (max-width: 992px) {

    .col-headerbild_title h1,
    .collection_content.col-headerbild_title h1 {
        font-size: 38px !important;
    }

    .col-headerbild_title h1 .header-style,
    .collection_content.col-headerbild_title h1 .header-style {
        font-size: 52px !important;
    }
}

@media (max-width: 570px) {

    .col-headerbild_title h1,
    .collection_content.col-headerbild_title h1 {
        font-size: 34px !important;
    }

    .col-headerbild_title h1 .header-style,
    .collection_content.col-headerbild_title h1 .header-style {
        font-size: 46px !important;
    }
}

@media (max-width: 420px) {

    .col-headerbild_title h1,
    .collection_content.col-headerbild_title h1 {
        font-size: 30px !important;
    }

    /* Ab hier steht die Schreibschrift in einer eigenen Zeile - die Regel
       dafuer (display: block) kommt aus bc-style.min.css und bleibt. */
    .col-headerbild_title h1 .header-style,
    .collection_content.col-headerbild_title h1 .header-style {
        font-size: 40px !important;
    }
}

@media (max-width: 360px) {

    .col-headerbild_title h1,
    .collection_content.col-headerbild_title h1 {
        font-size: 26px !important;
    }

    .col-headerbild_title h1 .header-style,
    .collection_content.col-headerbild_title h1 .header-style {
        font-size: 34px !important;
    }
}


/* ==================================================
   STARTSEITE: KOPFBILD AM HANDY
   Titel "Bindlacher Nachrichten" und die beiden App-Knoepfe liegen mittig
   (top: 50%, translate -50%) auf dem Bild. ek.css macht das Bild unter
   450px nur 210px hoch, der Block aus Titel und zwei untereinander
   stehenden Knoepfen war aber 259px hoch - oben rutschte der Titel unter
   die Kopfzeile, unten wurde der App-Store-Knopf abgeschnitten.

   Hier: Knoepfe nebeneinander und etwas kleiner, Titel kompakter. Der
   Block ist dann rund 140px hoch und passt mit Luft in die 210px.
   Selektoren mit body.home, weil ek.css nach dieser Datei geladen wird
   und die Knopfgroesse mit !important setzt.
   ================================================== */

@media (max-width: 767px) {

    body.home #slider #slider-title {
        top: 50% !important;
        width: 100%;
        padding: 0 16px !important;
    }

    body.home #slider .header-title h1 {
        font-size: 32px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }

    /* bc-style.min.css zieht die Schreibschrift-Zeile mit margin-top: -20px
       am umgebenden div an "Bindlacher" heran - am Handy liegen die beiden
       Zeilen dadurch uebereinander. */
    body.home #slider .header-style {
        margin: 0 !important;
    }

    body.home #slider .header-style h1 {
        font-size: 44px !important;
        line-height: 1.1 !important;
        margin: 2px 0 0 !important;
    }

    body.home #slider .app-download-button_wrap {
        display: flex !important;
        justify-content: center;
        gap: 10px;
        margin-top: 14px;
    }

    body.home #slider .slider-title-content-subtitle .app-download-button {
        margin: 0 !important;
    }

    body.home #slider .app-download-button .link-to-store img {
        width: 128px !important;
        height: 38px !important;
    }
}

/* Sehr schmale Geraete (iPhone SE 1. Gen., 320px): Knoepfe passen
   nebeneinander, nur etwas kleiner. */
@media (max-width: 360px) {

    body.home #slider .header-title h1 {
        font-size: 28px !important;
    }

    body.home #slider .header-style h1 {
        font-size: 38px !important;
    }

    body.home #slider .app-download-button .link-to-store img {
        width: 118px !important;
        height: 35px !important;
    }
}