:root {
    --hintergrund: #f7f8fa;
    --flaeche: #ffffff;
    --text: #172334;
    --gedimmt: #617086;
    --rahmen: #d6dce5;
    --akzent: #246cbe;
    --energie: #db7a00;
    --regen: #4f83c2;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background: var(--hintergrund);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; min-width: 320px; }
.kopfzeile { height: 66px; padding: 4px 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--rahmen); background: var(--flaeche); }
.kopfbereich { display: flex; min-width: 0; align-items: center; gap: 12px; }
.live-ansicht-link { padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.kopfzeile strong, .kopfzeile span { display: block; }
.kopfzeile strong { letter-spacing: .06em; font-size: .85rem; }
.kopfzeile span { color: var(--gedimmt); font-size: .8rem; }
.live-ansicht-link:hover strong, .live-ansicht-link:focus strong { color: var(--akzent); }
#ansichtsmodus { color: var(--akzent); font-size: .68rem; font-weight: 600; }
.datumnavigation { display: flex; align-items: center; gap: 4px; }
.datumnavigation button, .datumnavigation input { min-height: 32px; border: 1px solid var(--rahmen); border-radius: 4px; background: var(--flaeche); color: var(--text); font: inherit; font-size: .75rem; }
.datumnavigation button { padding: 3px 7px; cursor: pointer; }
.datumnavigation button:hover:not(:disabled) { color: var(--akzent); border-color: var(--akzent); }
.datumnavigation button:disabled { color: var(--gedimmt); cursor: not-allowed; opacity: .55; }
.datumnavigation input { width: 128px; padding: 3px 5px; }
.visuell-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kopfzeile time { justify-self: end; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 700; line-height: 1; letter-spacing: -.06em; }
nav { display: flex; gap: 16px; }
a, nav button { color: var(--text); text-decoration: none; font: inherit; font-weight: 600; }
nav button { padding: 0; border: 0; background: transparent; cursor: pointer; }
a:hover, nav button:hover { color: var(--akzent); }
.tablet-dashboard { height: calc(100vh - 66px); min-height: 534px; display: grid; grid-template-columns: minmax(0, 3.8fr) minmax(230px, 1fr); }
.tablet-dashboard.ohne-kalender { grid-template-columns: minmax(0, 1fr); }
.monitoring { min-width: 0; min-height: 0; padding: 5px 7px; display: grid; grid-template-rows: 100px minmax(0, 1fr) 150px 130px; gap: 5px; }
.tablet-dashboard.ohne-kalender .monitoring { grid-template-rows: 100px minmax(0, 1fr) 150px 130px; }
.oben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wetter-prognose-karte, .energie, .prognose, .temperaturen, .kalender { background: var(--flaeche); border: 1px solid var(--rahmen); }
.wetter-prognose-karte { min-width: 0; padding: 4px 6px; overflow: hidden; }
.wetter-karte-oben { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 3px; align-items: start; }
.wetter-prognose-grafik { min-width: 0; height: 68px; }
.wetter-prognose-grafik svg { display: block; width: 100%; height: 64px; overflow: visible; }
.wetter-karte-oben .wetter-symbol { width: 52px; height: 52px; }
.wetter-symbol-bereich { width: 54px; text-align: center; }
.wetter-symbol-bereich .wetter-beschreibung { max-width: 100%; margin-top: -3px; white-space: normal; overflow: visible; overflow-wrap: anywhere; font-size: .72rem; line-height: 1.05; text-align: center; }
.heute-uebersicht { display: grid; grid-template-columns: minmax(0, 1fr) 106px 54px; gap: 4px; align-items: center; height: 90px; }
.heute-karte .wetter-prognose-grafik { height: 68px; }
.heute-karte .wetter-prognose-grafik svg { height: 64px; }
.heute-karte .wetter-symbol { width: 52px; height: 52px; }
.heute-karte .wetter-tagesdaten { grid-template-columns: 1fr; gap: 1px; margin: 0; }
.heute-karte .wetter-tagesdaten div { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; column-gap: 2px; }
.heute-karte .wetter-tagesdaten dt { font-size: .63rem; }
.heute-karte .wetter-tagesdaten dd { font-size: .8rem; }
.prognose-raster { stroke: #dce2e9; stroke-width: .8; }
.prognose-stundenlinie { stroke: #dce2e9; stroke-width: .45; }
.prognose-stundenbeschriftung { fill: var(--gedimmt); font-size: 6px; }
.prognose-skala { fill: var(--gedimmt); font-size: 5.5px; }
.prognose-skala-regen { fill: #0e4c83; font-weight: 700; }
.prognose-skala-sonne { fill: #9a6100; font-weight: 700; }
.prognose-heute-hintergrund { fill: var(--flaeche); opacity: .92; }
.prognose-heute-titel { fill: var(--text); font-size: 12px; font-weight: 700; }
.prognose-regen-balken { fill: #276fae; stroke: #0e4c83; stroke-width: 2.2; opacity: 1; }
.prognose-sonne-balken { fill: #f5ad19; stroke: #9a6100; stroke-width: 2.2; opacity: 1; }
.prognose-zeitachse { display: flex; justify-content: space-between; color: var(--gedimmt); font-size: 7px; line-height: 1; }
.prognose-zeitachse span { min-width: 0; text-align: center; }
.keine-prognose { display: grid; height: 56px; place-items: center; color: var(--gedimmt); font-size: .68rem; text-align: center; }
.verfuegbarkeit { display: grid; min-width: 0; min-height: 0; place-items: center; padding: 8px; color: var(--gedimmt); text-align: center; font-size: .82rem; }
.oben > .verfuegbarkeit { background: var(--flaeche); border: 1px solid var(--rahmen); }
.temperaturen .verfuegbarkeit { grid-column: 1 / -1; }
.wetter-prognose-karte h2 { margin-top: 2px; color: var(--text); font-size: 1rem; text-transform: none; letter-spacing: 0; }
.wetter-beschreibung { margin-top: 1px; color: var(--gedimmt); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wetter-tagesdaten { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3px; margin: 3px 0 0; }
.wetter-tagesdaten div { min-width: 0; }
.wetter-tagesdaten dt { font-size: .7rem; }
.wetter-tagesdaten dd { margin: 0; font-size: .9rem; }
.wetter-tagesdaten .max { color: #c75124; }
.wetter-tagesdaten .min { color: #287bbf; }
h1, h2, p { margin: 0; }
.diashow { position: relative; height: calc(100vh - 66px); display: grid; place-items: center; background: #111; }
.diashow img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.diashow > p { position: absolute; right: 10px; bottom: 8px; padding: 3px 6px; color: #fff; background: rgb(0 0 0 / 55%); font-size: .75rem; }
.bild-wasserzeichen { position: absolute; top: 10px; left: 10px; max-width: 70%; padding: 8px 12px; color: #fff; background: rgb(0 0 0 / 60%); text-shadow: 0 1px 2px #000; }
.bild-wasserzeichen strong, .bild-wasserzeichen span { display: block; }
.bild-wasserzeichen strong { display: -webkit-box; max-height: 2.2em; overflow: hidden; font-size: clamp(1.6rem, 3.9vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bild-wasserzeichen span { margin-top: 2px; font-size: clamp(1.3rem, 3.1vw, 2.1rem); font-weight: 600; line-height: 1.1; }
.bildzaehler { position: absolute; right: 10px; bottom: 8px; padding: 3px 6px; color: #fff; background: rgb(0 0 0 / 55%); font-size: .75rem; }
.galerie-steuerung { position: absolute; bottom: 8px; left: 10px; display: flex; gap: 6px; }
.galerie-steuerung button { min-height: 40px; padding: 6px 12px; color: #fff; background: rgb(0 0 0 / 65%); border: 1px solid rgb(255 255 255 / 70%); border-radius: 4px; font: inherit; cursor: pointer; }
.galerie-steuerung button:hover:not(:disabled), .galerie-steuerung button:focus { background: rgb(0 0 0 / 85%); }
.galerie-steuerung button:disabled { cursor: not-allowed; opacity: .45; }
.galerie-verlauf { position: absolute; top: 12px; right: 12px; bottom: 12px; left: 12px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 12px; color: var(--text); background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 10px; }
.galerie-verlauf header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.galerie-verlauf h2 { margin: 0; color: var(--gedimmt); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.galerie-verlauf header button { min-height: 40px; padding: 6px 12px; color: var(--text); background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 4px; font: inherit; cursor: pointer; }
.galerie-verlauf header button:hover, .galerie-verlauf header button:focus { color: var(--akzent); border-color: var(--akzent); }
.galerie-verlauf-liste { display: grid; align-content: start; gap: 3px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.galerie-verlauf-liste li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 6px 8px; border: 1px solid var(--rahmen); background: #eef1f5; }
.galerie-verlauf-liste li:nth-child(even) { background: #f7f8fa; }
.galerie-verlauf-liste time { color: var(--gedimmt); font-size: .78rem; font-weight: 600; }
.galerie-verlauf-liste strong, .galerie-verlauf-liste span, .galerie-verlauf-liste small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galerie-verlauf-liste strong { font-size: .95rem; }
.galerie-verlauf-liste span, .galerie-verlauf-liste small { color: var(--gedimmt); font-size: .75rem; }
.galerie-verlauf-leer { display: grid; margin: 0; place-items: center; color: var(--gedimmt); font-size: .85rem; }
.leerer-zustand { display: grid; height: calc(100vh - 66px); place-items: center; color: var(--gedimmt); }
.paula { height: calc(100vh - 66px); padding: 4px; background: var(--hintergrund); }
.paula-uebersicht { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 5px; height: 100%; min-height: 0; padding: 8px; border: 1px solid var(--rahmen); background: var(--flaeche); }
.paula-uebersicht header { display: flex; align-items: baseline; gap: 10px; }
.paula-uebersicht h1 { font-size: 1.65rem; letter-spacing: -.05em; }
.paula-uebersicht header p, .paula-uebersicht header > span { color: var(--gedimmt); }
.paula-uebersicht header > span { margin-left: auto; font-size: .8rem; }
.paula-kennzahlen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.paula-kennzahlen article { padding: 4px 8px; border: 1px solid var(--rahmen); background: var(--hintergrund); }
.paula-kennzahlen span, .paula-kennzahlen small { display: block; color: var(--gedimmt); font-size: .75rem; }
.paula-kennzahlen strong { font-size: 1.15rem; }
.paula-inhalt { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 8px; min-height: 0; }
.paula-verlauf { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 4px; }
.paula-verlauf header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.paula-verlauf h2 { height: auto; }
.paula-verlauf .diagramm-container { height: auto; min-height: 0; }
.paula-verlauf .diagramm { position: absolute; top: 2px; left: 0; height: calc(100% - 16px); }
.paula-verlauf-leer { position: absolute; top: 0; right: 0; bottom: 14px; left: -25px; display: grid; margin: 0; place-items: center; color: var(--gedimmt); font-size: .78rem; text-align: center; }
.paula-legende { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0; padding: 0; list-style: none; color: var(--gedimmt); font-size: .68rem; }
.paula-legende li::before { display: inline-block; width: 8px; height: 8px; margin-right: 3px; border: 1px solid; content: ""; vertical-align: -1px; }
.paula-legende .pv::before { border-color: #db9c00; background: #f9d36e; }
.paula-legende .verbrauch::before { height: 0; border-width: 1px 0 0; border-color: var(--text); vertical-align: 3px; }
.paula-legende .akku-laden::before { border-color: #248344; background: #9ee3b3; }
.paula-legende .akku-entladen::before { border-color: #d93636; background: #f5a8a8; }
.paula-legende .netz::before { border-color: #287bbf; background: #aed9ff; }
.paula-netz-flaeche { fill: #aed9ff; fill-opacity: .55; stroke: #287bbf; stroke-width: .75; }
.paula-akku-laden-flaeche { fill: #9ee3b3; fill-opacity: .6; stroke: #248344; stroke-width: .75; }
.paula-akku-entladen-flaeche { fill: #f5a8a8; fill-opacity: .6; stroke: #d93636; stroke-width: .75; }
.paula-verbrauch-linie { fill: none; stroke: var(--text); stroke-width: 1.2; }
.paula-details { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding-top: 4px; border-top: 1px solid var(--rahmen); }
.paula-details div { min-width: 0; }
.paula-details dt { overflow: hidden; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.paula-details dd { font-size: .8rem; }
.paula-uebersicht > .verfuegbarkeit { grid-row: 1 / -1; }
.paula-fluss { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(38px, .24fr) minmax(110px, 1fr) minmax(38px, .24fr) minmax(150px, 1.35fr); grid-template-rows: auto minmax(30px, .25fr) auto minmax(30px, .25fr) auto; align-items: center; justify-items: stretch; text-align: center; }
.paula-fluss > .pv { grid-column: 3; grid-row: 1; }
.paula-fluss > .pv-zu-growatt { grid-column: 3; grid-row: 2; }
.paula-fluss > .netz { grid-column: 1; grid-row: 3; }
.paula-fluss > .netz-zu-growatt { grid-column: 2; grid-row: 3; }
.paula-fluss > .wechselrichter { grid-column: 3; grid-row: 3; }
.paula-fluss > .growatt-zu-fahrzeuge { grid-column: 4; grid-row: 3; }
.paula-fluss > .paula-verbraucher { grid-column: 5; grid-row: 3; }
.paula-fluss > .akku-zu-growatt { grid-column: 3; grid-row: 4; }
.paula-fluss > .akku { grid-column: 3; grid-row: 5; }
.paula-knoten { min-width: 0; min-height: 66px; padding: 5px 4px; border: 2px solid var(--rahmen); background: var(--hintergrund); }
.paula-knoten > span:not(.paula-symbol), .paula-knoten small { display: block; color: var(--gedimmt); font-size: .75rem; }
.paula-knoten strong { display: block; margin: 3px 0; font-size: .9rem; }
.paula-symbol { display: block; margin-bottom: 2px; font-size: 1.35rem; line-height: 1; }
.paula-knoten.pv { border-color: #db9c00; background: #fff9e8; }
.paula-knoten.akku { border-color: #248344; background: #eff9f2; }
.paula-knoten.netz { border-color: #287bbf; background: #f0f7ff; }
.paula-knoten.wechselrichter { border-color: var(--akzent); }
.paula-knoten.aktiv { background-size: 200% 100%; animation: paula-hintergrund 2.4s ease-in-out infinite; }
.paula-knoten.pv.aktiv, .paula-knoten.wechselrichter.aktiv { background-image: linear-gradient(105deg, #fff9e8 0%, #ffe18b 48%, #fff9e8 100%); }
.paula-knoten.netz.aktiv { background-image: linear-gradient(105deg, #f0f7ff 0%, #aed9ff 48%, #f0f7ff 100%); }
.paula-verbraucher .verbraucher.aktiv { background-image: linear-gradient(105deg, #f0f7ff 0%, #aed9ff 48%, #f0f7ff 100%); }
.paula-knoten.akku.laden.aktiv { border-color: #248344; background-image: linear-gradient(105deg, #eff9f2 0%, #9ee3b3 48%, #eff9f2 100%); }
.paula-knoten.akku.entladen.aktiv { border-color: #d93636; background-image: linear-gradient(105deg, #fff0f0 0%, #f5a8a8 48%, #fff0f0 100%); }
@keyframes paula-hintergrund { from { background-position: 100% 0; } to { background-position: 0 0; } }
.paula-knoten.wechselrichter.aktiv { position: relative; overflow: hidden; }
.paula-knoten.wechselrichter.aktiv::before { position: absolute; top: calc(50% - 4px); right: 0; left: 0; height: 8px; background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 15%) 20%, #db9c00 50%, rgb(255 255 255 / 15%) 80%, transparent 100%); background-size: 200% 100%; content: ""; opacity: .65; animation: paula-growatt-intern 1.5s linear infinite; }
.paula-knoten.wechselrichter.aktiv::after { position: absolute; top: 0; bottom: 0; left: calc(50% - 4px); width: 8px; background: linear-gradient(0deg, transparent 0%, rgb(255 255 255 / 15%) 20%, #248344 50%, rgb(255 255 255 / 15%) 80%, transparent 100%); background-size: 100% 200%; content: ""; opacity: 0; }
.paula-knoten.wechselrichter.akku-laden::after { opacity: .65; animation: paula-growatt-intern-runter 1.5s linear infinite; }
.paula-knoten.wechselrichter.akku-entladen::after { background-image: linear-gradient(0deg, transparent 0%, rgb(255 255 255 / 15%) 20%, #d93636 50%, rgb(255 255 255 / 15%) 80%, transparent 100%); opacity: .65; animation: paula-growatt-intern-hoch 1.5s linear infinite; }
.paula-knoten.wechselrichter.aktiv > * { position: relative; z-index: 1; }
@keyframes paula-growatt-intern { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes paula-growatt-intern-runter { from { background-position: 0 100%; } to { background-position: 0 0; } }
@keyframes paula-growatt-intern-hoch { from { background-position: 0 0; } to { background-position: 0 100%; } }
.paula-verbindung { position: relative; display: block; width: 100%; height: 3px; align-self: stretch; background: var(--rahmen); font-style: normal; }
.paula-verbindung::after { position: absolute; right: -1px; top: -4px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--rahmen); content: ""; }
.paula-verbindung.aktiv { color: #db9c00; background: #db9c00; }
.paula-verbindung.aktiv::after { border-left-color: #db9c00; }
.paula-verbindung.aktiv::before { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #db9c00; content: ""; animation: paula-fluss-rechts 1.3s linear infinite; }
.paula-verbindung.pv-zu-growatt, .paula-verbindung.akku-zu-growatt { width: 3px; height: 100%; min-height: 30px; justify-self: center; }
.paula-verbindung.pv-zu-growatt::after, .paula-verbindung.akku-zu-growatt::after { top: auto; right: -4px; bottom: -1px; border: 0; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 7px solid var(--rahmen); }
.paula-verbindung.pv-zu-growatt.aktiv::after, .paula-verbindung.akku-zu-growatt.laden::after { border-top-color: currentcolor; }
.paula-verbindung.pv-zu-growatt.aktiv::before, .paula-verbindung.akku-zu-growatt.laden::before { top: 0; left: -3px; animation-name: paula-fluss-runter; }
.paula-verbindung.akku-zu-growatt.laden { color: #248344; background: #248344; }
.paula-verbindung.akku-zu-growatt.laden::before { background: #248344; }
.paula-verbindung.akku-zu-growatt.entladen { color: #d93636; background: #d93636; }
.paula-verbindung.akku-zu-growatt.entladen::after { top: -1px; right: -4px; bottom: auto; border: 0; border-right: 5px solid transparent; border-bottom: 7px solid #d93636; border-left: 5px solid transparent; }
.paula-verbindung.akku-zu-growatt.entladen::before { top: auto; bottom: 0; left: -3px; background: #d93636; animation-name: paula-fluss-hoch; }
.paula-verbindung.netz-zu-growatt.eingang { color: #287bbf; background: #287bbf; }
.paula-verbindung.netz-zu-growatt.eingang::after { border-left-color: #287bbf; }
.paula-verbindung.netz-zu-growatt.eingang::before { background: #287bbf; }
.paula-verbindung.netz-zu-growatt.ausgang { color: #db9c00; background: #db9c00; }
.paula-verbindung.netz-zu-growatt.ausgang::after { right: auto; left: -1px; border-right: 7px solid #db9c00; border-left: 0; }
.paula-verbindung.netz-zu-growatt.ausgang::before { right: 0; left: auto; animation-name: paula-fluss-links; }
.paula-verbindung.growatt-zu-fahrzeuge.aktiv { color: #287bbf; background: #287bbf; }
.paula-verbindung.growatt-zu-fahrzeuge.aktiv::after { border-left-color: #287bbf; }
.paula-verbindung.growatt-zu-fahrzeuge.aktiv::before { background: #287bbf; }
.paula-verbraucher .paula-knoten, .paula-fluss > .akku { min-height: 66px; }
.paula-verbindung.growatt-zu-fahrzeuge.aktiv::before { animation-name: paula-fluss-rechts; }
@keyframes paula-fluss-rechts { from { transform: translateX(-3px); } to { transform: translateX(calc(100% - 3px)); } }
@keyframes paula-fluss-links { from { transform: translateX(3px); } to { transform: translateX(calc(-100% + 3px)); } }
@keyframes paula-fluss-runter { from { transform: translateY(-3px); } to { transform: translateY(calc(100% - 3px)); } }
@keyframes paula-fluss-hoch { from { transform: translateY(3px); } to { transform: translateY(calc(-100% + 3px)); } }
.paula-verbraucher { display: grid; gap: 5px; }
.paula-verbraucher .verbraucher { min-height: 66px; border-color: #287bbf; background: #f0f7ff; }
.paula-fahrzeuge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.paula-fahrzeug { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 4px; padding: 4px; border: 1px solid var(--rahmen); background: #f0f7ff; }
.paula-fahrzeug.aktiv { position: relative; overflow: hidden; border: 0; background: transparent; isolation: isolate; }
.paula-fahrzeug.aktiv::before { position: absolute; inset: -100%; z-index: -2; background: conic-gradient(from 0deg, #287bbf, #8ed2ff, #287bbf, #8ed2ff, #287bbf); content: ""; animation: paula-fahrzeug-rahmen 2s linear infinite; }
.paula-fahrzeug.aktiv::after { position: absolute; inset: 2px; z-index: -1; background: #f0f7ff; content: ""; }
.paula-fahrzeug.aktiv > * { position: relative; z-index: 1; }
@keyframes paula-fahrzeug-rahmen { to { transform: rotate(1turn); } }
.paula-fahrzeug > span { grid-row: 1 / 3; font-size: 1.35rem; }
.paula-fahrzeug strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.paula-fahrzeug small { color: var(--gedimmt); font-size: .65rem; }
.paula-fahrzeug.frei { background: var(--hintergrund); opacity: .7; }
@media (prefers-reduced-motion: reduce) {
    .paula-knoten.aktiv, .paula-verbindung.aktiv::before, .paula-knoten.wechselrichter.aktiv::before, .paula-knoten.wechselrichter.aktiv::after, .paula-fahrzeug.aktiv::before { animation: none; }
}
.paula-svg { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; }
.paula-svg text { font-family: inherit; text-anchor: middle; }
.paula-svg-karte { fill: var(--hintergrund); stroke: var(--rahmen); stroke-width: 2; }
.paula-svg-knoten.pv .paula-svg-karte { fill: #fff9e8; stroke: #db9c00; }
.paula-svg-knoten.netz .paula-svg-karte, .paula-svg-verbraucher .paula-svg-karte { fill: #f0f7ff; stroke: #287bbf; }
.paula-svg-knoten.akku .paula-svg-karte { fill: #eff9f2; stroke: #248344; }
.paula-svg-knoten.akku.entladen .paula-svg-karte { fill: #fff0f0; stroke: #d93636; }
.paula-svg-knoten.wechselrichter .paula-svg-karte { fill: #fff9e8; stroke: var(--akzent); }
.paula-svg-knoten.aktiv .paula-svg-karte { animation: paula-svg-knoten 2.4s ease-in-out infinite; }
.paula-svg-symbol { font-size: 18px; }
.paula-svg-titel, .paula-svg-detail { fill: var(--gedimmt); font-size: 11px; }
.paula-svg-wert { fill: var(--text); font-size: 15px; font-weight: 700; }
.paula-svg-akku-prozent { fill: var(--text); font-size: 15px; font-weight: 700; }
.paula-svg-leitung { fill: none; stroke: var(--rahmen); stroke-linecap: round; stroke-width: 4; }
.paula-svg-leitung.aktiv { stroke-dasharray: 12 8; animation: paula-svg-fluss 1.1s linear infinite; }
.paula-svg-leitung.pv.aktiv { stroke: #db9c00; }
.paula-svg-leitung.netz.eingang.aktiv { stroke: #287bbf; }
.paula-svg-leitung.netz.ausgang.aktiv { stroke: #db9c00; animation-direction: reverse; }
.paula-svg-leitung.autos.aktiv { stroke: #287bbf; }
.paula-svg-leitung.akku.laden.aktiv { stroke: #248344; }
.paula-svg-leitung.akku.entladen.aktiv { stroke: #d93636; animation-direction: reverse; }
.paula-svg-knoten.wechselrichter.aktiv .paula-svg-karte { stroke-dasharray: 12 8; animation: paula-svg-growatt 1.2s linear infinite; }
.paula-svg-fahrzeug rect { fill: #f0f7ff; stroke: var(--rahmen); stroke-width: 1; }
.paula-svg-fahrzeug text { fill: var(--text); font-size: 9px; text-anchor: start; }
.paula-svg-fahrzeug.aktiv rect { stroke: #287bbf; stroke-dasharray: 6 3; stroke-width: 2; animation: paula-svg-fahrzeug 1.5s linear infinite; }
@keyframes paula-svg-fluss { to { stroke-dashoffset: -20; } }
@keyframes paula-svg-growatt { to { stroke-dashoffset: -20; } }
@keyframes paula-svg-fahrzeug { to { stroke-dashoffset: -18; } }
@keyframes paula-svg-knoten { 50% { filter: brightness(1.06); } }
@media (prefers-reduced-motion: reduce) {
    .paula-svg-knoten.aktiv .paula-svg-karte, .paula-svg-leitung.aktiv, .paula-svg-knoten.wechselrichter.aktiv .paula-svg-karte, .paula-svg-fahrzeug.aktiv rect { animation: none; }
}
h1 { font-size: 3.7rem; line-height: .9; letter-spacing: -.08em; }
h2 { color: var(--gedimmt); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.heute p { margin-top: 8px; font-size: .78rem; color: var(--gedimmt); }
.heute small { display: block; margin-top: 3px; color: var(--gedimmt); font-size: .67rem; }
.energie { padding: 2px 4px; overflow: hidden; }
dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 0; }
dt { color: var(--gedimmt); font-size: .7rem; }
dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 700; white-space: nowrap; }
.energie-svg { display: block; width: 100%; height: 100%; min-height: 0; }
.energie-svg text { font-family: inherit; text-anchor: middle; }
.energie-svg-karte { fill: var(--flaeche); stroke: var(--rahmen); stroke-width: 2; }
.energie-svg-knoten.waermepumpe-niedrig .energie-svg-karte { fill: #f4effa; stroke: #7b4fb3; }
.energie-svg-knoten.waermepumpe-hoch .energie-svg-karte { fill: #fff3f3; stroke: #d93636; }
.energie-svg-knoten.netz-bezug .energie-svg-karte { fill: #f0f7ff; stroke: #287bbf; }
.energie-svg-knoten.pv .energie-svg-karte, .energie-svg-knoten.netz-einspeisung .energie-svg-karte { fill: #fff9e8; stroke: #db9c00; }
.energie-svg-knoten.haus .energie-svg-karte { fill: url(#energie-haus-fuellung); stroke: #287bbf; }
.energie-svg-knoten.haus.haus-ueberschuss .energie-svg-karte { stroke: #db9c00; }
.energie-svg-titel { fill: var(--text); font-size: 16px; font-weight: 700; }
.energie-svg-wert { fill: var(--text); font-size: 18px; font-weight: 700; }
.energie-svg-detail { fill: var(--gedimmt); font-size: 13px; font-weight: 400; }
.energie-svg-leitung { fill: none; stroke: var(--rahmen); stroke-linecap: round; stroke-width: 4; }
.energie-svg-leitung.blau { stroke: #287bbf; }
.energie-svg-leitung.rot { stroke: #d93636; }
.energie-svg-leitung.violett { stroke: #7b4fb3; }
.energie-svg-leitung.gelb { stroke: #db9c00; }
.energie-svg-leitung.aktiv { stroke-dasharray: 12 8; animation: energie-svg-fluss 1.1s linear infinite; }
@keyframes energie-svg-fluss { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) {
    .energie-svg-leitung.aktiv { animation: none; }
}
@media (max-width: 1200px) {
    .kopfzeile { grid-template-columns: minmax(0, 1fr) auto auto; }
    .kopfzeile nav { justify-self: end; margin-right: 12px; gap: 12px; }
}
.verlauf { min-height: 0; padding: 5px 8px; background: var(--flaeche); border: 1px solid var(--rahmen); }
.verlauf h2 { height: 12px; }
.tageskennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px 8px; margin: 2px 0 3px; }
.tageskennzahlen article { min-width: 0; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.tageskennzahlen span, .messluecken-hinweis { color: var(--gedimmt); font-size: .8rem; }
.tageskennzahlen strong { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; }
.messluecken-hinweis { height: 11px; margin: -1px 0 1px; line-height: 1; }
.diagramm-container { position: relative; height: calc(100% - 12px - 48px); margin: 0 2px 0 25px; padding-top: 2px; }
.messluecken-hinweis + .diagramm-container { height: calc(100% - 12px - 59px); }
.diagramm { width: 100%; height: calc(100% - 14px); overflow: visible; }
.skala-y { position: absolute; top: 2px; bottom: 14px; left: -25px; display: flex; flex-direction: column; justify-content: space-between; color: var(--gedimmt); font-size: 9px; line-height: 1; }
.skala-x { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: var(--gedimmt); font-size: 9px; line-height: 1; }
.rasterlinie { stroke: #dce2e9; stroke-width: .6; }
.solar-flaeche { fill: #f9d36e; stroke: #db9c00; stroke-width: .75; }
.bkw-flaeche { fill: url(#bkwSchraffur); stroke: #db9c00; stroke-width: .75; }
.netzbezug-flaeche { fill: #aed9ff; fill-opacity: .55; stroke: #287bbf; stroke-width: .75; }
.eigenverbrauch-flaeche { fill: #63b67c; fill-opacity: .32; stroke: #248344; stroke-width: .75; }
#bkwSchraffur line { stroke: #8c6500; stroke-width: 2; }
.haus-linie, .eigenverbrauch-linie, .waermepumpe-linie, .sonne-linie { fill: none; stroke-width: 1.5; }
.haus-linie { stroke: #d93636; }
.eigenverbrauch-linie { stroke: #248344; }
.waermepumpe-linie { stroke: #7b4fb3; }
.sonne-linie { stroke: #e6b000; stroke-dasharray: 3 2; }
.sonnen-markierung { stroke: #e6b000; stroke-width: 1; stroke-dasharray: 2 2; }
.prognose { display: grid; min-height: 0; grid-template-columns: repeat(3, 1fr); gap: 5px; background: transparent; border: 0; }
.prognose .wetter-prognose-karte { height: 100%; padding: 4px 6px; }
.prognose .wetter-karte-oben { grid-template-columns: minmax(0, 1fr) 52px; gap: 2px; }
.prognose .wetter-symbol-bereich { width: 52px; }
.prognose .wetter-prognose-grafik { height: 68px; }
.prognose .wetter-prognose-grafik svg { height: 64px; }
.prognose .wetter-karte-oben .wetter-symbol { width: 52px; height: 52px; }
.prognose .wetter-symbol-bereich .wetter-beschreibung { font-size: .72rem; }
.prognose .prognose-zeitachse { font-size: 6px; }
.prognose .wetter-prognose-karte h2 { margin-top: 0; font-size: .9rem; }
.prognose .wetter-beschreibung { font-size: 1rem; }
.prognose .wetter-tagesdaten { margin-top: 2px; }
.prognose .wetter-tagesdaten dt { font-size: .85rem; }
.prognose .wetter-tagesdaten dd { font-size: 1rem; }
.wetter-symbol { width: 48px; height: 48px; overflow: visible; }
.wetter-symbol .sonne { fill: #f5b83d; }
.wetter-symbol .wolke { fill: #8794a5; }
.wetter-symbol .regen, .wetter-symbol .schnee { stroke: var(--regen); stroke-width: 3; stroke-linecap: round; fill: none; }
.wetter-symbol.klar .wolke, .wetter-symbol.klar .regen, .wetter-symbol.klar .schnee, .wetter-symbol.wolkig .regen, .wetter-symbol.wolkig .schnee, .wetter-symbol.regen .schnee, .wetter-symbol.schnee .regen { display: none; }
.wetter-symbol.schnee .sonne, .wetter-symbol.regen .sonne { display: none; }
.temperaturen { display: grid; min-height: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.temperaturen article { min-width: 0; padding: 8px; border-right: 1px solid var(--rahmen); overflow: hidden; }
.temperaturen article:last-child { border-right: 0; }
.temperaturen span { display: block; overflow: hidden; color: var(--gedimmt); font-size: clamp(.85rem, 1.4vw, 1.1rem); text-overflow: ellipsis; white-space: nowrap; }
.temperaturen strong { display: block; margin-top: 6px; font-size: clamp(2.5rem, 5.4vw, 4.25rem); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.kalender { display: flex; flex-direction: column; min-height: 0; border-top: 0; border-right: 0; border-bottom: 0; padding: 8px; overflow: hidden; }
.kalender h2 { margin-bottom: 6px; }
#kalender-inhalt { flex: 1; min-height: 0; }
.kalender-tage { display: grid; gap: 6px; max-height: 100%; overflow-y: auto; }
.kalender-tag { padding: 4px; border: 1px solid var(--rahmen); background: #eef1f5; }
.kalender-tag:nth-child(even) { background: #f7f8fa; }
.kalender-tag h3 { margin: 0 0 4px; color: var(--gedimmt); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.kalender-termine { display: grid; gap: 3px; }
.kalender-termine article { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 6px; padding: 5px; border: 1px solid var(--rahmen); background: var(--kalenderfarbe, var(--flaeche)); }
.kalender-termine time { color: var(--gedimmt); font-size: .68rem; font-weight: 600; line-height: 1.15; }
.kalender-termine strong { overflow: hidden; align-self: center; font-size: .78rem; line-height: 1.2; text-overflow: ellipsis; }
.kalender-termine article.kalenderfarbe-dunkel { color: #fff; border-color: rgb(0 0 0 / 25%); }
.kalender-termine article.kalenderfarbe-dunkel time { color: #fff; }
.kalender-leer { padding: 8px; color: var(--gedimmt); font-size: .78rem; text-align: center; }
.warnung { position: fixed; bottom: 0; left: 0; margin: 0; padding: 4px 10px; color: #9c5100; background: #fff2d9; font-size: .75rem; }
.freischaltung { display: grid; min-height: 100vh; place-items: center; padding: 16px; background: var(--hintergrund); }
.freischaltung > section { width: min(100%, 420px); padding: 24px; border: 1px solid var(--rahmen); border-radius: 10px; background: var(--flaeche); }
.freischaltung h1 { font-size: 1.5rem; letter-spacing: 0; line-height: 1.2; }
.freischaltung p { margin-top: 12px; color: var(--gedimmt); }
.freischaltung form { display: grid; gap: 8px; margin: 20px 0 16px; }
.freischaltung label { font-weight: 600; }
.freischaltung input, .freischaltung button { min-height: 40px; padding: 8px; border: 1px solid var(--rahmen); border-radius: 6px; font: inherit; }
.freischaltung button { color: #fff; border-color: var(--akzent); background: var(--akzent); cursor: pointer; }
.freischaltung button:hover, .freischaltung button:focus { background: #185796; }
.freischaltung .freischaltung-hinweis { padding: 8px; color: #9c5100; border: 1px solid #f5b83d; background: #fff2d9; }
@media (min-width: 901px) and (min-height: 800px) {
    .monitoring { grid-template-rows: clamp(130px, 17vh, 210px) minmax(0, 1fr) clamp(150px, 19vh, 240px) clamp(130px, 14vh, 160px); }
    .tablet-dashboard.ohne-kalender .monitoring { grid-template-rows: clamp(130px, 17vh, 210px) minmax(0, 1fr) clamp(150px, 19vh, 240px) clamp(130px, 14vh, 160px); }
    .heute-karte { display: grid; }
    .heute-uebersicht { height: 100%; grid-template-columns: minmax(0, 1fr) 130px 76px; }
    .heute-karte .wetter-prognose-grafik { height: 100%; }
    .heute-karte .wetter-prognose-grafik svg { height: calc(100% - 9px); min-height: 64px; }
    .heute-karte .wetter-symbol-bereich { width: 76px; }
    .heute-karte .wetter-symbol { width: 72px; height: 72px; }
    .heute-karte .wetter-symbol-bereich .wetter-beschreibung { font-size: .85rem; line-height: 1.15; }
    .prognose .wetter-prognose-karte { display: grid; grid-template-rows: minmax(72px, 1fr) auto auto; row-gap: 6px; }
    .prognose .wetter-karte-oben { height: 100%; grid-template-columns: minmax(0, 1fr) 76px; }
    .prognose .wetter-prognose-grafik { height: 100%; }
    .prognose .wetter-prognose-grafik svg { height: calc(100% - 9px); min-height: 64px; }
    .prognose .wetter-symbol-bereich { width: 76px; }
    .prognose .wetter-karte-oben .wetter-symbol { width: 72px; height: 72px; }
    .prognose .wetter-symbol-bereich .wetter-beschreibung { font-size: .85rem; line-height: 1.15; }
}

@media (max-height: 640px) and (min-width: 901px) {
    .kopfzeile { height: 56px; }
    .tablet-dashboard { height: calc(100vh - 56px); min-height: 0; }
    .paula, .diashow { height: calc(100vh - 56px); }
    .monitoring { grid-template-rows: 90px minmax(0, 1fr) 130px 110px; }
    .tablet-dashboard.ohne-kalender .monitoring { grid-template-rows: 90px minmax(0, 1fr) 130px 110px; }
    .prognose .wetter-karte-oben { grid-template-columns: minmax(0, 1fr) 44px; }
    .prognose .wetter-prognose-grafik { height: 56px; }
    .prognose .wetter-prognose-grafik svg { height: 52px; }
    .prognose .wetter-symbol-bereich { width: 44px; }
    .prognose .wetter-karte-oben .wetter-symbol { width: 44px; height: 44px; }
    .prognose .wetter-symbol-bereich .wetter-beschreibung { font-size: .62rem; }
    .prognose .wetter-beschreibung { font-size: .85rem; }
    .prognose .wetter-tagesdaten dt { font-size: .72rem; }
    .prognose .wetter-tagesdaten dd { font-size: .85rem; }
}

@media (max-width: 900px) {
    html, body { height: auto; overflow: auto; }
    .kopfzeile { min-height: 56px; height: auto; grid-template-columns: minmax(0, 1fr) auto; }
    .kopfzeile nav { display: none; }
    .kopfbereich { gap: 6px; }
    .datumnavigation { gap: 2px; }
    .datumnavigation input { width: 118px; }
    .kopfzeile time { font-size: clamp(2.1rem, 8vw, 3.2rem); }
    .tablet-dashboard { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); }
    .monitoring { grid-template-rows: 100px minmax(220px, 1fr) 150px 120px; }
    .tablet-dashboard.ohne-kalender .monitoring { grid-template-rows: 100px minmax(220px, 1fr) 150px 120px; }
    .kalender { height: 300px; border: 1px solid var(--rahmen); }
    .paula { height: auto; }
    .paula-inhalt { grid-template-columns: minmax(0, 1fr); }
    .paula-verlauf { height: 260px; }
}

@media (max-width: 700px) {
    .kopfzeile { padding: 5px 8px; }
    .oben { grid-template-columns: 1fr; }
    .monitoring { grid-template-rows: auto minmax(190px, 1fr) auto auto; }
    .energie { min-height: 100px; }
    .prognose { grid-template-columns: 1fr; }
    .temperaturen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .temperaturen article:nth-child(2) { border-right: 0; }
    .temperaturen article:nth-child(n + 3) { border-top: 1px solid var(--rahmen); }
    .temperaturen article:last-child { grid-column: 1 / -1; }
    .paula-kennzahlen, .paula-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}