:root{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    color:#183039;
    background:#F6FAF9;
    --ink:#183039;
    --ink-2:#0F2D36;
    --sidebar:#0B2A33;
    --sidebar-2:#123B45;
    --teal:#008F94;
    --teal-2:#00A6A6;
    --teal-soft:#E4F5F3;
    --green:#62B640;
    --green-soft:#EDF8E8;
    --mint:#E6F3F2;
    --surface:#FFFFFF;
    --surface-2:#F7FAFA;
    --border:#DDE7E7;
    --muted:#6D8086;
    --danger:#B84B4B;
    --shadow:0 10px 30px rgba(15,45,54,.07);
}
*{box-sizing:border-box}
html{min-height:100%}
body{margin:0;background:linear-gradient(180deg,#F8FBFB 0%,#F3F8F7 100%);color:var(--ink)}
a{color:var(--teal);text-underline-offset:2px}
button,input,select,textarea{font:inherit}
svg{display:block}

/* Application shell */
.app-shell{min-height:100vh;display:grid;grid-template-columns:246px minmax(0,1fr)}
.sidebar{
    position:sticky;top:0;height:100vh;z-index:40;
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,#0B2A33 0%,#0D333C 65%,#0A2730 100%);
    box-shadow:10px 0 30px rgba(12,40,48,.08);
    color:#fff;
}
.sidebar-brand{display:block;padding:24px 22px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand img{width:100%;height:auto;max-height:84px;object-fit:contain;object-position:left center}
.side-nav{display:flex;flex-direction:column;gap:5px;padding:18px 14px}
.side-nav-link{
    display:flex;align-items:center;gap:12px;
    min-height:46px;padding:10px 13px;border-radius:10px;
    color:#D7E8E9;text-decoration:none;font-weight:650;font-size:.93rem;
    transition:.18s ease;
}
.side-nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.side-nav-link.active{background:linear-gradient(135deg,#008F94,#00A6A6);color:#fff;box-shadow:0 7px 18px rgba(0,166,166,.24)}
.nav-icon{width:20px;height:20px;flex:0 0 auto}
.sidebar-footer{margin-top:auto;padding:12px 14px 18px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-version{padding:12px 13px 0;color:#83A3A7;font-size:.72rem;letter-spacing:.03em}

.main-shell{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.mobile-topbar{display:none}
.page-content{width:min(1450px,100%);margin:0 auto;padding:30px 34px 44px;flex:1}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.page-heading h1{margin:0;font-size:2rem;line-height:1.05;letter-spacing:-.035em;color:#17333B}
.page-kicker{margin:0 0 6px;color:var(--teal);font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.page-heading-mark{color:#7A8C91;font-size:.84rem;letter-spacing:.02em}
.app-footer{text-align:center;color:#819196;font-size:.78rem;padding:5px 20px 24px}

/* Auth pages */
.auth-body{display:grid;place-items:center;min-height:100vh;padding:24px;background:radial-gradient(circle at top left,#E6F6F3,#F8FBFB 50%,#EDF6F4)}
.auth-shell{width:min(560px,100%);background:#fff;border:1px solid var(--border);border-radius:24px;padding:30px;box-shadow:0 26px 70px rgba(15,45,54,.13)}
.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.auth-brand img{width:62px;height:62px}
.auth-brand strong{display:block;font-size:1.55rem;color:var(--ink-2)}
.auth-brand span{display:block;color:var(--muted);font-size:.86rem}
.auth-content h1{margin:0 0 20px}
.auth-footer{text-align:center;color:#8A999E;font-size:.76rem;margin-top:22px}

/* General UI */
h1,h2,h3{color:#17333B}
h2{font-size:1.24rem;margin:0}
h3{font-size:1.05rem;margin:0}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.eyebrow{margin:0 0 5px;color:var(--teal);text-transform:uppercase;letter-spacing:.11em;font-size:.72rem;font-weight:800}
.card,.chart-card{
    background:var(--surface);border:1px solid var(--border);border-radius:16px;
    padding:20px;box-shadow:0 5px 22px rgba(15,45,54,.045)
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:18px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.compact-actions{margin:0}
button,.button{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:0;border-radius:9px;padding:10px 15px;
    background:linear-gradient(135deg,#008F94,#00A6A6);color:#fff;text-decoration:none;
    font-weight:750;cursor:pointer;box-shadow:0 5px 14px rgba(0,143,148,.16);
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease
}
button:hover,.button:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,143,148,.22)}
.button.secondary,.secondary{background:#EEF4F4;color:#31515A;box-shadow:none;border:1px solid #D8E5E5}
.button.secondary:hover,.secondary:hover{background:#E4EEEE}
.danger{background:#B84B4B!important;color:#fff!important;border:0!important}
.button-icon{width:17px;height:17px}

input,select,textarea{
    width:100%;padding:11px 12px;border:1px solid #CBDADB;border-radius:9px;
    color:var(--ink);background:#fff;transition:border .15s ease,box-shadow .15s ease
}
input:focus,select:focus,textarea:focus{outline:none;border-color:#55AFAD;box-shadow:0 0 0 4px rgba(0,166,166,.11)}
label{display:block;font-weight:750;margin:13px 0 6px;color:#2F4A52}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.full{grid-column:1/-1}
.flash{padding:13px 15px;border-radius:10px;background:#E8F6EE;color:#286442;margin-bottom:18px;border:1px solid #CFEADB}
.flash.error{background:#FAECEC;color:#943A3A;border-color:#F0D1D1}
code{background:#EEF4F4;padding:2px 6px;border-radius:5px}
.pill,.status-badge{display:inline-block;border-radius:999px;padding:4px 9px;font-size:.78rem;font-weight:750}
.pill{background:var(--teal-soft);color:#28706F}
.status-badge.active{background:#E8F6EE;color:#286442}
.status-badge.archive{background:#EEF1F2;color:#68787D}

/* Tables */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:13px;background:#fff}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:11px 12px;border-bottom:1px solid #E6EDED;text-align:left;white-space:nowrap}
th{background:#F4F8F8;position:sticky;top:0;z-index:1;color:#496068;font-size:.79rem;text-transform:uppercase;letter-spacing:.035em}
tbody tr:hover{background:#FAFCFC}
.num{text-align:right;font-variant-numeric:tabular-nums}
.sortable-table th[data-sort]{cursor:pointer;user-select:none}
.sortable-table th[data-sort]:hover{background:#EAF3F2}
.sortable-table th[aria-sort="ascending"],.sortable-table th[aria-sort="descending"]{background:#DFF1EF;color:#176966}
.sort-indicator{color:#82A19F;font-size:.8rem;margin-left:3px}
.table-tools{display:flex;justify-content:flex-end;margin:0 0 10px}.table-filter{max-width:340px}
.comparison-table td:first-child,.comparison-table th:first-child{position:sticky;left:0;z-index:2;background:#F8FBFB}

/* Dashboard */
.dashboard-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}
.dashboard-toolbar h2{font-size:1.35rem}.dashboard-toolbar p{margin:5px 0 0;color:var(--muted)}
.gws-dashboard-grid{grid-template-columns:repeat(4,minmax(230px,1fr));gap:18px}
.meter-tile{
    --accent:#008F94;--accent-soft:#E5F5F4;
    display:flex;flex-direction:column;min-height:330px;
    background:#fff;border:1px solid #D9E5E5;border-radius:15px;overflow:hidden;
    box-shadow:0 7px 24px rgba(15,45,54,.055);position:relative
}
.meter-tile:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--accent)}
.meter-tile.tone-water{--accent:#00A1A6;--accent-soft:#E4F6F6}
.meter-tile.tone-gas{--accent:#008F94;--accent-soft:#E3F3F2}
.meter-tile.tone-power{--accent:#167887;--accent-soft:#E7F1F3}
.meter-tile.tone-feedin{--accent:#62B640;--accent-soft:#EEF8E9}
.meter-tile.tone-generation{--accent:#38A96B;--accent-soft:#E8F7EE}
.meter-tile-head{display:flex;justify-content:space-between;gap:12px;padding:18px 18px 10px}
.meter-tile-title{display:flex;align-items:flex-start;gap:11px;min-width:0}
.meter-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent);flex:0 0 auto}
.media-icon{width:23px;height:23px}
.meter-eyebrow{display:block;color:var(--accent);font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.meter-tile h3{margin:3px 0 0;font-size:1.04rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-link{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#F1F6F6;color:#567077;text-decoration:none;flex:0 0 auto}.icon-link:hover{background:var(--accent-soft);color:var(--accent)}
.mini-icon{width:17px;height:17px}
.meter-primary{padding:13px 18px 16px;border-bottom:1px solid #E5ECEC}
.meter-primary span{display:block;color:#718489;font-size:.76rem;margin-bottom:4px}
.meter-primary strong{font-size:2rem;letter-spacing:-.035em;color:#14343C;font-variant-numeric:tabular-nums}.meter-primary b{margin-left:5px;color:#5E7379;font-size:.85rem}
.meter-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E8EEEE;border-bottom:1px solid #E5ECEC}
.meter-stats>div{background:#F8FAFA;padding:12px 18px}.meter-stats span{display:block;color:#7A8B90;font-size:.71rem;margin-bottom:4px}.meter-stats strong{font-size:.86rem;color:#2D4B53}
.meter-tile-meta{padding:13px 18px;display:flex;flex-direction:column;gap:7px;min-height:69px}.trend{font-size:.8rem;font-weight:800}.trend small{color:#7A8A8F;font-weight:500}.trend.up{color:#A46A2B}.trend.down{color:#31805D}.trend.flat{color:#6E7E83}.last-reading{color:#7C8C90;font-size:.73rem}
.meter-tile-actions{display:grid;grid-template-columns:1fr auto;margin-top:auto;border-top:1px solid #E5ECEC}
.tile-action{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 14px;text-decoration:none;color:#4E6870;font-size:.81rem;font-weight:750}.tile-action+.tile-action{border-left:1px solid #E5ECEC}.tile-action.primary{color:var(--accent)}.tile-action:hover{background:var(--accent-soft)}.action-icon{width:16px;height:16px}
.dashboard-note{display:flex;align-items:center;gap:14px;margin-top:20px;padding:18px 20px;background:linear-gradient(135deg,#E8F6F3,#F2FAF6);border:1px solid #D4EBE4;border-radius:15px;color:#31555A}.dashboard-note strong,.dashboard-note span{display:block}.dashboard-note span{margin-top:3px;color:#667D82;font-size:.86rem}.note-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;color:var(--teal);box-shadow:0 5px 14px rgba(15,45,54,.07)}.note-svg{width:23px;height:23px}

/* Analyses */
.analysis-toolbar{margin-bottom:24px}.analysis-title{margin:0 0 16px}.analysis-title h2{font-size:1.45rem}.chart-card{margin-bottom:20px;border-radius:16px}.chart-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:10px}.chart-card-header h3{margin:0 0 3px}.chart-card-header p{margin:0;color:#75878C;font-size:.84rem}.chart-legend{display:flex;gap:16px;color:#657B81;font-size:.8rem}.chart-legend span{display:flex;align-items:center;gap:6px}.legend-swatch{display:inline-block;width:11px;height:11px;border-radius:3px}.primary-series{background:#008F94}.muted-series{background:#A9C8C5}
.modern-chart{position:relative;overflow-x:auto;min-height:360px}.modern-chart canvas{display:block;min-width:680px}.chart-tooltip{position:absolute;pointer-events:none;z-index:5;min-width:145px;padding:10px 12px;border-radius:10px;background:#0F2D36;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.2);font-size:.78rem}.chart-tooltip strong,.chart-tooltip span,.chart-tooltip b{display:block}.chart-tooltip span{color:#B7D0D0;margin:2px 0 5px}.analysis-table-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}.analysis-table-grid .card{min-width:0}
.chart-wrap{overflow-x:auto;background:#fff;border:1px solid var(--border);border-radius:13px;padding:14px}.chart{width:100%;height:auto;min-width:720px}.grid{stroke:#DCE7E6;stroke-width:1}.axis{font-size:11px;fill:#60787D}.value-label{font-size:10px;fill:#35545B;font-weight:650}

/* Misc pages */
.metric{font-size:1.8rem;font-weight:780;margin:10px 0 6px;letter-spacing:-.02em}.medium-section{margin-top:28px}.section-heading{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #DCE7E7}.analysis-header{display:flex;justify-content:space-between;gap:16px;align-items:end;margin:28px 0 12px}

/* Responsive */
.sidebar-overlay{position:fixed;inset:0;background:rgba(7,28,33,.52);backdrop-filter:blur(2px);z-index:45}
@media(max-width:1180px){.gws-dashboard-grid{grid-template-columns:repeat(2,minmax(250px,1fr))}}
@media(max-width:860px){
    .app-shell{display:block}.sidebar{position:fixed;left:0;top:0;bottom:0;width:276px;height:100vh;transform:translateX(-102%);transition:transform .22s ease;z-index:50}.sidebar.open{transform:translateX(0)}
    .mobile-topbar{display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 18px;background:#0F2D36;color:#fff;position:sticky;top:0;z-index:35;box-shadow:0 3px 14px rgba(15,45,54,.14)}
    .menu-button{display:grid;place-items:center;width:40px;height:40px;padding:0;background:rgba(255,255,255,.08);box-shadow:none}.menu-icon{width:22px;height:22px}.mobile-brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:850}.mobile-brand img{width:34px;height:34px}.page-content{padding:24px 18px 38px}.page-heading-mark{display:none}.page-heading h1{font-size:1.72rem}.dashboard-toolbar{align-items:flex-start;flex-direction:column}.analysis-table-grid{grid-template-columns:1fr}.chart-card-header{display:block}.chart-legend{margin-top:10px}.app-footer{padding-bottom:20px}
}
@media(max-width:640px){
    .gws-dashboard-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.meter-tile{min-height:0}.meter-primary strong{font-size:1.8rem}.dashboard-toolbar .compact-actions{width:100%}.dashboard-toolbar .button{flex:1}.page-content{padding-left:14px;padding-right:14px}.page-heading{margin-bottom:18px}.meter-stats{grid-template-columns:1fr}.meter-stats>div+div{border-top:1px solid #E7EEEE}.meter-tile-actions{grid-template-columns:1fr 1fr}.auth-shell{padding:24px 20px}.chart-card{padding:16px}.modern-chart canvas{min-width:620px}
}


/* GWS 3.1 – flexible Vergleichsauswahl */
.analysis-filter-stack{
    display:grid;
    gap:18px;
}
.filter-group{
    border-top:1px solid #E1E9E9;
    padding-top:16px;
}
.filter-group-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-bottom:12px;
}
.filter-group-heading strong{
    display:block;
    color:#173C43;
    font-size:.98rem;
}
.filter-kicker{
    display:block;
    color:#6B858A;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:3px;
}
.comparison-periods{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.comparison-period{
    border:1px solid #DCE7E7;
    border-radius:13px;
    padding:14px;
    background:#FAFCFC;
}
.comparison-period.primary-period{
    border-color:#9CCED0;
    background:#F4FBFB;
}
.comparison-period.muted-period{
    border-color:#D9E4E4;
    background:#F8FAFA;
}
.comparison-period-title{
    display:inline-block;
    margin-bottom:10px;
    font-size:.76rem;
    font-weight:850;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#527277;
}
.primary-period .comparison-period-title{
    color:#008F94;
}
.comparison-period-controls{
    display:grid;
    grid-template-columns:1.15fr 1fr 1fr;
    gap:10px;
}
.comparison-period-controls label{
    margin-top:0;
    font-size:.79rem;
}
.year-range-row{
    display:grid;
    grid-template-columns:minmax(140px,220px) auto minmax(140px,220px);
    align-items:end;
    gap:12px;
}
.year-range-row label{
    margin-top:0;
}
.range-separator{
    display:grid;
    place-items:center;
    min-height:43px;
    color:#688086;
    font-weight:750;
    padding-bottom:1px;
}

@media(max-width:900px){
    .comparison-periods{
        grid-template-columns:1fr;
    }
}

@media(max-width:620px){
    .comparison-period-controls{
        grid-template-columns:1fr;
    }
    .year-range-row{
        grid-template-columns:1fr 1fr;
    }
    .range-separator{
        display:none;
    }
}


/* GWS 3.2 – Sicherheit und CSP-kompatible Layoutklassen */
.card-narrow{max-width:480px}
.card-medium{max-width:560px}
.card-wide{max-width:720px}
.card-extra-wide{max-width:800px}
.heading-spaced{margin-top:24px}
.heading-section{margin-top:28px}
.section-spaced{margin-top:18px}
.auth-security-note{margin:18px 0 0}

.sidebar-logout-form{margin:0}
.side-nav-button{
    width:100%;
    border:0;
    background:transparent;
    box-shadow:none;
    text-align:left;
    cursor:pointer;
}
.side-nav-button:hover{
    background:rgba(255,255,255,.07);
    color:#fff;
}

.security-status-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.status-card{
    position:relative;
    overflow:hidden;
    min-height:158px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--shadow);
}
.status-card::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:4px;
    background:#C5D3D4;
}
.status-card.status-good::before{background:var(--teal)}
.status-card.status-warn::before{background:#D89D31}
.status-card>span{
    display:block;
    color:#71868B;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.status-card>strong{
    display:block;
    margin-top:8px;
    color:#17333B;
    font-size:1.08rem;
}
.status-card>p{
    margin:10px 0 0;
    color:#63777C;
    font-size:.86rem;
    line-height:1.48;
}

.security-facts{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:16px;
}
.security-facts>div{
    padding:13px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface-2);
}
.security-facts span{
    display:block;
    color:#71868B;
    font-size:.75rem;
    margin-bottom:4px;
}
.security-facts strong{
    display:block;
    color:#17333B;
    overflow-wrap:anywhere;
}

@media(max-width:1050px){
    .security-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
    .security-status-grid{grid-template-columns:1fr}
    .security-facts{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
    .security-facts{grid-template-columns:1fr}
}

.inline-action-form{margin:0}


/* GWS 3.3 – Einstellungen */
.meter-stats.single{grid-template-columns:1fr}
.settings-form{display:grid;gap:20px}
.settings-section{padding:22px}
.settings-section-heading{display:flex;justify-content:space-between;gap:24px;margin-bottom:18px}
.settings-section-heading h2{margin:0 0 6px}
.settings-section-heading p:last-child{margin:0;max-width:760px;line-height:1.55}
.settings-toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.setting-toggle{
    display:flex;align-items:flex-start;gap:12px;
    margin:0;padding:15px;border:1px solid #DCE7E7;border-radius:13px;
    background:#FAFCFC;cursor:pointer
}
.setting-toggle:hover{border-color:#A9CECC;background:#F6FBFA}
.setting-toggle input{
    width:19px;height:19px;min-width:19px;margin:2px 0 0;
    accent-color:#008F94
}
.setting-toggle span{display:block}
.setting-toggle strong{display:block;color:#24454D;margin-bottom:4px}
.setting-toggle small{display:block;color:#71858A;line-height:1.45;font-weight:500}
.settings-period-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.settings-period-card{
    border:1px solid #DCE7E7;border-radius:14px;padding:17px;background:#FAFCFC
}
.settings-period-card.primary-period{border-color:#9CCED0;background:#F4FBFB}
.settings-period-card.muted-period{border-color:#D9E4E4;background:#F8FAFA}
.field-help{margin:6px 0 0;color:#7A8C91;font-size:.78rem;line-height:1.4}
.settings-narrow{max-width:420px}
.settings-savebar{
    position:sticky;bottom:14px;z-index:12;
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:15px 17px;border:1px solid #CFE1E0;border-radius:14px;
    background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
    box-shadow:0 14px 35px rgba(15,45,54,.12)
}
.settings-savebar strong,.settings-savebar span{display:block}
.settings-savebar span{margin-top:3px;color:#72868B;font-size:.82rem}

@media(max-width:900px){
    .settings-toggle-grid,.settings-period-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
    .settings-section{padding:17px}
    .settings-savebar{position:static;align-items:stretch;flex-direction:column}
    .settings-savebar button{width:100%}
}


/* GWS 3.4 – Benutzerverwaltung */
.sidebar-user{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 10px;
    margin-bottom:7px;
    border-top:1px solid rgba(255,255,255,.09);
    border-bottom:1px solid rgba(255,255,255,.09)
}
.sidebar-user-avatar{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:50%;
    background:rgba(40,180,170,.16);
    border:1px solid rgba(86,210,199,.32);
    color:#7CE0D7;
    font-weight:850
}
.sidebar-user strong,.sidebar-user small{display:block}
.sidebar-user strong{
    color:#F2F8F8;
    font-size:.86rem;
    overflow:hidden;
    text-overflow:ellipsis
}
.sidebar-user small{color:#8FAEB3;font-size:.72rem;margin-top:2px}

.account-card{display:grid;gap:18px}
.account-summary{display:flex;align-items:center;gap:16px}
.account-avatar{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    min-width:58px;
    border-radius:16px;
    background:#E4F5F3;
    border:1px solid #BDE0DD;
    color:#087F82;
    font-size:1.5rem;
    font-weight:900
}
.account-summary h2{margin:2px 0 3px}
.account-summary p{margin:0}
.account-password-details{
    border-top:1px solid #E1E9E9;
    padding-top:14px
}
.account-password-details summary,.password-reset summary{
    color:#087F82;
    font-weight:800;
    cursor:pointer
}
.password-form{margin-top:16px}
.section-heading-row{display:flex;justify-content:space-between;gap:18px;margin-bottom:18px}
.section-heading-row h2{margin:0 0 5px}
.section-heading-row p:last-child{margin:0}
.users-table input[type="text"],.users-table input:not([type]){
    min-width:180px
}
.users-table select{min-width:150px}
.user-inline-form{margin:0}
.compact-check{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    white-space:nowrap
}
.compact-check input{width:18px;height:18px;accent-color:#008F94}
.user-actions{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;min-width:210px}
.user-actions button{white-space:nowrap}
.password-reset{
    position:relative
}
.password-reset form{
    display:grid;
    gap:8px;
    min-width:260px;
    margin-top:10px;
    padding:13px;
    border:1px solid #DCE7E7;
    border-radius:12px;
    background:#F8FBFB
}
.password-reset label{margin-top:0;font-size:.78rem}
.password-reset button{margin-top:3px}
.self-badge{
    display:inline-flex;
    align-items:center;
    min-height:39px;
    padding:0 10px;
    border-radius:9px;
    background:#EDF5F4;
    color:#55767A;
    font-size:.78rem;
    font-weight:800
}
.role-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:20px
}
.role-card{
    padding:18px;
    border:1px solid #DCE7E7;
    border-radius:14px;
    background:#FFFFFF
}
.role-card h3{margin:12px 0 6px}
.role-card p{margin:0;color:#657D82;line-height:1.5}
.role-badge{
    display:inline-flex;
    padding:5px 9px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:850;
    letter-spacing:.02em
}
.role-badge.admin{background:#E3F4F2;color:#077F82}
.role-badge.user{background:#EAF4EC;color:#3D7950}
.role-badge.viewer{background:#EFF2F3;color:#65777B}

@media(max-width:980px){
    .role-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
    .account-summary{align-items:flex-start}
    .section-heading-row{display:block}
}


/* GWS 3.5 – Rechtematrix */
.permission-matrix-wrap{
    overflow-x:auto;
    border:1px solid #DCE7E7;
    border-radius:14px
}
.permission-matrix{
    width:100%;
    min-width:720px;
    border-collapse:collapse
}
.permission-matrix th,
.permission-matrix td{
    padding:14px 16px;
    border-bottom:1px solid #E5ECEC;
    vertical-align:middle
}
.permission-matrix thead th{
    background:#F3F8F7;
    color:#496970;
    font-size:.78rem;
    letter-spacing:.03em;
    text-transform:uppercase;
    text-align:center
}
.permission-matrix thead th:first-child{text-align:left}
.permission-matrix tbody tr:last-child td{border-bottom:0}
.permission-matrix td:not(:first-child){text-align:center}
.permission-matrix td:first-child{width:52%}
.permission-matrix td strong{
    display:block;
    color:#24454D
}
.permission-matrix td small{
    display:block;
    margin-top:4px;
    color:#71858A;
    line-height:1.45
}
.permission-fixed-row{background:#FAFCFC}
.permission-state{
    display:inline-grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:50%;
    font-weight:900
}
.permission-state.fixed-on{
    background:#E4F5F2;
    color:#087F82
}
.permission-state.fixed-off{
    background:#F0F3F3;
    color:#8A9B9E
}
.matrix-check{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0;
    cursor:pointer
}
.matrix-check input{
    position:absolute;
    opacity:0;
    pointer-events:none
}
.matrix-check span{
    position:relative;
    display:block;
    width:42px;
    height:24px;
    border-radius:999px;
    background:#CBD8D9;
    transition:.18s ease
}
.matrix-check span::after{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#FFFFFF;
    box-shadow:0 1px 4px rgba(20,50,55,.2);
    transition:.18s ease
}
.matrix-check input:checked + span{
    background:#159A98
}
.matrix-check input:checked + span::after{
    transform:translateX(18px)
}
.matrix-check input:focus-visible + span{
    outline:3px solid rgba(21,154,152,.22);
    outline-offset:3px
}
.permission-note{margin:12px 0 0}
.sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important
}


/* GWS 3.6 – PV-Erzeugung */
.generation-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:22px;
    margin-bottom:18px
}
.generation-hero h2{
    margin:0 0 6px;
    font-size:1.55rem
}
.generation-hero p:last-child{
    margin:0;
    max-width:760px;
    line-height:1.55
}
.generation-history-badge{
    min-width:220px;
    padding:13px 15px;
    border:1px solid #CFE6D7;
    border-radius:13px;
    background:#F1FAF4;
    text-align:right
}
.generation-history-badge strong,
.generation-history-badge span{display:block}
.generation-history-badge strong{color:#2D7650}
.generation-history-badge span{
    margin-top:4px;
    color:#698079;
    font-size:.78rem
}
.generation-year-toolbar{margin-bottom:18px}
.generation-year-toolbar form{
    display:grid;
    grid-template-columns:minmax(180px,260px) auto;
    align-items:end;
    gap:12px
}
.generation-year-toolbar label{
    grid-column:1/-1;
    margin:0
}
.generation-year-toolbar button{min-height:43px}
.generation-kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:16px
}
.generation-kpi{
    position:relative;
    overflow:hidden;
    padding:17px 18px;
    border:1px solid #DCE7E7;
    border-radius:14px;
    background:#FFFFFF;
    box-shadow:0 5px 18px rgba(15,45,54,.045)
}
.generation-kpi:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:#A7C5C1
}
.generation-kpi.primary:before{background:#38A96B}
.generation-kpi span{
    display:block;
    color:#718489;
    font-size:.76rem;
    margin-bottom:6px
}
.generation-kpi strong{
    color:#173B42;
    font-size:1.55rem;
    letter-spacing:-.025em;
    font-variant-numeric:tabular-nums
}
.generation-kpi b{
    margin-left:5px;
    color:#62787D;
    font-size:.8rem
}
.generation-info{
    display:flex;
    gap:8px 14px;
    flex-wrap:wrap;
    margin-bottom:20px;
    padding:13px 15px;
    border:1px solid #D9E9E4;
    border-radius:12px;
    background:#F4FAF7;
    color:#4E6D66;
    font-size:.84rem
}
.generation-info strong{color:#2D6552}
.generation-layout{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);
    gap:18px;
    margin-top:20px
}
.generation-layout>.card{min-width:0}
.generation-entry-card h3{margin-bottom:6px}
.generation-entry-card textarea{resize:vertical}
.generation-month-table{margin-top:14px}
.section-spaced{margin-top:20px}

@media(max-width:1100px){
    .generation-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
    .generation-layout{grid-template-columns:1fr}
}
@media(max-width:700px){
    .generation-hero{align-items:flex-start;flex-direction:column}
    .generation-history-badge{width:100%;text-align:left}
    .generation-kpis{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
    .generation-kpis{grid-template-columns:1fr}
    .generation-year-toolbar form{grid-template-columns:1fr}
}


/* GWS 3.6.1 – historische Zeitraumwerte */
.period-value-badge{
    display:inline-flex;
    align-items:center;
    margin-left:7px;
    padding:3px 7px;
    border-radius:999px;
    background:#FFF3D9;
    color:#8A6400;
    font-size:.68rem;
    font-weight:850;
    white-space:nowrap
}
.generation-history-note{
    border-color:#D9E6C9;
    background:#F8FBF2
}


/* GWS 3.6.2 – Monats-Schnellerfassung */
.generation-quick-card{overflow:hidden}
.generation-quick-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:22px;
    margin-bottom:14px
}
.generation-quick-header h2{margin:0 0 5px}
.generation-quick-header p:last-child{margin:0;max-width:720px}
.generation-month-picker{
    min-width:310px
}
.generation-month-picker label{
    margin-top:0
}
.generation-month-picker>div{
    display:grid;
    grid-template-columns:minmax(150px,1fr) auto;
    gap:8px
}
.generation-month-nav{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin:8px 0 14px
}
.generation-next-missing{
    display:flex;
    align-items:center;
    gap:10px 16px;
    flex-wrap:wrap;
    padding:12px 14px;
    margin-bottom:14px;
    border:1px solid #BFE1DC;
    border-radius:12px;
    background:#F1FAF8
}
.generation-next-missing span{
    color:#64817E;
    font-size:.8rem
}
.generation-next-missing strong{color:#087F82}
.generation-next-missing a{
    margin-left:auto;
    color:#087F82;
    font-weight:800
}
.generation-next-missing.complete{
    border-color:#D7E7D9;
    background:#F6FAF4
}
.generation-quick-table-wrap{
    max-height:620px;
    overflow:auto;
    border:1px solid #E0E9E9;
    border-radius:12px
}
.generation-quick-table{
    min-width:700px
}
.generation-quick-table thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:#F3F8F7
}
.generation-quick-table td{
    vertical-align:middle
}
.generation-quick-table .generation-value-cell{
    width:34%
}
.generation-quick-input{
    width:100%;
    min-width:150px;
    margin:0;
    padding:9px 11px;
    text-align:right;
    font-variant-numeric:tabular-nums
}
.generation-quick-input.changed{
    border-color:#0F9D98;
    background:#EDFAF8;
    box-shadow:0 0 0 3px rgba(15,157,152,.10)
}
.generation-quick-table tr.has-change td{
    background:#F8FCFB
}
.generation-quick-table tr.next-missing-row td{
    background:#F0FAF8
}
.generation-quick-table tr.locked-row td{
    background:#FAFBFB
}
.generation-quick-table tr.locked-row input{
    background:#F0F3F3;
    color:#718287
}
.generation-status{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:800;
    white-space:nowrap
}
.generation-status.locked{
    background:#F0F2F3;
    color:#64777C
}
.generation-status.editable{
    background:#EAF6ED;
    color:#39794D
}
.generation-status.open{
    background:#E7F6F4;
    color:#087F82
}
.generation-status.future{
    background:#F5F6F6;
    color:#93A0A3
}
.period-covered-value{
    display:block;
    padding:8px 10px;
    border-radius:9px;
    background:#FFF7E6;
    color:#80631E;
    font-size:.78rem;
    line-height:1.45
}
.generation-quick-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #E3EAEA
}
.generation-quick-actions strong,
.generation-quick-actions span{
    display:block
}
.generation-quick-actions span{
    margin-top:3px;
    color:#73878B;
    font-size:.8rem
}
.historical-lock-badge{
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    border-radius:999px;
    background:#F0F2F3;
    color:#64777C;
    font-size:.72rem;
    font-weight:800;
    white-space:nowrap
}

@media(max-width:780px){
    .generation-quick-header{
        align-items:stretch;
        flex-direction:column
    }
    .generation-month-picker{
        min-width:0
    }
    .generation-quick-actions{
        align-items:stretch;
        flex-direction:column
    }
    .generation-quick-actions button{
        width:100%
    }
}
@media(max-width:520px){
    .generation-month-picker>div{
        grid-template-columns:1fr
    }
    .generation-month-nav{
        align-items:stretch;
        flex-direction:column
    }
    .generation-month-nav .button{
        width:100%;
        text-align:center
    }
}


/* GWS 3.7 – PV-Auswertung und Verträge */
.positive-series{background:#58A96D!important}
.generation-hero-actions{display:flex;align-items:center;justify-content:flex-end}
.pv-balance-card{margin-top:20px}
.contracts-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:20px}
.contracts-hero h2{margin:0 0 6px}
.contracts-hero p:last-child{margin:0;max-width:760px}
.contract-security-note{min-width:250px;padding:13px 15px;border:1px solid #D5E4E3;border-radius:13px;background:#F5FAF9}
.contract-security-note strong,.contract-security-note span{display:block}
.contract-security-note strong{color:#087F82;margin-bottom:4px}
.contract-security-note span{color:#6B8287;font-size:.8rem;line-height:1.45}
.contract-create-card{margin-bottom:20px}
.contract-create-card>summary,.contract-details>summary,.contract-price-add>summary,.contract-price-item>summary{cursor:pointer;color:#087F82;font-weight:850}
.contract-create-card>summary{font-size:1rem}
.contract-create-card[open]>summary,.contract-details[open]>summary,.contract-price-add[open]>summary{margin-bottom:16px}
.contract-form,.contract-price-form{margin-top:14px}
.contracts-list{display:grid;gap:18px}
.contract-card{border-left:4px solid #159A98}
.contract-card.inactive{border-left-color:#A8B7B9;opacity:.92}
.contract-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.contract-card-header h2{margin:5px 0 4px}
.contract-card-header p{margin:0}
.contract-medium{display:inline-flex;padding:4px 8px;border-radius:999px;background:#E6F5F3;color:#087F82;font-size:.72rem;font-weight:850}
.contract-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:.72rem;font-weight:850;white-space:nowrap}
.contract-status.active{background:#EAF6ED;color:#39794D}
.contract-status.inactive{background:#F0F2F3;color:#687B80}
.contract-details{margin-top:16px;padding-top:14px;border-top:1px solid #E1E9E9}
.contract-active-toggle{margin-top:14px}
.contract-price-section{margin-top:20px;padding-top:18px;border-top:1px solid #E1E9E9}
.contract-price-list{display:grid;gap:10px;margin-bottom:14px}
.contract-price-item,.contract-price-add{padding:12px 14px;border:1px solid #DDE7E7;border-radius:12px;background:#FAFCFC}
.contract-price-item>summary{display:flex;justify-content:space-between;gap:16px;color:#49696F}
.contract-price-item>summary strong{color:#087F82}
.contract-price-add{background:#F3FAF8}
.empty-state-card{text-align:center;padding:30px}
@media(max-width:800px){.contracts-hero{flex-direction:column}.contract-security-note{min-width:0;width:100%}.contract-card-header{flex-direction:column}.contract-price-item>summary{flex-direction:column;gap:4px}}


/* GWS 3.8 – aufgeräumte Bereichsnavigation */
.settings-anchor-nav,
.meter-section-nav{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:18px;
    padding:7px;
    border:1px solid #DDE8E7;
    border-radius:14px;
    background:#F5F9F8
}
.settings-anchor-nav a,
.meter-section-nav a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:38px;
    padding:8px 12px;
    border-radius:10px;
    color:#46676C;
    font-size:.82rem;
    font-weight:800;
    text-decoration:none
}
.settings-anchor-nav a:hover,
.meter-section-nav a:hover,
.meter-section-nav a.active{
    background:#FFFFFF;
    color:#087F82;
    box-shadow:0 4px 14px rgba(19,63,70,.08)
}
.settings-section[id],
#neuer-zaehler{
    scroll-margin-top:18px
}
.settings-data-section{
    margin-top:22px
}
.settings-data-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px
}
.settings-data-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:14px;
    padding:18px;
    border:1px solid #DDE8E7;
    border-radius:14px;
    background:#FAFCFC
}
.settings-data-card h3{
    margin:0 0 6px
}
.settings-data-card p{
    margin-top:0
}
.settings-data-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:12px;
    background:#E7F5F3;
    color:#087F82
}
.settings-data-svg{
    width:22px;
    height:22px
}
.settings-restore-note{
    margin-top:16px;
    padding:15px 17px;
    border-left:4px solid #7BBAB5;
    border-radius:10px;
    background:#F3F8F7
}
.settings-restore-note strong{
    color:#315F65
}
.settings-restore-note p{
    margin:5px 0 0;
    color:#657C80
}
.meter-row-actions{
    display:flex;
    align-items:center;
    gap:8px 14px;
    flex-wrap:wrap
}
.meter-row-actions a{
    white-space:nowrap
}
.meter-change-preselected{
    margin:12px 0 16px;
    padding:10px 12px;
    border:1px solid #BFE1DC;
    border-radius:10px;
    background:#F0FAF8;
    color:#296E70;
    font-size:.82rem;
    font-weight:750
}

@media(max-width:760px){
    .settings-data-grid{
        grid-template-columns:1fr
    }
}
@media(max-width:520px){
    .settings-anchor-nav,
    .meter-section-nav{
        align-items:stretch;
        flex-direction:column
    }
    .settings-anchor-nav a,
    .meter-section-nav a{
        width:100%
    }
    .settings-data-card{
        grid-template-columns:1fr
    }
}


/* GWS 3.9 – Sammelerfassung aktiver Zähler */
.capture-mode-nav{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:18px;
    padding:7px;
    border:1px solid #DDE8E7;
    border-radius:14px;
    background:#F5F9F8
}
.capture-mode-nav a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:40px;
    padding:9px 13px;
    border-radius:10px;
    color:#46676C;
    font-size:.84rem;
    font-weight:850;
    text-decoration:none
}
.capture-mode-nav a:hover,
.capture-mode-nav a.active{
    background:#FFFFFF;
    color:#087F82;
    box-shadow:0 4px 14px rgba(19,63,70,.08)
}
.bulk-reading-card{overflow:hidden}
.bulk-reading-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px
}
.bulk-reading-heading h2,
.single-reading-heading h2{
    margin:0 0 6px
}
.bulk-reading-heading p:last-child,
.single-reading-heading p:last-child{
    margin:0
}
.bulk-meter-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    background:#E7F5F3;
    color:#087F82;
    font-size:.74rem;
    font-weight:850;
    white-space:nowrap
}
.bulk-reading-date-grid{
    display:grid;
    grid-template-columns:minmax(170px,220px) minmax(130px,180px) 1fr;
    gap:12px;
    align-items:end;
    margin-bottom:16px;
    padding:14px;
    border:1px solid #DDE8E7;
    border-radius:13px;
    background:#F8FBFA
}
.bulk-reading-date-grid label{margin-top:0}
.bulk-reading-date-note{
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:8px 12px;
    border-left:3px solid #7BBAB5
}
.bulk-reading-date-note span,
.bulk-reading-date-note strong{
    display:block
}
.bulk-reading-date-note span{
    color:#6B8185;
    font-size:.74rem
}
.bulk-reading-date-note strong{
    margin-top:3px;
    color:#315F65;
    font-size:.82rem
}
.bulk-reading-global-warning{
    margin-bottom:14px;
    padding:11px 13px;
    border:1px solid #E3B4A9;
    border-radius:10px;
    background:#FFF3F0;
    color:#943E2D;
    font-size:.82rem;
    font-weight:750
}
.bulk-reading-table-wrap{
    max-height:640px;
    overflow:auto;
    border:1px solid #DDE7E7;
    border-radius:13px
}
.bulk-reading-table{
    min-width:900px
}
.bulk-reading-table thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:#F1F7F6
}
.bulk-reading-table td{
    vertical-align:middle;
    transition:background .16s ease
}
.bulk-reading-row.ready td{
    background:#F8FCFB
}
.bulk-reading-row.warning td{
    background:#FFF9ED
}
.bulk-reading-row.invalid td{
    background:#FFF5F2
}
.bulk-meter-name strong,
.bulk-meter-name span,
.bulk-last-reading strong,
.bulk-last-reading span,
.bulk-reading-difference strong,
.bulk-reading-difference span{
    display:block
}
.bulk-meter-name strong{
    color:#193F46
}
.bulk-meter-name span,
.bulk-last-reading span,
.bulk-reading-difference span{
    margin-top:3px;
    color:#74888C;
    font-size:.72rem
}
.bulk-last-reading strong{
    font-variant-numeric:tabular-nums
}
.bulk-reading-input-cell{
    width:230px
}
.bulk-reading-input-wrap{
    display:grid;
    grid-template-columns:minmax(125px,1fr) auto;
    gap:8px;
    align-items:center
}
.bulk-reading-input-wrap>span{
    color:#647C80;
    font-size:.8rem;
    font-weight:750
}
.bulk-reading-input{
    width:100%;
    min-width:0;
    margin:0;
    padding:10px 11px;
    text-align:right;
    font-variant-numeric:tabular-nums
}
.bulk-reading-input.ready{
    border-color:#73B8AE;
    background:#F1FAF8
}
.bulk-reading-input.warning{
    border-color:#D8A54B;
    background:#FFF8E8;
    box-shadow:0 0 0 3px rgba(216,165,75,.11)
}
.bulk-reading-input.invalid{
    border-color:#C86B58;
    background:#FFF4F1;
    box-shadow:0 0 0 3px rgba(200,107,88,.10)
}
.bulk-reading-difference{
    min-width:160px
}
.bulk-reading-status{
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:850;
    white-space:nowrap
}
.bulk-reading-status.open{
    background:#F0F2F3;
    color:#718287
}
.bulk-reading-status.ready{
    background:#EAF6ED;
    color:#39794D
}
.bulk-reading-status.warning{
    background:#FFF1D6;
    color:#8A650F
}
.bulk-reading-status.error{
    background:#FCE7E2;
    color:#974130
}
.bulk-reading-footer{
    display:grid;
    grid-template-columns:minmax(240px,1fr) auto;
    gap:18px;
    align-items:end;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid #E1E9E9
}
.bulk-reading-note-field label{
    margin-top:0
}
.bulk-reading-note-field small{
    color:#859699;
    font-weight:500
}
.bulk-reading-save{
    display:flex;
    align-items:center;
    gap:14px
}
.bulk-reading-save span{
    max-width:230px;
    color:#74888C;
    font-size:.75rem;
    line-height:1.4;
    text-align:right
}
.single-reading-heading{
    margin-bottom:14px
}

@media(max-width:820px){
    .bulk-reading-date-grid{
        grid-template-columns:1fr 1fr
    }
    .bulk-reading-date-note{
        grid-column:1 / -1
    }
    .bulk-reading-footer{
        grid-template-columns:1fr
    }
    .bulk-reading-save{
        justify-content:space-between
    }
}
@media(max-width:560px){
    .capture-mode-nav{
        align-items:stretch;
        flex-direction:column
    }
    .capture-mode-nav a{
        width:100%
    }
    .bulk-reading-heading{
        flex-direction:column
    }
    .bulk-reading-date-grid{
        grid-template-columns:1fr
    }
    .bulk-reading-date-note{
        grid-column:auto
    }
    .bulk-reading-save{
        align-items:stretch;
        flex-direction:column
    }
    .bulk-reading-save span{
        max-width:none;
        text-align:left
    }
    .bulk-reading-save button{
        width:100%
    }
}


/* GWS 3.99 – kompakte Auswertung mit Tabs */
.analysis-v399{
    --analysis-accent:#008F94;
    --analysis-border:#DCE7E7;
    --analysis-soft:#F4F9F8
}
.analysis-media-tabs{
    display:flex;
    gap:7px;
    margin-bottom:10px;
    padding:6px;
    overflow-x:auto;
    border:1px solid var(--analysis-border);
    border-radius:15px;
    background:#EDF5F4;
    scrollbar-width:none
}
.analysis-media-tabs::-webkit-scrollbar,
.analysis-series-tabs::-webkit-scrollbar,
.analysis-range-tabs::-webkit-scrollbar,
.analysis-year-chips::-webkit-scrollbar{
    display:none
}
.analysis-media-tabs a{
    flex:1 0 auto;
    min-width:92px;
    padding:10px 15px;
    border-radius:11px;
    color:#526F74;
    font-size:.86rem;
    font-weight:850;
    text-align:center;
    text-decoration:none
}
.analysis-media-tabs a:hover,
.analysis-media-tabs a.active{
    background:#FFFFFF;
    color:var(--analysis-accent);
    box-shadow:0 5px 16px rgba(21,69,74,.10)
}
.analysis-series-tabs{
    display:flex;
    gap:7px;
    margin:0 0 12px;
    overflow-x:auto;
    scrollbar-width:none
}
.analysis-series-tabs a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 11px;
    border:1px solid #DDE7E7;
    border-radius:999px;
    color:#667E83;
    font-size:.77rem;
    font-weight:780;
    text-decoration:none;
    white-space:nowrap
}
.analysis-series-tabs a small{
    padding:2px 5px;
    border-radius:999px;
    background:#EEF4F3;
    color:#789095;
    font-size:.61rem
}
.analysis-series-tabs a.active{
    border-color:#8CC6C5;
    background:#EFF9F7;
    color:#087F82
}
.analysis-control-card{
    margin-bottom:14px;
    padding:15px 17px
}
.analysis-current-title{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px
}
.analysis-current-title h2{
    margin:0;
    font-size:1.32rem
}
.analysis-current-title>span{
    padding:5px 8px;
    border-radius:999px;
    background:#E8F5F3;
    color:#087F82;
    font-size:.72rem;
    font-weight:850
}
.analysis-pv-tabs{
    display:flex;
    width:max-content;
    gap:4px;
    margin:-2px 0 13px;
    padding:4px;
    border-radius:10px;
    background:#EFF5F4
}
.analysis-pv-tabs a,
.analysis-chart-switch a{
    padding:6px 10px;
    border-radius:7px;
    color:#687F84;
    font-size:.73rem;
    font-weight:820;
    text-decoration:none
}
.analysis-pv-tabs a.active,
.analysis-chart-switch a.active{
    background:#FFFFFF;
    color:#087F82;
    box-shadow:0 2px 8px rgba(20,68,72,.10)
}
.analysis-control-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px;
    align-items:end
}
.analysis-control-label{
    display:block;
    margin-bottom:6px;
    color:#6F858A;
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.06em;
    text-transform:uppercase
}
.analysis-range-tabs,
.analysis-year-chips{
    display:flex;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:none
}
.analysis-range-tabs a,
.analysis-year-chips a{
    flex:0 0 auto;
    padding:7px 10px;
    border:1px solid #DCE6E6;
    border-radius:9px;
    color:#5E777C;
    background:#FAFCFC;
    font-size:.75rem;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap
}
.analysis-range-tabs a:hover,
.analysis-range-tabs a.active,
.analysis-year-chips a:hover,
.analysis-year-chips a.active{
    border-color:#8FC9C7;
    background:#EAF7F5;
    color:#087F82
}
.analysis-chart-switch>div{
    display:flex;
    gap:3px;
    padding:3px;
    border-radius:9px;
    background:#EFF5F4
}
.analysis-year-row{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:10px;
    align-items:center;
    margin-top:12px;
    padding-top:11px;
    border-top:1px solid #E5ECEC
}
.analysis-year-row .analysis-control-label{
    margin:0;
    white-space:nowrap
}
.analysis-custom-period{
    display:grid;
    grid-template-columns:minmax(150px,220px) minmax(150px,220px) auto;
    gap:10px;
    align-items:end;
    margin-top:12px;
    padding:12px;
    border-radius:11px;
    background:#F5F9F8
}
.analysis-custom-period label{margin-top:0}
.analysis-custom-period button{min-height:43px}
.analysis-range-notice{
    margin:9px 0 0;
    color:#856B2D;
    font-size:.76rem
}
.analysis-metric-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px
}
.analysis-metric-card{
    min-width:0;
    padding:13px 14px;
    border:1px solid var(--analysis-border);
    border-radius:13px;
    background:#FFFFFF
}
.analysis-metric-card>span{
    display:block;
    color:#72878B;
    font-size:.7rem;
    font-weight:800
}
.analysis-metric-card>strong{
    display:block;
    margin:5px 0 3px;
    color:#193E45;
    font-size:1.28rem;
    font-variant-numeric:tabular-nums;
    line-height:1.1
}
.analysis-metric-card>strong small{
    font-size:.63rem;
    font-weight:800
}
.analysis-metric-card>small{
    display:block;
    overflow:hidden;
    color:#839498;
    font-size:.68rem;
    text-overflow:ellipsis;
    white-space:nowrap
}
.analysis-metric-card .positive,
.analysis-values-card .positive{color:#3E8051}
.analysis-metric-card .negative,
.analysis-values-card .negative{color:#A14C3B}
.analysis-compact-grid{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(350px,.9fr);
    gap:14px;
    align-items:stretch
}
.analysis-main-chart-card,
.analysis-values-card{
    min-width:0;
    margin:0;
    padding:15px 16px
}
.analysis-main-chart-card .chart-card-header{
    margin-bottom:4px
}
.analysis-main-chart-card .chart-card-header h3{
    font-size:1rem
}
.analysis-main-chart-card .chart-legend{
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px 12px;
    font-size:.7rem
}
.analysis-v399 .modern-chart{
    min-height:286px;
    overflow:hidden
}
.analysis-v399 .modern-chart canvas{
    width:100%!important;
    min-width:0!important
}
.analysis-values-card{
    display:flex;
    flex-direction:column
}
.analysis-values-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:8px
}
.analysis-values-heading h3{
    margin:0;
    font-size:1rem
}
.analysis-values-heading>span{
    padding:4px 7px;
    border-radius:999px;
    background:#F0F5F4;
    color:#71878B;
    font-size:.65rem;
    font-weight:800
}
.analysis-value-head,
.analysis-month-value-row{
    display:grid;
    grid-template-columns:minmax(58px,.8fr) repeat(3,minmax(54px,1fr));
    gap:5px;
    align-items:center
}
.analysis-value-head{
    padding:5px 7px;
    color:#819397;
    font-size:.61rem;
    font-weight:850;
    text-align:right
}
.analysis-value-head span:first-child{text-align:left}
.analysis-month-value-row{
    min-height:25px;
    padding:4px 7px;
    border-top:1px solid #ECF1F1;
    font-size:.7rem;
    font-variant-numeric:tabular-nums;
    text-align:right
}
.analysis-month-value-row strong{
    color:#48676C;
    text-align:left
}
.analysis-year-value-list .analysis-value-head,
.analysis-year-value-row{
    display:grid;
    grid-template-columns:.7fr 1fr 1fr;
    gap:8px;
    align-items:center
}
.analysis-year-value-row{
    min-height:54px;
    padding:8px;
    border-top:1px solid #E7EEEE;
    font-size:.78rem;
    text-align:right
}
.analysis-year-value-row strong{text-align:left}
.analysis-pv-value-list{
    display:grid;
    gap:4px
}
.analysis-pv-value-row{
    display:grid;
    grid-template-columns:52px repeat(3,minmax(0,1fr));
    gap:6px;
    align-items:center;
    min-height:28px;
    padding:4px 6px;
    border-top:1px solid #ECF1F1;
    font-size:.67rem;
    font-variant-numeric:tabular-nums;
    text-align:right
}
.analysis-pv-value-row>strong{
    color:#48676C;
    text-align:left
}
.analysis-pv-value-row small{
    display:block;
    color:#8A999C;
    font-size:.54rem;
    line-height:1
}
.analysis-footnote{
    margin:12px 2px 0
}
.settings-v399-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
}
.settings-choice-card{
    min-width:0;
    margin:0;
    padding:14px;
    border:1px solid #DCE7E7;
    border-radius:13px;
    background:#FAFCFC
}
.settings-choice-card legend{
    padding:0 5px;
    color:#365F65;
    font-size:.8rem;
    font-weight:850
}
.settings-choice-card label{
    display:flex;
    align-items:center;
    gap:8px;
    margin:8px 0 0;
    color:#5E777C;
    font-size:.8rem;
    font-weight:720
}
.settings-choice-card input{width:auto;margin:0}

@media(max-width:1050px){
    .analysis-compact-grid{
        grid-template-columns:1fr
    }
    .analysis-values-card{
        max-width:none
    }
}
@media(max-width:800px){
    .analysis-metric-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .analysis-control-row{
        grid-template-columns:1fr
    }
    .analysis-chart-switch{
        width:max-content
    }
}
@media(max-width:620px){
    .analysis-media-tabs a{
        min-width:80px;
        padding:9px 12px
    }
    .analysis-control-card{
        padding:13px
    }
    .analysis-year-row{
        grid-template-columns:1fr
    }
    .analysis-custom-period{
        grid-template-columns:1fr 1fr
    }
    .analysis-custom-period button{
        grid-column:1 / -1;
        width:100%
    }
    .analysis-metric-grid{
        gap:7px
    }
    .analysis-metric-card{
        padding:11px
    }
    .analysis-metric-card>strong{
        font-size:1.08rem
    }
    .analysis-main-chart-card,
    .analysis-values-card{
        padding:13px
    }
    .analysis-main-chart-card .chart-card-header{
        display:block
    }
    .analysis-main-chart-card .chart-legend{
        justify-content:flex-start;
        margin-top:7px
    }
    .analysis-v399 .modern-chart{
        min-height:260px
    }
    .analysis-pv-value-row{
        grid-template-columns:45px repeat(3,minmax(0,1fr));
        font-size:.62rem
    }
    .settings-v399-grid{
        grid-template-columns:1fr
    }
}
@media(max-width:420px){
    .analysis-custom-period{
        grid-template-columns:1fr
    }
    .analysis-custom-period button{
        grid-column:auto
    }
    .analysis-value-head,
    .analysis-month-value-row{
        grid-template-columns:52px repeat(3,minmax(44px,1fr));
        font-size:.62rem
    }
}


/* GWS 3.99.1 – responsive Zeitraumwahl und Mehrjahresvergleich */
.year-old4{background:#B4C4C2!important}
.year-old3{background:#7D9FB4!important}
.year-old2{background:#C39A5D!important}
.year-old1{background:#63A675!important}
.year-current{background:#008F94!important}

.analysis-control-row>div{
    min-width:0
}
.analysis-range-tabs{
    width:100%;
    min-width:0;
    flex-wrap:wrap;
    overflow:visible
}
.analysis-range-tabs a{
    text-align:center
}

.analysis-multi-year-form{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:10px 14px;
    align-items:center;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #E5ECEC
}
.analysis-multi-year-heading{
    min-width:135px
}
.analysis-multi-year-heading .analysis-control-label{
    margin-bottom:3px
}
.analysis-multi-year-heading small{
    display:block;
    max-width:190px;
    color:#829498;
    font-size:.66rem;
    line-height:1.35
}
.analysis-multi-year-chips{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    min-width:0
}
.analysis-multi-year-chips label{
    margin:0
}
.analysis-multi-year-chips input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none
}
.analysis-multi-year-chips span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:57px;
    padding:7px 9px;
    border:1px solid #DCE6E6;
    border-radius:9px;
    background:#FAFCFC;
    color:#5E777C;
    font-size:.75rem;
    font-weight:820;
    cursor:pointer;
    user-select:none
}
.analysis-multi-year-chips input:checked+span{
    border-color:#79BDB9;
    background:#E5F5F2;
    color:#087F82;
    box-shadow:inset 0 0 0 1px rgba(0,143,148,.08)
}
.analysis-multi-year-chips input:focus-visible+span{
    outline:2px solid #008F94;
    outline-offset:2px
}
.analysis-multi-year-chips input:disabled+span{
    opacity:.46;
    cursor:not-allowed
}
.analysis-multi-year-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:5px
}
.analysis-multi-year-actions small{
    color:#758A8E;
    font-size:.67rem;
    white-space:nowrap
}
.analysis-multi-year-actions button{
    min-height:37px;
    padding:7px 12px
}
.analysis-multi-year-warning{
    grid-column:2 / -1;
    margin:0;
    color:#A14C3B;
    font-size:.72rem;
    font-weight:750
}

.analysis-multi-year-value-list{
    min-width:0
}
.analysis-multi-year-value-head,
.analysis-multi-year-value-row{
    display:grid;
    gap:4px;
    align-items:center;
    font-variant-numeric:tabular-nums;
    text-align:right
}
.analysis-multi-year-value-list.year-count-2
.analysis-multi-year-value-head,
.analysis-multi-year-value-list.year-count-2
.analysis-multi-year-value-row{
    grid-template-columns:48px repeat(2,minmax(0,1fr))
}
.analysis-multi-year-value-list.year-count-3
.analysis-multi-year-value-head,
.analysis-multi-year-value-list.year-count-3
.analysis-multi-year-value-row{
    grid-template-columns:48px repeat(3,minmax(0,1fr))
}
.analysis-multi-year-value-list.year-count-4
.analysis-multi-year-value-head,
.analysis-multi-year-value-list.year-count-4
.analysis-multi-year-value-row{
    grid-template-columns:48px repeat(4,minmax(0,1fr))
}
.analysis-multi-year-value-list.year-count-5
.analysis-multi-year-value-head,
.analysis-multi-year-value-list.year-count-5
.analysis-multi-year-value-row{
    grid-template-columns:45px repeat(5,minmax(0,1fr))
}
.analysis-multi-year-value-head{
    padding:5px 6px;
    color:#819397;
    font-size:.6rem;
    font-weight:850
}
.analysis-multi-year-value-head span:first-child{
    text-align:left
}
.analysis-multi-year-value-row{
    min-height:27px;
    padding:4px 6px;
    border-top:1px solid #ECF1F1;
    color:#506D72;
    font-size:.68rem
}
.analysis-multi-year-value-row strong{
    color:#48676C;
    text-align:left
}

@media(max-width:620px){
    .analysis-range-tabs{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px
    }
    .analysis-range-tabs a{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:43px;
        padding:8px 7px;
        white-space:normal;
        line-height:1.2
    }
    .analysis-multi-year-form{
        grid-template-columns:1fr
    }
    .analysis-multi-year-heading{
        min-width:0
    }
    .analysis-multi-year-heading small{
        max-width:none
    }
    .analysis-multi-year-actions{
        flex-direction:row;
        align-items:center;
        justify-content:space-between
    }
    .analysis-multi-year-warning{
        grid-column:auto
    }
}
@media(max-width:420px){
    .analysis-multi-year-chips{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .analysis-multi-year-chips span{
        width:100%;
        min-width:0
    }
    .analysis-multi-year-value-head,
    .analysis-multi-year-value-row{
        gap:2px;
        padding-left:4px;
        padding-right:4px
    }
    .analysis-multi-year-value-list.year-count-4
    .analysis-multi-year-value-head,
    .analysis-multi-year-value-list.year-count-4
    .analysis-multi-year-value-row{
        grid-template-columns:40px repeat(4,minmax(0,1fr))
    }
    .analysis-multi-year-value-list.year-count-5
    .analysis-multi-year-value-head,
    .analysis-multi-year-value-list.year-count-5
    .analysis-multi-year-value-row{
        grid-template-columns:38px repeat(5,minmax(0,1fr))
    }
    .analysis-multi-year-value-head{
        font-size:.54rem
    }
    .analysis-multi-year-value-row{
        font-size:.59rem
    }
}


/* GWS 4.0 – Shelly-PV-Automatik und Livemonitor */
.shelly-settings-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:14px;
    margin-top:18px
}
.shelly-settings-grid label small{
    display:block;
    margin-top:6px;
    color:#71817e;
    line-height:1.4
}
.shelly-settings-status{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-top:18px
}
.shelly-settings-status>div{
    padding:12px;
    border:1px solid #d7e4e1;
    border-radius:11px;
    background:#f8fbfa
}
.shelly-settings-status span,
.shelly-settings-status strong{display:block}
.shelly-settings-status span{color:#6e7f7c;font-size:.72rem;font-weight:800}
.shelly-settings-status strong{margin-top:4px;color:#294d49}
.status-ok{color:#28744d!important}
.status-error{color:#a3463e!important}
.shelly-task-command{
    margin-top:16px;
    padding:14px;
    border:1px solid #bdd8d2;
    border-radius:12px;
    background:#f0f8f6
}
.shelly-task-command strong,
.shelly-task-command code,
.shelly-task-command span{display:block}
.shelly-task-command code{
    overflow:auto;
    margin:8px 0;
    padding:10px;
    border-radius:8px;
    background:#173330;
    color:#e4f4f1;
    white-space:nowrap
}
.shelly-task-command span{color:#617572;font-size:.78rem}
.shelly-action-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
}
.shelly-action-grid .settings-data-card{margin:0}
.shelly-live-card{overflow:hidden}
.shelly-live-heading,
.shelly-live-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px
}
.shelly-live-heading h2{margin:0}
.shelly-live-state{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:850
}
.shelly-live-state::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:currentColor
}
.shelly-live-state.waiting{background:#eef2f1;color:#667875}
.shelly-live-state.online{background:#e5f5eb;color:#297149}
.shelly-live-state.buffer{background:#fff4dc;color:#8a611d}
.shelly-live-state.offline{background:#ffebe7;color:#9d4239}
.shelly-live-metrics{
    display:grid;
    grid-template-columns:1.35fr repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:16px
}
.shelly-live-metrics>div{
    padding:14px;
    border:1px solid #d5e4e1;
    border-radius:12px;
    background:#f8fbfa
}
.shelly-live-metrics span,
.shelly-live-metrics strong,
.shelly-live-metrics b{display:block}
.shelly-live-metrics span{color:#6c7d7a;font-size:.72rem;font-weight:800}
.shelly-live-metrics strong{margin-top:4px;font-size:1.5rem;color:#244b47}
.shelly-live-metrics b{margin-top:2px;color:#6c7d7a;font-size:.72rem}
.shelly-live-metrics .shelly-live-primary{
    border-color:#8bc9bd;
    background:linear-gradient(145deg,#e9f8f4,#f7fbfa)
}
.shelly-live-metrics .shelly-live-primary strong{
    color:#008f94;
    font-size:2.2rem
}
.shelly-live-chart-wrap{
    height:180px;
    min-height:180px;
    max-height:180px;
    margin-top:12px;
    padding:8px 4px 0;
    overflow:hidden;
    border:1px solid #e0e9e7;
    border-radius:12px;
    background:#fff
}
.shelly-live-chart-wrap canvas{
    display:block;
    width:100%;
    height:100%
}
.shelly-live-footer{
    margin-top:10px;
    color:#6e7f7c;
    font-size:.75rem
}
.dashboard-shelly-live{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:12px;
    padding:10px;
    border:1px solid #9fd0c6;
    border-radius:11px;
    background:#eff9f6
}
.dashboard-shelly-live>div span,
.dashboard-shelly-live>div strong{display:block}
.dashboard-shelly-live>div span{color:#6a7d79;font-size:.68rem;font-weight:800}
.dashboard-shelly-live>div strong{margin-top:2px;color:#176e69;font-size:1rem}
.dashboard-shelly-live .shelly-live-state{
    grid-column:1/-1;
    justify-self:start
}
.dashboard-shelly-updated{
    grid-column:1/-1;
    color:#72827f;
    font-size:.68rem
}
.generation-status.automatic{
    background:#e4f5eb;
    color:#287149
}
.generation-source-badge{
    display:inline-flex;
    margin-left:5px;
    padding:2px 6px;
    border-radius:999px;
    font-size:.64rem;
    font-weight:850
}
.generation-source-badge.automatic{background:#e2f4e9;color:#287149}
.generation-source-badge.provisional{background:#fff1d5;color:#86601c}
.generation-source-detail{
    display:block;
    margin-top:4px;
    color:#71817e
}
.generation-auto-managed-badge{
    display:inline-flex;
    padding:5px 8px;
    border-radius:8px;
    background:#edf4f2;
    color:#55706b;
    font-size:.7rem;
    font-weight:800
}
@media(max-width:900px){
    .shelly-settings-grid{grid-template-columns:1fr 1fr}
    .shelly-settings-status{grid-template-columns:1fr 1fr}
    .shelly-live-metrics{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
    .shelly-settings-grid,
    .shelly-settings-status,
    .shelly-action-grid,
    .shelly-live-metrics{grid-template-columns:1fr}
    .shelly-live-heading,
    .shelly-live-footer{align-items:flex-start;flex-direction:column}
    .shelly-live-state{max-width:100%}
}


/* GWS 4.1.0 – Tagesflächenverlauf und Datumsnavigation */
.shelly-chart-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-top:15px
}
.shelly-chart-title span,
.shelly-chart-title strong,
.shelly-chart-title b{
    display:block
}
.shelly-chart-title span{
    color:#6c7d7a;
    font-size:.7rem;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.045em
}
.shelly-chart-title strong{
    margin-top:2px;
    color:#244b47;
    font-size:1rem
}
.shelly-chart-title b{
    margin-top:2px;
    color:#71817e;
    font-size:.7rem;
    font-weight:700
}
.shelly-chart-navigation{
    display:flex;
    align-items:flex-end;
    gap:7px
}
.shelly-chart-navigation button{
    min-height:38px;
    margin:0;
    padding:8px 11px
}
.shelly-chart-arrow{
    width:40px;
    padding-left:0!important;
    padding-right:0!important;
    font-size:1.35rem;
    line-height:1
}
.shelly-chart-date-field{
    margin:0
}
.shelly-chart-date-field span{
    display:block;
    margin-bottom:3px;
    color:#6c7d7a;
    font-size:.66rem;
    font-weight:800
}
.shelly-chart-date-field input{
    width:auto;
    min-width:145px;
    margin:0;
    padding:8px 9px
}
.shelly-chart-today:disabled,
.shelly-chart-arrow:disabled{
    opacity:.42;
    transform:none;
    box-shadow:none;
    cursor:not-allowed
}
.shelly-live-chart-wrap{
    position:relative
}
.shelly-chart-tooltip{
    position:absolute;
    z-index:4;
    min-width:82px;
    padding:6px 8px;
    border:1px solid #abd7cf;
    border-radius:8px;
    background:rgba(255,255,255,.96);
    color:#244b47;
    box-shadow:0 5px 16px rgba(30,73,67,.14);
    pointer-events:none;
    text-align:center
}
.shelly-chart-tooltip strong,
.shelly-chart-tooltip span{
    display:block
}
.shelly-chart-tooltip strong{
    color:#008f94;
    font-size:.8rem
}
.shelly-chart-tooltip span{
    margin-top:1px;
    color:#6c7d7a;
    font-size:.66rem
}
.shelly-live-chart-wrap canvas{
    touch-action:pan-y
}

@media(max-width:760px){
    .shelly-chart-toolbar{
        align-items:stretch;
        flex-direction:column
    }
    .shelly-chart-navigation{
        display:grid;
        grid-template-columns:40px minmax(0,1fr) 40px auto;
        align-items:end
    }
    .shelly-chart-date-field input{
        width:100%;
        min-width:0
    }
}
@media(max-width:480px){
    .shelly-chart-navigation{
        grid-template-columns:40px minmax(0,1fr) 40px
    }
    .shelly-chart-today{
        grid-column:1/-1;
        width:100%
    }
}