/* One button shape on phones. Every page's CSS sizes .btnLink.btn-secondary its own way, which left
   pills, boxes and hairline buttons side by side. Loaded after the page CSS; the eKidz AI page's
   "Gespräch starten" is the reference. Colours stay with each page. */
@media (max-width: 568.98px) {
    body .btn.btn-secondary.btnLink {
        max-width: 100%;
        border-width: 2px !important;
        border-radius: 57px !important;
        padding: 15px 24px !important;
        font-size: 3.5vw !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        text-wrap: balance;
        /* A long word in a narrow column ("Buchstabenkarten") is hyphenated where the browser can
           (needs <html lang>), and broken anyway where it can't, rather than spilling out. */
        -webkit-hyphens: auto;
        hyphens: auto;
        overflow-wrap: anywhere;
    }
}