/*
|--------------------------------------------------------------------------
| Heimathaus Achmer – gemeinsame Lesbarkeit
|--------------------------------------------------------------------------
| Öffentliche Seiten + Backend
*/

html {
    -webkit-text-size-adjust:100%;
}

body {
    font-size:15px;
    line-height:1.5;
}


/* ---------------------------------------------------------
   Grundtexte
   --------------------------------------------------------- */

p,
li {
    font-size:15px !important;
    line-height:1.55;
}

label {
    font-size:13px !important;
    line-height:1.4;
}

small,
.hint,
.help,
.note,
.subtitle,
.legal,
.muted,
.data-label,
.panel-subtitle,
.card-subtitle {
    font-size:12.5px !important;
    line-height:1.5;
}


/* ---------------------------------------------------------
   Formulare
   --------------------------------------------------------- */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    font-size:15px !important;
}

button,
.button,
.btn,
input[type="submit"] {
    font-size:14px !important;
}


/* etwas angenehmere Klickflächen */

button,
.button,
.btn {
    min-height:40px;
}

input:not([type="checkbox"]):not([type="radio"]),
select {
    min-height:40px;
}


/* ---------------------------------------------------------
   Hinweise / Meldungen
   --------------------------------------------------------- */

.flash,
.errors,
.notice,
.availability,
.calendar-info {
    font-size:13px !important;
    line-height:1.5;
}


/* ---------------------------------------------------------
   Tabellen / Backend
   --------------------------------------------------------- */

table {
    font-size:13px;
}

th {
    font-size:12px !important;
}

td {
    font-size:13px;
}

.nav a,
.sidebar a {
    font-size:13px !important;
}

.hh-eyebrow,
.kicker,
.eyebrow {
    font-size:11px !important;
}


/*
|--------------------------------------------------------------------------
| Inline-Mini-Texte aus älteren Views
|--------------------------------------------------------------------------
*/

[style*="font-size:7px"],
[style*="font-size: 7px"],
[style*="font-size:8px"],
[style*="font-size: 8px"] {
    font-size:10px !important;
}

[style*="font-size:9px"],
[style*="font-size: 9px"] {
    font-size:11px !important;
}

[style*="font-size:10px"],
[style*="font-size: 10px"] {
    font-size:12px !important;
}

[style*="font-size:11px"],
[style*="font-size: 11px"] {
    font-size:13px !important;
}


/*
|--------------------------------------------------------------------------
| Kalender – Desktop
|--------------------------------------------------------------------------
*/

.calendar-hero p {
    font-size:15px !important;
}

.month-title {
    font-size:24px !important;
}

.weekday {
    font-size:12px !important;
}

.day-number {
    font-size:14px !important;
}

.status {
    font-size:12px !important;
    line-height:1.3;
}

.public-event {
    font-size:11px !important;
    line-height:1.3;
}

.legend {
    font-size:13px !important;
}

.nav-button {
    min-width:44px;
    min-height:44px;
}


/*
|--------------------------------------------------------------------------
| Smartphone
|--------------------------------------------------------------------------
*/

@media (max-width:700px) {

    /*
     * 16px verhindert auf iPhone zusätzlich
     * das automatische Hineinzoomen in Formularfelder.
     */

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size:16px !important;
    }


    .calendar-main {
        padding-left:8px !important;
        padding-right:8px !important;
        margin-top:18px !important;
    }

    .calendar-header {
        padding:12px 10px !important;
    }

    .month-title {
        font-size:20px !important;
    }

    .weekday {
        padding:9px 1px !important;
        font-size:10px !important;
        letter-spacing:0;
    }

    .day,
    .empty-day {
        min-height:82px !important;
        padding:4px !important;
    }

    .day-number {
        font-size:14px !important;
        margin-bottom:6px !important;
    }


    /*
     * Lange Wörter passen in der 7-Spalten-
     * Ansicht auf Smartphones schlecht.
     * Deshalb kurze, aber eindeutige Statusangaben.
     */

    .calendar-main .status {
        font-size:0 !important;
        min-height:27px;
        padding:6px 2px !important;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .calendar-main .free .status::after {
        content:"Frei";
        font-size:10px;
        font-weight:800;
    }

    .calendar-main .unavailable .status::after {
        content:"Belegt";
        font-size:10px;
        font-weight:800;
    }

    .calendar-main .arrangement .status::after {
        content:"Absp.";
        font-size:10px;
        font-weight:800;
    }

    .calendar-main .past .status::after {
        content:"–";
        font-size:10px;
    }


    /*
     * Öffentliche Vereinsveranstaltungen:
     * lesbarer, aber maximal zwei Zeilen.
     */

    .calendar-main .public-event {
        font-size:10px !important;
        line-height:1.2;
        padding:4px 2px !important;
        overflow:hidden;

        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }

    .legend {
        padding:12px !important;
        gap:10px !important;
        font-size:12px !important;
    }

    .calendar-info {
        padding:14px !important;
        font-size:13px !important;
    }
}


/*
|--------------------------------------------------------------------------
| Backend mobil
|--------------------------------------------------------------------------
*/

@media (max-width:900px) {

    .main {
        padding-left:14px !important;
        padding-right:14px !important;
    }

    .box,
    .table-wrap {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}