/* ══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   Light: warm off-white (bestehend)
   Dark:  GitHub Primer "Dark Dimmed" — hohe Kontrastverhältnisse,
          speziell für datenintensive UIs entwickelt (WCAG AA)
   ══════════════════════════════════════════════════════════════ */
:root {
  --bg:        #f5f5f3;
  --surface:   #ffffff;
  --raised:    #f0efea;
  --muted:     #e8e6e0;
  --border:    rgba(0,0,0,.12);
  --border-s:  rgba(0,0,0,.07);
  --border-m:  rgba(0,0,0,.10);
  --text:      #1a1a1a;
  --text-2:    #555555;
  --text-3:    #888888;
  --text-4:    #aaaaaa;
  --accent:    #185FA5;
  --accent-lt: #4a8fd4;   /* für dunkle Flächen im Light Mode */
  --card-bg:   #f0efea;   /* alias → --raised */
  --text2:     #555555;   /* alias → --text-2 */
}
body.dark {
  /* Primer Dark Dimmed palette */
  --bg:        #22272e;   /* canvas.default */
  --surface:   #2d333b;   /* canvas.overlay */
  --raised:    #373e47;   /* canvas.inset */
  --muted:     #444c56;   /* border.default */
  --border:    rgba(144,157,171,.25);
  --border-s:  rgba(144,157,171,.12);
  --border-m:  rgba(144,157,171,.20);
  --text:      #cdd9e5;   /* fg.default    — Kontrast 10.6:1 */
  --text-2:    #909dab;   /* fg.muted       — Kontrast  5.3:1 */
  --text-3:    #636e7b;   /* fg.subtle      — Kontrast  3.1:1 */
  --text-4:    #545d68;
  --accent:    #539bf5;   /* accent.fg      — Kontrast  4.7:1 */
  --accent-lt: #7bb3f8;   /* lighter than --accent — used for hover on active toggle buttons */
  --card-bg:   #373e47;   /* alias → --raised */
  --text2:     #909dab;   /* alias → --text-2 */
}

/* ── Reset ── */
*{box-sizing:border-box;margin:0;padding:0}
/* Prevent layout shift from scrollbar appearing/disappearing */
html{scrollbar-gutter:stable}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;transition:background .2s,color .2s}
/* No bottom padding — .wrap now ends right after the subtitle; the toolbar/hr
   that used to close it out live outside .wrap so they can stick on mobile. */
.wrap{max-width:980px;margin:0 auto;padding:1.5rem 1.5rem 0}
h1{font-size:24px;font-weight:500;margin-bottom:.2rem;color:var(--text)}
.sub{font-size:12px;color:var(--text-3);margin-bottom:1.5rem}

/* ── Inputs ── */
.sl{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.sl label{font-size:12px;color:var(--text-2);min-width:220px;flex-shrink:0}
.sl .val{font-size:12px;font-weight:500;min-width:80px;text-align:right;color:var(--text)}
.infl-sync-btn{font-size:11px;padding:2px 6px;border:0.5px solid var(--border);border-radius:5px;background:var(--surface);color:var(--text-2);cursor:pointer;white-space:nowrap;flex-shrink:0}
.infl-sync-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.iinfo{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:none;background:#dbeafe;color:#1e40af;font-size:10px;font-style:normal;font-weight:700;cursor:pointer;flex-shrink:0;line-height:1;user-select:none;vertical-align:middle;margin-left:3px;padding:0;font-family:inherit;transition:opacity .12s}
.iinfo:hover,.iinfo:focus-visible{opacity:.72;outline:none}
body.dark .iinfo{background:#1e3a5f;color:#93c5fd}
input[type=range]{flex:1;accent-color:var(--accent)}
/* Issue 1: larger thumb for touch (≥22 px vs. default ≈16 px) */
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--muted);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;margin-top:-9px;box-shadow:0 1px 4px rgba(0,0,0,.22)}
input[type=range]::-moz-range-track{height:4px;background:var(--muted);border-radius:2px}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.22)}
input[type=number]{font-size:12px;padding:3px 6px;border:0.5px solid var(--border);border-radius:6px;text-align:right;background:var(--surface);color:var(--text)}
/* Issue 3: keep border-color for mouse, add visible ring for keyboard */
input[type=number]:focus{outline:none;border-color:var(--accent)}
input[type=number]:focus-visible{box-shadow:0 0 0 3px rgba(24,95,165,.22)}
input[type=text]{background:var(--surface);color:var(--text);border:0.5px solid var(--border);border-radius:6px;padding:2px 5px}
/* Issue 5: larger tap targets for checkbox/radio rows */
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;flex-shrink:0}
.sl{min-height:32px}
select{background:var(--surface);color:var(--text);border:0.5px solid var(--border);border-radius:6px;padding:2px 5px}

/* ── Cards ── */
.card{background:var(--surface);border:0.5px solid var(--border);border-radius:12px;padding:.9rem 1.1rem;margin-bottom:1rem}
.cp1{border-left:3px solid #185FA5;border-radius:0 12px 12px 0}
.cp2{border-left:3px solid #D85A30;border-radius:0 12px 12px 0}
.cpfl{border-left:3px solid #D4537E;border-radius:0 12px 12px 0}
.cbud{border-left:3px solid #1D9E75;border-radius:0 12px 12px 0}
.sec{font-size:12px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.7rem;margin-top:1.1rem}
.sec:first-child{margin-top:0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1rem}
.mc{background:var(--raised);border-radius:8px;padding:.8rem .9rem}
.ml{font-size:10px;color:var(--text-3);margin-bottom:2px}
.mv{font-size:16px;font-weight:500;color:var(--text)}
.ms{font-size:10px;color:var(--text-3);margin-top:2px}
.dv{border:none;border-top:0.5px solid var(--border-m);margin:.65rem 0}

/* ── Badges ── */
.bdg{display:inline-block;padding:2px 7px;border-radius:6px;font-size:10px;font-weight:600}
.ok  {background:#EAF3DE;color:#3B6D11}
.warn{background:#FAEEDA;color:#854F0B}
.bad {background:#FCEBEB;color:#A32D2D}
body.dark .ok  {background:#1b3a1a;color:#57ab5a}
body.dark .warn{background:#3a2a0e;color:#c69026}
body.dark .bad {background:#3a1414;color:#e5534b}

/* Ampel dot on simulation tab buttons (desktop sidebar) */
.tab-ok::after,.tab-warn::after,.tab-bad::after{content:'';width:11px;height:11px;border-radius:50%;margin-left:auto;flex-shrink:0;box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
.tab-ok::after  {background:#3B6D11}
.tab-warn::after{background:#c69026}
.tab-bad::after {background:#A32D2D}
body.dark .tab-ok::after  {background:#57ab5a}
body.dark .tab-warn::after{background:#c69026}
body.dark .tab-bad::after {background:#e5534b}
/* mobile dropdown: slightly larger dot, give margin so it doesn't touch edge */
#mob-menu .tab-ok::after,#mob-menu .tab-warn::after,#mob-menu .tab-bad::after{width:14px;height:14px;margin-right:6px}
/* mob-bar persistent Ampel dot (always visible, between label and burger) */
#mob-ampel-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;margin-left:auto;margin-right:10px;display:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
#mob-ampel-dot.tab-ok  {display:block;background:#3B6D11}
#mob-ampel-dot.tab-warn{display:block;background:#c69026}
#mob-ampel-dot.tab-bad {display:block;background:#A32D2D}
body.dark #mob-ampel-dot.tab-ok  {background:#57ab5a}
body.dark #mob-ampel-dot.tab-warn{background:#c69026}
body.dark #mob-ampel-dot.tab-bad {background:#e5534b}

/* ── Legend ── */
.leg{display:flex;flex-wrap:wrap;gap:9px;font-size:11px;color:var(--text-2);margin-bottom:9px}
.ld{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:2px;vertical-align:middle}
.ll{width:16px;height:2px;display:inline-block;margin-right:2px;vertical-align:middle}

/* ── Table ── */
table{border-collapse:collapse;font-size:11px}
#pg-tabelle table{width:auto;min-width:100%}
th{text-align:left;padding:5px 8px;font-weight:500;color:var(--text-2);border-bottom:0.5px solid var(--border-m);white-space:nowrap}
td{padding:5px 8px;border-bottom:0.5px solid var(--border-s);white-space:nowrap;color:var(--text)}
/* Row highlight — Jahrestabelle (opaque — transparent rgba bleeds through sticky cells on scroll) */
#main-table tbody .tblr{cursor:pointer}
#main-table tbody .tblr:hover td{background:#eaf1f7!important;font-weight:600}
body.dark #main-table tbody .tblr:hover td{background:#2b3745!important}
#main-table tbody .tblr.hl td{background:#d8e4f0!important;font-weight:700;border-top:1.5px solid #185FA5;border-bottom:1.5px solid #185FA5}
body.dark #main-table tbody .tblr.hl td{background:#293a4d!important}
tr:last-child td{border-bottom:none}
.note{font-size:10px;color:var(--text-3);margin-top:.4rem;line-height:1.5}

/* ── Tabs & Buttons ── */
/* ── Sidebar + tab content layout ── */
#main-layout{--_r:max(1.5rem,calc((100vw - 980px) / 2 + 1.5rem));display:grid;grid-template-columns:200px 1fr;gap:0 1rem;align-items:start;padding-right:var(--_r);padding-left:max(0px,calc(var(--_r) - 200px - 1rem))}
#sidebar{display:flex;flex-direction:column;gap:6px;position:sticky;top:1rem;align-self:start}
#tab-content{min-width:0}
.sticky-ctrl{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:0.5px solid var(--border);padding:5px 0 6px;margin-bottom:.7rem}
.ctrl-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ctrl-group{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ctrl-lbl{font-size:11px;color:var(--text-2);white-space:nowrap}
.ctrl-sep{width:1px;height:14px;background:var(--border);margin:0 2px;flex-shrink:0}
@media(max-width:540px){.ctrl-sep{display:none}}
.ctrl-collapse{margin-left:auto;flex-shrink:0;font-size:11px;padding:2px 10px}
.ctrl-err-msg{font-size:10px;color:var(--red,#c44);white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
.ctrl-err-msg.visible{opacity:1}
@keyframes ctrl-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ctrl-shaking{animation:ctrl-shake .25s ease}
.tabs{display:flex;flex-direction:column;gap:3px;margin-bottom:0}
.t{padding:7px 11px;border-radius:8px;border:0.5px solid var(--border);font-size:12.5px;cursor:pointer;background:transparent;color:var(--text-2);white-space:nowrap;text-align:left;width:100%;display:flex;align-items:center;gap:6px}
.t:hover{background:var(--raised)}
.t.on{background:var(--raised);color:var(--text);font-weight:500;border-color:var(--muted)}
.t.t-schnell{background:rgba(24,95,165,.07);border-color:rgba(24,95,165,.35);color:var(--accent)}
.t.t-schnell:hover{background:rgba(24,95,165,.13)}
.t.t-schnell.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.t.t-params{background:rgba(29,158,117,.07);border-color:rgba(29,158,117,.35);color:#1D9E75}
.t.t-params:hover{background:rgba(29,158,117,.13)}
.t.t-params.on{background:#1D9E75;color:#fff;border-color:#1D9E75}
.t.t-compare{background:rgba(180,83,9,.07);border-color:rgba(180,83,9,.35);color:#b45309}
.t.t-compare:hover{background:rgba(180,83,9,.13)}
.t.t-compare.on{background:#b45309;color:#fff;border-color:#b45309}
/* visual separator before the tools group */
.tabs .t-sep{height:0.5px;background:var(--border);margin:4px 0;pointer-events:none;border:none;padding:0;width:100%}
body.dark .t.t-schnell{background:rgba(83,155,245,.10);border-color:rgba(83,155,245,.35)}
body.dark .t.t-schnell.on{background:var(--accent);color:#fff}
body.dark .t.t-params{background:rgba(29,158,117,.12);border-color:rgba(29,158,117,.4)}
body.dark .t.t-params.on{background:#1D9E75;color:#fff}
body.dark .t.t-compare{background:rgba(251,191,36,.10);border-color:rgba(251,191,36,.30);color:#fbbf24}
body.dark .t.t-compare.on{background:#b45309;color:#fff}
.t.t-chat{background:rgba(24,95,165,.07);border-color:rgba(24,95,165,.35);color:var(--accent);font-size:12px}
.t.t-chat:hover{background:rgba(24,95,165,.13)}
.t.t-chat.on{background:transparent;color:var(--text-3);border-color:rgba(24,95,165,.12);opacity:.6}
.t.t-chat.on:hover{opacity:1;background:rgba(24,95,165,.06);color:var(--accent)}
body.dark .t.t-chat{background:rgba(83,155,245,.10);border-color:rgba(83,155,245,.35)}
body.dark .t.t-chat.on{background:transparent;color:var(--text-3);border-color:rgba(83,155,245,.12)}
@media(min-width:981px){
  #sidebar .chat-panel{position:static;width:100%;max-height:420px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.12);margin-top:2px}
  #chat-btn{display:none!important}
}

/* ── Mobile burger nav ── */
#mob-nav{display:none}
.mob-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 13px;border-radius:8px;border:1px solid;width:100%;cursor:pointer;text-align:left;font-weight:500}
/* per-group color — mirrors desktop .t.on colors */
#mob-nav[data-group="schnell"] .mob-bar{background:rgba(24,95,165,.10);border-color:rgba(24,95,165,.45);color:var(--accent)}
#mob-nav[data-group="params"]  .mob-bar{background:rgba(29,158,117,.10);border-color:rgba(29,158,117,.50);color:#1D9E75}
#mob-nav[data-group="compare"] .mob-bar{background:rgba(180,83,9,.10);border-color:rgba(180,83,9,.50);color:#b45309}
body.dark #mob-nav[data-group="schnell"] .mob-bar{background:rgba(83,155,245,.13);border-color:rgba(83,155,245,.40);color:var(--accent)}
body.dark #mob-nav[data-group="params"]  .mob-bar{background:rgba(29,158,117,.15);border-color:rgba(29,158,117,.45)}
body.dark #mob-nav[data-group="compare"] .mob-bar{background:rgba(251,191,36,.10);border-color:rgba(251,191,36,.35);color:#fbbf24}
#mob-cur{font-size:13px;font-weight:500;color:inherit}
#mob-burger{font-size:20px;color:inherit;line-height:1;pointer-events:none;opacity:.7}
#mob-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:0.5px solid var(--border);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:200;overflow:hidden;display:none}
#mob-menu.open{display:block}
#mob-menu button{display:flex;align-items:center;gap:6px;width:100%;text-align:left;padding:11px 16px;background:none;border:none;border-bottom:0.5px solid var(--border-s);cursor:pointer;font-size:13px;color:var(--text-2)}
#mob-menu button:last-child{border-bottom:none}
#mob-menu button:hover{background:var(--raised);color:var(--text)}
#mob-menu button.on{background:var(--raised);color:var(--text);font-weight:500}
#mob-menu button.t-schnell{color:var(--accent)}
#mob-menu button.t-params{color:#1D9E75}
#mob-menu button.t-compare{color:#b45309}
#mob-menu button.t-schnell.on{background:rgba(24,95,165,.08);font-weight:500}
#mob-menu button.t-params.on{background:rgba(29,158,117,.08);font-weight:500}
#mob-menu button.t-compare.on{background:rgba(180,83,9,.08);font-weight:500}
body.dark #mob-menu button.t-params{color:#2ec49a}
body.dark #mob-menu button.t-schnell{color:var(--accent)}
body.dark #mob-menu button.t-compare{color:#fbbf24}
@media(max-width:980px){
  /* .wrap (header) side padding drops here too — was previously a separate
     change at 640px, causing the header's left edge and title position to
     jump a second time independently of the other mobile changes here. */
  .wrap{padding:.75rem .6rem 0}
  /* Mobile-specific layout (sticky/top/z-index/background now apply unconditionally above) */
  .toolbar{
    max-width:none!important;padding-left:.6rem!important;padding-right:.6rem!important;margin-bottom:0!important;
    padding-top:.4rem;padding-bottom:.4rem;
  }
  #main-layout{display:block;padding:0 1.5rem}
  #sidebar{position:static;display:block}
  .tabs{display:none!important}
  /* Chat panel: anchor above FAB, constrained height, override all JS inline positioning */
  .chat-panel{
    left:12px!important;right:12px!important;
    bottom:88px!important;top:auto!important;
    width:auto!important;max-width:none!important;
    /* Cap at 60 % of viewport height — prevents the panel consuming the whole screen */
    height:min(60vh, calc(100vh - 160px))!important;max-height:none!important;
  }
  .chat-drag-hint,.chat-resize-handle{display:none!important}
  .sticky-ctrl{position:static}
  #mob-nav{
    display:block;
    position:sticky;top:0;z-index:150;
    background:var(--bg);
    padding:.4rem .6rem .45rem;
    box-shadow:0 1px 0 var(--border-m),0 2px 8px rgba(0,0,0,.06);
    margin-bottom:.75rem;
  }
  /* section headers: slightly stronger presence to contrast with sticky nav */
  details.psec>summary{border-left:3px solid var(--muted);border-radius:0 8px 8px 0}
  .qc-layout{grid-template-columns:1fr!important}
  .qc-info-grid{grid-template-columns:1fr!important}

  /* ── Header/Toolbar: collapse secondary actions behind one "⋯" in the toolbar ── */
  #hdr-display-settings{display:none!important}
  #pdf-btn,#reset-btn,#load-btn-outer{display:none!important}
  #scen-name{width:120px!important}
  #toolbar-more-btn{display:inline-flex!important}
  .toolbar .tb-label{display:none}
  /* Icon-only toolbar buttons get a slightly taller tap target here, not at a
     later breakpoint — otherwise they visibly grow taller again once narrower. */
  .toolbar .btn,#scen-name{min-height:36px}
  /* Trinkgeld: compact size from the same breakpoint as the rest of the mobile
     header — was previously only shrinking at 560px, causing a separate jump. */
  #header-right{gap:8px!important}
  #trinkgeld-btn{padding:5px 10px!important;font-size:13px!important}
  #header-meta{display:none!important}

  /* Szenario/Phasen/Anzeige: hidden inline, shown via #phase-fab instead */
  .sticky-ctrl{display:none}
  .sticky-ctrl.mobile-open{
    display:flex!important;position:fixed;top:auto;right:16px;left:auto;bottom:142px;
    z-index:130;background:var(--surface);border:0.5px solid var(--border);
    border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.22);
    padding:10px;max-width:280px;max-height:38vh;overflow-y:auto;
  }
  .sticky-ctrl.mobile-open .ctrl-row{flex-direction:column;align-items:flex-start;gap:10px}
  .sticky-ctrl.mobile-open .ctrl-group{flex-wrap:wrap}
  .sticky-ctrl.mobile-open .ctrl-lbl{width:100%;font-size:12px;font-weight:600;color:var(--text)}
  .sticky-ctrl.mobile-open .ctrl-sep{display:none}
  .sticky-ctrl.mobile-open .ctrl-collapse{margin-left:0}
}
@media(max-width:560px){.qc-welcome-grid{grid-template-columns:1fr!important}}
/* Below this, H1 + Trinkgeld no longer fit on one line — go icon-only before
   the row is forced to wrap onto two lines (avoids a header-height jump). */
@media(max-width:375px){
  #trinkgeld-btn{padding:6px!important}
  #trinkgeld-btn .trinkgeld-label{display:none}
}
.vm-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.bevar-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ic{display:inline-block;vertical-align:-.15em;flex-shrink:0}
.phase-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.phase-btn:not(.on){opacity:.45}
.verlauf-phase-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.verlauf-phase-btn:not(.on){opacity:.45}
/* Active toggle buttons: without this, hovering would fall back to the
   generic .btn:hover gray (equal specificity, .btn:hover wins by source
   order) and the button would briefly look deselected. */
.vm-btn.on:hover,.bevar-btn.on:hover,.phase-btn.on:hover,.verlauf-phase-btn.on:hover{background:var(--accent-lt);border-color:var(--accent-lt)}
.sb{padding:5px 14px;border-radius:8px;border:0.5px solid var(--border);font-size:12px;cursor:pointer;background:transparent;color:var(--text-2);font-weight:500}
.sb:hover,.sb.on{background:var(--raised);color:var(--text);border-color:var(--muted)}
/* Lives outside .wrap (sibling of #mob-nav) so it can stick across the full
   page height — needs its own centering, no longer inherited from .wrap.
   Sticky on both desktop and mobile; #sidebar's/#mob-nav's own sticky offset
   is synced to this element's height via syncStickyToolbarOffset(). */
.toolbar{display:flex;gap:8px;margin:0 auto 1rem;flex-wrap:wrap;align-items:center;max-width:980px;box-sizing:border-box;padding-left:1.5rem;padding-right:1.5rem;position:sticky;top:0;z-index:151;background:var(--bg)}
#restore-warn{position:fixed;top:0;left:0;right:0;z-index:9999;padding:.6rem 1rem;background:#f5a623;color:#1a1a1a;font-size:12px;line-height:1.5;box-shadow:0 2px 8px rgba(0,0,0,.2)}
body.dark #restore-warn{background:#7a4c00;color:#f5deb3}
#restore-warn strong{font-size:13px}
#restore-warn .rw-close{float:right;cursor:pointer;font-size:16px;line-height:1;padding:0 4px;background:none;border:none;color:inherit}
#restore-warn ul{margin:.25rem 0 0 1rem;padding:0}
.btn{padding:6px 15px;border-radius:8px;border:0.5px solid var(--border);font-size:13px;cursor:pointer;background:var(--surface);color:var(--text)}
.btn:hover{background:var(--raised)}
.btn:disabled{opacity:.4;cursor:default}
.chart-btns{display:flex;justify-content:flex-end;gap:4px;margin-top:3px}
.chart-btns button{font-size:10px;padding:2px 7px;background:var(--surface);border:0.5px solid var(--border);border-radius:5px;cursor:pointer;color:var(--text-2)}
.chart-btns button:hover{background:var(--raised)}
.yr-row{display:flex;align-items:center;gap:8px}
.yr-row label{font-size:12px;color:var(--text-2)}

/* ── Year-picker popup ── */
.yrpick-popup{position:fixed;z-index:9999;background:var(--surface);border:0.5px solid var(--border);border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.18);padding:3px 0;min-width:180px;max-width:min(260px,calc(100vw - 8px));overflow:hidden}
.yrpick-popup table.ypp-mil{border-collapse:collapse;width:100%}
.yrpick-popup tr{cursor:pointer}
.yrpick-popup tr:hover td{background:rgba(24,95,165,.1)}
.yrpick-popup tr.yp-cur td{background:rgba(24,95,165,.13);font-weight:600}
.yrpick-popup td{padding:4px 10px;font-size:11px;color:var(--text);white-space:nowrap}
.yrpick-popup td+td{text-align:right;color:var(--accent);font-variant-numeric:tabular-nums;padding-left:16px}
.yrpick-popup tr.yp-sep td{padding:0;border-top:0.5px solid var(--border);pointer-events:none}
.ypp-grid-sep{height:1px;background:var(--border);margin:2px 0}
.ypp-grid{display:flex;flex-wrap:wrap;gap:1px;padding:4px 6px;max-height:156px;overflow-y:auto}
.ypp-grid span{padding:2px 4px;font-size:11px;border-radius:3px;cursor:pointer;color:var(--text);min-width:36px;text-align:center;font-variant-numeric:tabular-nums}
.ypp-grid span:hover{background:rgba(24,95,165,.1);color:var(--accent)}
.ypp-grid span.yp-cur{background:rgba(24,95,165,.15);color:var(--accent);font-weight:600}
input.yrpick{cursor:pointer;-moz-appearance:textfield}
input.yrpick::-webkit-inner-spin-button,input.yrpick::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ── Budget planner ── */
.bst{display:grid;grid-template-columns:1fr 80px 90px 26px;gap:5px;align-items:center;margin-bottom:4px}
.bst label{font-size:11px;color:var(--text-2)}
.bst input{width:100%}
.badd{font-size:11px;color:var(--accent);cursor:pointer;border:none;background:none;padding:0;margin-top:2px}
.badd:hover{text-decoration:underline}
.del{background:none;border:none;cursor:pointer;color:#A32D2D;font-size:14px;line-height:1;padding:0 2px}
.bsum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1rem}
.bsi{background:var(--raised);border-radius:6px;padding:.5rem .7rem}
.bsl{font-size:10px;color:var(--text-3)}
.bsv{font-size:14px;font-weight:500;color:var(--text)}
.catrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}
.catnm{font-size:12px;font-weight:500;color:var(--text)}
.catamt{font-size:11px;color:var(--accent);font-weight:500}
.pzv-box{border:0.5px solid #D4537E;border-radius:8px;padding:.7rem .9rem;margin-top:.8rem;background:rgba(212,83,126,.04)}
.pzv-ttl{font-size:10px;font-weight:600;color:#D4537E;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}

/* ── Szenario cards ── */
.scncard{border:0.5px solid var(--border);border-radius:10px;padding:.8rem 1rem;background:var(--surface);margin-bottom:.5rem}
.scnttl{font-size:11px;font-weight:500;color:var(--text-2);margin-bottom:.5rem}
.scnrow{display:flex;justify-content:space-between;font-size:11px;padding:2px 0}
.scnrow span:first-child{color:var(--text-3)}
.scnrow span:last-child{font-weight:500;color:var(--text)}
.scnph{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin:.5rem 0 .25rem}

/* ── Collapsible parameter sections ── */
details.psec{margin-bottom:.5rem}
details.psec>summary{
  display:flex;align-items:center;gap:8px;
  cursor:pointer;list-style:none;
  padding:.42rem .7rem;border-radius:8px;
  background:var(--raised);user-select:none;
  font-size:12px;font-weight:600;color:var(--text);
  transition:background .12s;
}
details.psec>summary::-webkit-details-marker{display:none}
details.psec>summary::marker{display:none}
details.psec>summary:hover{background:var(--muted)}
.psec-title{flex:1}
.psec-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.psec-chevron{font-size:15px;color:var(--text-2);transition:transform .15s;display:inline-block;line-height:1}
details.psec:not([open])>summary .psec-chevron{transform:rotate(-90deg)}
details.psec>.psec-body{padding-top:.45rem}

.info-body{padding:.65rem .9rem .8rem;font-size:11px;color:var(--text-2);line-height:1.65;border-top:0.5px solid var(--border-m)}
.info-body p{margin-bottom:.5rem}.info-body p:last-child{margin-bottom:0}
.info-body strong{font-weight:600;color:var(--text)}
.info-body ul{padding-left:1.1rem;margin:.3rem 0 .5rem}
.info-body li{margin-bottom:.2rem}
.info-body .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .9rem}
.info-body h4{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin:.6rem 0 .3rem}
.info-body code{background:var(--muted);border-radius:3px;padding:1px 4px;font-family:monospace;font-size:10px;color:var(--text)}

/* ── Dark Mode Toggle ── */
.dark-toggle{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;font-size:12px;color:var(--text-2);padding:4px 10px;border-radius:8px;border:0.5px solid var(--border);background:var(--surface)}
.dark-toggle:hover{background:var(--raised)}
.dark-toggle input{display:none}
.dark-sw{width:30px;height:17px;background:var(--muted);border-radius:9px;position:relative;transition:background .2s;flex-shrink:0}
.dark-sw::after{content:'';position:absolute;width:13px;height:13px;background:#fff;border-radius:50%;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.dark-toggle input:checked ~ .dark-sw{background:var(--accent)}
.dark-toggle input:checked ~ .dark-sw::after{left:15px}

/* ── Dark: inline-style overrides for JS-generated content ── */
body.dark [style*="background:#f0efea"]{background:var(--raised)!important}
body.dark [style*="background:#fff"],[style*="background:#ffffff"]{background:var(--surface)!important}
body.dark [style*="background:#EAF3DE"]{background:#1b3a1a!important;border-color:#3a6b38!important}
body.dark [style*="background:#FAEEDA"]{background:#3a2a0e!important;border-color:#7a5a1a!important}
body.dark [style*="background:#FCEBEB"]{background:#3a1414!important;border-color:#8a2828!important}
/* neutrals */
body.dark [style*="color:#1a1a1a"]{color:var(--text)!important}
body.dark [style*="color:#555"]{color:var(--text-2)!important}
body.dark [style*="color:#666"]{color:var(--text-2)!important}
body.dark [style*="color:#888"]{color:var(--text-3)!important}
body.dark [style*="color:#444"]{color:var(--text-2)!important}
/* brand / semantic colors → lighter for dark bg */
body.dark [style*="color:#185FA5"]{color:#539bf5!important}
body.dark [style*="color:#3B6D11"]{color:#57ab5a!important}
body.dark [style*="color:#27500A"]{color:#57ab5a!important}
body.dark [style*="color:#1D9E75"]{color:#4aae82!important}
body.dark [style*="color:#A32D2D"]{color:#e5534b!important}
body.dark [style*="color:#854F0B"]{color:#c69026!important}
body.dark [style*="color:#D4537E"]{color:#e07096!important}
body.dark [style*="color:#5B5FAA"]{color:#8b8fcc!important}
/* borders */
body.dark [style*="border-color:rgba(0,0,0"]{border-color:var(--border)!important}
body.dark [style*="border:0.5px solid rgba(0,0,0"]{border-color:var(--border)!important}
body.dark [style*="border:0.5px solid #185FA5"]{border-color:#539bf5!important}
/* misc */
body.dark #rendite-info{background:var(--surface)!important;color:var(--text-2)!important}
body.dark #col-sel{background:var(--surface)!important;border-color:var(--border)!important}

/* ── Chatbot ──────────────────────────────────────────────────────────────── */
#chat-btn {
  position:fixed;bottom:24px;right:24px;z-index:1000;
  width:50px;height:50px;border-radius:50%;
  border:0.5px solid rgba(24,95,165,.5);
  background:rgba(24,95,165,.16);color:var(--accent);font-size:22px;cursor:pointer;
  box-shadow:0 3px 14px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s,background .15s,color .15s;
  display:flex;align-items:center;justify-content:center;
}
#chat-btn:hover{transform:scale(1.1);box-shadow:0 5px 18px rgba(0,0,0,.32);}
#chat-btn.on{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 3px 14px rgba(0,0,0,.28);}
#chat-btn.on:hover{transform:scale(1.05);}
body.dark #chat-btn{background:rgba(83,155,245,.20);border-color:rgba(83,155,245,.5);color:#7bb3f8;}
body.dark #chat-btn.on{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ── Mobile: Szenario/Phasen/Anzeige as a floating menu instead of inline ── */
#phase-fab{
  display:none;position:fixed;bottom:88px;right:26px;z-index:130;
  width:46px;height:46px;border-radius:50%;
  border:0.5px solid rgba(29,158,117,.5);background:rgba(29,158,117,.16);color:#1D9E75;
  cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  align-items:center;justify-content:center;transition:transform .15s;
}
#phase-fab:hover{transform:scale(1.08)}
#phase-fab.on{background:#1D9E75;color:#fff;border-color:#1D9E75}
body.dark #phase-fab{background:rgba(29,158,117,.20);border-color:rgba(29,158,117,.45);color:#2ec49a}
body.dark #phase-fab.on{background:#1D9E75;color:#fff;border-color:#1D9E75}
/* Must come after the base rule above (same specificity — source order
   decides); JS still hides it inline on tabs without a .sticky-ctrl. */
@media(max-width:980px){#phase-fab{display:flex}}
.chat-panel{
  position:fixed;z-index:999;
  width:370px;max-height:540px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.18);
  display:flex;flex-direction:column;overflow:hidden;
}
.chat-resize-handle{
  position:absolute;bottom:0;right:0;width:28px;height:28px;
  cursor:se-resize;z-index:10;
  background:linear-gradient(135deg,transparent 50%,var(--border) 50%);
  border-radius:0 0 14px 0;opacity:.7;transition:opacity .15s;
}
.chat-resize-handle::before,.chat-resize-handle::after{
  content:'';position:absolute;background:var(--text-3);border-radius:1px;
}
.chat-resize-handle::before{width:12px;height:1.5px;bottom:9px;right:4px;transform:rotate(-45deg);}
.chat-resize-handle::after {width:7px; height:1.5px;bottom:5px;right:4px;transform:rotate(-45deg);}
.chat-resize-handle:hover{opacity:1;}
.chat-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;background:var(--accent);color:#fff;
  font-size:13px;font-weight:600;flex-shrink:0;
  cursor:move;user-select:none;
}
.chat-drag-hint{opacity:.5;font-size:11px;margin-right:6px;cursor:move;}
.chat-hbtn{
  background:none;border:none;color:#fff;cursor:pointer;
  font-size:14px;padding:2px 6px;border-radius:4px;
  opacity:.8;transition:opacity .1s;
}
.chat-hbtn:hover{opacity:1;}
.chat-key-row{
  display:flex;gap:6px;padding:8px 10px;flex-shrink:0;
  background:var(--raised);border-bottom:1px solid var(--border);
}
.chat-key-inp{
  flex:1;font-size:12px;padding:4px 7px;
  border:0.5px solid var(--border);border-radius:6px;
  background:var(--surface);color:var(--text);font-family:inherit;
}
.chat-key-inp:focus{outline:none;border-color:var(--accent);}
.chat-msgs{
  flex:1;overflow-y:auto;padding:10px 10px 4px;
  display:flex;flex-direction:column;gap:8px;min-height:80px;
  -webkit-overflow-scrolling:touch;
}
.chat-msg{
  max-width:88%;padding:7px 10px;border-radius:10px;
  font-size:12.5px;line-height:1.5;word-break:break-word;
}
.chat-msg em{font-style:italic;opacity:.85;}
.chat-msg-user{
  align-self:flex-end;
  background:#0f4070;color:#fff;border-bottom-right-radius:3px;
}
body.dark .chat-msg-user{background:#1a3f6e;}
.chat-msg-assistant{
  align-self:flex-start;
  background:var(--raised);color:var(--text);border-bottom-left-radius:3px;
  border:0.5px solid var(--border-s);
}
.chat-msg-system{
  align-self:center;font-size:11px;
  color:var(--text-3);background:none;padding:2px 6px;
}
.chat-table{border-collapse:collapse;font-size:11px;margin:4px 0;width:100%}
.chat-table th,.chat-table td{border:1px solid var(--border);padding:3px 7px;text-align:left}
.chat-table th{background:var(--raised);font-weight:600;color:var(--text)}
.chat-table td{color:var(--text-2)}
.chat-applied{
  margin-top:5px;padding:4px 8px;
  background:var(--muted);border-radius:6px;
  font-size:11px;color:var(--text-2);line-height:1.6;
}
.chat-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--text-3);margin:0 2px;
  animation:chatbounce .9s infinite ease-in-out;
}
.chat-dot:nth-child(2){animation-delay:.15s;}
.chat-dot:nth-child(3){animation-delay:.3s;}
@keyframes chatbounce{
  0%,80%,100%{transform:translateY(0);}
  40%        {transform:translateY(-5px);}
}
.chat-input-row{
  display:flex;gap:6px;padding:8px 10px 4px;flex-shrink:0;
  border-top:1px solid var(--border);
}
.chat-inp{
  flex:1;resize:none;font-size:12.5px;padding:6px 8px;
  border:0.5px solid var(--border);border-radius:8px;
  background:var(--surface);color:var(--text);font-family:inherit;line-height:1.4;
}
.chat-inp:focus{outline:none;border-color:var(--accent);}
.chat-send-btn{
  align-self:flex-end;padding:6px 13px;font-size:15px;
  background:var(--accent);color:#fff;border-color:var(--accent);
}
.chat-send-btn:disabled{opacity:.4;cursor:not-allowed;}
.chat-footer{
  font-size:10px;color:var(--text-3);padding:2px 10px 6px;
  display:flex;justify-content:space-between;flex-shrink:0;
}
.chat-footer a{color:var(--text-3);text-decoration:none;}
.chat-footer a:hover{text-decoration:underline;}
.chat-privacy{
  font-size:10px;color:var(--text-3);padding:2px 10px 5px;
  border-top:0.5px solid var(--border);text-align:center;flex-shrink:0;
}
.chat-privacy a{color:var(--text-3);text-decoration:none;}
.chat-privacy a:hover{text-decoration:underline;}

/* ── Responsive ── */
@media (max-width: 640px) {
  /* Toolbar: allow wrapping */
  .toolbar { flex-wrap: wrap; gap: 6px }
  #scen-name { width: 140px }

  /* Slider rows: stack label above input */
  .sl { flex-wrap: wrap; row-gap: 3px }
  .sl label { min-width: 0; width: 100%; flex-shrink: 1 }
  .sl .val { min-width: auto; text-align: left }

  /* Budget stage rows: tighter fixed cols */
  .bst { grid-template-columns: 1fr 70px 80px 26px }

  /* 2-col grids → 1 col */
  .g2 { grid-template-columns: 1fr }

  /* bsum: 4 cols → 2 cols; full-span cards stay full-span */
  .bsum { grid-template-columns: repeat(2, 1fr) }

  /* psec summary right: allow inner controls to wrap */
  .psec-right { flex-wrap: wrap; row-gap: 4px }

  /* nothing extra needed here — chat panel handled in the 980px block below */

  /* Cards: less padding on mobile */
  .card { padding: .65rem .75rem }
  .mc   { padding: .6rem .7rem }

  /* Prevent iOS Safari viewport zoom on input focus — all focusable text inputs must be ≥16px */
  input[type=number],input[type=text],input[type=search],select,textarea{font-size:16px!important}
  /* chat inputs use class-based selectors (not type attr), so target explicitly */
  .chat-inp,.chat-key-inp{font-size:16px!important}
  /* Szenarioname: kept at the compact desktop size by request, accepting the
     iOS zoom-on-focus tradeoff the rule above is normally meant to avoid. */
  #scen-name{font-size:12px!important}

  /* Mob-menu buttons: ensure 44px minimum tap target */
  #mob-menu button{min-height:44px;padding:11px 16px}
  /* Mob-bar: ensure 44px tap height */
  .mob-bar{min-height:44px}

}

@media (max-width: 480px) {
  /* bsum: 2 cols → 1 col */
  .bsum { grid-template-columns: 1fr }
  /* bsum full-span pflege box always spans full width */
  .bsum .bsi[style*="grid-column"] { grid-column: 1 / -1 !important }

  /* Budget stage inputs: stack vertically */
  .bst { grid-template-columns: 1fr 1fr; gap: 4px }

  /* Phase-summary cards: each takes full width */
  .bsum .bsi[style*="span 2"] { grid-column: 1 / -1 !important }

  /* psec summary: title on own line, controls below */
  details.psec > summary { flex-wrap: wrap; row-gap: 4px }
  .psec-title { flex-basis: 100% }
  .psec-right { justify-content: flex-end; width: 100% }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SZENARIO VERGLEICH
   ═══════════════════════════════════════════════════════════════════════════ */
.cmp-hint {
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
  padding: 2.5rem 0;
}
.cmp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px 3px 12px;
  border: 1.5px solid;
  border-radius: 20px;
  background: var(--surface);
}
.cmp-badge button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 0 0 2px;
  opacity: .7;
}
.cmp-badge button:hover { opacity: 1; }
.cmp-chart-wrap {
  margin-bottom: 1.8rem;
}
.cmp-chart-wrap h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin: 0 0 .4rem;
}
.cmp-chart-wrap canvas {
  height: 220px !important;
}
.cmp-sec summary::-webkit-details-marker { display:none }
.cmp-sec[open] summary > span:last-child { transform:rotate(180deg) }
.cmp-sec summary > span:last-child { display:inline-block;transition:transform .15s }
.cmp-sec + .cmp-sec { border-top: 0.5px solid var(--border) }
.cmp-outer { border:0.5px solid var(--border);border-radius:10px;overflow:hidden }
.cmp-outer summary { padding:8px 12px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;background:var(--raised);border-bottom:0.5px solid var(--border) }
.cmp-outer summary::-webkit-details-marker { display:none }
.cmp-outer:not([open]) summary { border-bottom:none }
.cmp-outer[open] summary > .cmp-chev { transform:rotate(180deg) }
.cmp-outer summary > .cmp-chev { display:inline-block;transition:transform .15s;margin-left:auto;font-size:12px;color:var(--text-3) }
.cmp-charts-grid { display:grid;grid-template-columns:1fr 1fr;gap:.4rem 2rem }
.cmp-table-scroll { overflow-x:auto;-webkit-overflow-scrolling:touch }
@media (max-width:640px) { .cmp-charts-grid { grid-template-columns:1fr } }
.cmp-sum-table { width:100%;border-collapse:collapse }
.cmp-sum-table td,.cmp-sum-table th { padding:5px 12px;font-size:12px }
.cmp-sum-table thead tr { background:var(--raised);border-bottom:0.5px solid var(--border) }
.cmp-sum-table tbody tr { border-bottom:0.5px solid var(--border-s) }
.cmp-sum-table tbody tr:last-child { border-bottom:none }

/* Issue 6: respect OS reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .chat-dot{animation:none}
  .psec-chevron,.cmp-sec summary>span:last-child,.cmp-outer summary>.cmp-chev,
  .dark-sw,.dark-sw::after,body,details.psec>summary{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DRUCKANSICHT  (@media print)
   - Alle Tabs gleichzeitig sichtbar, je Tab ein Seitenumbruch
   - Interaktive Elemente (Slider, Buttons, Navigation) ausgeblendet
   - Charts drucken über canvas-Pixel (print-color-adjust: exact)
   - Tabellenkopf wiederholt sich auf jeder Seite (thead)
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  /* ── Seitenformat ─────────────────────────────────────────────────── */
  @page { size: A4 portrait; margin: 10mm 10mm 24mm; }

  /* Farben und Hintergründe exakt reproduzieren (Charts, Ampel) */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body {
    background: #fff !important;
    color: #111 !important;
    font-size: 11px;
  }

  /* ── Ausblenden: Navigation, Werkzeuge, interaktive Elemente ────── */
  #main-layout { display: block !important; padding: 0 !important; }
  .toolbar,
  .tabs,
  #mob-nav,
  .psec-chevron,
  #pdf-btn,
  #impressum-modal,
  .dark-toggle,
  a[href="#"],
  input[type="range"],
  input[type="checkbox"],
  input[type="radio"],
  input[type="file"],
  select,
  button,
  #col-sel,
  #verlauf-col-sel,
  #pg-sensitivitaet,
  #pg-schnell,
  #pg-tabelle,
  #psec-verlauf-tbl,
  /* Budget-Steuerleiste (Glätten / Reduktion) */
  #pg-budget > div:not(details):not(#bcats),
  /* Zoom-Reset-Buttons auf Charts */
  #pg-verlauf button,
  #pg-einkommen button,
  /* Schriftgrößen-Buttons */
  #font-size-label,
  /* p.sub Untertitel kann bleiben — aber ggf. entfernen: */
  p.sub
  { display: none !important; }

  /* ── Alle relevanten Tab-Seiten gleichzeitig anzeigen ───────────── */
  #pg-params,
  #pg-budget,
  #pg-einkommen,
  #pg-verlauf {
    display: block !important;
  }

  /* ── Alle Klapp-Sektionen aufklappen ─────────────────────────────── */
  /* JS öffnet alle details[open] vor dem Druck — CSS als Fallback */
  details > *:not(summary),
  .psec-body,
  .info-body { display: block !important; }

  details > summary {
    list-style: none;
    cursor: default;
    border-bottom: 0.5px solid #ddd;
    padding-bottom: 4px;
    margin-bottom: 6px;
  }
  details > summary::-webkit-details-marker { display: none; }
  .psec-title { font-size: 12px; font-weight: 600; color: #222; }

  /* ── Seitenumbrüche vor jedem Tab ───────────────────────────────── */
  #pg-budget    { page-break-before: always; break-before: page; }
  #pg-einkommen { page-break-before: always; break-before: page; }
  #pg-verlauf   { page-break-before: always; break-before: page; }
  #pg-tabelle   { page-break-before: always; break-before: page; }

  /* ── Jeder Plot mit seiner Summary auf eine eigene Seite ─────────── */
  #psec-eink-saldo,
  #psec-eink-ink,
  #psec-eink-budget,
  #psec-eink-steuer,
  #psec-verlauf-chart { page-break-before: always; break-before: page; }

  /* Erläuterungen ausblenden wenn Option deaktiviert */
  body.no-erklaerung details.psec[id*="-info"] { display: none !important; }

  /* Schnellcheck-Druck: nur pg-schnell anzeigen, Detail-Tabs ausblenden */
  body.print-schnell #pg-schnell  { display: block !important; }
  body.print-schnell #pg-params,
  body.print-schnell #pg-budget,
  body.print-schnell #pg-einkommen,
  body.print-schnell #pg-verlauf  { display: none !important; }

  /* Kein Umbruch mitten in einer Karte oder einem Chart */
  .card, canvas { page-break-inside: avoid; break-inside: avoid; }
  /* overflow:hidden creates a new block formatting context — Chrome then reliably
     respects break-inside:avoid so the summary never strands alone at page bottom. */
  details.psec { page-break-inside: avoid; break-inside: avoid; overflow: hidden; }

  /* ── Slider-Zeilen: Beschriftung + Wert, kein Regler ────────────── */
  .sl {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 1.5px 0;
    flex-wrap: nowrap;
  }
  .sl label {
    font-size: 10.5px;
    color: #555;
    flex: 1;
    min-width: 0;
  }
  .sl .val {
    font-size: 10.5px;
    font-weight: 600;
    color: #111;
    text-align: right;
    white-space: nowrap;
  }

  /* ── Karten ─────────────────────────────────────────────────────── */
  .card {
    border: 0.5px solid #ddd !important;
    background: #fff !important;
    box-shadow: none !important;
    margin-bottom: 6px;
    padding: 8px 10px !important;
  }

  /* ── Charts ─────────────────────────────────────────────────────── */
  /* Wrapper-Divs haben inline height:XXXpx + position:relative (Chart.js-Layout).
     Im Druck: position auf static, height auf auto — sonst wird der Canvas
     auf die Screen-Pixelhöhe gequetscht statt mit dem korrekten Seitenverhältnis
     auf Seitenbreite skaliert. */
  #pg-einkommen div[style*="position:relative"],
  #pg-verlauf   div[style*="position:relative"],
  #pg-budget    div[style*="position:relative"] {
    position: static !important;
    height: auto !important;
  }
  canvas {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* ── Jahrestabelle: Überschriften auf jeder Seite wiederholen ────── */
  #tbl-wrap { overflow: visible !important; max-height: none !important; }
  #tbl-main thead { display: table-header-group; }
  #tbl-main td, #tbl-main th {
    font-size: 8.5px;
    padding: 2px 4px;
    border: 0.3px solid #ccc;
  }

  /* ── Ampel: global position hidden in print — shown inside #psec-ovr only ── */
  #ampel-global { display: none !important; }

  /* ── Schnellcheck-Links sichtbar lassen (als Textreferenz, nicht klickbar) ─ */
  body.print-schnell #pg-schnell a[href="#"] {
    display: inline !important;
    pointer-events: none;
  }

  /* ── Bedarfszusammenfassung ─────────────────────────────────────── */
  .bsum { break-inside: avoid; }

  /* ── Einstellungs-Labels (nur im Druck sichtbar) ─────────────────── */
  .print-info {
    display: block !important;
    font-size: 11px;
    color: #444;
    background: #f5f5f5;
    border-radius: 5px;
    padding: 3px 8px;
    margin: 2px 0 6px;
  }

  /* ── Sonstige Verfeinerungen ─────────────────────────────────────── */
  .wrap { padding: 0 !important; max-width: none !important; }
  h1 { font-size: 16px !important; margin-bottom: 2px !important; }
  p.note { display: none; }

  /* ── Steuerleisten und Fußzeile ──── */
  footer { display: none !important; }
  /* Einkommen-Steuerleiste (Phasen / Anzeige-Buttons) ausblenden */
  #pg-einkommen > div { display: none !important; }

  /* ── Umbruchschutz: keine Waisen- oder Witwen-Zeilen ─────────────── */
  p, li { orphans: 3; widows: 3; }
  .sl { page-break-inside: avoid; break-inside: avoid; }
  /* h4 sind Inhalts-Zwischenüberschriften (z. B. in Erläuterungen),
     KEINE psec-Abschnittstitel — diese stehen in <summary>. */
  h2, h3, h4 { page-break-after: avoid; break-after: avoid; }
  h4 + .sl, h4 + ul, h4 + p, h4 + div { break-before: avoid; }
  /* psec-Abschnittstitel (summary) nicht am Seitenende stehen lassen */
  #pg-vergleich { display: none !important; }
  details > summary { page-break-after: avoid; break-after: avoid; }
  details.psec > .psec-body,
  details.psec > .info-body { page-break-before: avoid; break-before: avoid; }

  /* ── Copyright-Fußzeile auf jeder Seite ─────────────────────────── */
  #print-copyright {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 8.5px;
    color: #888;
    border-top: 0.5px solid #bbb;
    padding: 18px 0 5px;
    background: #fff;
  }
}