/* =========================================================
   RESPONSIVE KORREKTUR TEMPERATURRECHNER
   ========================================================= */

/* Verhindert horizontales Überlaufen der Seite */
html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
}


/* Flex-Container dürfen durch Inhalte nicht breiter werden */
.row {
    width: 100%;
    max-width: 100%;
}


/* Hauptbereich darf seine Flexbreite nicht durch
   einen zu breiten Inhalt vergrößern */
.main {
    min-width: 0;
    max-width: 100%;
}


/* =========================================================
   TEMPERATURRECHNER
   ========================================================= */

.temp-rechner {
    width: 100%;
    max-width: 700px;
    min-width: 0;

    margin: 20px auto;
    padding: 20px;

    box-sizing: border-box;

    border: 1px solid #ccc;
    border-radius: 10px;

    background: #f8f8f8;

    overflow: hidden;
}


/* Eingabezeilen */

.temp-zeile {
    display: grid;

    grid-template-columns: 180px minmax(0, 1fr);

    width: 100%;
    max-width: 100%;
    min-width: 0;

    gap: 10px;

    align-items: center;

    margin-bottom: 12px;

    box-sizing: border-box;
}


.temp-zeile label {
    min-width: 0;
}


.temp-zeile input {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;
}


/* =========================================================
   GRID-WRAPPER
   ========================================================= */

.grid-5Sp-wrapper {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   GRID
   ========================================================= */

.grid-5Sp {
    display: grid;

    grid-template-columns:
        max-content
        max-content
        max-content
        max-content
        max-content;

    width: max-content;

    max-width: none;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    border: 1px solid #999;
}


.grid-5Sp > div {
    padding: 8px 10px;

    box-sizing: border-box;

    border-right: 1px solid #999;
    border-bottom: 1px solid #999;

    white-space: nowrap;
}


/* Rechte Außenkante */

.grid-5Sp > div:nth-child(5n) {
    border-right: none;
}


/* Untere Außenkante */

.grid-5Sp > div:nth-last-child(-n+5) {
    border-bottom: none;
}


/* Überschrift */

.grid-5Sp .headline {
    font-weight: bold;
    background-color: #e6e6e6;
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

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

    /*
       Wichtig:
       .main darf nicht durch den Inhalt breiter werden.
    */

    .main {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        padding: 10px;

        box-sizing: border-box;
    }


    /* Rechner */

    .temp-rechner {
        width: 100%;
        max-width: 100%;

        margin: 10px 0;
        padding: 15px;

        box-sizing: border-box;

        overflow: hidden;
    }


    /* Eingabezeilen untereinander */

    .temp-zeile {
        grid-template-columns: minmax(0, 1fr);

        width: 100%;
        max-width: 100%;
    }


    .temp-zeile input {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        text-align: left;
    }


    /* Buttons */

    .temp-buttons {
        width: 100%;
        max-width: 100%;

        flex-direction: column;
    }


    .temp-buttons button {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    /*
       NUR hier darf horizontal gewischt werden.
    */

    .grid-5Sp-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        overflow-x: auto;
        overflow-y: hidden;
    }


    .grid-5Sp {
        width: max-content;
        max-width: none;
    }
}


/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

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

    .main {
        padding: 5px;
    }


    .temp-rechner {
        width: 100%;
        max-width: 100%;

        margin: 5px 0;
        padding: 10px;
    }


    .grid-5Sp > div {
        padding: 6px 7px;
        font-size: 0.9rem;
    }
}