/* Owner Anlage – design draft styles (embedded in #page-energie)
 * Extracted from design-draft-owner-anlage-v1.html
 *
 * Includes minimal .mp-* primitives so the page works even when
 * mieterportal-prototype.css / mieterportal-viz.css are not deployed.
 */
/* ─────────────────────────────────────────────────────────────
       Theme scoping (Light default, Dark optional wie Mieterportal V9)
       ───────────────────────────────────────────────────────────── */
    [data-owner-anlage].theme-light, [data-owner-anlage] {
      --mp-bg: #f4f7f6;
      --mp-card: #ffffff;
      --mp-text: #17241f;
      --mp-muted: #5b6b66;
      --mp-faint: #93a29d;
      --mp-border: #e4ece9;
      --mp-soft: #e7efee;
      --mp-highlight: #1eb97a;
      --mp-highlight-10: rgba(30,185,122,0.1);
      --mp-highlight-20: rgba(30,185,122,0.2);
      --mp-green: #244941;
      --mp-green-600: #1a3630;
      --mp-pv-color: #1eb97a;
      --mp-grid-color: #94a3b8;
      --mp-axis-color: #94a3b8;
      --mp-viz-track: #e8efec;
      --mp-yellow: #eea54e;
      --mp-radius-sm: 10px;
      --mp-radius: 16px;
      --mp-radius-lg: 22px;
      --mp-radius-full: 999px;
      --mp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
      --mp-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
      --oa-batt: #3aa0d8;
      --oa-feed: rgba(148,163,184,0.45);
      /* Flow-Palette (wie Zähler Mieterstrom-Verteilung) */
      --oa-flow-solar: #6ff0c0;
      --oa-flow-netz: #cbd5e1;
      --oa-flow-open: #eea54e;
      --oa-topbar-bg: rgba(255,255,255,0.85);
      --oa-hero-grad: linear-gradient(135deg, #10241d 0%, #0f3d30 60%, #0b5a3f 100%);
      --oa-btn-fg: #ffffff;
    }

    /* Fallback layout primitives (prod may not ship mieterportal-*.css yet) */
    [data-owner-anlage] .mp-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
    [data-owner-anlage] .mp-grid { display: grid; gap: 14px; }
    [data-owner-anlage] .mp-grid-2 { grid-template-columns: repeat(2, 1fr); }
    [data-owner-anlage] .mp-grid-3 { grid-template-columns: repeat(3, 1fr); }
    [data-owner-anlage] .mp-grid-4 { grid-template-columns: repeat(4, 1fr); }
    @media (max-width: 640px) {
      [data-owner-anlage] .mp-grid-3,
      [data-owner-anlage] .mp-grid-4 { grid-template-columns: repeat(2, 1fr); }
    }
    [data-owner-anlage] .mp-card {
      background: var(--mp-card);
      border: 1px solid var(--mp-border);
      border-radius: var(--mp-radius);
      padding: 18px;
      box-shadow: var(--mp-shadow-sm);
    }
    [data-owner-anlage] .mp-kpi { display: flex; flex-direction: column; gap: 6px; }
    [data-owner-anlage] .mp-kpi__icon {
      width: 40px; height: 40px; border-radius: 12px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--mp-highlight-10); color: var(--mp-green);
    }
    [data-owner-anlage] .mp-kpi__label { font-size: 0.8125rem; color: var(--mp-muted); }
    [data-owner-anlage] .mp-kpi__value { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; color: var(--mp-text); }
    [data-owner-anlage] .mp-kpi__sub { font-size: 0.75rem; color: var(--mp-faint); }
    [data-owner-anlage] .mp-def {
      display: flex; justify-content: space-between; gap: 16px;
      padding: 12px 0; border-bottom: 1px solid var(--mp-border);
    }
    [data-owner-anlage] .mp-def:last-child { border-bottom: none; }
    [data-owner-anlage] .mp-def dt { color: var(--mp-muted); font-size: 0.9375rem; }
    [data-owner-anlage] .mp-def dd { margin: 0; font-weight: 600; text-align: right; color: var(--mp-text); }
    [data-owner-anlage] .mp-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 44px; padding: 0 18px; border-radius: var(--mp-radius-full);
      border: none; cursor: pointer; font-family: inherit; font-size: 0.9375rem;
      font-weight: 600; background: var(--mp-green); color: #fff;
    }
    [data-owner-anlage] .mp-viz-gauge { position: relative; width: 132px; margin: 6px auto 0; }
    [data-owner-anlage] .mp-viz-gauge svg { width: 100%; height: auto; display: block; overflow: visible; }
    [data-owner-anlage] .mp-viz-gauge__track { fill: none; stroke: var(--mp-viz-track); stroke-width: 9; stroke-linecap: round; }
    [data-owner-anlage] .mp-viz-gauge__arc {
      fill: none; stroke: var(--mp-highlight); stroke-width: 9; stroke-linecap: round;
    }
    [data-owner-anlage] .mp-viz-spark__area { fill: var(--mp-highlight-10); stroke: none; }
    [data-owner-anlage] .mp-viz-spark__line {
      fill: none; stroke: var(--mp-highlight); stroke-width: 2.5;
      stroke-linecap: round; stroke-linejoin: round;
    }
    [data-owner-anlage].theme-dark {
      --mp-bg: #0b1220;
      --mp-card: #111c2e;
      --mp-text: #e6edf5;
      --mp-muted: #93a4bd;
      --mp-faint: #61728c;
      --mp-border: #1e2b40;
      --mp-soft: #16233a;
      --mp-highlight: #22e39a;
      --mp-highlight-10: rgba(34,227,154,0.12);
      --mp-highlight-20: rgba(34,227,154,0.24);
      --mp-green: #22e39a;
      --mp-green-600: #16b87c;
      --mp-pv-color: #22e39a;
      --mp-grid-color: #94a3b8;
      --mp-axis-color: #61728c;
      --mp-viz-track: #1e2b40;
      --mp-yellow: #f0b35a;
      --oa-batt: #6fd3ff;
      --oa-feed: rgba(148,163,184,0.45);
      --oa-flow-solar: #6ff0c0;
      --oa-flow-netz: #cbd5e1;
      --oa-flow-open: #eea54e;
      --oa-topbar-bg: rgba(11,18,32,0.88);
      --oa-hero-grad: linear-gradient(135deg, #0f2238 0%, #0b2d24 60%, #091e18 100%);
      --oa-btn-fg: #08131f;
    }

    [data-owner-anlage],
    [data-owner-anlage] .oa-topbar, [data-owner-anlage] .oa-hero, [data-owner-anlage] .mp-card, [data-owner-anlage] .mp-btn {
      transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
    }

    [data-owner-anlage].is-loading {
      pointer-events: none;
    }
    [data-owner-anlage].is-hydrating [data-oa-flow],
    [data-owner-anlage].is-hydrating [data-oa-chart],
    [data-owner-anlage].is-hydrating .oa-chart,
    [data-owner-anlage].is-hydrating .mp-card--chart {
      opacity: 0.45;
      transition: opacity 0.2s ease;
    }

    [data-owner-anlage].is-empty .mp-kpi__value,
    [data-owner-anlage].is-api-error .mp-kpi__value {
      color: var(--mp-faint);
    }

    .mp-btn { color: var(--oa-btn-fg); }
    .mp-btn--ghost { color: var(--mp-highlight); border-color: var(--mp-highlight-20); background: transparent; }
    .mp-btn--ghost:hover { background: var(--mp-highlight-10); }

    [data-owner-anlage] { padding: 4px 0 40px; }

    /* ─── Top bar ─── */
    .oa-topbar {
      position: sticky; top: 0; z-index: 30;
      background: var(--oa-topbar-bg); backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--mp-border);
    }
    .oa-topbar__inner { display: flex; align-items: center; gap: 14px; height: 62px; }
    .oa-logo { height: 24px; }
    .oa-addr { display: flex; flex-direction: column; line-height: 1.15; margin-left: 4px; min-width: 0; }
    .oa-addr small { font-size: .6875rem; color: var(--mp-faint); text-transform: uppercase; letter-spacing: .06em; }
    .oa-addr span { font-size: .8125rem; font-weight: 600; color: var(--mp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .oa-topbar__spacer { margin-left: auto; }
    .oa-theme-toggle {
      display: inline-flex; align-items: center; gap: 2px; padding: 4px;
      background: var(--mp-soft); border: 1px solid var(--mp-border);
      border-radius: 999px; cursor: pointer; font-family: inherit;
    }
    .oa-theme-toggle button {
      display: inline-flex; align-items: center; gap: 5px; border: none; background: transparent;
      cursor: pointer; font-family: inherit; font-size: .75rem; font-weight: 600; color: var(--mp-muted);
      padding: 6px 11px; border-radius: 999px; transition: all .2s ease;
    }
    .oa-theme-toggle button .material-icons { font-size: 16px; }
    .oa-theme-toggle button.is-active { background: var(--mp-highlight); color: var(--oa-btn-fg); }
    .oa-theme-toggle button.is-active .material-icons { color: var(--oa-btn-fg); }
    .oa-avatar {
      width: 36px; height: 36px; border-radius: 50%; background: var(--mp-highlight-10);
      border: 1.5px solid var(--mp-highlight-20); color: var(--mp-highlight);
      display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8125rem;
      flex-shrink: 0;
    }

    /* ─── Kontext-Navigation (Einbettung ins Eigentümer-Dashboard) ─── */
    .oa-subnav { display: flex; gap: 6px; overflow-x: auto; padding: 14px 0 2px; scrollbar-width: none; }
    .oa-subnav::-webkit-scrollbar { display: none; }
    .oa-subnav button {
      display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
      border: 1px solid var(--mp-border); background: var(--mp-card); cursor: pointer; font-family: inherit;
      font-size: .8125rem; font-weight: 600; color: var(--mp-muted);
      padding: 9px 15px; border-radius: 999px; transition: all .2s ease;
    }
    .oa-subnav button .material-icons { font-size: 18px; }
    .oa-subnav button:hover { border-color: var(--mp-highlight-20); color: var(--mp-text); }
    .oa-subnav button.is-active {
      background: var(--mp-highlight); border-color: var(--mp-highlight); color: var(--oa-btn-fg);
    }
    .oa-subnav button.is-active .material-icons { color: var(--oa-btn-fg); }

    /* ─── In-page section nav (Anlage: scrolls with page, not sticky) ─── */
    #page-energie .oa-section-nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px 18px;
      flex-wrap: wrap;
      margin: 8px 0 14px;
      padding: 10px 0 12px;
      border-bottom: 1px solid var(--mp-border, #e4ece9);
    }
    #page-energie .oa-section-nav.cp-v1-section-nav,
    #page-energie .oa-section-nav.planung-section-nav {
      position: static;
      z-index: auto;
      margin: 0;
      padding: 0;
      border-top: none;
      border-bottom: none;
      background: transparent;
      overflow-x: auto;
      scrollbar-width: none;
      flex: 1;
      min-width: 0;
    }
    #page-mieter .oa-section-nav.cp-v1-section-nav,
    #page-mieter .oa-section-nav.planung-section-nav {
      position: static;
      z-index: auto;
      margin: 0;
      padding: 0;
      border-top: none;
      background: transparent;
      border-bottom: none;
      overflow-x: auto;
      scrollbar-width: none;
      flex: 1;
      min-width: 0;
    }
    #page-mieter .oa-section-nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px 16px;
      flex-wrap: wrap;
      margin: 8px 0 14px;
      padding: 10px 0 12px;
      border-bottom: 1px solid var(--mp-border, #e4ece9);
    }
    #page-energie .oa-section-nav.cp-v1-section-nav::-webkit-scrollbar,
    #page-mieter .oa-section-nav.cp-v1-section-nav::-webkit-scrollbar { display: none; }
    .oa-section-panel { display: none; }
    .oa-section-panel.is-active { display: block; animation: mpFade 0.28s ease; }
    .oa-section-panel .mp-section-title { margin-top: 8px; }

    /* Zeitraum: inline neben Section-Nav (kein zweites Menü) */
    #page-energie .oa-range-inline,
    #page-mieter .oa-range-inline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      margin-left: auto;
    }
    #page-energie .oa-range-inline[hidden],
    #page-energie .oa-range-inline.is-hidden,
    #page-mieter .oa-range-inline[hidden],
    #page-mieter .oa-range-inline.is-hidden { display: none !important; }
    #page-energie .oa-range-inline__label,
    #page-mieter .oa-range-inline__label {
      font-size: .6875rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--mp-faint, #8a9a94);
      white-space: nowrap;
    }
    #page-energie .oa-range-inline__controls,
    #page-mieter .oa-range-inline__controls {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      border-radius: 999px;
      background: rgba(15, 40, 32, 0.04);
    }
    #page-energie .oa-range-inline__controls button,
    #page-mieter .oa-range-inline__controls button {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--mp-muted, #5c6f68);
      font: inherit;
      font-size: .75rem;
      font-weight: 550;
      line-height: 1;
      padding: 6px 10px;
      border-radius: 999px;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s ease, color .15s ease;
    }
    #page-energie .oa-range-inline__controls button:hover,
    #page-mieter .oa-range-inline__controls button:hover {
      color: var(--mp-text, #12241e);
    }
    #page-energie .oa-range-inline__controls button.is-active,
    #page-mieter .oa-range-inline__controls button.is-active {
      background: #fff;
      color: var(--mp-green, #1a5c45);
      font-weight: 650;
      box-shadow: 0 1px 2px rgba(15, 40, 32, 0.08);
    }
    @media (max-width: 900px) {
      #page-energie .oa-range-inline,
      #page-mieter .oa-range-inline {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
      }
      #page-energie .oa-range-inline__controls,
      #page-mieter .oa-range-inline__controls {
        margin-left: auto;
      }
    }

    /* ─── Page head ─── */
    .oa-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 18px 4px 4px; }
    .oa-pagehead h1 { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--mp-text); }
    .oa-pagehead p { margin: 4px 0 0; color: var(--mp-muted); font-size: .9375rem; }
    .oa-status {
      display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
      font-size: .8125rem; font-weight: 600; background: var(--mp-highlight-10); color: var(--mp-highlight);
    }
    .oa-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mp-highlight); box-shadow: 0 0 0 0 var(--mp-highlight-20); animation: oaPulse 2s infinite; }
    @keyframes oaPulse { 0% { box-shadow: 0 0 0 0 var(--mp-highlight-20); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

    /* ─── Hero: Live-Energiefluss ─── */
    .oa-hero {
      background: var(--oa-hero-grad); border: 1px solid var(--mp-border);
      border-radius: var(--mp-radius-lg); padding: 22px 24px; margin: 14px 0 16px;
      position: relative; overflow: hidden;
    }
    .oa-hero::before {
      content: ''; position: absolute; top: -70px; right: -50px; width: 240px; height: 240px;
      background: radial-gradient(circle, rgba(34,227,154,0.16) 0%, transparent 70%); pointer-events: none;
    }
    .oa-hero__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; position: relative; }
    .oa-hero__title { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 700; font-size: 1.05rem; }
    .oa-hero__title .material-icons { color: #6ff0c0; font-size: 21px; }
    .oa-hero__live { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 600; color: #cfeee0; }
    .oa-hero__live .oa-status__dot { background: #6ff0c0; }
    .oa-hero__soon {
      display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
      font-size: .6875rem; font-weight: 600; background: rgba(255,255,255,0.14); color: #e9f6ef; cursor: help; border: none; font-family: inherit;
    }
    .oa-hero__soon .material-icons { font-size: 13px; }

    /* Flow diagram canvas */
    .oa-flow { position: relative; width: 100%; height: 320px; margin-top: 6px; }
    @media (max-width: 640px) { .oa-flow { height: 340px; } }
    .oa-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .oa-flow__stream { stroke-dasharray: 3 11; animation: oaFlow 0.9s linear infinite; }
    @keyframes oaFlow { to { stroke-dashoffset: -14; } }
    @media (prefers-reduced-motion: reduce) {
      .oa-flow__stream { animation: none; }
      .oa-flow__dot { display: none; }
    }
    .oa-flow__node {
      position: absolute; transform: translate(-50%, -50%);
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      text-align: center; width: 118px;
    }
    .oa-flow__node-icon {
      width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
      color: #fff; backdrop-filter: blur(6px); margin-bottom: 3px;
    }
    .oa-flow__node-icon .material-icons { font-size: 26px; }
    .oa-flow__node--pv .oa-flow__node-icon {
      background: rgba(111,240,192,0.22); border-color: rgba(111,240,192,0.5); color: #6ff0c0;
      box-shadow: 0 0 28px rgba(111,240,192,0.4);
      margin-bottom: 0;
    }
    .oa-flow__node--above { gap: 6px; }
    .oa-flow__node-copy {
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      padding: 5px 10px; border-radius: 10px;
      background: rgba(8, 34, 26, 0.62); backdrop-filter: blur(4px);
      box-shadow: 0 2px 10px rgba(0,0,0,0.22);
    }
    .oa-flow__node--haus .oa-flow__node-icon {
      background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); color: #fff;
      box-shadow: 0 0 20px rgba(255,255,255,0.12);
    }
    .oa-flow__node--mieter .oa-flow__node-icon {
      background: rgba(111,240,192,0.16); border-color: rgba(111,240,192,0.38); color: #6ff0c0;
    }
    .oa-flow__node--netz .oa-flow__node-icon {
      background: rgba(203,213,225,0.14); border-color: rgba(203,213,225,0.35); color: #e2e8f0;
    }
    .oa-flow__node-title { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,0.72); text-transform: uppercase; letter-spacing: .04em; }
    .oa-flow__node-value { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.1; }
    .oa-flow__node-sub { font-size: .72rem; color: rgba(255,255,255,0.66); }
    .oa-flow__edge {
      position: absolute; transform: translate(-50%, -50%);
      font-size: .72rem; font-weight: 700; color: #08221a;
      background: #6ff0c0; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }
    .oa-flow__edge--netz { background: #cbd5e1; color: #1e293b; }

    /* ─── KPI accent strips (Light) ─── */
    [data-owner-anlage] .mp-card.mp-kpi { position: relative; overflow: hidden; }
    [data-owner-anlage] .mp-card.mp-kpi::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--mp-highlight), #7be0b6);
    }
    .mp-kpi .mp-kpi__icon { color: var(--mp-highlight); background: var(--mp-highlight-10); }
    .oa-kpi-spark { width: 100%; margin-top: 2px; }
    .oa-kpi-spark .oa-spark { width: 100%; height: 40px; display: block; }
    .oa-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

    /* "Bald verfügbar" Badge */
    .oa-soon-badge {
      display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
      font-size: .6875rem; font-weight: 600; background: var(--mp-soft); color: var(--mp-faint);
      cursor: help; border: 1px solid var(--mp-border);
    }
    .oa-soon-badge .material-icons { font-size: 13px; }

    /* ─── Section / cards ─── */
    .oa-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
    .oa-card-head h2 { margin: 0; }
    .oa-chart-sub {
      margin: 4px 0 0; font-size: 0.8125rem; color: var(--mp-muted); line-height: 1.35; max-width: 42rem;
    }
    .oa-chart-card { overflow: hidden; }
    .oa-chart-gen { width: 100%; height: 280px; }
    .oa-chart-gen--demand { height: 300px; }
    @media (max-width: 640px) {
      .oa-chart-gen, .oa-chart-gen--demand { height: 240px; }
    }
    .oa-chart-legend {
      margin-top: 14px; display: flex; flex-wrap: wrap; gap: 14px 18px;
      align-items: center; font-size: 0.8125rem; color: var(--mp-muted);
    }
    .oa-chart-legend > span { display: inline-flex; align-items: center; gap: 7px; }
    .oa-leg {
      display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0;
    }
    .oa-leg--self { background: var(--mp-highlight); }
    .oa-leg--feed { background: var(--mp-grid-color); }
    .oa-leg--grid { background: var(--mp-grid-color); }
    .oa-leg--line {
      width: 16px; height: 3px; border-radius: 2px;
      background: var(--mp-yellow, #eea54e);
      box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--mp-yellow, #eea54e);
    }
    .oa-leg-note { color: var(--mp-faint); font-size: 0.75rem; margin-left: auto; }
    @media (max-width: 640px) { .oa-leg-note { margin-left: 0; width: 100%; } }
    .oa-chart-hit { cursor: pointer; }
    rect.oa-chart-hit-overlay:hover { fill: rgba(15, 23, 42, 0.04); }
    .oa-demand-bar { transition: filter .15s ease; }
    .oa-donut__legend-row.oa-chart-hit { cursor: pointer; border-radius: 8px; padding: 4px 6px; margin: 0 -6px; }
    .oa-donut__legend-row.oa-chart-hit:hover { background: var(--mp-soft); }
    .oa-chart-tip {
      position: fixed; z-index: 14000; pointer-events: none;
      min-width: 160px; max-width: 260px;
      padding: 10px 12px; border-radius: 10px;
      background: #0f172a; color: #f8fafc;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
      font-family: inherit; font-size: 0.8125rem; line-height: 1.35;
      opacity: 0; visibility: hidden; transform: translateY(4px);
      transition: opacity .12s ease, transform .12s ease, visibility .12s;
    }
    .oa-chart-tip.is-visible { opacity: 1; visibility: visible; transform: none; }
    .oa-chart-tip__title { font-weight: 700; margin-bottom: 6px; color: #fff; }
    .oa-chart-tip__row {
      display: flex; justify-content: space-between; gap: 16px;
      color: #cbd5e1; margin-top: 3px;
    }
    .oa-chart-tip__row strong { color: #fff; font-weight: 600; white-space: nowrap; }
    .oa-demand-autarky {
      font-size: .8125rem; font-weight: 600;
      background: var(--mp-highlight-10); color: var(--mp-highlight);
      padding: 6px 12px; border-radius: 999px; white-space: nowrap;
    }
    .oa-demand-autarky strong { font-weight: 700; }
    .oa-erz-kpis .mp-kpi { min-height: 0; }
    .oa-chart-perf { width: 100%; height: 180px; }
    .oa-chart-eval { height: 200px; }
    .oa-chart-eval.oa-chart-eval--pair { height: 118px; }
    @media (max-width: 640px) {
      .oa-chart-eval { height: 180px; }
      .oa-chart-eval.oa-chart-eval--pair { height: 110px; }
    }

    .oa-eval-split {
      display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 14px;
    }
    @media (max-width: 900px) { .oa-eval-split { grid-template-columns: 1fr; } }

    .mp-kpi__value.is-pos { color: var(--mp-highlight); }
    .mp-kpi__value.is-neg { color: #c2410c; }

    /* Finanz-KPIs: Rendite-Meter + Amortisations-Timeline */
    .oa-kpi-meter {
      position: relative;
      height: 8px;
      margin: 10px 0 2px;
      border-radius: 999px;
      background: var(--mp-viz-track, #e8efeb);
      overflow: visible;
    }
    .oa-kpi-meter__fill {
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--mp-highlight), #7be0b6);
      min-width: 2px;
      transition: width 0.35s ease;
    }
    .oa-kpi-meter__fill.is-warn {
      background: linear-gradient(90deg, #e8a54b, #f0c27a);
    }
    .oa-kpi-meter__target {
      position: absolute;
      top: -4px;
      width: 2px;
      height: 16px;
      background: var(--mp-text, #12241e);
      opacity: 0.45;
      transform: translateX(-1px);
      border-radius: 1px;
    }
    .oa-kpi-timeline { margin: 10px 0 2px; }
    .oa-kpi-timeline__track {
      position: relative;
      height: 8px;
      border-radius: 999px;
      background: var(--mp-viz-track, #e8efeb);
    }
    .oa-kpi-timeline__fill {
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--mp-highlight), #7be0b6);
      min-width: 2px;
      transition: width 0.35s ease;
    }
    .oa-kpi-timeline__now {
      position: absolute;
      top: 50%;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--mp-highlight, #1a5c45);
      box-shadow: 0 0 0 2px rgba(26, 92, 69, 0.12);
      transform: translate(-50%, -50%);
    }
    .oa-kpi-timeline__labels {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      font-size: .6875rem;
      font-weight: 600;
      letter-spacing: .02em;
      color: var(--mp-faint, #8a9a94);
      text-transform: uppercase;
    }

    /* Abweichung: SOLL → IST Duo */
    .oa-kpi-duo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 10px 0 4px;
      padding: 8px 10px;
      border-radius: 10px;
      background: var(--mp-soft, #f2f6f4);
    }
    .oa-kpi-duo__col {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .oa-kpi-duo__col--ist .oa-kpi-duo__val {
      color: var(--mp-highlight);
    }
    .oa-kpi-duo__lab {
      font-size: .625rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--mp-faint);
    }
    .oa-kpi-duo__val {
      font-size: .875rem;
      font-weight: 700;
      color: var(--mp-text);
      white-space: nowrap;
    }
    .oa-kpi-duo__arrow {
      flex-shrink: 0;
      font-size: 1rem;
      font-weight: 700;
      color: var(--mp-faint);
      line-height: 1;
    }
    .oa-kpi-duo__arrow.is-pos { color: var(--mp-highlight); }
    .oa-kpi-duo__arrow.is-neg { color: #c2410c; }

    .oa-kpi-meter__fill.is-over {
      background: linear-gradient(90deg, var(--mp-highlight), #3dcf8e);
    }
    .oa-score__val.is-over { color: var(--mp-highlight); }
    .oa-score__fill.is-over {
      background: linear-gradient(90deg, var(--mp-highlight), #3dcf8e);
    }

    /* Legacy compare (kept if referenced elsewhere) */
    .oa-kpi-compare { margin: 10px 0 2px; }
    .oa-kpi-compare__track {
      position: relative;
      height: 8px;
      border-radius: 999px;
      background: var(--mp-viz-track, #e8efeb);
      overflow: hidden;
    }
    .oa-kpi-compare__ist {
      display: block;
      height: 100%;
      border-radius: 999px;
      min-width: 2px;
      transition: width 0.35s ease;
      background: linear-gradient(90deg, #e8a54b, #f0c27a);
    }
    .oa-kpi-compare__ist.is-pos {
      background: linear-gradient(90deg, var(--mp-highlight), #7be0b6);
    }
    .oa-kpi-compare__labels {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      font-size: .6875rem;
      font-weight: 600;
      letter-spacing: .02em;
      color: var(--mp-faint, #8a9a94);
      text-transform: uppercase;
    }
    .oa-kpi-meter__fill.is-mid {
      background: linear-gradient(90deg, #e8a54b, #f0c27a);
    }

    .oa-score-list { display: flex; flex-direction: column; gap: 16px; }
    .oa-score__head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
    .oa-score__label { font-size: .8125rem; color: var(--mp-muted); font-weight: 600; }
    .oa-score__val { font-size: .9375rem; font-weight: 700; color: var(--mp-text); }
    .oa-score__val.is-ok { color: var(--mp-highlight); }
    .oa-score__track {
      position: relative; height: 8px; border-radius: 999px;
      background: var(--mp-viz-track); overflow: visible;
    }
    .oa-score__fill {
      display: block; height: 100%; border-radius: 999px;
      background: linear-gradient(90deg, var(--mp-highlight), #7be0b6);
    }
    .oa-score__target {
      position: absolute; top: -3px; width: 2px; height: 14px;
      background: var(--mp-text); opacity: 0.45; transform: translateX(-1px);
    }
    .oa-score__detail { margin-top: 5px; font-size: .75rem; color: var(--mp-faint); }

    .oa-opt-total {
      font-size: .8125rem; font-weight: 600;
      background: var(--mp-highlight-10); color: var(--mp-highlight);
      padding: 6px 12px; border-radius: 999px; white-space: nowrap;
    }
    .oa-opt-list { display: flex; flex-direction: column; gap: 10px; }
    .oa-opt {
      display: flex; gap: 12px; padding: 12px 12px;
      border: 1px solid var(--mp-border); border-radius: 12px;
      background: var(--mp-card);
    }
    .oa-opt--empty { color: var(--mp-muted); font-size: .875rem; }
    .oa-opt__icon {
      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--mp-highlight-10); color: var(--mp-highlight);
    }
    .oa-opt__icon .material-icons { font-size: 20px; }
    .oa-opt__body { min-width: 0; flex: 1; }
    .oa-opt__title { font-size: .875rem; font-weight: 700; color: var(--mp-text); margin: 0 0 4px; }
    .oa-opt__text { margin: 0; font-size: .8125rem; color: var(--mp-muted); line-height: 1.45; }
    .oa-opt__meta {
      display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px;
      align-items: center; justify-content: space-between;
    }
    .oa-opt__effort {
      font-size: .75rem; font-weight: 600; color: var(--mp-faint);
      text-transform: capitalize;
    }
    .oa-opt__impact {
      font-size: .8125rem; font-weight: 700; color: var(--mp-highlight);
    }

    .oa-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
    @media (max-width: 820px) { .oa-2col { grid-template-columns: 1fr; } }

    /* Donut */
    .oa-donut { display: flex; align-items: center; gap: 22px; }
    @media (max-width: 420px) { .oa-donut { flex-direction: column; gap: 14px; } }
    .oa-donut__chart { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
    .oa-donut__chart svg { width: 100%; height: 100%; display: block; }
    .oa-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .oa-donut__center-top { font-size: 1.05rem; font-weight: 700; color: var(--mp-text); }
    .oa-donut__center-sub { font-size: .72rem; color: var(--mp-muted); }
    .oa-donut__legend { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
    .oa-donut__legend-row { display: flex; align-items: center; gap: 9px; font-size: .875rem; }
    .oa-donut__legend-dot { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; }
    .oa-donut__legend-label { color: var(--mp-muted); }
    .oa-donut__legend-val { margin-left: auto; font-weight: 700; color: var(--mp-text); }

    /* Gauge tuning */
    .oa-gauge { width: 172px; position: relative; }
    .oa-gauge svg { width: 100%; height: auto; display: block; }
    .oa-gauge .mp-viz-gauge__center {
      position: absolute;
      left: 50%;
      top: 58%;
      transform: translate(-50%, -50%);
      text-align: center;
      margin-top: 0;
      width: 88%;
      line-height: 1.15;
    }
    .oa-gauge .mp-viz-gauge__top { font-size: 1.5rem; }
    .oa-gauge .mp-viz-gauge__sub { font-size: 0.68rem; margin-top: 2px; }

    /* Performance meta */
    .oa-perf-meta { display: flex; align-items: center; gap: 8px; }
    .oa-perf-badge {
      display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
      font-size: .8125rem; font-weight: 700; background: var(--mp-highlight-10); color: var(--mp-highlight);
    }
    .oa-perf-badge .material-icons { font-size: 16px; }

    /* Mieterstrom block – drei gleich breite Spalten, Inhalt zentriert */
    .oa-ms-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 32px;
      align-items: start;
      justify-items: center;
    }
    @media (max-width: 860px) {
      .oa-ms-grid { grid-template-columns: 1fr; gap: 20px; justify-items: stretch; }
      .oa-ms-tile { align-items: flex-start; text-align: left; max-width: none; }
      .oa-ms-tile__head { justify-content: flex-start; }
      .oa-gauge-wrap { justify-content: flex-start; }
      .oa-units { margin-left: 0; margin-right: 0; }
      .oa-revenue-viz { margin-left: 0; margin-right: 0; }
    }
    .oa-ms-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 0;
      width: 100%;
      max-width: 260px;
      text-align: center;
    }
    .oa-ms-tile__head { display: flex; align-items: center; justify-content: center; gap: 4px; }
    .oa-ms-tile__label { font-size: .8125rem; color: var(--mp-muted); }
    .oa-ms-tile__value { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
    .oa-info-tip {
      position: relative; display: inline-flex; align-items: center; justify-content: center;
      width: 20px; height: 20px; padding: 0; border: none; border-radius: 999px;
      background: transparent; color: var(--mp-faint); cursor: help; flex-shrink: 0;
    }
    .oa-info-tip .material-icons { font-size: 15px; }
    .oa-info-tip:hover, .oa-info-tip:focus-visible { color: var(--mp-muted); outline: none; }
    .oa-info-tip__bubble {
      position: absolute; left: 50%; top: calc(100% + 7px); transform: translateX(-50%);
      z-index: 30; width: max-content; max-width: 248px; padding: 8px 10px; border-radius: 10px;
      font-size: .75rem; font-weight: 400; line-height: 1.45; text-align: left;
      color: var(--mp-text); background: var(--mp-card); border: 1px solid var(--mp-border);
      box-shadow: var(--mp-shadow); opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.15s ease, visibility 0.15s ease;
    }
    .oa-info-tip:hover .oa-info-tip__bubble,
    .oa-info-tip:focus-visible .oa-info-tip__bubble,
    .oa-info-tip.is-open .oa-info-tip__bubble { opacity: 1; visibility: visible; }
    @media (max-width: 860px) {
      .oa-info-tip__bubble { left: auto; right: -6px; transform: none; }
    }
    .oa-gauge-wrap { display: flex; justify-content: center; padding: 6px 0 2px; width: 100%; }
    .oa-revenue-viz { width: 100%; max-width: 240px; margin: 6px auto 2px; min-height: 72px; }
    .oa-revenue-viz svg { width: 100%; height: 72px; display: block; }
    .oa-revenue-bar { fill: var(--mp-highlight); opacity: 0.88; }

    /* Units: kompaktes Raster, mittig in der Spalte */
    .oa-units {
      display: grid;
      grid-template-columns: repeat(6, 15px);
      gap: 5px;
      margin: 8px auto 0;
      width: max-content;
      max-width: 100%;
      justify-content: center;
    }
    .oa-unit { width: 15px; height: 15px; border-radius: 4px; background: var(--mp-viz-track); }
    .oa-unit.is-on { background: var(--mp-highlight); }

    /* Einnahmen der Anlage */
    .oa-rev-total { margin-bottom: 14px; }
    .oa-rev-total__label {
      display: block; font-size: .75rem; font-weight: 600; color: var(--mp-muted); margin-bottom: 2px;
    }
    .oa-rev-total__value {
      font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--mp-text);
    }
    .oa-rev-stack {
      display: flex; height: 12px; border-radius: 999px; overflow: hidden;
      background: var(--mp-viz-track); margin-bottom: 10px;
    }
    .oa-rev-stack__mieter {
      display: block; height: 100%; width: 0; background: var(--mp-highlight);
      transition: width .35s ease;
    }
    .oa-rev-stack__feed {
      display: block; height: 100%; width: 0; background: var(--mp-grid-color);
      transition: width .35s ease;
    }
    .oa-rev-legend {
      display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px;
      font-size: .8125rem; color: var(--mp-muted);
    }
    .oa-rev-legend span { display: inline-flex; align-items: center; gap: 6px; }
    .oa-rev-legend i {
      width: 10px; height: 10px; border-radius: 3px; display: inline-block;
    }
    .oa-rev-legend strong { color: var(--mp-text); font-weight: 700; }

    .oa-benefit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .oa-benefit {
      display: flex; gap: 10px; align-items: center;
      padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mp-border);
    }
    .oa-benefit .material-icons { color: var(--mp-highlight); font-size: 22px; }
    .oa-benefit strong { display: block; font-size: .9375rem; color: var(--mp-text); }
    .oa-benefit span { font-size: .72rem; color: var(--mp-muted); }

    /* Definition list note */
    .oa-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: .8125rem; color: var(--mp-faint); }
    .oa-note .material-icons { font-size: 16px; margin-top: 1px; }

    /* Prototype ribbon */
    .oa-ribbon {
      display: inline-flex; align-items: center; gap: 6px; margin: 0 0 2px;
      font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
      color: var(--mp-faint);
    }
    .oa-ribbon .material-icons { font-size: 14px; }