* {
    box-sizing: border-box;
}

:root {

    --bg: #08111f;

    --panel: #101b2d;

    --border: #223452;

    --text: #edf4ff;

    --muted: #8fa3bd;

    --accent: #54a8ff;

    --green: #43d17d;

    --red: #ff6577;

    --orange: #ffb454;
}


body {

    margin: 0;

    min-height: 100vh;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:

        radial-gradient(
            circle at top,
            #14243e 0,
            #08111f 42%,
            #050b14 100%
        );

    color: var(--text);
}


.container {

    width:
        min(
            1250px,
            94%
        );

    margin:
        auto;

    padding:
        32px 0 50px;
}


/* ========================================================
   HEADER
   ======================================================== */

.header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    margin-bottom:
        25px;
}


.title-small {

    color:
        var(--accent);

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    font-size:
        .72rem;

    font-weight:
        700;
}


h1 {

    margin:
        3px 0 0;

    font-size:
        clamp(
            1.7rem,
            4vw,
            2.4rem
        );
}


.datetime {

    color:
        var(--muted);

    text-align:
        right;
}


/* ========================================================
   SYSTEMSTATUS
   ======================================================== */

.systembar {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    background:
        rgba(
            16,
            27,
            45,
            .82
        );

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    padding:
        13px 16px;

    margin-bottom:
        24px;
}


.status-dot {

    width:
        11px;

    height:
        11px;

    border-radius:
        50%;

    background:
        var(--orange);
}


.status-dot.ok {

    background:
        var(--green);

    box-shadow:
        0 0 14px
        var(--green);
}


.status-dot.error {

    background:
        var(--red);

    box-shadow:
        0 0 14px
        var(--red);
}


.systemtext {

    flex:
        1;
}


.operating-state-wrap {
    margin-left: auto;
    text-align: right;
    min-width: 150px;
}


.systemtitle {

    font-weight:
        600;
}


.systemsub {

    color:
        var(--muted);

    font-size:
        .82rem;

    margin-top:
        2px;
}


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

.grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        18px;
}


/* ========================================================
   CARD
   ======================================================== */

.card {

    background:

        linear-gradient(
            145deg,
            rgba(18,31,51,.96),
            rgba(11,21,36,.96)
        );

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    padding:
        20px;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.22);
}


.card-wide {

    grid-column:
        span 2;
}


.card-title {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--muted);

    font-size:
        .85rem;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    margin-bottom:
        17px;
}


.icon {

    font-size:
        1.1rem;
}


/* ========================================================
   GROSSER WERT
   ======================================================== */

.big-value {

    font-size:
        2.4rem;

    font-weight:
        650;
}


.unit {

    color:
        var(--muted);

    font-size:
        1rem;

    margin-left:
        4px;
}


/* ========================================================
   PARAMETER
   ======================================================== */

.parameter {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        15px;

    padding:
        11px 0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .06
        );
}


.parameter:last-child {

    border-bottom:
        none;
}


.parameter-name {

    color:
        var(--muted);
}


.parameter-value {

    font-weight:
        600;

    text-align:
        right;
}


/* ========================================================
   STATUS
   ======================================================== */

.state {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        7px 13px;

    border-radius:
        999px;

    font-weight:
        700;

    border:
        1px solid
        var(--border);
}


.state.on {

    color:
        var(--green);

    background:
        rgba(
            67,
            209,
            125,
            .10
        );
}


.state.off {

    color:
        var(--muted);
}


/* ========================================================
   INFO
   ======================================================== */

.info {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        19px;

    height:
        19px;

    margin-left:
        5px;

    border-radius:
        50%;

    border:
        1px solid
        #456080;

    color:
        #a9c6e8;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        help;

    vertical-align:
        1px;
}


.info:hover {

    color:
        white;

    border-color:
        var(--accent);

    background:
        rgba(
            84,
            168,
            255,
            .12
        );
}


/* ========================================================
   TEMPERATURBLOCK
   ======================================================== */

.temp-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        10px;

    margin-top:
        8px;
}


.temp-box {

    background:
        rgba(
            0,
            0,
            0,
            .13
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .06
        );

    border-radius:
        12px;

    padding:
        13px;
}


.temp-name {

    color:
        var(--muted);

    font-size:
        .78rem;
}


.temp-value {

    font-size:
        1.35rem;

    font-weight:
        650;

    margin-top:
        5px;
}


/* ========================================================
   SPREIZUNG
   ======================================================== */

.delta {

    margin-top:
        14px;

    padding:
        13px;

    border-radius:
        12px;

    background:
        rgba(
            84,
            168,
            255,
            .08
        );

    border:
        1px solid
        rgba(
            84,
            168,
            255,
            .18
        );
}


.delta-label {

    color:
        var(--muted);

    font-size:
        .8rem;
}


.delta-value {

    font-size:
        1.45rem;

    font-weight:
        650;

    margin-top:
        3px;
}


/* ========================================================
   TOOLTIP
   ======================================================== */

.tooltip {

    display:
        none;

    position:
        fixed;

    z-index:
        2000;

    width:
        370px;

    max-width:
        calc(
            100vw - 30px
        );

    padding:
        15px 17px;

    background:
        #15243b;

    border:
        1px solid
        #3a5578;

    border-radius:
        12px;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.55);

    pointer-events:
        none;
}


.tooltip.visible {

    display:
        block;
}


.tooltip-title {

    font-weight:
        650;

    font-size:
        .95rem;
}


.tooltip-register {

    color:
        var(--accent);

    font-size:
        .72rem;

    margin-top:
        4px;
}


.tooltip-text {

    color:
        #c1d0e2;

    font-size:
        .82rem;

    line-height:
        1.5;

    margin-top:
        10px;
}


/* ========================================================
   MODAL
   ======================================================== */

.modal {

    display:
        none;

    position:
        fixed;

    inset:
        0;

    background:
        rgba(
            1,
            6,
            14,
            .78
        );

    backdrop-filter:
        blur(5px);

    z-index:
        3000;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;
}


.modal.visible {

    display:
        flex;
}


.modal-box {

    position:
        relative;

    width:
        min(
            520px,
            100%
        );

    background:
        linear-gradient(
            145deg,
            #15243b,
            #0c1727
        );

    border:
        1px solid
        #304869;

    border-radius:
        18px;

    padding:
        25px;
}


.modal-title {

    font-size:
        1.35rem;

    font-weight:
        650;
}


.modal-reg {

    color:
        var(--accent);

    font-size:
        .82rem;

    margin-top:
        5px;
}


.modal-text {

    color:
        #c1d0e2;

    line-height:
        1.55;

    margin-top:
        18px;
}


.close {

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    width:
        32px;

    height:
        32px;

    border-radius:
        50%;

    border:
        1px solid
        var(--border);

    background:
        rgba(
            255,
            255,
            255,
            .04
        );

    color:
        white;

    cursor:
        pointer;

    font-size:
        18px;
}


/* ========================================================
   FOOTER
   ======================================================== */

.footer {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        18px;

    color:
        var(--muted);

    font-size:
        .78rem;
}


/* ========================================================
   RESPONSIVE
   ======================================================== */

@media(max-width:1100px) {

    .grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


@media(max-width:620px) {

    .grid {

        grid-template-columns:
            1fr;
    }


    .card-wide {

        grid-column:
            span 1;
    }


    .temp-grid {

        grid-template-columns:
            1fr;
    }


    .footer {

        flex-direction:
            column;

        gap:
            5px;
    }

}


/* Smartphone-Optimierung – 2026-10-14 */
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  .container { width: 100%; max-width: 100%; padding: 14px 12px 28px; }
  .header { flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
  .header > * { min-width: 0; max-width: 100%; }
  h1 { font-size: clamp(1.35rem, 6vw, 1.8rem); overflow-wrap: anywhere; }
  .datetime { max-width: 100%; }
  .systembar { flex-wrap: wrap; gap: 10px; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .grid > *, .card, .card-wide { min-width: 0; max-width: 100%; }
  .card-wide { grid-column: auto; }
  .card { padding: 15px 13px; }
  .temp-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .parameter { gap: 8px; }
  .parameter-name { min-width: 0; overflow-wrap: anywhere; }
  .parameter-value { flex-shrink: 0; text-align: right; }
  .big-value { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .footer { flex-direction: column; align-items: flex-start; gap: 5px; }
  .modal-box { width: min(94vw, 520px); max-width: 94vw; max-height: 88dvh; overflow-y: auto; }
  .info, button, input, select { touch-action: manipulation; }
}
@media (max-width: 380px) {
  .container { padding-inline: 9px; }
  .card { padding: 12px 10px; }
}

/* Smartphone: Systemstatus und Aussentemperatur sauber in zwei Spalten */
@media (max-width: 700px) {
  .systembar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    align-items: start;
    padding: 13px 12px;
  }
  .systembar > .status-dot {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
  }
  .systembar > .systemtext {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    padding-left: 21px;
    overflow-wrap: anywhere;
  }
  .systembar > .operating-state-wrap {
    margin: 0;
    min-width: 0;
    width: 100%;
    text-align: left;
  }
  .systembar > .operating-state-wrap .systemsub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 23px;
    margin: 0 0 6px;
  }
  .systembar > .operating-state-wrap .systemsub .info {
    margin-left: 2px;
    flex: 0 0 19px;
  }
  .systembar > .operating-state-wrap .state {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: nowrap;
    padding: 7px 10px;
    font-size: clamp(.78rem, 3.5vw, 1rem);
  }
}

/* Smartphone: Aussentemperatur direkt UNTER Betriebszustand */
@media (max-width: 700px) {
  .systembar {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row;
  }
  .systembar > .status-dot { grid-column: 1; grid-row: 1; }
  .systembar > .systemtext { grid-column: 1; grid-row: 1; }
  .systembar > .operating-state-wrap {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
  .systembar > .operating-state-wrap .state {
    max-width: 100%;
    box-sizing: border-box;
  }
}