*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#0b0f14;
    color:#ffffff;
    font-family:"Segoe UI",Arial,sans-serif;
    overflow:hidden;
}
.bootscreen{

    position:fixed;

    top:0;

    left:0;

    width:100vw;

    height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:#0b0f14;

    z-index:1000;

    transition:2s;

}
/* Hintergrundwolf */

.backgroundwolf{

    position:fixed;

    top:50%;

    left:65%;

    transform:translate(-50%,-50%);

    width:1100px;

    opacity:.10;

    z-index:-1;

    pointer-events:none;

    object-fit:contain;

}
.wolf{

    width:650px;

    display:block;

    margin:0 auto 20px auto;

    filter:drop-shadow(0 0 40px rgba(255,140,0,.45));

    animation:bootfade 2s ease;

}
/* Dashboard */

#dashboard{

    display:none;

    opacity:0;

    width:100vw;

    height:100vh;

}

/* Sidebar */

.sidebar{

    width:270px;

    background:#131a22;

    border-right:1px solid #232f3c;

    padding:25px;

}

.logo{

    text-align:center;

    margin-bottom:35px;

}

.logoimg{

    width:90px;

    border-radius:50%;

    margin-bottom:10px;

}

.logo h2{

    color:#ff8800;

    font-size:28px;

}

.logo p{

    color:#888;

    font-size:14px;

}

/* Menü */

.sidebar ul{

    list-style:none;

}

.sidebar li{

    padding:15px;

    margin-bottom:8px;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

    color:#cccccc;

}

.sidebar li:hover{

    background:#1d2732;

    color:#ff8800;

}

.sidebar li.active{

    background:#ff8800;

    color:#111;

    font-weight:bold;

}

/* Inhalt */

.content{

    flex:1;

    padding:35px;

}

/* Kopf */

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.topbar h1{

    color:#ff8800;

    font-size:42px;

}

.status{

    background:#1d2732;

    padding:10px 18px;

    border-radius:20px;

    color:#7dff8b;

}

/* Karten */

.cards{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.card{

    background:#18212b;

    border:1px solid #253140;

    border-radius:18px;

    padding:25px;

    min-height:220px;

    transition:.25s;

}

.card:hover{

    border-color:#ff8800;

    transform:translateY(-5px);

    box-shadow:0 0 20px rgba(255,136,0,.25);

}

.card h3{

    color:#ff8800;

    margin-bottom:20px;

    font-size:24px;

}

.card p{

    color:#9da7b3;

    margin-bottom:8px;

    font-size:18px;

}

.card span{

    font-size:34px;

    font-weight:bold;

    color:white;

}
@keyframes bootfade{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}
.espbar{

    display:flex;

    gap:15px;

    margin-bottom:25px;

}

.esp{

    padding:10px 18px;

    border-radius:12px;

    font-weight:bold;

    font-size:15px;

}

.online{

    background:#183524;

    color:#72ff90;

    border:1px solid #2f8f50;

}

.offline{

    background:#3a2020;

    color:#ff7070;

    border:1px solid #aa4040;

}
.bootscreen h1{

    color:#ff8800;

    font-size:82px;

    letter-spacing:6px;

    margin-top:10px;

}

.bootscreen h2{

    color:#ff8800;

    font-size:34px;

    font-weight:400;

    margin-bottom:35px;

}

.bootscreen #status{

    color:white;

    font-size:22px;

    margin-bottom:20px;

}

.loader{

    width:500px;

    height:12px;

    background:#222;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:25px;

}

#loader-bar{

    width:0;

    height:100%;

    background:#ff8800;

    transition:.4s;

}

#bootlog{

    color:#bdbdbd;

    font-size:18px;

    line-height:28px;

    text-align:center;

    min-height:280px;

}
/* ========================= */
/* HEIZUNG */
/* ========================= */

.heating-grid{

    display:grid;

    grid-template-columns:2.8fr 1fr;

    grid-template-areas:
        "boiler mode"
        "boiler status"
        "messages service";

    gap:22px;

    margin-top:25px;

}

.panel{

background:rgba(20,20,22,.82);

border:1px solid rgba(255,140,0,.18);

border-radius:20px;

padding:24px;

backdrop-filter:blur(10px);

box-shadow:0 0 30px rgba(255,140,0,.08);

}

.panel h2{

color:#ff9f1a;

margin-bottom:18px;

}

.panel-large{

grid-row:span 2;

}

.panel-wide{

.info-row{

display:flex;

justify-content:space-between;

padding:12px 0;

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

}

.info-row strong{

font-size:20px;

color:#ffffff;

}

.status{

padding:12px;

margin-bottom:10px;

border-radius:12px;

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

}

.status.on{

border-left:4px solid #43d854;

}

.status.off{

border-left:4px solid #666;

}
/* ============================
   Heating OS Panels
============================ */

.panel{

    background:rgba(18,18,20,.78);

    border:1px solid rgba(255,140,0,.18);

    border-radius:22px;

    backdrop-filter:blur(14px);

    box-shadow:
        inset 0 0 20px rgba(255,140,0,.05),
        0 0 35px rgba(255,140,0,.08);

    transition:.25s;

}

.panel:hover{

    transform:translateY(-3px);

    border-color:#ff8c00;

    box-shadow:
        0 0 30px rgba(255,120,0,.25);

}

.panel h2{

    color:#ffb347;

    font-size:22px;

    margin-bottom:25px;

}

.info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

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

}

.info-row span{

    color:#9d9d9d;

    font-size:15px;

}

.info-row strong{

    color:white;

    font-size:28px;

    font-weight:700;

    text-shadow:0 0 12px rgba(255,140,0,.25);

}

.status{

    margin-bottom:14px;

    padding:14px;

    border-radius:12px;

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

    font-weight:600;

}

.status.on{

    border-left:5px solid #31d64d;

}

.status.off{

    border-left:5px solid #666;

.bigtemp{

    font-size:88px;

    font-weight:700;

    color:#ffb347;

    line-height:1;

    margin-bottom:25px;

    text-shadow:
        0 0 18px rgba(255,170,0,.45),
        0 0 35px rgba(255,120,0,.25);

}

.bigtemp small{

    font-size:26px;

    color:#ffffff;

}
.info-row{

    display:grid;

    grid-template-columns:1fr auto;

    align-items:center;

    padding:14px 0;

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

}

.info-row strong{

    font-size:28px;

    color:#ffffff;

    white-space:nowrap;

    text-align:right;

}
.live-table{

    width:100%;

    border-collapse:collapse;

    table-layout:fixed;

}

.live-table td{

    padding:10px 0;

    white-space:nowrap;

}

.live-table td:first-child{

    width:70%;

}

.live-table td:last-child{

    width:30%;

    text-align:right;

    font-weight:bold;

}
.boiler-svg{

    width:260px;

    height:auto;

}

.boiler-body{

    fill:#4d4d4d;

    stroke:#808080;

    stroke-width:3;

}

.boiler-logo{

    fill:white;

    font-size:15px;

    font-weight:bold;

    letter-spacing:2px;

}

.display{

    fill:#111;

    stroke:#666;

}

.displaytext{

    fill:#7dff8b;

    font-size:20px;

    font-family:Consolas, monospace;

}

.firebox{

    fill:#111;

    stroke:#777;

    stroke-width:3;

}

.fire{

    font-size:54px;

    animation:flicker 1.4s infinite;

}

.ashdoor{

    fill:#222;

    stroke:#666;

}

@keyframes flicker{

    0%{
        transform:scale(.95);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(.95);
    }

}
.boiler-panel{
    grid-area:boiler;
}

.mode-panel{
    grid-area:mode;
}

.status-panel{
    grid-area:status;
}

.service-panel{
    grid-area:service;
}

.messages-panel{
    grid-area:messages;
    min-height:180px;
}
.boiler-main{

    display:grid;

    grid-template-columns:1fr 260px;

    gap:30px;

    align-items:start;

}

.boiler-left{

    width:100%;

}

.boiler-right{

    display:flex;

    justify-content:center;

    align-items:center;

}