/* Eigene Ergaenzungen zum uebernommenen Template.
   Bewusst in einer eigenen Datei, damit sie beim Vergleich mit dem Original
   sofort erkennbar sind. */

/* Der "mehr"-Button im Hero scrollte frueher per JavaScript (Gridbox-Modul
   scroll-to). Er hat jetzt einen echten Anker und funktioniert damit auch
   ohne JavaScript. Sanft scrollen wir per CSS. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Die Kopfzeile liegt fixiert ueber dem Inhalt. Ohne Versatz verschwindet
   die erste Zeile des Zielabschnitts darunter. */
.ba-section[id] {
    scroll-margin-top: 100px;
}

@media (max-width: 48rem) {
    .ba-section[id] {
        scroll-margin-top: 70px;
    }
}

/* "Kundenportal"-Knopf im Kopfbereich.

   Das Template kennt fuer diesen Knopf 17px als Grundgroesse und 13px erst
   unterhalb von 414px. Moderne Telefone sind breiter (iPhone 14 Pro Max:
   430px) und landen damit bei 17px - der Text bricht um und der Knopf
   ueberlagert die Kopfzeile.

   Deshalb nur die Luecke zwischen 415px und 667px schliessen; unterhalb
   davon bleibt die 13px-Regel des Templates gueltig. */
@media (min-width: 415px) and (max-width: 667px) {
    #item-17298457718740 .ba-button-wrapper a span {
        font-size: 15px;
    }
}

/* Fusszeile auf grossen Telefonen.

   Dieselbe Luecke wie beim Kundenportal-Knopf: Die Mobilregeln des Templates
   enden bei 414px, das iPhone Pro Max ist 430px breit. Der Abstand unter der
   Fusszeile bleibt dadurch zu klein und die fixierte Leiste am unteren Rand
   schneidet den letzten Link ("Datenschutz") ab. */
@media (min-width: 415px) and (max-width: 667px) {
    #item-16050927122650 {
        margin-bottom: 65px;
    }
}