/* =====================================================================
   Easybakus – "Meine Gebäude" + interaktiver Gebäude-Report
   Design-System (portiert aus docs/mockups/meine-gebaeude-report/mockup.css).

   WICHTIG: Alle Regeln sind unter dem Container-Scope `.mgr` gekapselt,
   damit sie weder Bootstrap (.card/.btn/.badge) noch das restliche App-CSS
   beeinflussen – und umgekehrt. Jede Report-Seite/-Tab rendert in einem
   <div class="mgr"> … </div>.

   Design-Sprache 1:1 zur AnalysisPage (Wiedererkennungswert):
   flächiges Weiß, ECKIGE Cards, Grün #3aa655 / Heading #1e4d2b,
   2px-Bottom-Border-Header, Bootstrap-Icons (keine Emojis).
   ===================================================================== */

.mgr {
    --green: #3aa655;
    --green-dark: #2b7a40;
    --green-text: #2b5e38;
    --heading: #1e4d2b;
    --green-soft: #f3faf4;
    --brand: #B0E0B6;
    --slate-700: #334155;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --text: #1f2937;
    --text-med: #475569;
    --text-light: #64748b;
    --alt: #f8fafc;
    --ist: #b91c1c;
    --soll: #2b7a40;

    /* S04-Fix: Der .mgr-Bereich ist IMMER hell (auch im Dark-Theme). Ohne diese
       Brücke erben App-/eb-Komponenten (EbPageHeader, EbSectionHeader, EbCard …)
       die dunklen Globals — Überschriften erschienen dann hellgrau bzw. mint auf
       weißem Grund. Hier auf die hellen/kontraststarken Werte festlegen. */
    --primary-heading: #1e4d2b;
    --primary-text: #2b5e38;
    --primary-color: #3aa655;
    --text-dark: #1f2937;
    --text-medium: #475569;
    --text-light: #64748b;
    --border-color: #e2e8f0;
    --surface: #ffffff;
    --surface2: #f8fafc;
    --ink: #1f2937;
    --ink2: #64748b;
    --line: #e2e8f0;
    --accent: #3aa655;
    --accent-ink: #1e4d2b;
    --accent-contrast: #ffffff;

    /* Status-/Badge-Tokens in der HELLEN Variante (identisch zu eb-design.css
       [data-theme="light"]). Ohne diese erbten EbStatusBadge & Co. die dunklen
       Mint-/Pastellwerte — auf der weißen Report-Fläche zu kontrastarm. */
    --ok: #2E7D46;
    --ok-soft: rgba(46, 125, 70, 0.12);
    --ok-dot: #2E7D46;
    --def: #3563A8;
    --def-soft: rgba(53, 99, 168, 0.12);
    --miss: #B26A00;
    --miss-soft: rgba(178, 106, 0, 0.12);
    --man: #5A6662;
    --man-soft: rgba(90, 102, 98, 0.12);

    /* Flächiges Weiß wie im Mockup – auch im Dark-Theme (Report ist immer hell). */
    background: #fff;
    color: var(--text);
    font-size: 15px;
    min-height: 100%;
    /* S06: komfortabler, einheitlicher Innen-Abstand (wie .admin-page:
       1.25rem/1.5rem), damit Header und Inhalt nicht an Breadcrumb-Leiste und
       Sidebar kleben. Auf dem Desktop ist der content-area-Gutter 0 (Edge-to-
       edge), sodass hier kein Doppel-Padding entsteht; box-sizing:border-box
       rechnet das Padding in min-height:100% ein (kein Überlauf-Scroll).
       Mobile-Abstand wird unten reduziert (dort trägt content-area den Gutter). */
    padding: 1.25rem 1.5rem;
    box-sizing: border-box;
}

.mgr * { box-sizing: border-box; }
/* Card-Body explizit weiß + dunkle Schrift (überschreibt globales .card-body
   mit var(--card-body-bg), das im Dark-Theme grau ist). */
.mgr .card-body { background: #fff; color: var(--text); }
.mgr .bi { line-height: 1; vertical-align: -0.125em; }

/* ---------- Page header ---------- */
.mgr .page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.mgr .page-head h1 { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--heading); }
.mgr .page-head p { margin: 0.3rem 0 0; color: var(--text-light); font-size: 0.9rem; }

/* ---------- Buttons (eckig) ---------- */
.mgr .btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.95rem; border-radius: 4px; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; border: 1px solid transparent; white-space: nowrap;
    text-decoration: none; line-height: 1.2;
}
.mgr .btn:disabled, .mgr .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.mgr .btn-primary { background: var(--green); color: #fff; }
.mgr .btn-primary:hover:not(:disabled) { background: var(--green-dark); }
.mgr .btn-secondary { background: #fff; color: var(--text); border-color: var(--border-strong); }
.mgr .btn-secondary:hover:not(:disabled) { border-color: var(--green); color: var(--green-dark); }
.mgr .btn-danger { background: #fff; color: #dc2626; border-color: #fecaca; }
.mgr .btn-danger:hover:not(:disabled) { background: #fef2f2; }
.mgr .btn-sm { padding: 0.35rem 0.65rem; font-size: 0.8rem; }

/* ---------- Badges (eckig) ---------- */
.mgr .badge {
    font-size: 0.7rem; padding: 0.18rem 0.5rem; border-radius: 3px;
    font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.3rem;
}
.mgr .badge-success { background: var(--green-soft); color: var(--green-dark); border: 1px solid #bbf7d0; }
.mgr .badge-warning { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.mgr .badge-info { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }

/* ---------- Cards (eckig, 2px-border-header) ---------- */
.mgr .card {
    background: #fff; border: 1px solid var(--border); border-radius: 2px;
    overflow: hidden; display: block;
}

/* Geteilte EbCard an die eckige .mgr-Sprache angleichen.
   `.eb-card` bringt aus eb-design.css 12px mit — auf den .mgr-Seiten (Report,
   Meine Gebäude, Feedback) standen dadurch 18 stark abgerundete Wertekarten neben
   durchgehend 2px-eckigen Flächen (.card, .energy-bar, .staffel-card, .san-switch).
   Der Radius wird deshalb hier auf die Seitensprache gezogen, statt `.eb-card`
   global zu ändern: Admin-, Token- und Dev-Seiten nutzen dieselbe Komponente ohne
   `.mgr`-Umgebung und behalten bewusst ihre 12px. */
.mgr .eb-card { border-radius: 2px; }
/* Randloser Kartenkörper rundet sonst weiterhin unten mit 12px ab. */
.mgr .eb-card-body.is-flush { border-radius: 0 0 2px 2px; }
.mgr .card-head {
    padding: 0.85rem 1.1rem; border-bottom: 2px solid var(--border);
    font-weight: 700; font-size: 1.02rem; color: var(--heading);
    display: flex; align-items: center; gap: 0.5rem;
}
.mgr .card-body { padding: 1.1rem; }

/* ---------- Building list cards ---------- */
/* Übersichtsseite „Meine Gebäude": oben 1 % Innenabstand wie die anderen Seiten
   (Report-Seiten bleiben randlos wegen Sticky-Head). */
/* S06: buildings-page-Top-Padding entfällt — .mgr trägt jetzt selbst einen
   einheitlichen Innen-Abstand (1.25rem/1.5rem). */
.mgr .building-list { display: flex; flex-direction: column; gap: 0.9rem; }
.mgr .building-row {
    background: #fff; border: 1px solid var(--border); border-radius: 2px;
    padding: 1.05rem 1.2rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between;
}
.mgr .building-row:hover { border-color: var(--green); }
.mgr .building-main { flex: 1; min-width: 0; }
.mgr .building-title-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.mgr .building-title { font-size: 1.08rem; font-weight: 700; color: var(--heading); }
.mgr .building-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; color: var(--text-light); font-size: 0.85rem; }
.mgr .building-meta .mi { display: inline-flex; align-items: center; gap: 0.4rem; }
.mgr .building-meta .bi { color: var(--slate-400); }
.mgr .building-meta strong { color: var(--text); font-weight: 600; }
.mgr .building-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Report tabs (Underline-Stil, eckig) ---------- */
.mgr .report-tabbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0 0.25rem; border-bottom: 1px solid var(--border); background: #fff;
    margin-bottom: 0.6rem;
}
/* Mobile-Tab-Auswahl (Dropdown) – auf Desktop ausgeblendet. */
.mgr .report-tab-select { display: none; }
/* Tab-Leiste bleibt EINE horizontal scrollbare Zeile (Anordnung wie bisher):
   - flex-wrap explizit nowrap (sonst greift geerbtes `wrap` → Chips brechen um)
   - flex/min-width erlauben Schrumpfen, damit die nicht-schrumpfende Toolbar die
     Leiste nicht auf Breite 0 quetscht; Überlauf wird gescrollt. */
.mgr .report-tabs {
    display: flex; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0;
    gap: 0.35rem; overflow-x: auto; scrollbar-width: none; padding: 0.45rem 0;
}
/* Reicht der Platz nicht für Tabs + Toolbar, rutscht die Toolbar auf eine
   eigene Zeile, statt die Tab-Leiste zu verdrängen. */
.mgr .report-tabbar { flex-wrap: wrap; }
.mgr .report-tabs::-webkit-scrollbar { display: none; }
/* S05: Chip-Optik statt Unterstrich-Tabs (Designsprache wie die Element-Leiste
   der AnalysisPage). Reine Optik — Tab-Logik/Reihenfolge unverändert. */
.mgr .report-tab {
    display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
    padding: 0.42rem 0.85rem; cursor: pointer;
    border: 1px solid var(--border); border-radius: 999px; background: #fff;
    color: var(--text-med); font-size: 0.86rem; font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mgr .report-tab:hover { color: var(--green-dark); border-color: var(--green); background: var(--green-soft); }
.mgr .report-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.mgr .report-tab.active {
    color: #fff; background: var(--green-dark); border-color: var(--green-dark);
}
.mgr .report-tab .bi { font-size: 1rem; }
.mgr .report-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; padding: 0.5rem 0; }
.mgr .report-updating { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-light); white-space: nowrap; }
.mgr .grundlage-switch { display: inline-flex; align-items: center; gap: 0.4rem; }
.mgr .grundlage-switch__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); }
.mgr .grundlage-switch .seg button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Sticky report head (Tab-Leiste + Energieskala als eine Einheit) ----------
   Bleibt unter der app-weiten Breadcrumb-Bar kleben (deren Höhe per JS gemessen). */
/* Kein Scroll-Anchoring auf der Berichtsseite (18.10.2026): Klappt die Energieskala beim Scrollen ein, soll der
   Browser scrollY nicht um den Höhenunterschied korrigieren — sonst käme die Seitenüberschrift zurück und die
   Skala klappte wieder auf (reportSticky.js). */
html:has(.mgr .report-sticky-head) { overflow-anchor: none; }
.mgr .report-sticky-head {
    position: sticky; top: calc(var(--app-topbar-h, 0px) + var(--mgr-breadcrumb-h, 48px)); z-index: 20; background: #fff;
}

/* Energieskala – nicht mehr selbst sticky (ist Teil von .report-sticky-head). */
.mgr .energy-bar {
    background: #fff; border: 1px solid var(--border); border-radius: 2px;
    padding: 0.85rem 1rem; margin-bottom: 0.6rem;
}
/* Neue Skala nach dem Mockup des Auftraggebers (14.10.2026): Kopfzeile je Größe, ein Band,
   Marker am Wert (EfficiencyClassifier.Position) — Endenergie darüber, Primärenergie darunter.
   Primärenergie ohne Klassen-Kästchen (§ 86 GModG, EA05/G5). */
.mgr .energy-bar .es-titel { font-weight: 700; font-size: 0.98rem; color: var(--heading); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.mgr .energy-bar .es-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; flex-wrap: wrap;
    padding: 0.35rem 0; border-top: 1px solid var(--border);
}
.mgr .energy-bar .es-kopf-primaer { margin-top: 0.1rem; }
/* Trennlinie unter der Endenergie-Zeile (Wunsch Auftraggeber 14.10.2026), Abstand zu den Fähnchen. */
.mgr .energy-bar .es-kopf:not(.es-kopf-primaer) { border-bottom: 1px solid var(--border); margin-bottom: 0.3rem; }
.mgr .energy-bar .es-groesse { font-weight: 700; font-size: 0.9rem; color: var(--heading); }
.mgr .energy-bar .es-ohne { font-weight: 500; font-size: 0.72rem; color: var(--text-med); margin-left: 0.3rem; }
.mgr .energy-bar .es-werte { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.mgr .energy-bar .es-trenner { width: 1px; align-self: stretch; background: var(--border); }
.mgr .energy-bar .es-wert { display: grid; grid-template-columns: auto auto auto auto; align-items: baseline; column-gap: 0.35rem; }
.mgr .energy-bar .es-wert .art { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; }
.mgr .energy-bar .es-wert.ist .art { color: var(--ist); }
.mgr .energy-bar .es-wert.soll .art { color: var(--green-dark); }
.mgr .energy-bar .es-wert .zahl { font-size: 1.3rem; font-weight: 800; color: var(--heading); line-height: 1; }
.mgr .energy-bar .es-wert .einheit { font-size: 0.72rem; color: var(--text-med); }
.mgr .energy-bar .es-wert .erzeuger { grid-column: 1 / -1; font-size: 0.68rem; color: var(--text-med); }
.mgr .energy-bar .es-klassenbox {
    align-self: center; min-width: 1.7rem; padding: 0.05rem 0.3rem; border-radius: 3px; text-align: center;
    font-size: 0.78rem; font-weight: 800; line-height: 1.3;
}
/* Fähnchen: absolut am Wert, zwei feste Zeilen je Seite, Strich zum Band. */
.mgr .energy-bar .es-marker { position: relative; height: 2.6rem; }
.mgr .energy-bar .es-fahne { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.mgr .energy-bar .es-fahne.links { transform: translateX(-0.6rem); align-items: flex-start; }
.mgr .energy-bar .es-fahne.rechts { transform: translateX(calc(-100% + 0.6rem)); align-items: flex-end; }
.mgr .energy-bar .es-fahne .txt {
    background: #fff; border: 1.5px solid currentColor; border-radius: 2px; padding: 0 0.3rem;
    font-size: 0.68rem; font-weight: 800; line-height: 1.25; white-space: nowrap;
}
.mgr .energy-bar .es-fahne.ist { color: var(--ist); }
.mgr .energy-bar .es-fahne.soll { color: var(--green-dark); }
.mgr .energy-bar .es-fahne::after { content: ""; width: 1.5px; background: currentColor; }
.mgr .energy-bar .es-fahne.links::after { margin-left: 0.6rem; }
.mgr .energy-bar .es-fahne.rechts::after { margin-right: 0.6rem; }
/* oben: Zeile 1 (IST) ganz oben mit langem Strich, Zeile 2 (SOLL) darunter mit kurzem */
.mgr .energy-bar .es-oben .es-fahne { bottom: 0; }
.mgr .energy-bar .es-oben .es-fahne.z1::after { height: 1.35rem; }
.mgr .energy-bar .es-oben .es-fahne.z2::after { height: 0.25rem; }
/* unten: Strich zuerst, dann Text; Zeile 1 (SOLL) direkt unter dem Band */
.mgr .energy-bar .es-unten .es-fahne { top: 0; flex-direction: column-reverse; }
.mgr .energy-bar .es-unten .es-fahne.z1::after { height: 0.25rem; }
.mgr .energy-bar .es-unten .es-fahne.z2::after { height: 1.35rem; }
.mgr .energy-bar .es-band { display: grid; grid-template-columns: repeat(9, 1fr); border-radius: 6px; overflow: hidden; }
.mgr .energy-bar .es-klasse {
    display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 2.6rem;
    padding: 0.2rem 0.1rem; text-align: center; min-width: 0; border-right: 1px solid rgba(255, 255, 255, 0.55);
}
.mgr .energy-bar .es-klasse:last-child { border-right: 0; }
.mgr .energy-bar .es-klasse .lab { font-weight: 800; font-size: 0.82rem; line-height: 1.1; }
.mgr .energy-bar .es-klasse .grenze { font-weight: 700; font-size: 0.66rem; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Kompakte Skala beim Scrollen (Wunsch Auftraggeber 15.10.2026): nur Band und Fähnchen, links je eine
   Zeilenbeschriftung — Endenergie über, Primärenergie unter dem Band. Umschalten: reportSticky.js.
   Weicher Übergang (18.10.2026): Die Skala ist immer ein zweispaltiges Raster; die Beschriftungsspalte öffnet
   sich von 0 auf 6,2 rem, Titel/Kopfzeilen/Hinweise klappen über grid-template-rows (1fr → 0fr) zu, Band,
   Fähnchen und Striche schrumpfen per Transition — kein display:none, nichts springt. */
.mgr .energy-bar {
    --es-dauer: 0.35s;
    display: grid; grid-template-columns: 0rem minmax(0, 1fr); column-gap: 0; align-items: center;
    transition: grid-template-columns var(--es-dauer) ease, column-gap var(--es-dauer) ease, padding var(--es-dauer) ease;
}
.mgr .energy-bar .es-klapp {
    grid-column: 1 / -1; display: grid; grid-template-rows: 1fr; opacity: 1;
    transition: grid-template-rows var(--es-dauer) ease, opacity calc(var(--es-dauer) * 0.7) ease;
}
.mgr .energy-bar .es-klapp > div { min-height: 0; overflow: hidden; }
.mgr .energy-bar .es-zeile {
    grid-column: 1; overflow: hidden; white-space: nowrap; opacity: 0;
    font-size: 0.7rem; font-weight: 700; color: var(--text-med); line-height: 1.1;
    align-self: end; padding-bottom: 0.1rem;
    transition: opacity var(--es-dauer) ease;
}
.mgr .energy-bar .es-zeile-unten { align-self: start; padding: 0.1rem 0 0; }
.mgr .energy-bar .es-marker,
.mgr .energy-bar .es-band { grid-column: 2; }
.mgr .energy-bar .es-marker { transition: height var(--es-dauer) ease; }
.mgr .energy-bar .es-fahne .txt { transition: font-size var(--es-dauer) ease; }
.mgr .energy-bar .es-fahne::after { transition: height var(--es-dauer) ease; }
.mgr .energy-bar .es-klasse { transition: min-height var(--es-dauer) ease, padding var(--es-dauer) ease; }
.mgr .energy-bar .es-klasse .lab { transition: font-size var(--es-dauer) ease; }
.mgr .energy-bar .es-klasse .grenze {
    max-height: 1rem; overflow: hidden; opacity: 1;
    transition: max-height var(--es-dauer) ease, opacity calc(var(--es-dauer) * 0.6) ease;
}

.mgr .energy-bar.kompakt {
    grid-template-columns: 6.2rem minmax(0, 1fr); column-gap: 0.6rem;
    padding: 0.3rem 0.75rem;
}
.mgr .energy-bar.kompakt .es-klapp { grid-template-rows: 0fr; opacity: 0; }
.mgr .energy-bar.kompakt .es-zeile { opacity: 1; }
.mgr .energy-bar.kompakt .es-marker { height: 2rem; }
.mgr .energy-bar.kompakt .es-fahne .txt { font-size: 0.6rem; line-height: 1.15; }
.mgr .energy-bar.kompakt .es-oben .es-fahne.z1::after { height: 1.1rem; }
.mgr .energy-bar.kompakt .es-oben .es-fahne.z2::after { height: 0.15rem; }
.mgr .energy-bar.kompakt .es-unten .es-fahne.z1::after { height: 0.15rem; }
.mgr .energy-bar.kompakt .es-unten .es-fahne.z2::after { height: 1.1rem; }
.mgr .energy-bar.kompakt .es-klasse { min-height: 1.3rem; padding: 0.05rem; }
.mgr .energy-bar.kompakt .es-klasse .lab { font-size: 0.74rem; }
.mgr .energy-bar.kompakt .es-klasse .grenze { max-height: 0; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .mgr .energy-bar, .mgr .energy-bar * , .mgr .energy-bar *::after { transition: none !important; }
}

/* ---------- Data tables ---------- */
.mgr .dtable { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.mgr .dtable th, .mgr .dtable td { padding: 0.5rem 0.65rem; text-align: left; border-bottom: 1px solid var(--border); }
.mgr .dtable th { background: var(--alt); font-weight: 700; color: var(--text); white-space: nowrap; }
.mgr .dtable td.num, .mgr .dtable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mgr .dtable tr:last-child td { border-bottom: none; }
.mgr .dtable .row-total td { font-weight: 800; background: var(--green-soft); border-top: 2px solid var(--green); }
.mgr .dtable .ist-col { color: var(--ist); font-weight: 600; }
.mgr .dtable .soll-col { color: var(--green-dark); font-weight: 600; }
.mgr .dtable .hl td { background: var(--green-soft); }
.mgr .dtable col.sel-col { background: #cdeed5; border-left: 2px solid var(--green); border-right: 2px solid var(--green); }
.mgr .dtable .cat td { background: #eef2f6; font-weight: 700; color: var(--heading); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; }
.mgr .table-scroll { overflow-x: auto; max-width: 100%; }

/* Schmale Tabellen (2–4 Spalten), die auch auf dem Handy ohne Querscrollen passen
   sollen. Das `white-space: nowrap` der Basis-Kopfzeile machte aus Spaltentiteln wie
   „Bedarf vor (neue Heizung)" die breiteste Stelle der Tabelle — sie sprengte die
   Karte. Hier duerfen Kopf und erste Spalte umbrechen; Zahlenzellen bleiben einzeilig
   (tabular-nums, rechtsbuendig), damit Betraege nicht mitten im Wert brechen. */
/* `anywhere` statt `break-word`: Nur `anywhere` senkt die Mindestbreite, mit der die
   automatische Tabellenbreite rechnet. Mit `break-word` blieb „Grundinvestitionskosten"
   als ungebrochenes Wort die Mindestbreite der ersten Spalte, und die Tabelle lief
   48 px über die Karte hinaus. `hyphens: auto` (lang="de") trennt dabei mit Bindestrich,
   wo der Browser ein Wörterbuch hat; sonst bricht er erst, wenn es gar nicht anders geht. */
.mgr .dtable-wrap th { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.mgr .dtable-wrap td:first-child { overflow-wrap: anywhere; hyphens: auto; }
.mgr .dtable-wrap td.num { white-space: nowrap; }

/* Eingeklappter Jahresverlauf (Wirtschaftlichkeit). Die Kopfzeile ist ein ganzer
   Balken, damit sie auch mit dem Daumen gut zu treffen ist. */
.mgr .verlauf-details { margin-top: 0.75rem; border: 1px solid var(--border); border-radius: 2px; }
.mgr .verlauf-details > summary {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 0.8rem; cursor: pointer; list-style: none;
    font-size: 0.86rem; font-weight: 700; color: var(--heading); background: var(--alt);
}
.mgr .verlauf-details > summary::-webkit-details-marker { display: none; }
.mgr .verlauf-details > summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.mgr .verlauf-details .verlauf-anzahl { font-weight: 500; color: var(--text-light); font-size: 0.8rem; white-space: nowrap; }
.mgr .verlauf-details .verlauf-pfeil { margin-left: auto; transition: transform .15s ease; color: var(--text-light); }
.mgr .verlauf-details[open] .verlauf-pfeil { transform: rotate(180deg); }
.mgr .verlauf-details[open] > summary { border-bottom: 1px solid var(--border); }
.mgr .verlauf-details > .dtable { margin-top: 0 !important; }

/* Kosten-Karten: Karten einer Reihe gleich hoch (Grid-Stretch), die Summenzeile
   (unter dem grünen Strich) sitzt in allen Karten bündig unten. Die Fußzeile
   bleibt EINZEILIG (kein Umbruch) → identische Höhe in allen Karten → der grüne
   Trennstrich liegt überall exakt auf gleicher Höhe. Das Label kürzt erst im
   Extremfall per Ellipsis, statt umzubrechen. */
.mgr .equal-foot-cards .card { display: flex; flex-direction: column; }
.mgr .equal-foot-cards .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
/* S05: gleiche Gleich-Höhen-Mechanik für die migrierten EbCards, damit die
   card-total-foot (margin-top:auto) in allen Karten einer Reihe bündig unten sitzt. */
.mgr .equal-foot-cards .eb-card { display: flex; flex-direction: column; }
.mgr .equal-foot-cards .eb-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.mgr .card-total-foot {
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.86rem; font-weight: 800; color: var(--text);
    background: var(--green-soft); border-top: 2px solid var(--green);
}
.mgr .card-total-foot > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr .card-total-foot .num { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Spinnennetz / Radar ---------- */
.mgr .radar-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; align-items: start; justify-items: center; }
/* Titel über dem eigentlichen Diagramm (keine umschließende Box mehr), damit das
   Netz selbst möglichst groß dargestellt werden kann. */
.mgr .radar-fig { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.mgr .radar-title { font-weight: 700; color: var(--heading); font-size: 0.92rem; text-align: center; margin: 0 0 0.15rem; }
/* Responsives, größeres Netz: skaliert mit der Spaltenbreite (Seitenverhältnis aus
   der viewBox), statt der bisherigen fixen Höhe von 250px. */
.mgr .radar-fig svg { width: 100%; max-width: 520px; height: auto; display: block; }
/* Eine gemeinsame Legende UNTER beiden Diagrammen (für links/rechts identisch). */
.mgr .radar-legend { display: flex; justify-content: center; gap: 1.4rem; margin-top: 0.4rem; font-size: 0.78rem; color: var(--text-med); }
.mgr .radar-legend-shared { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.mgr .radar-legend .sw { width: 0.8rem; height: 0.8rem; display: inline-block; margin-right: 0.35rem; vertical-align: -1px; border-radius: 2px; }

/* ---------- Key/value rows ---------- */
.mgr .kv-group-head { margin: 0.85rem 0 0.15rem; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-light); }
.mgr .kv-group-head:first-child { margin-top: 0; }
.mgr .kv { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: 0.87rem; }
.mgr .kv:last-child { border-bottom: none; }
.mgr .kv .k { color: var(--text-light); }
.mgr .kv .v { font-weight: 600; text-align: right; }

/* ---------- Grids ----------
   minmax(0, 1fr) statt 1fr: Ein blosses `1fr` ist `minmax(auto, 1fr)`, und dieses `auto`
   ist die MIN-CONTENT-Breite der Spalte. Karten mit Tabellen darin haben davon schnell
   300 px — im Querformat (App-Sidebar frisst Platz, Inhaltsbereich ~250 px) sprengten
   zwei solche Spalten die Seite auf 1150 px statt umzubrechen. Mit minmax(0, …) duerfen
   die Spalten schrumpfen; die Tabellen darin brechen um bzw. scrollen selbst. */
.mgr .grid { display: grid; gap: 1rem; }
.mgr .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mgr .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mgr .section-gap { margin-bottom: 1rem; }

/* ---------- Segmented IST/SOLL toggle (eckig) ---------- */
/* flex-shrink: 0 — ein Umschalter darf nie schrumpfen. In einem vollen Kartenkopf
   (Titel + Untertitel + Umschalter) quetschte der Flex-Zeilenfluss ihn sonst, und
   `overflow: hidden` schnitt den zweiten Knopf einfach ab: „Luft-WP" war zu sehen,
   „Erd-WP" nicht mehr erreichbar. */
.mgr .seg { display: inline-flex; flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: 3px; overflow: hidden; font-size: 0.76rem; font-weight: 700; }
.mgr .seg button { border: none; background: #fff; color: var(--text-light); padding: 0.3rem 0.75rem; cursor: pointer; white-space: nowrap; }
/* Kartenkoepfe duerfen umbrechen, damit ein nicht schrumpfendes Element (Umschalter,
   Tₓ-Marke) in die naechste Zeile rutscht, statt ueber den Rand hinauszuragen. */
.mgr .eb-card-header { flex-wrap: wrap; row-gap: 0.5rem; }
.mgr .seg button.on { background: var(--green); color: #fff; }

/* Kompakter WB-Staffel-Selektor (im Card-Header) */
.mgr .staffel-seg { flex-wrap: wrap; font-size: 0.78rem; }
.mgr .staffel-seg button { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.mgr .ss-class { display: inline-block; padding: 0 0.3rem; border-radius: 2px; font-weight: 800; font-size: 0.7rem; }

/* ---------- Wärmebrücken-Staffel ---------- */
.mgr .staffel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.mgr .staffel-card { border: 2px solid var(--border); border-radius: 2px; padding: 0.85rem 0.95rem; background: #fff; cursor: pointer; position: relative; }
.mgr .staffel-card .st-name { font-weight: 700; font-size: 0.92rem; color: var(--heading); display: flex; align-items: center; justify-content: space-between; }
.mgr .staffel-card .st-zuschlag { color: var(--text-light); font-size: 0.8rem; margin: 0.25rem 0 0.6rem; }
.mgr .staffel-card .st-val { font-size: 1.4rem; font-weight: 800; color: var(--text); }
.mgr .staffel-card .st-unit { font-size: 0.72rem; color: var(--text-light); font-weight: 600; }
.mgr .staffel-card .st-class { display: inline-block; margin-top: 0.55rem; padding: 0.1rem 0.55rem; border-radius: 2px; font-weight: 800; font-size: 0.8rem; }
.mgr .staffel-card.selected { border-color: var(--green); background: var(--green-soft); }
.mgr .staffel-card .pick { display: none; }
.mgr .staffel-card.selected .pick {
    display: grid; place-items: center; position: absolute; top: -1px; right: -1px;
    background: var(--green); color: #fff; width: 24px; height: 24px; font-size: 0.85rem;
}

/* ---------- Mini bar chart ---------- */
.mgr .chart { display: flex; align-items: flex-end; gap: 1.1rem; height: 150px; padding: 0.5rem 0.25rem 0; border-bottom: 2px solid var(--border); }
.mgr .chart .grp { display: flex; align-items: flex-end; gap: 0.35rem; flex: 1; height: 100%; }
.mgr .chart .bar { flex: 1; border-radius: 0; min-height: 6px; }
.mgr .chart .bar.a { background: #94a3b8; }
.mgr .chart .bar.b { background: var(--green); }
.mgr .chart-x { display: flex; gap: 1.1rem; margin-top: 0.4rem; }
.mgr .chart-x span { flex: 1; text-align: center; font-size: 0.74rem; color: var(--text-light); }
.mgr .chart-legend { display: flex; gap: 1.2rem; margin-top: 0.75rem; font-size: 0.78rem; color: var(--text-med); }
.mgr .chart-legend .sw { width: 0.85rem; height: 0.85rem; display: inline-block; margin-right: 0.4rem; vertical-align: -1px; }

/* ---------- Misc ---------- */
.mgr .muted { color: var(--text-light); }
.mgr .hint { font-size: 0.78rem; color: var(--text-light); font-style: italic; margin-top: 0.6rem; }
/* EA05: ein Satz zur Rolle direkt unter einer kv-Zeile (Flächen in den Stammdaten). */
.mgr .kv-hint { font-size: 0.72rem; color: var(--text-light); margin: -0.1rem 0 0.4rem; line-height: 1.35; }
.mgr .tag-active-wb {
    display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 700;
    color: var(--green-dark); background: var(--green-soft); border: 1px solid #bbf7d0; border-radius: 3px; padding: 0.18rem 0.6rem;
}
.mgr .subhead { font-size: 0.95rem; font-weight: 700; color: var(--heading); margin: 0 0 0.6rem; }
.mgr .subtable + .subtable { margin-top: 1rem; }
.mgr .subtable-title { font-size: 0.82rem; font-weight: 700; color: var(--text-med); margin: 0 0 0.35rem; text-transform: none; }
.mgr .unit { font-weight: 500; color: var(--text-light); font-size: 0.82rem; }

/* Wärmebrücken-Staffel: Desktop sticky im Parent, Mobile NICHT sticky (Epic G2).
   top = Breadcrumb + sticky Head (Tab-Leiste+Energieskala, beide per JS gemessen)
   + kleiner Abstand, damit die Staffel NICHT hinter dem Head verschwindet. */
.mgr .sticky-desktop {
    position: sticky;
    top: calc(var(--app-topbar-h, 0px) + var(--mgr-breadcrumb-h, 48px) + var(--mgr-stickyhead-h, 210px) + 0.6rem);
    z-index: 4; background: #fff;
}

/* ---------- Sanierungs-Switches (Isolierung) ---------- */
/* Alle 5 Switches in einer Reihe (gleich breit); bei schmalem Container Umbruch
   in 2 Reihen. Inhalt je Switch vertikal gestapelt → wird nie abgeschnitten. */
.mgr .san-switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem; }
.mgr .san-switch {
    display: flex; flex-direction: column; justify-content: space-between; gap: 0.6rem;
    border: 1px solid var(--border); border-radius: 2px; padding: 0.65rem 0.8rem; background: #fff;
}
.mgr .san-switch .san-name { font-weight: 600; color: var(--text); }
.mgr .san-switch .san-sub { font-size: 0.76rem; color: var(--text-light); margin-top: 0.1rem; }
.mgr .san-switch .san-right { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.mgr .seg.seg-sm { font-size: 0.68rem; }
.mgr .seg.seg-sm button { padding: 0.22rem 0.5rem; }
.mgr .san-effektiv { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--border); font-size: 0.86rem; color: var(--text); }
.mgr .san-state { font-size: 0.78rem; font-weight: 700; text-align: left; }
.mgr .san-state.on { color: var(--green-dark); }
.mgr .san-state.off { color: var(--text-light); }
/* Toggle (eckig-rund, klar an/aus) */
.mgr .toggle { position: relative; width: 46px; height: 26px; border: none; border-radius: 999px; background: var(--border-strong); cursor: pointer; flex: 0 0 auto; transition: background .15s; padding: 0; }
.mgr .toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mgr .toggle.on { background: var(--green); }
.mgr .toggle.on::after { left: 23px; }

/* ---------- PDF-Bestätigungs-Modal (Epic I) ---------- */
.mgr .pdf-summary { margin: 0.5rem 0 0.75rem; border: 1px solid var(--border); border-radius: 2px; padding: 0.4rem 0.8rem; }
.mgr .pdf-kontingent { font-size: 0.85rem; color: var(--text-med); margin: 0.5rem 0 0; }

/* Lade-/Leerzustände */
.mgr .report-loading { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3rem 1rem; color: var(--text-light); }
.mgr .report-empty { text-align: center; padding: 3rem 1rem; color: var(--text-light); }
.mgr .report-empty .bi { font-size: 3rem; color: var(--slate-400); display: block; margin-bottom: 0.75rem; }
.mgr .alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 0.85rem 1rem; border-radius: 2px; display: flex; align-items: center; gap: 0.5rem; }

/* =====================================================================
   RESPONSIVE (Epic G)
   ===================================================================== */
@media (max-width: 1024px) {
    .mgr .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mgr .staffel { grid-template-columns: 1fr; }

    /* Das Stapeln von Panel und Inhalt steht weiter unten — nach der Basisregel
       `.mgr .report-with-panel`, sonst gewinnt die spaetere Basisregel bei gleicher
       Spezifitaet und die Spalten bleiben nebeneinander. */

    /* Die Toolbar darf hier schrumpfen und damit intern umbrechen. Ihr
       `flex-shrink: 0` schuetzt auf dem Desktop die Tab-Leiste vor dem Zerquetschen;
       ist der Platz aber knapper als die Toolbar selbst (594 px), lief sie sonst
       ueber den Rand hinaus, statt ihre drei Bedienelemente zu stapeln. */
    .mgr .report-toolbar { flex-shrink: 1; min-width: 0; }
}

@media (max-width: 768px) {
    /* S06: Auf Mobile trägt der content-area den seitlichen Gutter (kein
       :has(.mgr)-Edge-to-edge < 769px) — .mgr daher horizontal schlank halten,
       sonst doppelter Rand. */
    .mgr { padding: 0.75rem 0 0; }
    /* Frei stehender Text zwischen den Karten bekommt den Einzug eines Kartenkoerpers
       (.eb-card-body = 16 px) — .mgr selbst hat hier seitlich 0. */
    .mgr .tab-intro { padding-left: 1rem; padding-right: 1rem; }
    .mgr .page-head h1 { font-size: 1.25rem; }
    /* minmax(0, 1fr) statt 1fr — dieselbe Min-Content-Falle wie oben: Die U-Werte-Tabelle
       im Stammdaten-Tab (355 px) machte die einzige Spalte 389 px breit, und mit ihr jede
       Karte des Tabs. Jetzt passt die Spalte auf den Schirm, und die Tabelle scrollt in
       ihrem eigenen .eb-table-wrap. */
    .mgr .grid-3, .mgr .grid-2 { grid-template-columns: minmax(0, 1fr); }
    /* Diagramme untereinander; je Diagramm Titel oben, gemeinsame Legende unten. */
    .mgr .radar-wrap { grid-template-columns: 1fr; }

    .mgr .building-row { flex-direction: column; align-items: stretch; }
    .mgr .building-actions { justify-content: stretch; }
    .mgr .building-actions .btn { flex: 1; justify-content: center; }

    /* Mobil: Tab-Buttons → Dropdown-Select */
    .mgr .report-tabbar { flex-direction: column; align-items: stretch; }
    .mgr .report-toolbar { padding: 0.5rem 0 0; }
    .mgr .report-tabs { display: none; }
    .mgr .report-tab-select {
        display: block; width: 100%; padding: 0.6rem 0.7rem; font-size: 0.95rem;
        border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; color: var(--text);
    }
    /* sticky Head auf Mobile nicht kleben (sonst zu viel fixe Höhe) */
    .mgr .report-sticky-head { position: static; top: auto; }

    .mgr .energy-bar .es-werte { gap: 0.6rem; }
    .mgr .energy-bar .es-wert .zahl { font-size: 1.1rem; }
    .mgr .energy-bar .es-klasse { min-height: 2.2rem; }
    .mgr .energy-bar .es-klasse .lab { font-size: 0.66rem; }
    .mgr .energy-bar .es-klasse .grenze { font-size: 0.5rem; }
    .mgr .energy-bar .es-fahne .txt { font-size: 0.58rem; padding: 0 0.15rem; }

    .mgr .dtable { font-size: 0.8rem; }
    .mgr .dtable th, .mgr .dtable td { padding: 0.4rem 0.45rem; }

    /* Wärmebrücken-Staffel auf Mobile bewusst NICHT sticky (Epic G2) */
    .mgr .sticky-desktop { position: static; top: auto; }

    .mgr .radar-wrap { grid-template-columns: 1fr; }

    /* Card-Header darf umbrechen (z. B. Titel + Segmented-Auswahl Luft/Erd). */
    .mgr .card-head { flex-wrap: wrap; }

    /* Lange Schlüssel (z. B. Fixwerte) nicht abschneiden. */
    .mgr .kv { gap: 0.5rem; }
    .mgr .kv .k { overflow-wrap: anywhere; }

    /* ---- Touch-Feinschliff (Epic G4): Tap-Targets ≥ 44px, Inputs 16px ---- */
    .mgr .report-tab-select { min-height: 44px; font-size: 16px; }
    .mgr input, .mgr select, .mgr textarea { font-size: 16px; }
    .mgr .btn, .mgr .btn-sm { min-height: 44px; }
    .mgr .seg button { padding: 0.55rem 0.9rem; min-height: 40px; }
    .mgr .toggle { width: 54px; height: 32px; }
    .mgr .toggle::after { width: 26px; height: 26px; top: 3px; left: 3px; }
    .mgr .toggle.on::after { left: 25px; }
    .mgr .san-switch { padding: 0.7rem 0.85rem; }
    .mgr .staffel-card { padding: 1rem; }
}

/* Letzte Overflow-Absicherung: breite Tabellen scrollen innerhalb ihres
   Wrappers (320–1920px keine horizontale Seiten-Scroll). */
.mgr .table-scroll { -webkit-overflow-scrolling: touch; }
.mgr img, .mgr svg { max-width: 100%; }

/* Report-Seiten: ab 769px randlos (kein content-area-Padding), Report selbst
   mit nur 5px Innenabstand (.mgr). `:has(.mgr)` + !important überschreibt das
   ≥769px-Padding aus MainLayout (analog zur AnalysisPage). */
@media (min-width: 769px) {
    .content-area:has(.mgr) { padding: 0 !important; }
}

/* ---------- Reporting-Dynamik-Controller (schmales Sticky-Sub-Menü) ----------
   Linke, nicht mitscrollende Spalte mit allen Live-Hebeln; rechts der Tab-Inhalt.
   Klebt unter dem report-sticky-head (dessen Höhe per JS in --mgr-stickyhead-h). */
.mgr .report-with-panel { display: flex; gap: 1rem; align-items: flex-start; }
.mgr .report-tab-col { flex: 1 1 auto; min-width: 0; }
.mgr .report-dynamik-col {
    flex: 0 0 220px; width: 220px; align-self: flex-start;
    position: sticky;
    top: calc(var(--app-topbar-h, 0px) + var(--mgr-breadcrumb-h, 48px) + var(--mgr-stickyhead-h, 210px) + 0.5rem);
    max-height: calc(100vh - var(--app-topbar-h, 0px) - var(--mgr-breadcrumb-h, 48px) - var(--mgr-stickyhead-h, 210px) - 1rem);
    overflow: auto;
}
.mgr .rdp {
    display: flex; flex-direction: column; gap: 0.7rem;
    border: 1px solid var(--border); border-radius: 6px; background: #fff; padding: 0.7rem 0.75rem; font-size: 0.8rem;
}
.mgr .rdp-title { font-weight: 700; font-size: 0.9rem; color: var(--heading); }
.mgr .rdp-group { display: flex; flex-direction: column; gap: 0.35rem; }
.mgr .rdp-group + .rdp-group { border-top: 1px solid var(--border); padding-top: 0.6rem; }
.mgr .rdp-head { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); }
.mgr .rdp-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mgr .rdp-row.rdp-col { flex-direction: column; align-items: stretch; gap: 0.2rem; }
.mgr .rdp-label { overflow-wrap: anywhere; }
.mgr .rdp-muted { font-size: 0.72rem; color: var(--text-light); }
.mgr .rdp-seg { display: flex; flex-wrap: wrap; gap: 2px; }
.mgr .rdp-seg button { flex: 1 1 auto; padding: 3px 6px; font-size: 0.74rem; min-width: 2.2rem; }
.mgr .rdp .toggle { flex: 0 0 auto; }
/* WB-Staffel im schmalen Panel: Stufen untereinander statt nebeneinander (kein Überlauf). */
.mgr .rdp .staffel-seg { flex-direction: column; align-items: stretch; }
.mgr .rdp .staffel-seg button { justify-content: space-between; padding: 4px 6px; font-size: 0.74rem; }

/* Niedrige Schirme (Handy quer, ≤ 500 px hoch): nichts kleben lassen. Der Report-Kopf
   (Tab-Leiste + Energieskala, ~210 px) haette zusammen mit Kopfleiste und Breadcrumb
   mehr als die Haelfte der Hoehe dauerhaft belegt — der Inhalt waere nur noch durch
   einen Schlitz sichtbar. Dieselbe Regel wie im 768er-Block, nur ueber die Hoehe. */
@media (max-height: 500px) {
    .mgr .report-sticky-head { position: static; top: auto; }
    .mgr .sticky-desktop { position: static; top: auto; }
}

/* Panel ueber dem Inhalt statt daneben — ab 1024px, frueher erst ab 768px.
   Massgeblich ist nicht die Fensterbreite, sondern was uebrig bleibt: Bei 797 px
   (Handy im Querformat) nimmt die App-Navigation ~260 px und das Panel weitere
   220 px — fuer den Tab-Inhalt blieben 253 px. Gestapelt sind es 489 px.

   `align-items: stretch` ist dabei entscheidend: In einer Spalte laesst das aus der
   Basisregel geerbte `flex-start` die Kinder ihre INHALTS-Breite nehmen — die
   breiteste Tabelle zog die Spalte so auf ~720 px und die ganze Seite mit ihr.

   Der Block steht bewusst NACH der Basisregel: Gleiche Spezifitaet, also entscheidet
   die Reihenfolge. */
@media (max-width: 1024px) {
    .mgr .report-with-panel { flex-direction: column; align-items: stretch; }
    .mgr .report-dynamik-col { position: static; width: 100%; flex-basis: auto; max-height: none; overflow: visible; }
}

/* Heizungsmodernisierungs-Tabelle: responsiv, kein horizontaler Overflow (CR3).
   Schrift skaliert dynamisch; die Summenzeile (card-total-foot) bleibt unberührt. */
.mgr .dtable-fit { table-layout: fixed; width: 100%; font-size: clamp(0.6rem, 1vw, 0.85rem); }
/* dtable-fit überschreibt das nowrap der Basis-Header, damit nichts in die
   Nachbarspalte clippt; overflow:hidden ist die letzte Absicherung gegen Überlauf. */
.mgr .dtable-fit th, .mgr .dtable-fit td { padding: 0.3rem 0.35rem; overflow-wrap: anywhere; white-space: normal; overflow: hidden; }

/* Spaltenverhältnis der Heizungstabelle. `table-layout: fixed` verteilt ohne
   Breitenangabe gleichmäßig — bei vier Spalten also 4 × 25 %. In der schmalen
   Drittel-Karte blieben der Positionsspalte damit nur ~85 px, obwohl sie als
   einzige Fließtext trägt: Zeilen brachen bis auf 194 px Höhe um, während die
   drei Wertspalten mit „–" oder einem kurzen Betrag dieselbe Breite belegten.
   Die Positionsspalte bekommt deshalb rund das Doppelte. */
.mgr .dtable-fit th:nth-child(1), .mgr .dtable-fit td:nth-child(1) { width: 42%; }
.mgr .dtable-fit th:nth-child(2), .mgr .dtable-fit td:nth-child(2) { width: 19%; }
.mgr .dtable-fit th:nth-child(3), .mgr .dtable-fit td:nth-child(3) { width: 17%; }
.mgr .dtable-fit th:nth-child(4), .mgr .dtable-fit td:nth-child(4) { width: 22%; }

/* Erläuternde Zusätze in Tabellenzellen („(Endenergie × Strompreis)",
   „(max. 16.340 €)") auf eine eigene, kleinere Zeile setzen. Inline liefen sie
   in derselben Schriftgröße hinter der Bezeichnung mit und trieben die
   Zeilenhöhe hoch; als eigene Zeile bleibt die Bezeichnung lesbar und der
   Zusatz tritt sichtbar zurück. */
.mgr .dtable td .muted { display: block; font-size: 0.86em; line-height: 1.3; font-weight: 400; }

/* B4: Hinweis „Verbrauch und Bedarf“ (DIN V 18599 Beiblatt 1) — Klartext oben, Fachtext aufklappbar. */
.mgr .abgleich-hinweis { font-size: 0.88rem; line-height: 1.5; color: var(--text); }
.mgr .abgleich-hinweis .abgleich-label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-light); margin-bottom: 0.35rem;
}
.mgr .abgleich-hinweis .abgleich-abschnitt + .abgleich-abschnitt { margin-top: 0.75rem; }
.mgr .abgleich-hinweis h4 { font-size: 0.9rem; font-weight: 700; color: var(--heading); margin: 0 0 0.25rem; }
.mgr .abgleich-hinweis p { margin: 0 0 0.4rem; }
.mgr .abgleich-hinweis ul { margin: 0 0 0.4rem; padding-left: 1.2rem; }
.mgr .abgleich-hinweis li { margin-bottom: 0.2rem; }
.mgr .abgleich-hinweis .abgleich-fachlich { padding: 0.75rem 0.8rem; font-size: 0.84rem; font-variant-numeric: tabular-nums; }