/* HomePulse – Design-Tokens, Farben vom Logo abgeleitet (Marine, Grün, Amber). Neue Farben nur als Token. */
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/roboto-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/roboto-700.woff2') format('woff2'); }

:root, [data-theme="dark"] {
    color-scheme: dark;
    --bg-primary: #0e1318;
    --bg-secondary: #151c23;
    --bg-tertiary: #1f2933;
    --bg-input: #0e1318;
    --border-color: #2a3641;
    --border-light: #212c36;
    --text-primary: #e9eef3;
    --text-secondary: #a9b6c2;
    --text-muted: #74838f;
    --brand: #ffcc00;                 /* Logo-Gelb: „Pulse“, Akzente */
    --brand-text: #ffcc00;            /* Logo-Gelb als Textfarbe (aktiver Menüpunkt) */
    --accent: #1fa971;                /* Grün: Aktionen, Links */
    --accent-hover: #188c5d;
    --accent-text: #4fd49d;           /* Linkfarbe auf dunklem Grund */
    --logo-navy: #dfe7ee; --logo-green: #22b76a; --logo-blue: #2f9de0; --logo-red: #e8483b;
    --glow: rgba(246, 176, 30, .07);
    --c-pv: #ffcc00; --c-haus: #3b9be0; --c-bezug: #ee5a4a; --c-einsp: #2bc58a; --c-akku: #9b7bf2; --c-netz: #ee5a4a; --c-grau: #8c9bab;
    --success: #2bc58a;
    --warning: #f6b01e;
    --error: #ee5a4a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.45);
}
[data-theme="light"] {
    color-scheme: light;
    --bg-primary: #edf1f4;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e6ecf0;
    --bg-input: #ffffff;
    --border-color: #d3dce3;
    --border-light: #e3e9ee;
    --text-primary: #1d2a36;
    --text-secondary: #4a5a69;
    --text-muted: #79889a;
    --brand: #ffcc00;
    --brand-text: #a87d00;            /* dunkleres Gelb, auf Weiß lesbar */
    --accent: #12945a;
    --accent-hover: #0d7a49;
    --accent-text: #0d7a49;
    --logo-navy: #3d474e; --logo-green: #008d36; --logo-blue: #0070ad; --logo-red: #be1622;
    --glow: rgba(246, 176, 30, .12);
    --c-pv: #ffcc00; --c-haus: #1f78c8; --c-bezug: #e5493a; --c-einsp: #16a36b; --c-akku: #7c5ce0; --c-netz: #e5493a; --c-grau: #8796a6;
    --success: #12945a;
    --warning: #c98a07;
    --error: #d63a2b;
    --shadow-sm: 0 1px 2px rgba(29,42,54,.08);
    --shadow-lg: 0 10px 30px rgba(29,42,54,.18);
}
:root { --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --topnav-height: 79px; --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; }

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topnav-height) + 12px); overflow-y: scroll; scrollbar-gutter: stable; }
body {
    margin: 0;
    min-height: 100vh;
    font: 14px/1.45 var(--font);
    background: radial-gradient(1100px 420px at 50% -160px, var(--glow), transparent 70%), var(--bg-primary);
    background-attachment: fixed;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;   /* Sicherung: nichts darf die Seite seitlich verschiebbar machen (clip erzeugt keinen Scrollbereich, sticky bleibt intakt) */
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .7rem; letter-spacing: -.01em; line-height: 1.2; }
h2 { font-size: .9rem; font-weight: 500; margin: 1rem 0 .4rem; color: var(--text-secondary); letter-spacing: .02em; }
p { margin: .25rem 0; overflow-wrap: anywhere; }
code { font-size: .88em; padding: 1px 5px; border-radius: 4px; background: var(--bg-tertiary); }
.muted { color: var(--text-muted); }
.inline { display: inline; margin: 0; }

/* ---------- Kopfleiste ---------- */
.topnav {
    position: sticky; top: 0; z-index: 2000;
    height: var(--topnav-height);
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}
.topnav-inner {
    width: 93%; max-width: 1400px; height: 100%; margin: 0 auto;
    display: flex; align-items: flex-end; gap: 1rem; padding: 10px 1rem 10px;   /* oben 10 px Luft über der Dachspitze = unten 10 px Luft unter dem Haus bis zur Linie der Leiste; Unterkante: Haus, Schriftzug und Menütexte auf einer Linie */
}
.brand { display: flex; align-items: flex-end; gap: 8px; color: var(--text-primary); flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand .mark { height: 58px; width: auto; flex-shrink: 0; }
.brand .wortmarke { height: 23px; width: auto; flex-shrink: 0; }
.lg-navy { fill: var(--logo-navy); } .lg-green { fill: var(--logo-green); } .lg-blue { fill: var(--logo-blue); } .lg-red { fill: var(--logo-red); } .lg-yellow { fill: var(--brand); }
.topnav-links { display: flex; align-items: flex-end; gap: 4px; flex: 1; margin-bottom: -8.5px; }   /* Grundlinie der Menütexte = Unterkante des Hauses */
.topnav-links > a, .dd-toggle {
    display: flex; align-items: center; gap: 6px;
    padding: .34rem .8rem; border-radius: var(--radius-sm);
    color: var(--text-secondary); font: 500 1.02rem var(--font);
    background: none; border: 0; cursor: pointer; white-space: nowrap; position: relative;
}
.topnav-links > a:hover, .dd-toggle:hover, .dd.open > .dd-toggle { color: var(--text-primary); text-decoration: none; }
.topnav-links > a.active, .dd.active > .dd-toggle { color: var(--brand-text); }
.dd { position: relative; }
/* Untermenü: eigene, durchgehende Leiste unter der Kopfleiste (abgesetzte Fläche, Rahmen unten, Reiter mit Unterstreichung); kein Aufklappen, kein Hover-Menü */
.subnav {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 2px; margin: 0;
    padding: 0 max(3.5%, calc((100% - 1400px) / 2));
    background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color);
    position: sticky; top: var(--topnav-height); z-index: 1900;   /* bleibt beim Scrollen direkt unter der Kopfleiste stehen */
}
html:has(.subnav) { scroll-padding-top: calc(var(--topnav-height) + 50px); }
.subnav a {
    padding: .5rem 1rem; color: var(--text-secondary); font: 500 .96rem var(--font); white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); color: var(--text-primary); text-decoration: none; }
.subnav a.active { color: var(--brand-text); border-bottom-color: var(--brand); font-weight: 600; }
.subnav ~ .content { margin-top: .8rem; }
.subnav-sep { width: 1px; margin: .45rem .4rem; background: var(--border-color); }
.dd-menu {
    display: block; visibility: hidden; opacity: 0; position: absolute; top: 100%; margin-top: 2px; left: 0; min-width: 200px; padding: 4px;
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    transition: opacity .12s, visibility 0s linear .12s;
}
.dd.open .dd-menu { visibility: visible; opacity: 1; transition-delay: 0s; }
.dd-menu a, .dd-menu button.dd-link {
    display: block; width: 100%; text-align: left; padding: .35rem .65rem; border-radius: var(--radius-sm);
    color: var(--text-secondary); font: 500 .86rem var(--font); background: none; border: 0; cursor: pointer;
}
.dd-menu a:hover, .dd-menu button.dd-link:hover { background: var(--bg-tertiary); color: var(--text-primary); text-decoration: none; }
.dd-menu a.active { color: var(--brand-text); background: var(--bg-tertiary); }
.dd-menu button.dd-link[aria-pressed="true"] { color: var(--brand-text); }
.dd-menu button.dd-link[aria-pressed="true"]::after { content: '✓'; float: right; margin-left: 1rem; }
.dd-menu .dd-sep { height: 1px; margin: 5px 4px; background: var(--border-color); }
.topnav-right { display: flex; align-items: flex-end; align-self: flex-end; gap: 6px; margin-left: auto; margin-bottom: -8.5px; }   /* wie das Menü: Text auf der Unterkante des Hauses */
.dd-right .dd-menu { left: auto; right: 0; }
.icon-btn {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-system, .theme-sun, .theme-moon { display: none; }
html[data-theme-wahl="system"] .theme-system { display: block; }
html[data-theme-wahl="light"] .theme-sun { display: block; }
html[data-theme-wahl="dark"] .theme-moon { display: block; }
.mobile-menu-toggle { display: none; align-self: flex-end; margin-bottom: -4px; }
.topnav-mobile-footer { display: none; }

/* ---------- Inhalt: Rand links/rechts wie Heimküche, auf großen Monitoren mehr Luft ---------- */
.content {
    width: 93%; max-width: 1400px; margin: .5rem auto .6rem;
    padding: .9rem 1.1rem 1.1rem;
    min-height: calc(100vh - var(--topnav-height) - 3.4rem);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.footer { width: 93%; max-width: 1400px; margin: 0 auto .8rem; padding: 0 .5rem; text-align: center; font-size: .75rem; color: var(--text-muted); }
.card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light); border-radius: var(--radius);
    padding: .7rem .85rem;
}
.card + .card, .card + h2, table + .card { margin-top: .55rem; }

/* ---------- Anmeldung ---------- */
.bare { width: 92%; max-width: 360px; margin: 0 auto; padding: 6vh 0 2rem; }
.login-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 1rem; text-align: center; }
.login-brand .logo-voll { width: 220px; height: auto; margin-bottom: .2rem; }
.login-brand .tag { margin-top: .4rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
.bare .card { background: var(--bg-secondary); padding: 1rem 1.1rem; box-shadow: var(--shadow-lg); border-color: var(--border-color); }
.bare h1 { font-size: 1.05rem; }

/* ---------- Formulare ---------- */
label { display: block; font-size: .76rem; font-weight: 500; color: var(--text-secondary); margin: .4rem 0 .15rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local], select, textarea {
    width: 100%; padding: .32rem .55rem;
    background: var(--bg-input); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    font: inherit; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
textarea { resize: vertical; min-height: 52px; }
input[type=file] { font: inherit; color: var(--text-secondary); max-width: 100%; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .35rem .7rem; align-items: end; }
.form-wide { grid-column: 1 / -1; }
.btn {
    display: inline-block; padding: .32rem .8rem;
    background: var(--accent); color: #fff; border: 0; border-radius: var(--radius-sm);
    font: 500 .86rem var(--font); cursor: pointer; transition: background .15s, transform .05s;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); padding: .2rem .6rem; }
.btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.btn-block { width: 100%; margin-top: .7rem; padding: .42rem; }
.link-btn {
    display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: .12rem .55rem;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    font-size: .8rem; font-weight: 500; color: var(--text-secondary); background: transparent;
}
.link-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); text-decoration: none; }

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: .26rem .55rem; text-align: left; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
th { font-size: .68rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); border-bottom-color: var(--border-color); white-space: nowrap; }
tbody tr:hover td, table tr:hover td { background: color-mix(in srgb, var(--bg-tertiary) 55%, transparent); }
table tr:last-child td { border-bottom: 0; }
td form { display: inline-flex; gap: 4px; align-items: center; margin: 0; }
td select, td input[type=password] { width: auto; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.actions { white-space: nowrap; }
.actions form { display: inline-flex; }
.scroll { overflow-x: auto; }
.eng th, .eng td { padding: .18rem .45rem; font-size: .79rem; }
.summe td { font-weight: 700; border-top: 2px solid var(--border-color); }
.status-ok { color: var(--success); } .status-veraltet { color: var(--warning); } .status-leer { color: var(--error); }

/* ---------- Toast ---------- */
#toast-container { position: fixed; top: calc(var(--topnav-height) + 14px); right: 1.25rem; z-index: 9999; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 2.5rem)); pointer-events: none; }
.toast-card {
    pointer-events: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: .5rem .7rem; border-radius: var(--radius);
    background: var(--bg-secondary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-left: 4px solid var(--accent);
    box-shadow: var(--shadow-lg); font-size: .85rem; font-weight: 500;
    transform: translateX(120%); opacity: 0; transition: transform .3s cubic-bezier(.2,.9,.3,1.2), opacity .3s;
}
.toast-card.show { transform: translateX(0); opacity: 1; }
.toast-ok { border-left-color: var(--success); }
.toast-error { border-left-color: var(--error); }
.toast-warning { border-left-color: var(--warning); }
.toast-close { background: none; border: 0; color: var(--text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.toast-close:hover { color: var(--text-primary); }

/* ---------- Auswertungen ---------- */
.chart-wrap, .scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
.chart { width: 100%; height: auto; display: block; min-width: 680px; }
.chart text { fill: var(--text-secondary); font-size: 10px; }
.chart .grid { stroke: var(--border-color); stroke-width: .5; }
.chart path { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
/* Diagrammstil wie in HA: Füllung halbtransparent, Kontur in derselben Farbe, Balken oben abgerundet */
.chart rect { rx: 3px; fill-opacity: .38; stroke-width: 1.3; }
.chart rect.f-pv { stroke: var(--c-pv); } .chart rect.f-haus { stroke: var(--c-haus); } .chart rect.f-bezug { stroke: var(--c-bezug); } .chart rect.f-einsp { stroke: var(--c-einsp); }
.chart rect.f-akku { stroke: var(--c-akku); } .chart rect.f-netz { stroke: var(--c-netz); } .chart rect.f-grau { stroke: var(--c-grau); }
.f-pv { fill: var(--c-pv); background: var(--c-pv); } .f-haus { fill: var(--c-haus); background: var(--c-haus); } .f-bezug { fill: var(--c-bezug); background: var(--c-bezug); }
.f-einsp { fill: var(--c-einsp); background: var(--c-einsp); } .f-akku { fill: var(--c-akku); background: var(--c-akku); } .f-netz { fill: var(--c-netz); background: var(--c-netz); } .f-grau { fill: var(--c-grau); background: var(--c-grau); }
.l-pv { stroke: var(--c-pv); } .l-haus { stroke: var(--c-haus); } .l-bezug { stroke: var(--c-bezug); } .l-einsp { stroke: var(--c-einsp); } .l-akku { stroke: var(--c-akku); } .l-netz { stroke: var(--c-netz); } .l-grau { stroke: var(--c-grau); }
.legende { display: flex; gap: 12px; flex-wrap: wrap; font-size: .75rem; color: var(--text-secondary); margin: 3px 0 0 3.2rem; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.card > strong { display: block; margin: .1rem 0 .25rem; font-weight: 500; color: var(--text-secondary); }
.card > svg + strong, .card > .legende + strong { margin-top: .7rem; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.kachel {
    background: var(--bg-primary); border: 1px solid var(--border-light); border-left: 4px solid var(--kachel, var(--border-color));
    border-radius: var(--radius); padding: .45rem .7rem;
}
.kachel .k-label { font-size: .72rem; letter-spacing: .03em; color: var(--text-secondary); }
.kachel .k-wert { font-size: 1.3rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kachel .k-einheit { font-size: .75rem; color: var(--text-muted); font-weight: 400; }
.kachel .k-sub { font-size: .7rem; color: var(--text-muted); overflow-wrap: anywhere; }
.k-pv { --kachel: var(--c-pv); } .k-haus { --kachel: var(--c-haus); } .k-netz { --kachel: var(--c-netz); } .k-akku { --kachel: var(--c-akku); } .k-einsp { --kachel: var(--c-einsp); }

.tabs { display: flex; gap: 6px; align-items: center; margin-bottom: .6rem; flex-wrap: wrap; }
.tabs strong { padding: 0 .2rem; font-weight: 500; }
.tabs .aktiv { background: var(--accent); color: #fff; border-color: var(--accent); }
.tabs .aktiv:hover { background: var(--accent-hover); }

/* ---------- Responsiv ---------- */
@media (max-width: 900px) {
    :root { --topnav-height: 61px; }
    .topnav-inner { width: 100%; padding: 6px .75rem 6px; gap: .4rem; }
    .brand .mark { height: 48px; }
    .brand .wortmarke { height: 18px; }
    .mobile-menu-toggle { display: inline-flex; order: 5; }
    .topnav-right .user-dd { display: none; }
    .topnav-right { margin-bottom: -4px; }
    .topnav-links {
        display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px;
        max-height: calc(100vh - var(--topnav-height)); overflow-y: auto;
        padding: .4rem .6rem .7rem; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-lg);
    }
    .topnav-links.open { display: flex; }
    .topnav-links > a, .dd-toggle { padding: .5rem .7rem; width: 100%; justify-content: space-between; font-size: .95rem; }
    .subnav { padding: 0 .3rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .subnav::-webkit-scrollbar { display: none; }
    .subnav a { padding: .6rem .8rem; flex-shrink: 0; }   /* größere Tippfläche, Einträge schrumpfen nicht */
    .subnav.sn-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); }
    .subnav.sn-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); }
    .subnav.sn-l.sn-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); }
    .topnav-mobile-footer { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; padding: .8rem .8rem 0; border-top: 1px solid var(--border-color); color: var(--text-muted); }
    .content { width: 100%; max-width: none; margin: 0; border-radius: 0; border-left: 0; border-right: 0; padding: .7rem .7rem 1rem; min-height: calc(100vh - var(--topnav-height)); }
    .footer { width: 100%; margin-bottom: .6rem; }
    h1 { font-size: 1.15rem; }
    .kacheln { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
    .kachel .k-wert { font-size: 1.2rem; }
    .legende { margin-left: 0; }
    #toast-container { left: 1rem; right: 1rem; width: auto; }
    .chart text { font-size: 16px; }
}
@media (max-width: 480px) {
    .card { padding: .55rem .6rem; }
    th, td { padding: .24rem .4rem; }
}
@media (min-width: 1700px) {
    body { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Heizungs-Schema (heizung_schema.php): alles in Prozent der Bildgröße, skaliert mit der Breite ---- */
.hs-kopf { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 .85rem; flex-wrap: wrap; }   /* Stand bündig an der Unterkante (Grundlinie) der Überschrift */
.hs-kopf h1 { margin: 0; }   /* Überschrift, Stand und Pelletpreis in einer Zeile */
.hs-preis { margin: -.4rem 0 -.4rem auto; align-self: center; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-secondary); font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-preis svg { width: 1.1rem; height: 1.1rem; color: var(--brand-text); }
/* zentriert im Container */
.hs-karte { max-width: 1100px; margin: 0 auto; background: #1c1c1c; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2%; }
/* Zeichnung ohne eigenen Hintergrund und Rahmen, wirkt als Teil der Seite. Die Zeichnung ist für dunklen Grund gemalt; im Hellmodus werden die hellgrauen Teile abgedunkelt (Filter) und die Werte-Kästchen bekommen einen feinen Rand. */
.hs-karte { background: transparent; border-color: transparent; }
[data-theme="light"] .hs-basis, [data-theme="light"] .hs-tank-details { filter: brightness(.72); }
[data-theme="light"] .hs-grafik { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5)); }
[data-theme="light"] .hs-pumpe:not(.an) { --pc: #8d8d8d; }
[data-theme="light"] .hs-zustand { color: #1f2933; }
[data-theme="light"] .hs-f-kontur { fill: #9a9a9a; }
.hs-bild { position: relative; width: 100%; aspect-ratio: 793.46 / 501.84; }
.hs-bild img { display: block; }
.hs-basis { width: 100%; height: auto; }
.hs-grafik { position: absolute; height: auto; transform: translate(-50%, -50%); pointer-events: none; }
.hs-wert {
    position: absolute; transform: translate(-50%, -50%); white-space: nowrap; text-align: center;
    font-weight: 700; color: #000; font-variant-numeric: tabular-nums;
    font-size: clamp(7px, calc(7px + 7 * ((100vw - 320px) / 1280)), 14px);
}
.hs-wert.hs-alt { opacity: .35; }
/* Betriebszustand des Kessels als Text im freien Rechteck über der Kesseltemperatur (heller Text auf dem dunklen Kessel) */
.hs-zustand {
    position: absolute; transform: translate(-50%, -50%); text-align: center; line-height: 1.15; overflow-wrap: anywhere; padding-top: .18em;   /* optisch mittig: Großbuchstaben ohne Unterlängen sitzen sonst etwas hoch */
    font-weight: 700; color: #e9eef3; font-size: clamp(6px, calc(6px + 6 * ((100vw - 320px) / 1280)), 12px);
}
.hs-zustand.hs-alt { opacity: .35; }
/* Animiertes Schema (ABSTIMMUNG [103]-[106]): Puffer/Boiler rot unten, blau oben (beide Farbebenen um 180° gedreht, die Detailebene nicht) */
.hs-tank, .hs-tank-details { position: absolute; height: auto; pointer-events: none; }
.hs-tank { transform: translate(-50%, -50%) translateX(var(--vx, 0%)) rotate(180deg); }
.hs-tank-details { transform: translate(-50%, -50%); }
.hs-tank-rot { transition: clip-path 1.6s ease-out; }
.hs-pumpe { position: absolute; transform: translate(-50%, -50%); pointer-events: none; --pc: #bbb; }
.hs-pumpe.an { --pc: #4eaf4a; }
.hs-pumpe svg { display: block; width: 100%; height: auto; }
.hs-pumpe path { fill: var(--pc); transition: fill .4s; }
.hs-rad { transform-box: fill-box; transform-origin: 50% 50%; }
.hs-pfeile { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hs-pfeil { fill: #fff; }
/* Flamme: aus (nur Kontur), anlauf (klein, pulsiert), heizen (flackert), abstellen (klein, wechselt zwischen Glut und grau); ABSTIMMUNG [103] Abschnitt 3 */
.hs-flamme { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.hs-flamme svg { display: block; width: 100%; height: auto; overflow: visible; }
.hs-f-kontur { fill: #cac9c9; fill-rule: evenodd; }
/* Größe im Zustand Heizen nach der Stellgröße (--g), weich überblendet */
.hs-f-groesse { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--g, 1)); transition: transform 1.6s ease-out; }
/* Kontur (grauer Hintergrund) und Glut bewegen sich in allen Zuständen gemeinsam: Größe und Animation liegen auf der Gruppe .hs-f-bew */
.hs-f-bew { transform-box: fill-box; transform-origin: 50% 100%; }
.hs-f-glut { opacity: 0; transition: opacity .6s; }
.hs-f-poly { fill: #f39204; fill-rule: evenodd; }
.hs-f-rot { fill: #be1823; fill-rule: evenodd; }
.hs-flamme[data-z="anlauf"] .hs-f-bew { transform: scale(var(--s)); animation: hs-puls var(--d) ease-in-out infinite; }
.hs-flamme[data-z="anlauf"] .hs-f-glut { opacity: 1; filter: drop-shadow(0 0 2px #f39204); }
.hs-flamme[data-z="heizen"] .hs-f-bew { animation: hs-flackern .9s ease-in-out infinite alternate; }
.hs-flamme[data-z="heizen"] .hs-f-glut { opacity: 1; }
.hs-flamme[data-z="abstellen"] .hs-f-bew { transform: scale(.67); animation: hs-abst 3.5s ease-in-out infinite; }
.hs-flamme[data-z="abstellen"] .hs-f-glut { opacity: 1; }
.hs-flamme[data-z="abstellen"] .hs-f-poly { animation: hs-abst-poly 3.5s ease-in-out infinite; }
.hs-flamme[data-z="abstellen"] .hs-f-rot { animation: hs-abst-rot 3.5s ease-in-out infinite; }
@keyframes hs-puls { 0%, 100% { transform: scale(calc(var(--s) * .8)); opacity: .55; } 50% { transform: scale(var(--s)); opacity: 1; } }
@keyframes hs-flackern {
    0% { transform: scale(1, 1); } 25% { transform: scale(.96, 1.05) skewX(-2deg); } 50% { transform: scale(1.03, .94) skewX(1.5deg); }
    75% { transform: scale(.97, 1.04) skewX(-1deg); } 100% { transform: scale(1.02, .97) skewX(2deg); }
}
@keyframes hs-abst { 0%, 100% { transform: scale(.62); opacity: .35; } 50% { transform: scale(.72); opacity: .8; } }
@keyframes hs-abst-poly { 0%, 100% { fill: #cac9c9; } 50% { fill: #b7762a; } }
@keyframes hs-abst-rot { 0%, 100% { fill: #a5a5a5; } 50% { fill: #7e1a20; } }
/* Overlay in den Koordinaten der Basiszeichnung (Asche, später Heizkreis-Symbole und Pelletfüllstände) */
.hs-zeichnung { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#hs-asche { transition: fill 1s; }
.hs-asche-fuell { transition: transform 1.6s ease-out; }
.hs-pellets { fill: none; stroke: #656565; stroke-linecap: round; }
.hs-welle { transition: transform 1.6s ease-out; }
.hs-bedarf { fill: #c86465; opacity: 0; transition: opacity .6s; }
.hs-bedarf.an { opacity: 1; }
/* Bedarf-Anzeige (Heizkreis hat Bedarf): aufsteigende Wärmewellen über dem Symbol */
.hs-anz { opacity: 0; transition: opacity .6s; pointer-events: none; }
.hs-anz.an { opacity: 1; }
.hs-wl { fill: none; stroke: #c86465; stroke-width: 1.7; stroke-linecap: round; opacity: 0; animation: hs-steigt 2.4s ease-in infinite; }
.hs-anz:not(.an) .hs-wl { animation-play-state: paused; }
@keyframes hs-steigt { 0% { transform: translateY(2px); opacity: 0; } 25% { opacity: .95; } 100% { transform: translateY(-9px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .hs-tank-rot, .hs-pumpe path, #hs-asche, .hs-asche-fuell, .hs-f-glut, .hs-f-groesse, .hs-welle, .hs-bedarf { transition: none; }
    .hs-flamme .hs-f-bew, .hs-flamme .hs-f-poly, .hs-flamme .hs-f-rot { animation: none !important; }
        .hs-flamme[data-z="anlauf"] .hs-f-bew { transform: scale(var(--s)); }
}

/* ---- Strom live: Jetzt-Block (strom_live.php) ---- */
.sl-alt { opacity: .45; }
.sl-fluss svg { display: block; width: 100%; max-width: 560px; margin: 0 auto; }
.sl-knoten rect { fill: var(--bg-tertiary); stroke: var(--border-color); stroke-width: 1.2; }
.sl-knoten .sl-pv { stroke: var(--c-pv); } .sl-knoten .sl-haus { stroke: var(--c-haus); } .sl-knoten .sl-netz { stroke: var(--c-netz); } .sl-knoten .sl-akku { stroke: var(--c-akku); }
.sl-text text { text-anchor: middle; fill: var(--text-primary); font-family: var(--font); }
.sl-text .sl-t1 { font-size: 10px; fill: var(--text-secondary); }
.sl-text .sl-t2 { font-size: 15px; font-weight: 700; }
.sl-pfeile path { fill: none; stroke: var(--c-grau); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sl-pfeile path.an { opacity: 1; stroke: var(--accent-text); }
.sl-strang { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .45rem; }
.sl-strang .k-label { width: 4.5rem; }
.sl-kachel { display: flex; flex-direction: column; align-items: center; min-width: 3.9rem; padding: .25rem .4rem; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg-tertiary); font-variant-numeric: tabular-nums; }
.sl-kachel .sl-id { font-size: .66rem; color: var(--text-muted); }
.sl-kachel .sl-w { font-weight: 700; font-size: .88rem; }

.hinweis-f { display: inline-block; padding: 0 .3rem; border: 1px solid var(--warning); border-radius: var(--radius-sm); color: var(--warning); font-size: .7rem; font-weight: 700; line-height: 1.3; }

.kachel .k-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Dach-Ansicht und Zeitraffer (dach.php, dach_zeitraffer.php) ---- */
.dach-huelle { max-width: 1100px; margin: .5rem auto 0; }
.dach-raster { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: clamp(2px, .9vw, 8px); }
.dach-balken { grid-column: 1 / -1; height: 22px; line-height: 22px; background: #454545; color: #ddd; border-radius: 4px; text-align: center; font-size: 11px; letter-spacing: 2px; white-space: nowrap; overflow: hidden; }
.dach-leer { aspect-ratio: 9 / 14; }
.dach-kachel {
    container: dach / inline-size; aspect-ratio: 9 / 14; border-radius: 10px; background: #2a3340; color: #aab4c0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; min-width: 0;
}
.dach-nm { font-size: clamp(6px, 24cqw, 13px); line-height: 1; opacity: .85; }
.dach-v { font-size: clamp(9px, 38cqw, 28px); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dach-ico { width: clamp(7px, 30cqw, 18px); height: auto; opacity: .45; }
.dach-kachel.blitz .dach-ico { color: #FFD84D; opacity: 1; }
.dach-st.an { box-shadow: inset 0 0 0 2px #7FD6FF; }
.dach-st.an .dach-ico { color: #7FD6FF; opacity: 1; }
.dach-fenster { grid-column: span 2; border-radius: 10px; overflow: hidden; background: #454545; }
.dach-kamin { border-radius: 10px; overflow: hidden; background: #454545; }
.dach-fenster svg, .dach-kamin svg { display: block; width: 100%; height: 100%; }
.dach-kopf { display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: flex-end; justify-content: space-between; max-width: 1100px; margin: 0 auto; }
.dach-summe { font-size: clamp(1.5rem, 5vw, 2.3rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; min-width: 4.4ch; }
.dz-summe { color: var(--brand-text); }
.dz-kopf { display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: flex-end; justify-content: space-between; max-width: 1100px; margin: 0 auto; }
.dz-tag { display: flex; align-items: center; gap: .4rem; }
.dz-tag input[type=date] { font: inherit; padding: .3rem .5rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); }
.dz-anzeige { display: flex; gap: 1.6rem; align-items: flex-end; }
.dz-layout { display: grid; gap: .8rem; max-width: 1100px; margin: .5rem auto 0; }
.dz-layout .dach-huelle { margin: 0; max-width: none; }
@media (min-width: 900px) { .dz-layout { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); align-items: start; } }
.dz-seite svg { width: 100%; height: auto; display: block; }
.dz-seite svg .grid { stroke: var(--border-color); stroke-width: 1; }
.dz-seite svg .line { fill: none; stroke: var(--c-pv); stroke-width: 2; stroke-linejoin: round; }
.dz-seite svg .cur { stroke: var(--text-primary); stroke-width: 1; opacity: .6; }
.dz-seite svg .dot { fill: var(--c-pv); stroke: var(--bg-secondary); stroke-width: 2; }
.dz-seite svg text { fill: var(--text-muted); font-size: 11px; }
.dz-steuerung { display: flex; align-items: center; gap: .8rem; margin-top: .6rem; }
.dz-steuerung input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.dz-play { min-width: 6.5rem; text-align: center; }
.dz-dauer { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .6rem; }
.dz-dauer .link-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.dz-legende { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; font-size: .8rem; color: var(--text-muted); }
.dz-skala { width: 160px; max-width: 100%; height: 10px; border-radius: 3px; background: linear-gradient(90deg, hsl(220 55% 30%), hsl(175 60% 34%), hsl(130 65% 38%)); }

/* ---- Pelletpreis-Verlauf (pelletpreis.php) ---- */
.pp-chart { width: 100%; height: auto; display: block; }
.pp-chart .grid { stroke: var(--border-color); stroke-width: 1; }
.pp-chart text { fill: var(--text-muted); font-size: 11px; }
.pp-linie { fill: none; stroke: var(--c-haus); stroke-width: 2; stroke-linejoin: round; }
.pp-kauf { fill: var(--brand); stroke: var(--bg-secondary); stroke-width: 2; }
.pp-leg-linie, .pp-leg-kauf { display: inline-block; vertical-align: middle; }
.pp-leg-linie { width: 22px; height: 3px; background: var(--pv-vnetz); }
.pp-leg-kauf { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--pv-netz) 45%, transparent); border: 1.5px solid var(--pv-netz); box-sizing: border-box; }

/* Heizstab-Seite: Urteil mit Ampelpunkt, beste Variante hervorgehoben, Erklärung */
.urteil { border-left: 4px solid var(--border-color); }
.urteil-kopf { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; }
.urteil-punkt { width: .9rem; height: .9rem; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.urteil-ok { border-left-color: var(--success); } .urteil-ok .urteil-punkt { background: var(--success); }
.urteil-warn { border-left-color: var(--warning); } .urteil-warn .urteil-punkt { background: var(--warning); }
.urteil-error { border-left-color: var(--error); } .urteil-error .urteil-punkt { background: var(--error); }
.urteil p { margin: .35rem 0 0; }
.kachel-beste { border-color: var(--brand); }
.erklaerung { margin: .3rem 0 0 1.2rem; padding: 0; } .erklaerung li { margin: .25rem 0; }
details.card > summary { cursor: pointer; font-weight: 500; color: var(--text-secondary); }

/* PV-Ansicht (strom_live.php, includes/pv_ansicht.php, assets/js/pv_ansicht.js): Zeitraum, Zeitleiste, Bilanz, Diagramme. Farben wie in der SolarEdge-App. */
:root { --pv-haus: #34c77b; --pv-batt: #86e8b2; --pv-netz: #14b4c8; --pv-aus: #4f8ef7; --pv-vbatt: #a9c9ff; --pv-vnetz: #f59e5b; --pv-soc: #6fb4f5; }
[data-theme="light"] { --pv-haus: #22b36a; --pv-batt: #7edcab; --pv-netz: #0aa3b8; --pv-aus: #3d7bea; --pv-vbatt: #9bbcf5; --pv-vnetz: #f08a3c; --pv-soc: #5aa6ec; }
.pvp-ins_haus { --c: var(--pv-haus); } .pvp-zur_batt { --c: var(--pv-batt); } .pvp-ins_netz { --c: var(--pv-netz); }
.pvv-aus_pv { --c: var(--pv-aus); } .pvv-von_batt { --c: var(--pv-vbatt); } .pvv-vom_netz { --c: var(--pv-vnetz); }
.pvb-soc { --c: var(--pv-soc); } .pvb-geladen { --c: var(--pv-batt); } .pvb-entladen { --c: var(--pv-vnetz); }
.pv-balken i, .pv-teile i, .pv-leg i, .pv-tip i { background: var(--c); }
.pv-ring-teil, .flaeche, .balken { fill: var(--c); }
.pv-ring-teil { fill: none; stroke: var(--c); stroke-width: 9; }
/* Balken, Ring und Punkte der Bilanz leicht durchscheinend (passt zu den Layer-Flächen der Diagramme) */
.pv-balken i, .pv-teile i, .pv-ring-teil { opacity: .6; }

.pv-leiste { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.pv-tabs { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--bg-tertiary); border-radius: 999px; padding: 3px; }   /* zu viele Reiter: seitlich wischen statt die Seite zu verbreitern */
.pv-tabs::-webkit-scrollbar { display: none; }
.pv-tabs a { flex-shrink: 0; white-space: nowrap; text-align: center; padding: .28rem .85rem; border-radius: 999px; font-size: .88rem; font-weight: 500; color: var(--text-secondary); }
.pv-tabs a:hover { text-decoration: none; color: var(--text-primary); }
.pv-tabs a.aktiv { background: var(--accent); color: #fff; }
.pv-zeit { display: inline-flex; align-items: center; gap: .25rem; }
.pv-pfeil { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; border-radius: 999px; font-size: 1.1rem; color: var(--accent-text); }
a.pv-pfeil:hover { background: var(--bg-tertiary); text-decoration: none; }
.pv-pfeil.aus { color: var(--text-muted); opacity: .45; }
.pv-datum { margin: 0; } .pv-datum label { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.pv-titel { padding: 0 .4rem; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.pv-datum input[type=date] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

.pv-bilanzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .55rem; margin-bottom: .55rem; }
.pv-bilanzen .card { margin-top: 0; }
.pv-bil-kopf { display: flex; justify-content: space-between; align-items: baseline; }
.pv-summe { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; } .pv-summe small { font-size: .8rem; font-weight: 400; color: var(--text-muted); }
.pv-balken { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: .35rem 0 .6rem; background: var(--bg-tertiary); }
.pv-balken i { display: block; height: 100%; }
.pv-ring-zeile { display: flex; align-items: center; gap: .9rem; }
.pv-ring { width: 78px; height: 78px; flex-shrink: 0; transform: rotate(-90deg); }
.pv-ring-bg { fill: none; stroke: var(--bg-tertiary); stroke-width: 9; }
.pv-teile { list-style: none; margin: 0; padding: 0; flex: 1; }
.pv-teile li { display: grid; grid-template-columns: 12px 1fr auto 3.2rem; gap: .5rem; align-items: center; padding: .12rem 0; font-size: .88rem; }
.pv-teile i { width: 10px; height: 10px; border-radius: 50%; }
.pv-teile b { font-weight: 600; font-variant-numeric: tabular-nums; } .pv-teile em { font-style: normal; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

.pv-diagramme { display: grid; gap: .55rem; }
.pv-diagramme .card { margin-top: 0; }
.pv-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .2rem; }
.pv-kopf strong { font-size: .98rem; font-weight: 600; } .pv-kopf-wert { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: .9rem; }
.pv-chart { position: relative; min-height: 120px; }
.pv-svg { display: block; width: 100%; touch-action: pan-y; cursor: crosshair; }
.pv-svg text { fill: var(--text-secondary); font-size: 11px; } .pv-svg .einheit { fill: var(--text-muted); }
.pv-svg .grid { stroke: var(--border-color); stroke-width: .6; }
.pv-svg .flaeche { fill-opacity: .28; stroke: none; } .pv-svg .einzel { fill: none; stroke: var(--c); stroke-width: 1.2; stroke-linejoin: round; } .pv-svg .kante { fill: none; stroke: var(--text-secondary); stroke-width: .8; opacity: .45; stroke-linejoin: round; } .pv-svg .balken { fill-opacity: .4; stroke: var(--c); stroke-width: 1.3; rx: 3px; }
.pv-svg .refl { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 5 4; } .pv-svg .reft { fill: var(--text-muted); font-size: 10px; }
.pv-svg .zeiger { stroke: var(--text-primary); stroke-width: 1; } .pv-svg .zeigerpunkt { fill: var(--bg-secondary); stroke: var(--text-primary); stroke-width: 2; }
.pv-tip { position: absolute; top: -4px; z-index: 5; pointer-events: none; background: #23292f; color: #fff; border-radius: 8px; padding: .3rem .55rem; font-size: .78rem; box-shadow: var(--shadow-lg); white-space: nowrap; }
.pv-tip-kopf { display: flex; gap: .8rem; justify-content: space-between; font-size: .85rem; } .pv-tip-kopf b { font-weight: 700; }
.pv-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; } .pv-tip b { margin-left: .4rem; }
.pv-legende { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .3rem; font-size: .8rem; color: var(--text-secondary); }
.pv-leg { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: .1rem 0; font: inherit; color: inherit; cursor: pointer; }
.pv-leg i { width: 12px; height: 12px; border-radius: 50%; } .pv-leg.aus { opacity: .4; text-decoration: line-through; } .pv-leg.aus i { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.pv-leg-ref { color: var(--text-muted); }
@media (max-width: 900px) { .pv-leiste { justify-content: center; } .pv-svg text { font-size: 12px; } }

/* Räume-Übersicht (raeume.php, includes/raeume.php, assets/js/raeume.js) */
.rk-kopf-zeile { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 .7rem; flex-wrap: wrap; }
.rk-kopf-zeile h1 { margin: 0; }
.rk-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.rk-chip { padding: .12rem .6rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-secondary); font-size: .8rem; color: var(--text-secondary); }
.rk-chip b { color: var(--text-primary); font-variant-numeric: tabular-nums; margin-right: .2rem; }
.rk-chip-heizt b { color: #f59e5b; } .rk-chip-fenster { border-color: var(--pv-aus); } .rk-chip-fenster b { color: var(--pv-aus); }
.rk-chip-kalt { border-color: #5aa6ec; } .rk-chip-kalt b { color: #5aa6ec; }
.rk-etagen { display: grid; gap: .4rem; margin-top: .5rem; }
.rk-etage { display: grid; grid-template-columns: 2.2rem 1fr; gap: .5rem; align-items: stretch; }
.rk-etage-name { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--bg-tertiary); color: var(--text-muted); font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.rk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: .4rem; }
.rk { background: var(--bg-secondary); border: 1px solid var(--border-color); border-left-width: 3px; border-radius: var(--radius-sm); padding: .3rem .5rem .3rem; display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.rk.rk-heizt { border-left-color: #f59e5b; } .rk.rk-fenster { border-left-color: var(--pv-aus); } .rk.rk-kalt:not(.rk-heizt):not(.rk-fenster) { border-left-color: #5aa6ec; }
.rk.rk-alt { opacity: .45; }
.rk-name { display: flex; justify-content: space-between; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; color: var(--text-secondary); min-width: 0; }
.rk-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-icons { display: inline-flex; gap: .2rem; flex-shrink: 0; }
.rk-ik { display: inline-flex; } .rk-ik svg { width: .85rem; height: .85rem; } .rk-ik-heizt { color: #f59e5b; } .rk-ik-fenster { color: var(--pv-aus); }
.rk-ist { font-size: 1.3rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .1rem; }
.rk-ist small { font-size: .7rem; font-weight: 400; color: var(--text-muted); }
.rk-soll { margin-left: auto; font-size: .7rem; font-weight: 500; color: var(--text-muted); }
.rk-zeile { display: flex; justify-content: space-between; align-items: center; font-size: .76rem; font-variant-numeric: tabular-nums; }
.rk-feuchte { display: inline-flex; align-items: center; gap: .2rem; color: var(--text-secondary); } .rk-feuchte svg { width: .75rem; height: .75rem; color: #5aa6ec; }
.rk-feuchte.rk-trocken svg { color: #f6b01e; } .rk-feuchte.rk-feucht { color: #f6b01e; } .rk-feuchte.rk-feucht-hoch { color: var(--error); font-weight: 700; } .rk-feuchte.rk-feucht-hoch svg { color: var(--error); }
.rk-diff { color: var(--text-muted); } .rk-diff.kalt { color: #5aa6ec; font-weight: 600; } .rk-diff.warm { color: #f59e5b; font-weight: 600; }
.rk-verlauf .rk-steuer { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; margin-bottom: .5rem; }
.rk-schnell { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.rk-schnell button { padding: .1rem .6rem; border: 1px solid var(--border-color); border-radius: 999px; background: none; color: var(--text-secondary); font: inherit; font-size: .8rem; cursor: pointer; }
.rk-schnell button:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.rk-raumwahl { display: flex; flex-wrap: wrap; gap: .15rem .8rem; margin-bottom: .4rem; }
.rk-linie { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.pv-svg .rk-soll-linie { stroke-dasharray: 5 4; stroke-width: 1.4; opacity: .8; }
.rk-fenster-band { fill: var(--pv-aus); opacity: .55; }
.pv-tip .muted-tip { color: #b8c4cf; margin-top: .1rem; }
.rk-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: .55rem; margin-top: .55rem; }
.rk-paar .card { margin-top: 0; }
.rk-abw { display: grid; gap: .22rem; margin: .4rem 0; }
.rk-abw-zeile { display: grid; grid-template-columns: 8.5rem 1fr 3.6rem; gap: .5rem; align-items: center; font-size: .82rem; }
.rk-abw-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-abw-spur { position: relative; height: .7rem; background: var(--bg-tertiary); border-radius: 3px; }
.rk-abw-spur::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--text-muted); }
.rk-abw-spur.rk-abw-links::before { display: none; }
.rk-abw-spur i { position: absolute; top: 0; bottom: 0; border-radius: 3px; box-sizing: border-box; border: 1.3px solid; }   /* halbtransparent mit Kontur wie in HA */
.rk-abw-spur i.kalt { background: rgba(90, 166, 236, .4); border-color: #5aa6ec; } .rk-abw-spur i.warm { background: rgba(245, 158, 91, .4); border-color: #f59e5b; } .rk-abw-spur i.heizt { background: rgba(245, 158, 91, .4); border-color: #f59e5b; }
.rk-zelle { stroke: none; }
.pv-svg .rk-flaeche { stroke: none; }
.rk-abw-wert { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .rk-abw-wert.kalt { color: #5aa6ec; }
@media (max-width: 900px) { .rk-etage { grid-template-columns: 1fr; } .rk-etage-name { justify-content: flex-start; padding: .1rem .5rem; } .rk-raster { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } .rk-abw-zeile { grid-template-columns: 7rem 1fr 3.4rem; } }
/* Räume: Heatmap */
.rk-heatkarte .rk-steuer { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; margin-bottom: .5rem; }
.rk-heat { position: relative; overflow-x: auto; }
.rk-heatsvg { cursor: crosshair; touch-action: pan-y; }
.rk-heatsvg text { font-size: 10px; }
.rk-zelle.leer { fill: var(--bg-tertiary); opacity: .5; }
.rk-heat-skala { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .75rem; color: var(--text-muted); }
.rk-heat-leiste { display: flex; flex: 0 1 220px; height: 8px; border-radius: 4px; overflow: hidden; } .rk-heat-leiste i { flex: 1; display: block; }
/* Wasser: Tagesverlauf */
.ws-kopf { display: flex; flex-wrap: wrap; gap: .4rem .9rem; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.pv-svg .ws-balken { fill: #14b4c8; fill-opacity: .4; stroke: #14b4c8; stroke-width: 1.3; rx: 3px; }

/* Info-Symbol mit Tooltip (info_i() in includes/bootstrap.php) */
.info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; margin-left: .35rem; border: 1.5px solid var(--text-muted); border-radius: 50%; color: var(--text-muted); font: italic 700 .68rem/1 Georgia, serif; text-transform: none; letter-spacing: 0; cursor: help; vertical-align: middle; flex-shrink: 0; }
.info:hover, .info:focus { color: var(--accent-text); border-color: var(--accent-text); outline: none; }
.info::after {
    content: attr(data-info); position: absolute; z-index: 50; left: -6px; top: calc(100% + 8px);
    width: max-content; max-width: min(280px, 72vw); padding: .45rem .65rem; border-radius: 8px; background: #23292f; color: #e9eef3;
    font: 400 .76rem/1.35 var(--font); font-style: normal; text-align: left; white-space: normal; box-shadow: var(--shadow-lg);
    display: none; pointer-events: none;   /* nicht nur unsichtbar: ein verstecktes, überstehendes Tooltip würde die Seite seitlich verschiebbar machen */
}
.info:hover::after, .info:focus::after { display: block; }
.info[data-lang]::after { max-width: min(440px, 78vw); }
h2 .info { margin-left: .45rem; }
.hs-kopf .info { margin-left: .1rem; }
.info.rechts::after { left: auto; right: -6px; }   /* Symbol in der rechten Seitenhälfte: Tooltip nach links öffnen, bleibt im Bild */

/* Pelletpreis: zoombares Diagramm */
.pp-steuer { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: center; margin-bottom: .4rem; min-width: 0; }
.pp-steuer > * { min-width: 0; max-width: 100%; }
.pv-tabs.pv-tabs-wrap { flex-wrap: wrap; overflow: visible; border-radius: 18px; justify-content: center; }   /* viele Reiter: in zwei Zeilen umbrechen statt wegwischen */
@media (max-width: 900px) { .pp-zoom { display: flex; width: 100%; justify-content: flex-start; } .pp-steuer { gap: .5rem; } }
.pp-datum input[type=date] { min-width: 0; width: 9.6rem; max-width: 42vw; }
.pp-zoom { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .35rem .5rem; font-size: .8rem; }
.pp-zoom .link-btn { min-width: 1.9rem; height: 1.7rem; padding: 0 .4rem; font-size: 1rem; line-height: 1; }
.pp-datum { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-muted); }
.pp-datum input[type=date] { padding: .12rem .35rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: .8rem; }
#pp-chart { position: relative; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
#pp-chart.zieht { cursor: grabbing; }
.pp-svg { cursor: inherit; }
.pv-svg .pp-linie { fill: none; stroke: var(--pv-vnetz); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.pv-svg .pp-flaeche { fill: var(--pv-vnetz); fill-opacity: .38; stroke: none; }
.pv-svg .pp-tag { fill: var(--pv-vnetz); fill-opacity: .55; stroke: var(--pv-vnetz); stroke-width: 1; }
.pv-svg .pp-kauf { fill: var(--pv-netz); fill-opacity: .45; stroke: var(--pv-netz); stroke-width: 1.5; }

/* Kostenübersicht (kosten.php, assets/js/kosten.js) */
.kz-strom, .kz-bezug { --c: var(--pv-aus); } .kz-grund { --c: var(--pv-vbatt); } .kz-erloes { --c: var(--pv-haus); }
.kz-pellet, .kz-einkauf { --c: var(--pv-vnetz); } .kz-verbrauch { --c: var(--brand); }
.kz-wasser { --c: var(--pv-netz); } .kz-wgrund { --c: color-mix(in srgb, var(--pv-netz) 50%, var(--text-secondary)); }
.kz-haupt { --c: var(--pv-aus); } .kz-mw { --c: var(--pv-vnetz); }
.kz-gesamt { margin-bottom: .55rem; }
.kz-gesamt .kz-chart { margin-top: .6rem; }
.kz-frei { display: inline-flex; flex-wrap: wrap; gap: .4rem .8rem; margin: 0; }
.kz-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: .55rem; align-items: start; }
.kz-raster .card { margin-top: 0; }
.kz-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .3rem; }
.kz-kopf strong { font-size: 1rem; font-weight: 600; }
.kz-summe { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kz-zeile { display: flex; justify-content: space-between; gap: .8rem; padding: .28rem 0; border-bottom: 1px solid var(--border-light); font-size: .9rem; }
.kz-zeile span { color: var(--text-secondary); } .kz-zeile b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .kz-zeile small { font-weight: 400; color: var(--text-muted); }
.kz-zeile.kz-summenzeile { border-bottom: 0; } .kz-zeile.kz-summenzeile span { color: var(--text-primary); font-weight: 600; } .kz-zeile.kz-summenzeile b { font-weight: 700; }
.kz-chart { position: relative; margin-top: .55rem; min-height: 60px; }
.kz-chart .kz-leer { margin: .5rem 0; }
.kz-unter { margin-top: .7rem; padding-top: .5rem; border-top: 1px solid var(--border-color); font-size: .82rem; font-weight: 600; color: var(--text-secondary); }
.pv-svg .kz-markiert { fill: var(--text-primary); fill-opacity: .07; }
.pv-tip i.kz-bezug, .pv-tip i.kz-grund, .pv-tip i.kz-erloes, .pv-tip i.kz-strom, .pv-tip i.kz-pellet, .pv-tip i.kz-wasser, .pv-tip i.kz-einkauf, .pv-tip i.kz-verbrauch, .pv-tip i.kz-wgrund, .pv-tip i.kz-haupt, .pv-tip i.kz-mw { background: var(--c); }
.kz-deltas { display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin: -.1rem 0 .3rem; font-size: .8rem; }
.kz-delta { font-weight: 600; font-variant-numeric: tabular-nums; } .kz-delta small { font-weight: 400; color: var(--text-muted); }
.kz-delta.hoch { color: var(--error); } .kz-delta.runter { color: var(--success); }
.kz-hinweis { margin-top: .55rem; font-size: .76rem; color: var(--text-muted); }
.kz-export { margin-top: .6rem; }
.kz-hoch { margin-top: .55rem; }
.kz-hoch .kz-kopf { align-items: center; }
.kz-zeile.kz-gut b { color: var(--success); } .kz-zeile.kz-nach b { color: var(--error); }
.sd-ha { border-left: 4px solid var(--warning); } .sd-ha form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; } .sd-ha > strong { margin-right: .5rem; }

/* Icons (Material Design Icons, lokal) in Buttons und Links */
.mdi { font-size: 1.2em; line-height: 1; vertical-align: -.17em; }
.btn .mdi, .link-btn .mdi, .dd-link .mdi { font-size: 1.15em; }
.btn .mdi:not(:only-child), .link-btn .mdi:not(:only-child), .dd-link .mdi:not(:only-child) { margin-right: .35rem; }
.link-btn .mdi:only-child, .btn-ghost .mdi:only-child { font-size: 1.25em; }
.btn-danger { background: var(--error); }
.btn-danger:hover { background: var(--error); filter: brightness(.9); }
.link-danger:hover { color: var(--error); border-color: var(--error); }
.actions .link-btn { padding: .2rem .4rem; }

/* Stammdaten-Übersicht: Kacheln */
.sd-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.sd-kachel {
    display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem;
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    color: var(--text-primary); transition: border-color .15s, transform .1s, box-shadow .15s;
}
.sd-kachel:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.sd-kachel .sd-icon {
    flex: none; display: flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem;
    border-radius: var(--radius); background: var(--bg-tertiary); color: var(--accent);
}
.sd-kachel .sd-icon .mdi { font-size: 1.4rem; }
.sd-kachel .sd-text { min-width: 0; flex: 1; }
.sd-kachel .sd-name { display: flex; justify-content: space-between; gap: .5rem; font-weight: 600; }
.sd-kachel .sd-anz { font-weight: 500; font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sd-kachel .sd-info { margin-top: .15rem; font-size: .78rem; color: var(--text-secondary); line-height: 1.35; }
.btn:has(.mdi:only-child) { padding: .3rem .6rem; }
.btn .mdi:only-child { font-size: 1.3em; }