/* --- GLOBAL --- */
* {
    box-sizing: border-box;
}
body { background-color: #000000; color: #ffffff; font-family: 'Segoe UI', Roboto, sans-serif; margin: 0; padding-bottom: 100px; user-select: none; }

/* HEADER */
.header { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, rgba(28,28,30,0.95) 0%, rgba(0,0,0,0) 100%); padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; backdrop-filter: blur(5px); }
.header-date { font-size: 1rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.header-time { font-size: 1.5rem; font-weight: bold; color: #fff; }

/* VIEW SECTION */
.view-section { display: none; animation: fadeIn 0.3s ease-in-out; }
.active-view { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* GRID */
.dashboard-grid {
    display: grid;
    /* Wir nutzen wieder das minmax-Prinzip aus deinem ersten Code */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1400px; /* Original-Maß aus der dashboard_designv1.html */
    margin: 0 auto;
    padding: 20px;
}

/* CARD */
.card {
    background-color: #1c1c1e;
    border-radius: 24px;
    padding: 25px; /* Original-Padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    position: relative;
    transition: transform 0.2s;
    cursor: pointer;

    /* WICHTIG: Statt aspect-ratio nutzen wir eine feste Mindesthöhe.
       320px entsprach im Original der Kachel mit dem Kompass/Wind-Inhalt. */
    min-height: 320px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .dashboard-grid {
        /* Zwingt exakt eine Spalte über die volle Breite */
        grid-template-columns: 1fr !important;
        gap: 15px; /* Etwas weniger Abstand spart Platz am Handy */
        padding: 10px;
    }

    .summary-grid {
        /* Auch die kleinen Kacheln oben (Wetter etc.) auf 2 pro Zeile begrenzen statt 4 */
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Optional: Falls die Timer-Kacheln am Handy zu wuchtig wirken */
    .timer-tile {
        height: 340px; /* Höhe beibehalten oder auf "auto" setzen, falls Inhalt entscheidet */
    }
}

.card:active { transform: scale(0.98); }
.card h3 { margin: 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: #666; width: 100%; display: flex; justify-content: space-between; }

/* SCENE BUTTONS */
.scene-btn {
    background: #2c2c2e; border: 1px solid #444; color: #fff;
    padding: 20px; border-radius: 15px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 8px; transition: 0.2s; width: 100%;
}
.scene-btn:hover { background: #3a3a3c; transform: translateY(-2px); border-color: #666; }
.scene-btn:active { transform: scale(0.98); }
.scene-btn i { font-size: 1.8rem; color: #f1c40f; }
.scene-btn small { color: #888; font-size: 0.75rem; }
.scene-btn.off i { color: #e74c3c; }

/* ELEMENTS (Compass, Gauge, etc.) */
.compass-container { position: relative; width: 140px; height: 140px; margin: 10px auto; }
.compass-ring { width: 100%; height: 100%; border-radius: 50%; border: 12px solid #3a3a3c; position: absolute; top: 0; left: 0; box-sizing: border-box; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.compass-label { position: absolute; font-size: 0.8rem; font-weight: bold; color: #888; background-color: #1c1c1e; padding: 0 4px; }
.compass-label.n { top: -10px; left: 50%; transform: translateX(-50%); color: #e74c3c; z-index: 10;}
.compass-label.s { bottom: -10px; left: 50%; transform: translateX(-50%); z-index: 10;}
.compass-label.e { right: -5px; top: 50%; transform: translateY(-50%); z-index: 10;}
.compass-label.w { left: -5px; top: 50%; transform: translateY(-50%); z-index: 10;}
.arrow-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.compass-arrow {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 14px solid #ffffff;
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.compass-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 5; width: 100%; }

.circle-gauge { width: 130px; height: 130px; border-radius: 50%; border: 8px solid #2c2c2e; display: flex; align-items: center; justify-content: center; margin: 20px 0; position: relative; }
.circle-gauge.green { border-top-color: #2ecc71; border-bottom-color: #2ecc71; }
.circle-gauge.cyan { border-top-color: #00e5ff; border-left-color: #00e5ff; }
.main-value { font-size: 2.8rem; font-weight: 700; letter-spacing: -1px; }
.unit { font-size: 0.9rem; color: #888; font-weight: 400; margin-top: -5px; }
.sub-row { width: 100%; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #333; padding-top: 10px; margin-top: 5px; font-size: 0.9rem; color: #aaa; }
.sub-row.center { justify-content: center; }
.highlight-cyan { color: #00e5ff; font-weight: bold; }
.highlight { color: #fff; font-weight: bold; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); } 100% { box-shadow: 0 0 0 20px rgba(231, 76, 60, 0); } }
.alarm-active { animation: pulse-red 1.5s infinite; border: 1px solid #e74c3c; background: rgba(231, 76, 60, 0.1); }

/* CO-WÄCHTER*/

/* --- DYNAMIC CO GAUGE --- */

.circle-gauge-dynamic {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;

    /* Der Trick: Ein konischer Verlauf, der per Variable --p (Prozent) gesteuert wird */
    /* --c ist die Farbe, die wir per JS setzen */
    background: conic-gradient(var(--c) calc(var(--p)*1%), #333 0deg);

    /* Leichter Schatten für 3D Effekt */
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transition: --p 0.5s ease; /* Funktioniert in modernen Browsern */
}

/* Das Innere Loch (Damit es ein Ring wird) */
.circle-gauge-dynamic::after {
    content: '';
    position: absolute;
    inset: 10px; /* Dicke des Rings */
    background: #1c1c1e; /* Karten-Hintergrundfarbe */
    border-radius: 50%;
    z-index: 1;
}

/* Der Inhalt (Zahl) muss über dem Loch liegen */
.gauge-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- ALARM ANIMATION (Kachel blinkt) --- */
@keyframes critical-alarm {
    0% { background-color: #1c1c1e; box-shadow: 0 0 0 rgba(231, 76, 60, 0); border-color: transparent; }
    50% { background-color: #3f0d0d; box-shadow: 0 0 40px rgba(231, 76, 60, 0.8); border-color: #e74c3c; }
    100% { background-color: #1c1c1e; box-shadow: 0 0 0 rgba(231, 76, 60, 0); border-color: transparent; }
}

.card-alarm-active {
    animation: critical-alarm 1s infinite; /* Schnelles Blinken */
    border: 2px solid #e74c3c !important;
}

/* Text blinkt auch im Alarm-Modus */
.text-blink {
    animation: text-flash 0.5s infinite alternate;
    color: #fff !important;
    background: #e74c3c;
    padding: 2px 8px;
    border-radius: 4px;
}
@keyframes text-flash { from { opacity: 1; } to { opacity: 0.5; } }

.bottom-nav { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); background-color: rgba(44, 44, 46, 0.9); backdrop-filter: blur(10px); padding: 12px 25px; border-radius: 50px; display: flex; gap: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); z-index: 100; border: 1px solid #333; }
.nav-btn { background: none; border: none; color: #666; font-size: 1.4rem; cursor: pointer; transition: 0.2s; }
.nav-btn.active, .nav-btn:hover { color: #fff; transform: translateY(-3px); }

/* --- WIDGET STYLE (Samsung Weather) --- */
.bar-container { width: 100%; height: 6px; background: #333; border-radius: 3px; position: relative; margin-top: 8px; }
.grad-blue { background: linear-gradient(90deg, #a1c4fd 0%, #c2e9fb 100%); }
.bar-dot { width: 10px; height: 10px; background: #fff; border: 2px solid #1c1c1e; border-radius: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0,0,0,0.5); transition: left 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.context-text { font-size: 0.8rem; color: #aaa; margin-bottom: 2px; }

/* --- GAS BOTTLE STYLE (Visual) --- */
.gas-visual-container { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 15px 0; }
.gas-bottle-wrapper { position: relative; width: 60px; display: flex; flex-direction: column; align-items: center; }
.gas-bottle-head { width: 30px; height: 15px; background: #444; border: 2px solid #555; border-bottom: none; border-radius: 5px 5px 0 0; position: relative; z-index: 2; }
.gas-bottle-head::after { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 10px; height: 6px; background: #666; border-radius: 2px; }
.gas-bottle-body { width: 50px; height: 90px; background: #222; border: 2px solid #555; border-radius: 8px; position: relative; overflow: hidden; box-shadow: inset 0 0 10px #000; }
.gas-liquid { position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(to top, #2ecc71, #27ae60); transition: height 1.0s cubic-bezier(0.4, 0.0, 0.2, 1); opacity: 0.9; }
.gas-liquid.low { background: linear-gradient(to top, #e74c3c, #c0392b); } /* Rot bei wenig Gas */

/* --- NEU: WIN DETAIL MODAL STYLES --- */

/* Das Grid für die 3 oberen Kacheln */
.modal-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}

/* Basis-Style für die kleinen Detail-Kacheln */
.detail-card {
    background: #2c2c2e;
    border-radius: 18px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.detail-title {
    font-size: 0.8rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}

/* Das Icon im Titel der Detail-Kachel */
.detail-title i {
    margin-right: 8px;  /* Abstand zum Text */
    color: #f1c40f;     /* Unsere Akzentfarbe (Gelb) für schnelle Erkennung */
    font-size: 0.9rem;  /* Leicht größer als der Text */
}

/* --- SAMSUNG STYLE GAUGE (Luftdruck) --- */
.samsung-gauge-wrapper {
    position: relative;
    width: 100%;
    height: 100px; /* Höhe für den Halbkreis */
    display: flex;
    justify-content: center;
    overflow: hidden; /* Damit der untere Teil des Kreises weg ist */
}

/* Wir nutzen SVG für die gestrichelte Linie - das ist präziser als CSS Border */
.samsung-svg {
    width: 100%;
    height: 100%;
    transform: scale(1.2);
}

.gauge-bg-arc {
    fill: none;
    stroke: #444;
    stroke-width: 12;
    stroke-dasharray: 2 4; /* Das erzeugt die "Striche" wie im Screenshot */
}

.gauge-val-arc {
    fill: none;
    stroke: #fff; /* Wird per JS gefärbt */
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 251; /* Länge des Halbkreises */
    stroke-dashoffset: 251; /* Startet leer */
    transition: stroke-dashoffset 1s ease-out;
}

.samsung-value-text {
    position: absolute;
    bottom: 5px;
    text-align: center;
}
.samsung-main { font-size: 1.4rem; font-weight: bold; color: #fff; }
.samsung-unit { font-size: 0.8rem; color: #888; }
.samsung-trend { font-size: 0.7rem; color: #2ecc71; margin-bottom: 2px;}

/* --- WIND SPEED CIRCLE --- */
.speed-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 6px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.speed-circle.high { border-color: #f1c40f; box-shadow: 0 0 15px rgba(241, 196, 15, 0.2); }
.speed-circle.storm { border-color: #e74c3c; box-shadow: 0 0 20px rgba(231, 76, 60, 0.4); }

/* Datum-Auswahl im Header */
.date-picker-btn {
    background: #2c2c2e;
    border: 1px solid #444;
    color: #fff;
    padding: 5px 15px;
    border-radius: 8px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
/* Icon im Datepicker invertieren (für Dark Mode) */
::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Zeigt an, dass man auf die Balken klicken kann */
#historyChart {
    cursor: pointer;
}

/* Header im Modal: Flexbox für saubere Ausrichtung */
.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Änderung: Oben bündig, damit Text Platz hat */
    margin-bottom: 20px;
    padding-right: 50px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

/* Der neue Container für die Texte */
.header-text-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Zeile 2: Der feste Wochen-Kontext */
#modal_week_range {
    font-size: 0.9rem;
    color: #f1c40f; /* Gelb für den Kontext */
    font-weight: bold;
}

/* Zeile 3: Die dynamische Info */
#modal_dynamic_info {
    font-size: 0.8rem;
    color: #888;     /* Grau für Details */
    min-height: 1.2em; /* Reserviert Platz, damit nichts springt */
}

/* Der Datums-Container */
.week-picker-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

/* Label über dem Picker (z.B. "Woche auswählen") */
.week-label {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
}


/* Spezielle Grid für die 4 kleinen Kacheln oben */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    max-width: 1400px;
    margin: 0 auto 10px auto;
    padding: 0 20px;
}

/* Kompakte Kacheln */
.card-small .small-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
}
.card-small {
    padding: 10px 20px !important;
    min-height: 75px !important; /* Sehr flach halten */
    max-height: 85px;
    background: rgba(28, 28, 30, 0.6); /* Leicht transparent für Tiefe */
    border-left: 4px solid #f1c40f;    /* Gelber Akzent-Streifen wie im Industriebereich */
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.card-small .small-value {
    font-size: 1.5rem; /* Wert groß und deutlich */
    font-family: 'Segoe UI', sans-serif;
    color: #fff;
    font-weight: 700;
}

/* Meater Spezial-Style (orientiert am Design-Screenshot) */
.meater-card {
    border: 1px solid #d3540066;
    background: linear-gradient(145deg, #1c1c1e 0%, #252527 100%);
}

.meater-card h3 { color: #d35400; }

.progress-bar {
    width: 100%;
    height: 6px;
    background: #333;
    border-radius: 3px;
    margin-top: 15px;
    overflow: hidden;
}

.progress-bar div {
    height: 100%;
    background: #d35400;
    transition: width 1s ease-in-out;
}

.timer-display {
    font-size: 2.2rem;
    font-weight: bold;
    font-family: 'Courier New', monospace; /* Technischer Look */
    margin: 10px 0;
}

#view_cooking {
    padding-bottom: 60px;
}

/* --- DUAL KACHEL LOGIK --- */
.dual-content {
    display: flex;
    width: 100%;
    flex-grow: 1;
    align-items: center;
    justify-content: space-around;
    padding: 10px 0;
}

.dual-section {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.border-right {
    border-right: 1px solid #333; /* Trennlinie zwischen den Werten */
}

.small-label {
    font-size: 0.65rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.main-value-mid {
    font-size: 2.2rem; /* Etwas kleiner als die 2.8rem der Standard-Kacheln */
    font-weight: 700;
    color: #fff;
}

.freezer-accent {
    border: 1px solid rgba(0, 229, 255, 0.15);
}

.highlight-cyan {
    color: #00e5ff;
}

.rssi-tag {
    font-size: 0.7rem;
    color: #666;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rssi-tag i {
    font-size: 0.6rem;
}

/* Gefrierer-Werte in Cyan wie im Entwurf */
.highlight-cyan {
    color: #00e5ff;
}

.dual-content {
    display: flex; width: 100%; flex-grow: 1;
    align-items: center; justify-content: space-around;
}
.dual-section { flex: 1; text-align: center; }
.border-right { border-right: 1px solid #333; }
.main-value-mid { font-size: 2.2rem; font-weight: 700; }
.highlight-cyan { color: #00e5ff; }
.freezer-accent { border: 1px solid rgba(0, 229, 255, 0.2); }

/* Akzent für den Kühlschrank (Frische-Grün) */
.fridge-accent {
    border: 1px solid rgba(46, 204, 113, 0.2); /* Dezenter grüner Rand */
}

.highlight-green {
    color: #2ecc71; /* Das "Frische-Grün" für die Werte */
}

/* Optional: Ein leichter Glow-Effekt für die Icons */
.fridge-accent i {
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
}

/* In style.css ergänzen */
.sub-row span i {
    margin-right: 5px;
    font-size: 0.8rem;
}

#rssi_fridge, #rssi_freezer {
    font-weight: 600;
    transition: color 0.5s ease;
}

.signal-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #aaa;
}

.signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 20px;
    height: 14px;
}

.bar {
    width: 3px;
    background-color: #333; /* Inaktiv-Farbe */
    border-radius: 1px;
}

/* Die 4 verschiedenen Höhen der Balken */
.bar1 { height: 25%; }
.bar2 { height: 50%; }
.bar3 { height: 75%; }
.bar4 { height: 100%; }

/* Status-Farben für die aktiven Balken */
.sig-excellent .bar { background-color: #2ecc71; } /* Alle 4 grün */
.sig-good .bar.bar1, .sig-good .bar.bar2, .sig-good .bar.bar3 { background-color: #f1c40f; } /* 3 gelb */
.sig-weak .bar.bar1, .sig-weak .bar.bar2 { background-color: #e67e22; } /* 2 orange */
.sig-critical .bar.bar1 { background-color: #e74c3c; } /* 1 rot */

.signal-text {
    color: #fff;
}

/* Regen-Zustand für die Wetter-Kachel */
.rain-active-card {
    border: 1px solid rgba(52, 152, 219, 0.5) !important;
    background: linear-gradient(145deg, #1c1c1e 0%, #1a2a3a 100%) !important;
}

/* Animation für das Regen-Icon */
.rain-pulse {
    animation: rain-glow 2s infinite;
}

@keyframes rain-glow {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}


/* --- MULTI-TIMER TILE DESIGN --- */

.timer-tile {
    /* WICHTIG: Feste Höhe erzwingen, damit sie nicht wächst */
    height: 340px;
    max-height: 340px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden; /* Verhindert, dass Inhalt den Rahmen sprengt */
}

.tile-controls {
    margin-top: 15px; /* Hier schieben wir die Buttons runter */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.circle-presets {
    display: flex;
    justify-content: center;
    gap: 10px;
    /* margin-bottom wurde entfernt, da wir jetzt gap in tile-controls nutzen */
}

.c-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #2c2c2e;
    border: 1px solid #555;
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.c-btn:hover {
    background: #e67e22; /* War #f1c40f */
    color: #fff;
    border-color: #e67e22; /* War #f1c40f */
}
/* Eingabezeile */
.tile-input-row {
    display: flex;
    gap: 5px;
    padding: 0 10px;
}

.tile-input {
    flex-grow: 1;
    background: #111;
    border: 1px solid #444;
    border-radius: 15px;
    color: #fff;
    text-align: center;
    padding: 8px;
}

.tile-go-btn {
    width: 35px;
    background: #2ecc71;
    color: #000;
    border: none;
    border-radius: 15px;
    cursor: pointer;
}
.tile-go-btn:hover { background: #27ae60; }

/* Die scrollbare Liste */
.tile-timer-list {
    flex-grow: 1;      /* Nimm den ganzen restlichen Platz */
    height: 0;         /* WICHTIG: Erlaubt dem Container zu schrumpfen */
    min-height: 0;     /* Flexbox-Trick für Scroll-Container */

    width: 100%;
    overflow-y: auto;  /* Hier entsteht der Scrollbalken */

    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px; /* Platz für Scrollbar */
    margin-top: 10px;
    padding-bottom: 10px;
}
/* Scrollbar Styling */
.tile-timer-list::-webkit-scrollbar { width: 4px; }
.tile-timer-list::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }

/* --- RECHTECKIGE TIMER REIHE (Das Listenelement) --- */
.timer-row-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    border-left: 3px solid #e67e22; /* War #f1c40f */
    animation: slideIn 0.3s ease-out;
}
.timer-row-item.finished {
    background: rgba(231, 76, 60, 0.2);
    border-left-color: #e74c3c;
    animation: blinkRow 1s infinite;
}

/* Der Mini-Kreis links im Rechteck */
.row-visual {
    width: 36px;
    height: 36px;
    margin-right: 10px;
    position: relative;
}
.row-svg { width: 36px; height: 36px; transform: rotate(-90deg); }
.row-bg { fill: none; stroke: #333; stroke-width: 3; }
.row-prog { fill: none; stroke: #f1c40f; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }

/* Text Infos */
.row-info { flex-grow: 1; display: flex; flex-direction: column; }
.row-time { font-family: 'Courier New', monospace; font-size: 1.1rem; font-weight: bold; }
.row-label { font-size: 0.7rem; color: #888; }

/* Controls rechts */
.row-controls button {
    background: none; border: none; color: #aaa; cursor: pointer; margin-left: 5px; font-size: 0.9rem;
}
.row-controls button:hover { color: #fff; }
.row-controls button.del:hover { color: #e74c3c; }

@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blinkRow { 50% { opacity: 0.5; } }


.gas-accent { border-top: 3px solid #e67e22 !important; }
.highlight-orange { color: #e67e22; font-weight: bold; }

/* Kleiner Fortschrittsbalken unter den Werten */
.progress-mini {
    width: 60%;
    height: 4px;
    background: #333;
    border-radius: 2px;
    margin: 5px auto;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: #e67e22;
    transition: width 0.5s ease-in-out;
}

/* Container für den Balken unter der Temp */
.temp-bar-container {
    width: 60px;
    height: 6px;
    background: #222;
    border-radius: 3px;
    margin: 8px auto;
    overflow: hidden;
    border: 1px solid #333;
}

/* Der Füllstand (Standard Blau) */
.temp-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3498db, #2ecc71);
    transition: width 0.8s ease-in-out, background 0.3s;
}

/* Individuelles Signal-Layout */
.mini-signal {
    font-size: 0.7rem;
    color: #666;
    margin-top: 5px;
}
.sig-ok { color: #2ecc71; }
.sig-warn { color: #f1c40f; }
.sig-danger { color: #e74c3c; }


@keyframes pulse-red-bg {
    0% { box-shadow: 0 0 5px rgba(231, 76, 60, 0.2); }
    50% { box-shadow: 0 0 20px rgba(231, 76, 60, 0.5); }
    100% { box-shadow: 0 0 5px rgba(231, 76, 60, 0.2); }
}
.temp-alarm {
    animation: pulse-red-bg 2s infinite;
    border: 1px solid #e74c3c !important;
}

/* Signal-Balken Container */
.signal-bars-mini {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    width: 20px;
    height: 14px;
    margin-right: 5px;
}

.signal-bars-mini .bar {
    width: 3px;
    background: #333; /* Hintergrundfarbe für inaktive Balken */
    border-radius: 1px;
}

/* Unterschiedliche Höhen für den Handy-Look */
.bar1 { height: 30%; }
.bar2 { height: 55%; }
.bar3 { height: 80%; }
.bar4 { height: 100%; }

/* Farb-Klassen für das Signal (Icy-Blue passend zur Kühlung) */
/* Signal-Farben für die Handy-Balken */
.sig-excellent .bar,
.sig-good .bar1, .sig-good .bar2, .sig-good .bar3 { background: #2ecc71 !important; } /* Grün */

.sig-weak .bar1, .sig-weak .bar2 { background: #f1c40f !important; } /* Gelb/Orange */

.sig-critical .bar1 { background: #e74c3c !important; } /* Rot */




/* --- HBO VISUALIZER (Der Grafik-Ofen) --- */

.hbo-visual-container {
    position: relative;
    height: 140px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 20px;
}

/* 1. Der Stein-Ofen (Kuppel) */
.hbo-structure {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hbo-dome {
    width: 140px;
    height: 90px;
    background: radial-gradient(circle at 30% 30%, #555, #333);
    border-radius: 70px 70px 10px 10px; /* Die Kuppel-Form */
    border: 4px solid #222;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Der Schornstein */
.hbo-chimney {
    width: 30px;
    height: 25px;
    background: #444;
    border: 3px solid #222;
    border-bottom: none;
    margin-bottom: -5px; /* Damit er nahtlos auf der Kuppel sitzt */
    margin-right: 50px; /* Leicht versetzt */
    position: relative;
    z-index: 1;
}

/* Die Öffnung */
.hbo-mouth {
    width: 70px;
    height: 50px;
    background: #111;
    border-radius: 40px 40px 0 0;
    border: 3px solid #2a2a2a;
    border-bottom: none;
    overflow: hidden; /* Damit das Feuer nicht aus dem Ofen springt */
    position: relative;
    box-shadow: inset 0 0 20px #000;
}

/* 2. Das Feuer (Default: Aus) */
.hbo-fire {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at bottom, #f1c40f, #e67e22, transparent 70%);
    opacity: 0; /* Standardmäßig aus */
    transform-origin: bottom center;
    transition: opacity 1s ease;
}

/* Feuer-Klassen (werden per JS geschaltet) */
.fire-low {
    opacity: 0.4;
    animation: flicker 3s infinite alternate;
}
.fire-med {
    opacity: 0.7;
    background: radial-gradient(circle at bottom, #f1c40f, #e67e22, #e74c3c, transparent 80%);
    animation: flicker 0.2s infinite alternate; /* Schnelles Flackern */
}
.fire-high {
    opacity: 1;
    background: radial-gradient(circle at bottom, #fff, #f1c40f, #e74c3c, #c0392b);
    animation: flicker 0.08s infinite alternate, glow-pulse 2s infinite; /* Raging Fire */
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.6); /* Glühen nach außen */
}

@keyframes flicker {
    0% { transform: scaleY(1.0) scaleX(1.0); filter: brightness(1); }
    100% { transform: scaleY(1.1) scaleX(0.95); filter: brightness(1.3); }
}

@keyframes glow-pulse {
    0% { box-shadow: 0 0 20px rgba(231, 76, 60, 0.4); }
    50% { box-shadow: 0 0 50px rgba(231, 76, 60, 0.8); }
    100% { box-shadow: 0 0 20px rgba(231, 76, 60, 0.4); }
}

/* 3. Der Rauch */
/* css/style.css */

/* 3. Der Rauch */
.smoke-area {
    position: absolute;
    bottom: 20px; /* Startet IM Schornstein und steigt auf */
    left: 0;      /* Links bündig mit Schornstein */
    width: 100%;  /* Nutzt die volle Breite des Schornsteins (30px) */
    height: 50px;
    z-index: 0;   /* Hinter dem Schornstein */
    opacity: 0;
    transition: opacity 2s;
    pointer-events: none; /* Wichtig: Klicks gehen durch */
}

.smoke-active { opacity: 0.8; }
.smoke-heavy { opacity: 1.0; }

.smoke {
    width: 15px;
    height: 15px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 20%;
    filter: blur(4px);
    animation: smoke-rise 3s infinite linear;
}

.s1 { animation-delay: 0s; }
.s2 { animation-delay: 1s; scale: 1.2; }
.s3 { animation-delay: 2s; scale: 0.8; }

@keyframes smoke-rise {
    0% { transform: translateY(0) scale(1) translateX(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-60px) scale(3) translateX(15px); opacity: 0; }
}


/* --- GRILLHAUS REAKTOR (Home Kachel) --- */

.reactor-card {
    overflow: hidden;
    /* Ein leichter dunkler Schein nach innen für mehr Tiefe */
    box-shadow: inset 0 0 30px rgba(0,0,0,0.5) !important;
}

.reactor-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    height: 140px;
    position: relative;
}

/* --- OBEN: Die Feuchtigkeits-Kuppel --- */
.reactor-dome {
    width: 80px;
    height: 50px;
    background: linear-gradient(to bottom, rgba(135, 206, 235, 0.2), rgba(135, 206, 235, 0.1));
    border-radius: 40px 40px 10px 10px;
    border: 2px solid rgba(135, 206, 235, 0.4);
    border-bottom: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 5px 10px rgba(255,255,255,0.1);
    z-index: 2;
}

.react-hum-icon {
    color: #3498db;
    font-size: 1rem;
    z-index: 3;
}

/* --- Dampf-Effekt (wird per JS aktiviert) --- */
.steam-particles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; /* Standard: unsichtbar */
    transition: opacity 1s;
    background-image:
            radial-gradient(circle at 20% 50%, rgba(255,255,255,0.3) 0%, transparent 20%),
            radial-gradient(circle at 80% 50%, rgba(255,255,255,0.2) 0%, transparent 20%);
    filter: blur(3px);
    animation: rise-steam 4s infinite linear;
}
.steam-active { opacity: 1; }
@keyframes rise-steam {
    from { background-position: 0% 0%; }
    to { background-position: 0% -100px; }
}


/* --- MITTE: Verbinder --- */
.reactor-connector {
    width: 40px;
    height: 10px;
    background: #222;
    border-left: 2px solid #444;
    border-right: 2px solid #444;
    z-index: 1;
}


/* --- UNTEN: Der Hitze-Kern --- */
.reactor-core {
    width: 90px;
    height: 70px;
    background: #111;
    border-radius: 10px 10px 30px 30px;
    border: 3px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* Das eigentliche Leuchten */
.react-core-glow {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle, #555, #111); /* Standard: Aus */
    opacity: 0.7;
    transition: all 1s ease;
}

.react-value-group {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: baseline;
    text-shadow: 0 2px 5px rgba(0,0,0,1);
}
.react-unit { font-size: 0.8rem; margin-left: 3px; opacity: 0.7; }


/* --- MODERN FLATROOF HOUSE --- */

.modern-house-container {
    position: relative;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    perspective: 500px; /* Für leichte 3D Tiefe */
}

/* 1. Das Dach (Dunkles Anthrazit) */
.mod-roof {
    width: 140px;
    height: 12px;
    background: #222;
    border-top: 1px solid #444;
    border-bottom: 2px solid #111;
    z-index: 3;
    box-shadow: 0 5px 10px rgba(0,0,0,0.8);
    position: relative;
    margin-bottom: -1px; /* Lücke schließen */
}

/* 2. Die Wände */
.mod-walls {
    width: 120px; /* Etwas schmaler als Dach für Überstand */
    height: 65px;
    background: #1a1a1a;
    display: flex;
    position: relative;
    box-shadow: inset 0 0 20px #000;
}

/* 3. Die Glasfront (Das Herzstück) */
.mod-window-front {
    flex: 1; /* Nimmt den meisten Platz ein */
    margin: 5px 10px; /* Rahmen um das Fenster */
    background: #000; /* Standard: Aus */
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 1s ease;
}

/* Beschlagene Scheiben bei Feuchtigkeit */
.window-foggy::after {
    content: '';
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background: rgba(255,255,255,0.15);
    filter: blur(5px);
    pointer-events: none;
}

/* Die Werte im Fenster */
.mod-hud {
    font-size: 1.8rem;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    z-index: 5;
}
.small-unit { font-size: 1rem; font-weight: normal; opacity: 0.7; }

/* 4. Terrasse / Bodenplatte */
.mod-deck {
    width: 150px;
    height: 8px;
    background: #333;
    border-top: 1px solid #555;
    margin-top: -2px;
    z-index: 4;
}

/* 5. Licht-Reflexion auf dem Boden (vor dem Haus) */
.mod-reflection {
    width: 120px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    transform: scaleY(0.4); /* Flach gedrückt */
    filter: blur(15px);
    margin-top: -10px;
    transition: all 1s ease;
    opacity: 0.6;
}

/* 6. Feuchtigkeits-Badge */
.mod-hum-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.3);
}

/* --- FARB-MODI (Beleuchtung) --- */

/* Kalt (Eisig Blau) */
.mood-ice {
    background: linear-gradient(to bottom, #3498db, #154360);
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.4);
}
.refl-ice { background: #3498db; }

/* Gemütlich (Warmweiß/Gold) */
.mood-cozy {
    background: linear-gradient(to bottom, #f1c40f, #d35400);
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.3);
}
.refl-cozy { background: #f1c40f; }

/* Warm (Orange) */
.mood-warm {
    background: linear-gradient(to bottom, #e67e22, #a04000);
    box-shadow: 0 0 25px rgba(230, 126, 34, 0.5);
}
.refl-warm { background: #e67e22; }

/* Heiß/Party (Rot/Magenta) */
.mood-party {
    background: linear-gradient(to bottom, #e74c3c, #8e44ad);
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.6);
    animation: interior-flicker 4s infinite;
}
.refl-party { background: #e74c3c; }

@keyframes interior-flicker {
    0% { opacity: 0.9; }
    50% { opacity: 1.0; filter: brightness(1.2); }
    100% { opacity: 0.9; }
}

/* --- BLUEPRINT CAD DESIGN --- */

.blueprint-container {
    position: relative;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.house-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

/* Das Fenster-Rechteck */
#gh_window_fill {
    transition: all 1s ease;
    fill-opacity: 0.2; /* Standard: Leicht transparent */
    stroke: none;
}

/* --- FARB-ZUSTÄNDE --- */

/* Standard (Aus/Kalt) */
.window-off {
    fill: #333;
}

/* Kalt (Blaupause Look) */
.cad-cold {
    fill: #3498db !important;
    fill-opacity: 0.4 !important;
    filter: drop-shadow(0 0 10px rgba(52, 152, 219, 0.6));
}

/* Angenehm (Grün/Teal Laser) */
.cad-comfy {
    fill: #2ecc71 !important;
    fill-opacity: 0.3 !important;
    filter: drop-shadow(0 0 10px rgba(46, 204, 113, 0.4));
}

/* Warm (Orange Glow) */
.cad-warm {
    fill: #e67e22 !important;
    fill-opacity: 0.5 !important;
    filter: drop-shadow(0 0 15px rgba(230, 126, 34, 0.6));
}

/* Heiß/Alarm (Rot blinkend) */
.cad-hot {
    fill: #e74c3c !important;
    fill-opacity: 0.6 !important;
    filter: drop-shadow(0 0 20px rgba(231, 76, 60, 0.8));
    animation: cad-alarm 2s infinite alternate;
}

@keyframes cad-alarm {
    0% { fill-opacity: 0.4; }
    100% { fill-opacity: 0.7; }
}

/* --- GRAPHIC FLAT DESIGN --- */

.graphic-container {
    position: relative;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.house-graphic {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}

/* Fenster Standard (Aus/Dunkel) */
.win-default {
    fill: #111;
    transition: fill 1s ease;
}

/* --- TEMPERATUR FARBEN (GLAS) --- */

/* Kalt: Eisblaues Glas */
.win-cold {
    fill: #3498db;
    fill-opacity: 0.6;
}

/* Angenehm: Warmes Wohnzimmerlicht */
.win-comfy {
    fill: #f1c40f; /* Warmweiß/Gelb */
    fill-opacity: 0.5;
}

/* Warm: Orange */
.win-warm {
    fill: #e67e22;
    fill-opacity: 0.6;
}

/* Heiß/Alarm: Rotes Warnlicht */
.win-hot {
    fill: #e74c3c;
    fill-opacity: 0.7;
    animation: win-pulse 2s infinite alternate;
}

@keyframes win-pulse {
    0% { fill-opacity: 0.5; }
    100% { fill-opacity: 0.8; }
}

/* Bodenreflexion (optional, subtil) */
#gh_floor_glow {
    transition: all 1s ease;
    filter: blur(8px);
}
.glow-active {
    fill: inherit; /* Nimmt Farbe vom Fenster an */
    opacity: 0.4;
}

/* Overlay Werte */
.graphic-hud {
    position: absolute;
    top: 55px; /* Genau über dem Fenster positioniert */
    left: 70px; /* Zentriert im Fenster */
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    pointer-events: none;
}

.gh-big-temp {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.gh-unit {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.8);
}

.graphic-hum {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 0.8rem;
    color: #3498db;
    background: rgba(0,0,0,0.6);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(52, 152, 219, 0.3);
}


/* --- NEW CLIMATE LAYOUT --- */

.climate-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Verteilt Platz zwischen Text oben und Haus unten */
    width: 100%;
    padding-top: 10px;
}

/* 1. Der Daten-Bereich (Oben) */
.climate-hero {
    display: flex;
    align-items: center; /* Vertikal zentriert */
    justify-content: center; /* Horizontal zentriert */
    gap: 15px; /* Abstand zwischen Temp und Feuchte */
    margin-bottom: 5px;
    z-index: 10; /* Über der Grafik */
}

.temp-wrapper {
    display: flex;
    align-items: baseline;
}

.hero-value {
    font-size: 3.5rem; /* Richtig groß! */
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.hero-unit {
    font-size: 1.2rem;
    color: #888;
    margin-left: 5px;
    font-weight: 400;
}

/* Die Feuchtigkeits-Pille */
.hum-badge {
    background: rgba(52, 152, 219, 0.15);
    border: 1px solid rgba(52, 152, 219, 0.3);
    color: #3498db;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* 2. Das Haus (Unten) */
.house-wrapper {
    width: 100%;
    height: 120px; /* Feste Höhe für den Grafikbereich */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Grafik unten bündig im Wrapper */
    margin-bottom: 10px; /* Luft zum unteren Kartenrand! */
}

.house-graphic-flat {
    width: 100%;
    height: 100%;
    /* Filter für Tiefe */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.6));
    /* Haus leicht nach oben schieben, falls viewBox nicht reicht */
    transform: translateY(-5px);
}

/* --- LOGIK FARBEN (Bleiben gleich, nur zur Sicherheit hier) --- */
.win-default { fill: #111; transition: fill 1s ease; }
.win-cold { fill: #3498db; fill-opacity: 0.6; }
.win-comfy { fill: #f1c40f; fill-opacity: 0.5; }
.win-warm { fill: #e67e22; fill-opacity: 0.6; }
.win-hot { fill: #e74c3c; fill-opacity: 0.7; animation: win-pulse 2s infinite alternate; }

@keyframes win-pulse { 0% { fill-opacity: 0.5; } 100% { fill-opacity: 0.8; } }


/* --- ZUBEREITUNGSSTATION (Glowing Surface) --- */

.prep-container {
    position: relative;
    height: 120px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
}

/* 1. Die Werte */
.prep-hud {
    margin-bottom: 20px;
    text-align: center;
    z-index: 5;
    text-shadow: 0 5px 15px rgba(0,0,0,0.8);
}

.prep-value {
    font-size: 3rem;
    font-weight: 700;
    color: #fff; /* Wird per JS gefärbt */
    line-height: 1;
    transition: color 0.5s ease;
}

.prep-unit {
    font-size: 1rem;
    color: #666;
    text-transform: uppercase;
}

/* 2. Die Oberfläche (Balken) */
.prep-surface-wrapper {
    width: 100%;
    height: 10px;
    position: relative;
}

.prep-surface {
    width: 100%;
    height: 8px;
    background: #333; /* Kalt: Dunkelgrau */
    border-radius: 4px;
    position: relative;
    z-index: 2;
    transition: all 1s ease;
    box-shadow: inset 0 2px 5px rgba(255,255,255,0.1); /* Metall-Effekt */
}

/* Der Schein unter der Platte */
.prep-reflection {
    width: 80%;
    height: 20px;
    margin: -5px auto 0 auto; /* Direkt unter der Platte */
    background: transparent;
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0;
    transition: all 1s ease;
}

/* 3. Hitzewellen (Heat Waves) */
.prep-heat-area {
    position: absolute;
    bottom: 15px; /* Startet auf der Platte */
    left: 0;
    width: 100%;
    height: 60px;
    overflow: hidden;
    opacity: 0; /* Standard: Aus */
    transition: opacity 2s ease;
    pointer-events: none;
}

.heat-active { opacity: 1; }

.heat-wave {
    position: absolute;
    bottom: -20px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    filter: blur(8px);
    animation: rise-heat 3s infinite linear;
}

.hw1 { left: 20%; animation-delay: 0s; transform: scale(1); }
.hw2 { left: 50%; animation-delay: 1.2s; transform: scale(1.5); }
.hw3 { left: 80%; animation-delay: 2.5s; transform: scale(0.8); }

@keyframes rise-heat {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    20% { opacity: 0.5; }
    100% { transform: translateY(-60px) scale(2); opacity: 0; }
}

/* --- ZUSTÄNDE (Farben) --- */

/* Warm (Orange) */
.surf-warm {
    background: linear-gradient(90deg, #333, #e67e22, #333);
    box-shadow: 0 0 15px rgba(230, 126, 34, 0.4);
}
.refl-warm { background: #e67e22; opacity: 0.4; }
.txt-warm { color: #f39c12; }

/* Heiß (Rot/Glühend) */
.surf-hot {
    background: linear-gradient(90deg, #333, #e74c3c, #333);
    box-shadow: 0 0 25px rgba(231, 76, 60, 0.6);
}
.refl-hot { background: #e74c3c; opacity: 0.6; }
.txt-hot { color: #e74c3c; text-shadow: 0 0 10px rgba(231, 76, 60, 0.4); }

/* --- HEAT PASS STATION (Wärmelampen Design) --- */

/* --- HEAT PASS STATION (Final Clean Layout) --- */

.heat-lamp-container {
    position: relative;
    height: 110px; /* Kompakter, Grafik sitzt höher */
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 15px; /* Etwas Abstand zum Titel */
    /* Kein Hintergrund mehr nötig, wirkt cleaner */
}

/* 1. Lampen (Zentriert mit Gap) */
.spotlight-row {
    display: flex;
    justify-content: center; /* WICHTIG: Zentriert die ganze Gruppe */
    gap: 60px; /* Abstand zwischen den beiden Lampen */
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    z-index: 5;
}

.spotlight-assembly {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
}

.spot-cable { width: 2px; height: 10px; background: #444; }

.spot-housing {
    width: 50px; height: 25px; background: #333;
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
    position: relative; z-index: 6;
    background: linear-gradient(to right, #222, #444, #222);
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}

.spot-inner {
    position: absolute; bottom: 0; left: 10%; width: 80%; height: 5px;
    background: #111; border-radius: 2px;
    transition: background 0.5s, box-shadow 0.5s;
}

/* css/style.css - Update für .spot-beam */

.spot-beam {
    position: absolute;
    /* 1. Direkt unter das Gehäuse andocken (Housing ist 25px hoch) */
    top: 25px;

    /* 2. Der Zentrier-Trick: */
    left: 50%;
    transform: translateX(-50%); /* Schiebt das Element exakt um die eigene Hälfte zurück */

    width: 70px;
    height: 70px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0));

    /* Der Lichtkegel (Trapez) */
    clip-path: polygon(35% 0, 65% 0, 100% 100%, 0% 100%);

    pointer-events: none;
    transition: all 0.8s ease;
    z-index: 1;
    opacity: 0;
    filter: blur(5px);
}

/* 2. Arbeitsfläche */
.prep-surface-wrapper {
    width: 100%;
    height: 10px;
    position: absolute;
    top: 90px; /* Fixe Position unter den Strahlen */
    z-index: 2;
}

.prep-surface {
    width: 100%; height: 6px; background: #222; border-radius: 3px;
    position: relative; z-index: 2; transition: background 1s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.surface-glow {
    position: absolute; top: -8px; left: 10%; width: 80%; height: 20px;
    background: transparent; border-radius: 50%; filter: blur(8px);
    transition: all 1s; opacity: 0;
}

/* 3. Text Block (Unter der Grafik) */
.prep-value-block {
    text-align: center;
    margin-top: 5px;
    z-index: 10;
}

/* Wir nutzen die existierende .main-value Klasse, passen Farbe aber per State an */
.prep-value-block .main-value {
    font-size: 3rem; /* Groß wie beim HBO */
    line-height: 1;
    transition: color 0.5s ease;
}

.prep-value-block .unit {
    font-size: 0.9rem;
    color: #666; /* Grau wie gewünscht */
    margin-top: 5px;
    letter-spacing: 1px;
}

/* --- ZUSTÄNDE --- */

/* WARM */
.pass-warm .spot-inner { background: #ffcc00; box-shadow: 0 0 15px #ffcc00; }
.pass-warm .spot-beam { background: linear-gradient(to bottom, rgba(255, 165, 0, 0.3), transparent); opacity: 1; }
.pass-warm .prep-surface { background: #444; border-bottom: 1px solid #ffcc00; }
.pass-warm .surface-glow { background: #ffcc00; opacity: 0.2; }
.pass-warm .main-value { color: #f1c40f; } /* Text wird gelb */

/* HEISS */
.pass-hot .spot-inner { background: #ff3300; box-shadow: 0 0 20px #ff3300; }
.pass-hot .spot-beam { background: linear-gradient(to bottom, rgba(255, 50, 0, 0.5), transparent); opacity: 1; }
.pass-hot .prep-surface { background: #222; border-bottom: 2px solid #ff3300; }
.pass-hot .surface-glow { background: #ff3300; opacity: 0.5; }
.pass-hot .main-value { color: #ff5533; text-shadow: 0 0 15px rgba(255, 85, 51, 0.3); } /* Text glüht rot */

/* ALARM CO */
/* ========================================= */
/* --- 1. GLOBALER HINTERGRUND-PULS (Body) --- */
/* ========================================= */

@keyframes screen-panic {
    0% {
        background-color: #000;
    }
    50% {
        background-color: #2b0505; /* Dunkelroter Hintergrund */
    }
    100% {
        background-color: #000;
    }
}

/* Diese Klasse kommt auf den <body> */
.global-alarm-active {
    /* WICHTIG: Hier kein box-shadow mehr, das macht jetzt das Overlay! */
    animation: screen-panic 1.5s infinite ease-in-out !important;
}

/* ========================================= */
/* --- 2. ALARM RAHMEN (Glühender Rand) --- */
/* ========================================= */

#alarm-border-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998; /* Unter dem Totenkopf, aber über allem anderen */
    pointer-events: none; /* Klicks gehen durch */
    box-sizing: border-box;

    opacity: 0; /* Standard: Unsichtbar */
    transition: opacity 0.5s ease;

    /* FIX: Border entfernt, Start-Schatten transparent */
    border: none;
    box-shadow: inset 0 0 0 0 rgba(231, 76, 60, 0);
}

/* Aktivierung */
body.global-alarm-active #alarm-border-overlay {
    opacity: 1;
    animation: frame-pulse 0.8s infinite alternate ease-in-out;
}

/* Die Pulsier-Animation für den Rand */
@keyframes frame-pulse {
    0% {
        /* Weicher, schmaler Schein */
        box-shadow: inset 0 0 30px 10px rgba(231, 76, 60, 0.4);
    }
    100% {
        /* Harter, breiter, intensiver Schein nach innen */
        box-shadow: inset 0 0 100px 30px rgba(231, 76, 60, 0.9);
    }
}

/* ========================================= */
/* --- 3. TOTENKOPF OVERLAY (Mitte) --- */
/* ========================================= */

/* ========================================= */
/* --- 3. TOTENKOPF & TEXT OVERLAY (Mitte) --- */
/* ========================================= */

#co-alarm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* WICHTIG: Column, damit Text unter Schädel steht */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    z-index: 9999; /* Ganz vorne */
    pointer-events: none;

    opacity: 0;
    transition: opacity 1s ease;
    /* Leichter Schein in der Mitte */
    background: radial-gradient(circle, rgba(231, 76, 60, 0.2) 0%, transparent 70%);
}

/* Der Totenkopf */
#co-alarm-overlay i {
    font-size: 20rem; /* Etwas kleiner als vorher, damit Text Platz hat */
    color: #e74c3c;
    opacity: 0.8;
    filter: drop-shadow(0 0 30px rgba(0,0,0,1.0)); /* Harter schwarzer Schatten für Kontrast */
    animation: alarm-pulse 1.0s infinite alternate ease-in-out;
    margin-bottom: 20px;
}

/* Der Warn-Text */
.alarm-text {
    font-size: 5rem; /* RIESIG */
    font-weight: 900; /* Extra Fett */
    color: #e74c3c;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-align: center;
    text-shadow: 0 0 20px #000; /* Schwarzer Glüheffekt für Lesbarkeit */
    font-family: 'Arial Black', sans-serif; /* Blockartige Schrift */

    /* Pulsiert synchron mit dem Schädel */
    animation: alarm-pulse 1.0s infinite alternate ease-in-out;
}

/* Sichtbarkeit */
body.global-alarm-active #co-alarm-overlay {
    opacity: 1;
}

/* Gemeinsame Animation für Schädel und Text */
@keyframes alarm-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
        text-shadow: 0 0 10px #000;
    }
    100% {
        transform: scale(1.1); /* Zoomt auf dich zu */
        opacity: 1; /* Volle Deckkraft */
        text-shadow: 0 0 40px #e74c3c; /* Roter Glüh-Effekt */
    }
}



/* --- AUSSENBEREICH FEUCHTIGKEIT DESIGN --- */

.humidity-block {
    display: flex;
    flex-direction: column;
}

.bar-gradient-container {
    width: 100%;
    height: 8px; /* Etwas dicker als vorher */
    border-radius: 4px;
    position: relative;
    /* Verlauf: Gelb (Trocken) -> Grün (Optimal) -> Blau (Feucht) */
    background: linear-gradient(90deg,
    #f1c40f 0%,   /* 0-30% */
    #f1c40f 25%,
    #2ecc71 40%,  /* 40-60% Optimal */
    #2ecc71 60%,
    #3498db 75%,  /* ab 75% Feucht */
    #3498db 100%
    );
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); /* Tiefe nach innen */
}

/* Der Punkt auf dem Balken */
.bar-dot {
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid #1c1c1e; /* Dunkler Rand für Kontrast */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%); /* Exakt zentriert auf der Position */
    box-shadow: 0 2px 5px rgba(0,0,0,0.8);
    transition: left 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* --- GRILLHAUS FLOORPLAN STYLE --- */

/* Das SVG Container */
.floorplan-svg {
    width: auto;       /* Passt sich der Breite an */
    height: 100%;      /* Nimmt volle Höhe */
    max-height: 160px; /* Begrenzung, damit es nicht riesig wird auf großen Monitoren */
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
    z-index: 1;
}

/* Die Heat-Map (Simuliert Wärme im Raum) */
.heat-overlay {
    position: absolute;
    top: 50%; left: 50%; /* Etwas mittig im "freien" Bereich */
    transform: translate(-50%, -50%);
    width: 120px;
    height: 80px;
    background: radial-gradient(circle, rgba(231, 76, 60, 0.6) 0%, transparent 70%);
    opacity: 0; /* Standard aus */
    filter: blur(20px);
    z-index: 0; /* Hinter dem SVG, aber wir machen SVG transparent wo nötig */
    transition: opacity 1s ease, background 1s ease;
    pointer-events: none;
}

/* Zustände für die Heat-Map (werden per JS gesteuert, oder wir nutzen die bestehende Logik) */
.room-warm {
    background: radial-gradient(circle, rgba(230, 126, 34, 0.5) 0%, transparent 70%);
    opacity: 0.6; /* This overrides opacity: 0 */
}
.room-hot {
    background: radial-gradient(circle, rgba(231, 76, 60, 0.8) 0%, transparent 70%);
    opacity: 0.9;
    animation: heat-pulse 3s infinite alternate;
}

.room-cold {
    background: radial-gradient(circle, rgba(231, 76, 60, 0.8) 0%, transparent 70%);
    opacity: 0.9;
    animation: heat-pulse 3s infinite alternate;
}

.room-cold {
    /* Eisblaues Leuchten */
    background: radial-gradient(circle, rgba(52, 152, 219, 0.5) 0%, transparent 70%);
    opacity: 0.5;
}