/* ============Umrechnungstabelle einheit=============================================
   =========================================================
   GRUNDLAYOUT 
   ========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;

    font-family: Arial, Helvetica, sans-serif;

    background: #f5f7fa;
    color: #222;
}


.flow-calculator {

    width: 100%;
    max-width: 850px;

    margin: 0 auto;
    padding: 25px;

    background: #fff;

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

    box-shadow:
        0 2px 8px rgba(0,0,0,0.08);
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

h1 {

    margin: 0 0 10px 0;

    font-size: 28px;
    line-height: 1.25;

    color: #174a7c;
}


.intro {

    margin-bottom: 22px;

    line-height: 1.5;
}


/* =========================================================
   GRUPPEN
   ========================================================= */

.unit-group {

    margin-top: 25px;
}


.unit-group h2 {

    margin: 0 0 10px 0;

    padding: 8px 10px;

    font-size: 18px;
    line-height: 1.3;

    color: #174a7c;

    background: #edf4fa;

    border-left: 4px solid #174a7c;
}


/* =========================================================
   EINHEITENZEILEN
   ========================================================= */

.unit-row {

    display: grid;

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

    gap: 12px;

    align-items: center;

    margin: 7px 0;
}


.unit-label {

    font-size: 15px;
    line-height: 1.3;
}


.unit-input {

    width: 100%;

    height: 40px;

    padding: 7px 10px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    text-align: right;

    border: 1px solid #b8c2cc;

    border-radius: 5px;

    background: #fff;

    color: #222;
}


.unit-input:focus {

    outline: none;

    border-color: #174a7c;

    box-shadow:
        0 0 0 2px rgba(23,74,124,0.12);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button-row {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 25px;
}


.calc-button {

    min-height: 42px;

    padding: 9px 20px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 16px;

    color: #fff;

    border: none;

    border-radius: 5px;

    cursor: pointer;
}


#copyButton {

    background: #174a7c;
}


#copyButton:hover {

    background: #123b63;
}


#clearButton {

    background: #555;
}


#clearButton:hover {

    background: #333;
}


/* =========================================================
   KOPIERMELDUNG
   ========================================================= */

#copyMessage {

    min-height: 20px;

    margin-top: 8px;

    font-size: 14px;

    text-align: right;

    color: #174a7c;
}


/* =========================================================
   INFORMATION
   ========================================================= */

.info {

    margin-top: 20px;

    padding: 12px;

    font-size: 13px;

    line-height: 1.5;

    background: #f3f3f3;

    border-radius: 5px;

    color: #555;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 700px) {

    body {

        padding: 12px;
    }


    .flow-calculator {

        padding: 18px;
    }


    h1 {

        font-size: 24px;
    }


    .unit-row {

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


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

@media (max-width: 560px) {

    body {

        padding: 8px;
    }


    .flow-calculator {

        padding: 14px;

        border-radius: 7px;
    }


    h1 {

        font-size: 22px;
    }


    .intro {

        font-size: 14px;
    }


    .unit-group {

        margin-top: 20px;
    }


    .unit-group h2 {

        font-size: 17px;
    }


    /*
       Label und Eingabefeld
       untereinander
    */

    .unit-row {

        display: block;

        margin: 10px 0 13px 0;
    }


    .unit-label {

        display: block;

        margin-bottom: 4px;

        font-size: 14px;

        font-weight: 600;
    }


    .unit-input {

        height: 42px;

        font-size: 16px;
    }


    /*
       Buttons auf voller Breite
    */

    .button-row {

        display: flex;

        flex-direction: column;
    }


    .calc-button {

        width: 100%;
    }


    #copyMessage {

        text-align: center;
    }
}


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

@media (max-width: 360px) {

    .flow-calculator {

        padding: 10px;
    }


    h1 {

        font-size: 20px;
    }


    .unit-group h2 {

        font-size: 16px;
    }
}
/*=====================Ende Layout Tabelle Einheitenrechner=======================*/

/*====================7-spaltige Tabelle Umrechnungsfaktoren=====================*/
/* Jedes Feld optisch vollständig abgegrenzt,gemeinsame Innenlinien erscheinen nur einmal. */

.grid-7Sp {
    display: grid;
    grid-template-columns:
        max-content max-content max-content max-content
        max-content max-content max-content;
    grid-template-rows: auto auto auto auto auto auto auto;
    width: max-content;
    border: 1px solid #999;
}

.grid-7Sp > div {
    padding: 8px 10px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    box-sizing: border-box;
}

/* Rechte Außenkante – letzte (7.) Spalte */
.grid-7Sp > div:nth-child(7n) {
    border-right: none;
}

/* Untere Außenkante – letzte Tabellenzeile */
.grid-7Sp > div:nth-last-child(-n+7) {
    border-bottom: none;
}

/* Spalte 4: keine waagerechten Linien */
.grid-7Sp > div:nth-child(7n+4) {
    border-bottom: none;
}

/* Headline */
.grid-7Sp .headline {
    font-weight: bold;
    background-color: #e6e6e6;
}

/**************** Ende Grid 7 Spalten ************************/

/* Responsive */
@media (max-width: 600px) {
    .gallery-wrapper {
        flex-direction: column;
        align-items: center;
    }
}
/*====================7-spaltige Tabelle Umrechnungsfaktoren=====================*/