/* Tool-Redesign (.tr) — übernimmt die Ratgeber-2.0-Designsprache (.gr) auf die
   Tool-Seiten (Batterie-/Solar-/Energie-Berater). Warm, wertig, professionell:
   Cremepapier, Teal-Marke, Amber-CTA, Inter, echte Typo-Hierarchie, keine Emojis. */

.tr{
  --ink:#15211c; --paper:#f6f4ef; --card:#fff; --brand:#0f766e; --brand-d:#0b5a54;
  --brand-50:#e7f3f1; --line-teal:#cfe6e2; --amber:#b9791a; --amber-d:#7a4e10;
  --amber-50:#fbf2e1; --muted:#5d6862; --line:#e7e3da; --radius:16px;
  background:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  width:100%; padding:2.2rem 1.25rem 4rem;
}
.tr *{box-sizing:border-box}
.tr__in{max-width:74rem; margin:0 auto}
.tr a{color:inherit}

/* Hero — editorial statt dunkle Box */
.tr__hero{padding:2.6rem 0 1.6rem; max-width:46rem}

/* Split-Hero: Text links, Foto rechts (KI-Symbolbild, gekennzeichnet) */
.tr__hero--split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,29rem); gap:2.6rem; align-items:center; max-width:none}
.tr__hero-img{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 40px -18px rgba(21,33,28,.35); background:var(--brand-50)}
.tr__hero-img img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.tr__hero-ai{position:absolute; bottom:9px; right:11px; background:rgba(21,33,28,.55); color:#fff; font-size:10px; font-weight:600; letter-spacing:.02em; padding:3px 9px; border-radius:999px; backdrop-filter:blur(3px)}
.tr__eyebrow{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-d); margin:0 0 10px}
.tr__hero h1{font-size:clamp(28px,5vw,42px); line-height:1.1; font-weight:800; letter-spacing:-.02em; margin:0 0 14px}
.tr__lead{font-size:17px; line-height:1.6; color:var(--muted); margin:0 0 16px}
.tr__trust{display:inline-flex; align-items:center; gap:7px; background:var(--brand-50); color:var(--brand-d); font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:999px}
.tr__trust svg{width:15px; height:15px}

/* Panels / cards */
.tr__panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem; margin:0 0 1.4rem}
.tr__panel--flush{padding:0; overflow:hidden}
.tr__h2{font-size:19px; font-weight:800; letter-spacing:-.01em; margin:0 0 4px}
.tr__sub{font-size:14px; color:var(--muted); margin:0 0 1.2rem}

/* Formfelder */
.tr__grid2{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.tr__label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin:0 0 7px}
.tr__input,.tr__select{width:100%; padding:12px 14px; font-size:15px; font-family:inherit; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:11px; outline:none; transition:border-color .15s, box-shadow .15s}
.tr__input:focus,.tr__select:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-50)}
.tr__hint{font-size:12px; color:var(--muted); margin:8px 0 0}
.tr__hint a{color:var(--brand-d); font-weight:600; text-decoration:none}

/* Empfehlungs-Karte (Pick) — das Herzstück */
.tr__pick{background:#fff; border:1px solid var(--line-teal); border-radius:14px; padding:1.15rem 1.3rem; margin:0 0 1.4rem}
.tr__pick-badge{display:inline-flex; align-items:center; gap:6px; background:var(--amber-50); color:var(--amber-d); font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:5px 12px; border-radius:999px; margin-bottom:13px}
.tr__pick-badge svg{width:13px; height:13px}
.tr__pick-main{display:flex; gap:18px; align-items:flex-start}
.tr__pick-img{width:88px; height:88px; border-radius:12px; background:var(--brand-50); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden}
.tr__pick-img svg{width:38px; height:38px; color:var(--brand)}
.tr__pick-img img{width:100%; height:100%; object-fit:contain; padding:8px}
.tr__pick-name{font-size:16.5px; font-weight:700; line-height:1.3; margin:0 0 5px}
.tr__pick-why{font-size:13.5px; color:var(--muted); line-height:1.6; margin:0}
.tr__pills{display:flex; gap:8px; flex-wrap:wrap; margin:15px 0}
.tr__pill{background:var(--brand-50); color:var(--brand-d); font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; white-space:nowrap}
.tr__pick-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--line); padding-top:14px}
.tr__price{font-size:25px; font-weight:800; line-height:1; margin:0}
.tr__price-note{font-size:12px; color:var(--muted); margin:4px 0 0}

/* Budget-Tiers (Low / Medium / Premium) — 3 Karten, Medium hervorgehoben */
.tr__tiers-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 12px}
.tr__tiers-h h3{font-size:17px; font-weight:800; margin:0}
.tr__tiers-h p{font-size:12.5px; color:var(--muted); margin:0}
.tr__tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:stretch}
.tr__tier{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 16px 15px}
.tr__tier.is-rec{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), 0 8px 24px -12px rgba(15,118,110,.4)}
.tr__tier-badge{align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:#f1efe8; color:var(--muted); margin-bottom:12px}
.tr__tier.is-rec .tr__tier-badge{background:var(--brand); color:#fff}
.tr__tier-img{height:96px; border-radius:10px; background:var(--brand-50); display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:12px}
.tr__tier-img img{max-width:100%; max-height:100%; object-fit:contain; padding:8px}
.tr__tier-name{font-size:13.5px; font-weight:700; line-height:1.35; margin:0 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em}
.tr__tier-facts{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:5px}
.tr__tier-facts li{position:relative; font-size:12.5px; color:#37423d; line-height:1.4; padding-left:18px}
.tr__tier-facts li::before{content:""; position:absolute; left:0; top:5px; width:12px; height:12px; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 6'/%3E%3C/svg%3E")}
.tr__tier-for{font-size:11.5px; color:var(--muted); margin:0 0 12px; padding-top:10px; border-top:1px dashed var(--line)}
.tr__tier-for b{color:var(--ink); font-weight:600}
.tr__tier-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px}
.tr__tier-price{font-size:19px; font-weight:800; margin:0; line-height:1}
.tr__tier .tr__btn{padding:8px 13px; font-size:12.5px}

/* Buttons */
.tr__btn{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; padding:11px 20px; border-radius:11px; text-decoration:none; white-space:nowrap; border:0; cursor:pointer; transition:background .15s, transform .1s}
.tr__btn svg{width:16px; height:16px}
.tr__btn--brand{background:var(--brand); color:#fff}
.tr__btn--brand:hover{background:var(--brand-d)}
.tr__btn--amber{background:var(--amber); color:#3a2407}
.tr__btn--amber:hover{filter:brightness(.96)}
.tr__btn--ghost{background:#fff; color:var(--ink); border:1px solid var(--line); font-weight:600}
.tr__btn--ghost:hover{border-color:var(--brand)}
.tr__btn--sm{padding:8px 15px; font-size:13px; border-radius:9px}
.tr__btn:active{transform:scale(.98)}

/* „So gerechnet" — Mehrwert-Notiz */
.tr__note{display:flex; gap:11px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 15px; margin:0 0 1.4rem}
.tr__note svg{width:19px; height:19px; color:var(--brand); flex-shrink:0; margin-top:1px}
.tr__note p{font-size:13.5px; color:#37423d; line-height:1.6; margin:0}
.tr__note a{color:var(--brand-d); font-weight:600; text-decoration:none}

/* Weitere Optionen (Karten) */
.tr__opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.tr__opt{background:#fff; border:1px solid var(--line); border-radius:13px; padding:16px 17px; display:flex; flex-direction:column}
.tr__opt-tag{align-self:flex-start; font-size:11px; font-weight:700; color:var(--brand-d); background:var(--brand-50); padding:3px 10px; border-radius:999px; margin-bottom:10px}
.tr__opt h3{font-size:14.5px; font-weight:700; margin:0 0 10px}
.tr__spec{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); padding:3px 0}
.tr__spec b{color:var(--ink); font-weight:600}
.tr__opt-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px}
.tr__opt-price{font-size:18px; font-weight:800}

/* Zubehör-Zeilen */
.tr__rows{display:flex; flex-direction:column}
.tr__row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-top:1px solid var(--line); text-decoration:none}
.tr__row:first-child{border-top:0}
.tr__row:hover .tr__row-name{color:var(--brand-d)}
.tr__row-l{display:flex; align-items:center; gap:12px; min-width:0}
.tr__row-ic{width:36px; height:36px; border-radius:9px; background:var(--brand-50); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.tr__row-ic svg{width:18px; height:18px; color:var(--brand)}
.tr__row-name{font-size:14px; font-weight:600; margin:0; transition:color .15s}
.tr__row-desc{font-size:12px; color:var(--muted); margin:2px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tr__row-r{text-align:right; flex-shrink:0}
.tr__row-price{font-size:14px; font-weight:700; margin:0}
.tr__row-cta{font-size:11px; color:var(--brand-d); margin:2px 0 0}

/* Komplett-System-Frame (Stufe-0) — rahmt Zubehör als EINE bepreiste Anlage (AOV-Anker) */
.tr__sys{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:linear-gradient(180deg,var(--brand-50),#fff); border:1px solid var(--line-teal); border-radius:13px; padding:15px 18px; margin:0 0 14px}
.tr__sys-l{min-width:0; flex:1 1 20rem}
.tr__sys-eb{font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--brand-d); margin:0 0 5px}
.tr__sys-h{font-size:15.5px; font-weight:700; margin:0 0 4px}
.tr__sys-note{font-size:12.5px; color:var(--muted); line-height:1.5; margin:0; max-width:34rem}
.tr__sys-r{text-align:right; flex-shrink:0}
.tr__sys-total-eb{font-size:11px; color:var(--muted); margin:0}
.tr__sys-total{font-size:26px; font-weight:800; line-height:1.1; margin:1px 0 2px; color:var(--brand-d)}
.tr__sys-total-note{font-size:11px; color:var(--muted); margin:0}

/* CTA-Box (dunkel, wie Ratgeber) */
.tr__cta{background:var(--ink); color:#fff; border-radius:var(--radius); padding:1.4rem 1.5rem; margin:0 0 1.4rem; display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap}
.tr__cta-eb{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#9ec9c2; margin:0 0 6px; font-weight:600}
.tr__cta h3{font-size:18px; font-weight:700; color:#fff; margin:0 0 5px}
.tr__cta p{font-size:13.5px; color:#c8d4d0; line-height:1.5; margin:0}
.tr__cta-r{margin-left:auto; text-align:center; flex-shrink:0}
.tr__cta-r a.tr__btn{color:#3a2407}
.tr__cta-more{display:block; font-size:12px; color:#9ec9c2; margin-top:9px; text-decoration:none}

/* Akkordeon Wissen */
.tr__acc{border-top:1px solid var(--line)}
.tr__acc summary{display:flex; align-items:center; justify-content:space-between; padding:16px 1.5rem; cursor:pointer; font-size:14.5px; font-weight:600; list-style:none}
.tr__acc summary::-webkit-details-marker{display:none}
.tr__acc summary .chev{width:22px; height:22px; color:var(--muted); transition:transform .2s}
.tr__acc[open] summary .chev{transform:rotate(180deg)}
.tr__acc summary:hover{background:#faf9f4}
.tr__acc-body{padding:0 1.5rem 1.5rem}

/* Tabs */
.tr__tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:1.1rem; overflow-x:auto}
.tr__tab{padding:9px 15px; font-size:13px; font-weight:600; background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; white-space:nowrap}
.tr__tab.is-active{color:var(--ink); border-bottom-color:var(--brand)}

/* kleine Fakten-Boxen */
.tr__facts{background:#faf9f4; border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:13px; line-height:1.7}
.tr__facts .row{display:flex; justify-content:space-between}
.tr__facts .muted{color:var(--muted)}
.tr__plus{color:var(--brand); font-weight:700}
.tr__minus{color:#a3462d; font-weight:700}
.tr__callout{background:var(--brand-50); border:1px solid var(--line-teal); border-radius:10px; padding:9px 12px; font-size:13px; margin-top:10px}

/* FAQ */
.tr__faq details{border-top:1px solid var(--line); padding:0}
.tr__faq summary{padding:15px 0; font-size:15px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center}
.tr__faq summary::-webkit-details-marker{display:none}
.tr__faq summary .chev{width:20px;height:20px;color:var(--muted);transition:transform .2s;flex:none}
.tr__faq details[open] summary .chev{transform:rotate(180deg)}
.tr__faq-a{font-size:14.5px; line-height:1.7; color:#26302c; padding:0 0 16px; margin:0}

/* Produktfinder-CTA (.tr-nativ, flag-gated) — händlerunabhängiger Maß-/Watt-Vergleich
   im internen Produktfinder. Bewusst hell (Teal) statt der Tailwind-Blau-Partial. */
.tr__pf{display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--brand-50); border:1px solid var(--line-teal); border-radius:var(--radius); padding:1.2rem 1.5rem; margin:0 0 1.4rem}
.tr__pf-l{flex:1 1 22rem; min-width:0}
.tr__pf-eb{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-d); margin:0 0 5px; font-weight:700}
.tr__pf-l h3{font-size:17px; font-weight:800; margin:0 0 4px; color:var(--ink)}
.tr__pf-l p{font-size:13px; color:var(--muted); line-height:1.55; margin:0; max-width:34rem}
.tr__pf-links{display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0}

/* Cross-Nav */
.tr__nav{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 1.4rem}
.tr__navcard{display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:13px; padding:16px 18px; text-decoration:none; transition:border-color .15s}
.tr__navcard:hover{border-color:var(--brand)}
.tr__navcard .ic{width:42px; height:42px; border-radius:11px; background:var(--brand-50); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.tr__navcard .ic svg{width:22px; height:22px; color:var(--brand)}
.tr__navcard h3{font-size:14.5px; font-weight:700; margin:0 0 2px}
.tr__navcard p{font-size:12.5px; color:var(--muted); margin:0}

/* Disclaimer */
.tr__legal{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem}
.tr__legal h3{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 8px}
.tr__legal p{font-size:12.5px; color:var(--muted); line-height:1.6; margin:0}
.tr__legal a{color:var(--brand-d); font-weight:600; text-decoration:none}

/* Ergebnis-Zusammenfassung (JS) */
.tr__result{background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.3rem}
.tr__result h3{font-size:17px; font-weight:800; margin:0 0 3px}
.tr__result-sub{font-size:13.5px; color:var(--muted); margin:0 0 1rem}
.tr__cmp{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.tr__cmp-box{border:1px solid var(--line); border-radius:12px; padding:14px}
.tr__cmp-box.is-rec{border-color:var(--line-teal); background:var(--brand-50)}
.tr__cmp-eb{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin:0 0 4px}
.tr__cmp-box.is-rec .tr__cmp-eb{color:var(--brand-d)}
.tr__cmp-box:not(.is-rec) .tr__cmp-eb{color:var(--muted)}
.tr__cmp-val{font-size:23px; font-weight:800; margin:0}
.tr__cmp-note{font-size:12px; color:var(--muted); margin:2px 0 8px}

/* Kennzahlen-Grid (Solar-/Energie-Ergebnis) */
.tr__stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:2px}
.tr__stat{background:#faf9f4; border:1px solid var(--line); border-radius:11px; padding:11px 12px; text-align:center}
.tr__stat .k{font-size:11px; color:var(--muted); margin:0 0 3px}
.tr__stat .v{font-size:17px; font-weight:800; margin:0; line-height:1.1}

/* Geräte-Picker (Energie-Rechner) */
.tr__cats{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 1rem}
.tr__cat{background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; transition:all .15s}
.tr__cat:hover{border-color:var(--brand)}
.tr__cat.is-active{background:var(--brand); border-color:var(--brand); color:#fff}
.tr__devs{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px}
.tr__dev{position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 13px; cursor:pointer; transition:border-color .15s, background .15s; user-select:none}
.tr__dev:hover{border-color:var(--brand)}
.tr__dev.is-on{border-color:var(--brand); background:var(--brand-50); box-shadow:inset 0 0 0 1px var(--brand)}
.tr__dev-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.tr__dev-name{font-size:13.5px; font-weight:600; line-height:1.3; margin:0}
.tr__dev-check{width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line); background:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; transition:all .15s}
.tr__dev.is-on .tr__dev-check{background:var(--brand); border-color:var(--brand)}
.tr__dev-check svg{width:12px; height:12px; opacity:0; transition:opacity .1s}
.tr__dev.is-on .tr__dev-check svg{opacity:1}
.tr__dev-meta{display:flex; align-items:center; gap:6px; margin:8px 0 0}
.tr__dev-watt{background:#f1efe8; color:#5f5e5a; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px}
.tr__dev.is-on .tr__dev-watt{background:#fff; color:var(--brand-d)}
.tr__dev-hours{display:none; align-items:center; gap:7px; margin-top:10px; padding-top:9px; border-top:1px dashed var(--line-teal)}
.tr__dev.is-on .tr__dev-hours{display:flex}
.tr__dev-hours button{width:26px; height:26px; border-radius:8px; border:1px solid var(--line-teal); background:#fff; color:var(--brand-d); font-size:15px; font-weight:700; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center}
.tr__dev-hours button:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
.tr__dev-hours .hval{font-size:12.5px; font-weight:700; min-width:44px; text-align:center}
.tr__dev-hours .hlab{font-size:11px; color:var(--muted); margin-left:auto}

/* Live-Bedarfsleiste (klebt unten am Geräte-Panel) */
.tr__live{position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--ink); color:#fff; border-radius:13px; padding:13px 17px; margin-top:1.1rem; box-shadow:0 10px 30px -10px rgba(21,33,28,.45)}
.tr__live-nums{display:flex; align-items:baseline; gap:14px; min-width:0}
.tr__live-wh{font-size:23px; font-weight:800; line-height:1}
.tr__live-wh small{font-size:12px; font-weight:600; color:#9ec9c2; margin-left:3px}
.tr__live-ah{font-size:14px; font-weight:700; color:#c8d4d0}
.tr__live-count{font-size:12px; color:#9ec9c2}
.tr__live .tr__btn{margin-left:auto}
/* Auf dunklen Flächen (Live-Leiste, Elektrik-Planer-Box) braucht der CTA ein
   helles, leuchtendes Amber — das gedämpfte --amber (#b9791a) säuft dort ab. */
.tr__live .tr__btn--amber, .tr__cta .tr__btn--amber{background:#f7ab38; color:#2b1a04; box-shadow:0 4px 20px -4px rgba(247,171,56,.6)}
.tr__live .tr__btn--amber:hover, .tr__cta .tr__btn--amber:hover{background:#ffbd55; filter:none}
.tr__cta-r a.tr__btn{color:#2b1a04}
.tr__live .tr__btn:disabled{background:#39463f; color:#93a69d; box-shadow:none; cursor:not-allowed; opacity:1}
.tr__live.is-done{position:static; box-shadow:none}

/* Verbrauchs-Aufschlüsselung (Top-Verbraucher-Balken) */
.tr__bars{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.tr__bar{display:grid; grid-template-columns:minmax(90px,150px) 1fr 52px; align-items:center; gap:10px; font-size:12.5px}
.tr__bar .n{color:#37423d; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tr__bar .track{display:block; height:9px; background:#efede6; border-radius:999px; overflow:hidden}
.tr__bar .fill{display:block; height:100%; background:var(--brand); border-radius:999px; min-width:3px}
.tr__bar .v{text-align:right; font-weight:700; color:var(--ink); white-space:nowrap}
.tr__stale{display:none; align-items:center; gap:8px; background:var(--amber-50); border:1px solid #f0d9a8; color:var(--amber-d); font-size:12.5px; font-weight:600; border-radius:10px; padding:8px 12px; margin-top:10px}
.tr__stale.is-on{display:flex}

/* Ergebnis-Reveal (dezent, respektiert reduced-motion) */
@keyframes trFadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
#energy-result > *{animation:trFadeUp .45s ease both}
#energy-result > *:nth-child(2){animation-delay:.08s}
#energy-result > *:nth-child(3){animation-delay:.16s}
@media (prefers-reduced-motion:reduce){#energy-result > *{animation:none}}

/* Verbrauchstabelle (SEO/GEO — server-gerendert, crawlbar, Snippet-Format) */
.tr__table{width:100%; border-collapse:collapse; font-size:13.5px}
.tr__table th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:8px 10px; border-bottom:2px solid var(--line-teal); white-space:nowrap}
.tr__table td{padding:8px 10px; border-bottom:1px solid var(--line); color:#26302c}
.tr__table td:last-child, .tr__table th:last-child{text-align:right; font-weight:700; white-space:nowrap}
.tr__table td:nth-child(2), .tr__table th:nth-child(2), .tr__table td:nth-child(3), .tr__table th:nth-child(3){white-space:nowrap}
.tr__table tbody tr:hover{background:#faf9f4}
.tr__tablewrap{overflow-x:auto; margin:0 -4px; padding:0 4px}

/* Ratgeber-Querlinks (Internal Linking) */
.tr__guides{display:flex; flex-direction:column; gap:2px; margin-top:8px}
.tr__guides a{display:flex; align-items:center; gap:9px; padding:10px 2px; font-size:13.5px; font-weight:600; color:var(--brand-d); text-decoration:none; border-bottom:1px solid var(--line)}
.tr__guides a:last-child{border-bottom:0}
.tr__guides a:hover{color:var(--brand)}
.tr__guides svg{width:15px; height:15px; flex-shrink:0}

/* Preset-Chips für die Eingabe */
.tr__presets{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 1.1rem}
.tr__preset{background:#fff; border:1px solid var(--line); border-radius:12px; padding:9px 14px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; line-height:1.2; transition:border-color .15s, background .15s}
.tr__preset:hover{border-color:var(--brand)}
.tr__preset.is-active{background:var(--brand); color:#fff; border-color:var(--brand)}
.tr__preset small{display:block; font-size:11px; font-weight:500; color:var(--muted); margin-top:2px}
.tr__preset.is-active small{color:#cfe6e2}

/* „Warum LiFePO4" — Kauf-Begründung im Ergebnis */
.tr__why{margin-top:1rem; border-top:1px solid var(--line); padding-top:14px; display:flex; gap:10px; align-items:flex-start}
.tr__why svg{width:18px; height:18px; color:var(--brand); flex-shrink:0; margin-top:1px}
.tr__why p{font-size:13.5px; line-height:1.6; color:#37423d; margin:0}
.tr__why b{color:var(--ink); font-weight:700}

/* Sticky Mobile CTA */
.tr__mbar{display:none}

/* Feedback-Widget über die mobile CTA-Leiste heben (Kollisions-Fix, nur Tool-Seiten,
   da dieses CSS nur dort geladen wird). Das Widget liest die Variablen inline via
   var(--fb-bottom, 24px) — umgeht jede Spezifitäts-/Inline-Kaskade. */
@media (max-width:640px){
  :root{--fb-bottom:76px; --fb-panel-bottom:132px}
  #fb-toggle{bottom:76px !important}
  #fb-panel{bottom:132px !important}
}

@media (max-width:640px){
  .tr__mbar.is-on{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.08); padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); align-items:center; gap:12px}
  .tr__sys-r{text-align:left}
  .tr__pf-links{width:100%}
  .tr__pf-links .tr__btn{flex:1; justify-content:center}
  .tr__mbar-l{min-width:0; flex:1}
  .tr__mbar-l .n{font-size:11.5px; color:var(--muted); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .tr__mbar-l .p{font-size:17px; font-weight:800; margin:0; line-height:1.15}
  .tr__mbar .tr__btn{flex-shrink:0}
  .tr{margin-top:-1rem; padding-bottom:5.5rem}
  .tr__grid2,.tr__nav,.tr__legal,.tr__cmp,.tr__tiers{grid-template-columns:1fr}
  .tr__stats{grid-template-columns:1fr 1fr}
  .tr__acc summary,.tr__acc-body{padding-left:1.1rem; padding-right:1.1rem}
  .tr__panel{padding:1.2rem 1.15rem}
  .tr__pick-main{gap:13px}
  .tr__pick-img{width:70px; height:70px}
  .tr__pick-foot{flex-direction:column; align-items:stretch; gap:12px}
  .tr__pick-foot .tr__btn{justify-content:center}
  .tr__cta{flex-direction:column; align-items:flex-start}
  .tr__cta-r{margin-left:0; width:100%}
  .tr__cta-r .tr__btn{width:100%; justify-content:center}
  .tr__auto-bar{flex-wrap:wrap}
  .tr__merk-cta{flex-direction:column; align-items:stretch}
  .tr__merk-cta .tr__btn{justify-content:center}
  .tr__mail-row .tr__btn{flex:1; justify-content:center}
  .tr__hero--split{grid-template-columns:1fr; gap:1.3rem}
  .tr__hero-img img{aspect-ratio:16/10}
  .tr__devs{grid-template-columns:1fr 1fr}
  .tr__live{position:sticky; bottom:0}
  .tr__live .tr__btn{margin-left:0; width:100%; justify-content:center}
  .tr__bar{grid-template-columns:minmax(70px,110px) 1fr 48px}
}
@media (max-width:430px){
  .tr__devs{grid-template-columns:1fr}
}

/* Autarkie-Visualisierung — der teilbare „so viele Tage autark"-Moment */
.tr__auto{margin-top:1rem; border-top:1px solid var(--line); padding-top:15px}
.tr__auto-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:11px; flex-wrap:wrap}
.tr__auto-h b{font-size:14.5px; font-weight:700}
.tr__auto-big{font-size:14px; font-weight:800; color:var(--brand-d)}
.tr__auto-bar{display:flex; gap:5px}
.tr__auto-seg{flex:1 1 0; min-width:34px; height:30px; border-radius:7px; background:#edeae2; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#a49f95; position:relative}
.tr__auto-seg.on{background:var(--brand-50); color:var(--brand-d); box-shadow:inset 0 0 0 1px var(--line-teal)}
.tr__auto-seg.part{background:linear-gradient(90deg,var(--brand-50) 55%,#edeae2 55%); color:var(--brand-d); box-shadow:inset 0 0 0 1px var(--line-teal)}
.tr__auto-note{font-size:12.5px; color:var(--muted); line-height:1.55; margin:9px 0 0}
.tr__auto-note b{color:var(--ink)}

/* „Deine Stromanlage"-Merkliste — druckbares/teilbares Artefakt (Lead-Hebel) */
.tr__merk-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; background:var(--brand-50); border:1px solid var(--line-teal); border-radius:12px; padding:13px 16px; margin:14px 0 0}
.tr__merk-cta .l{min-width:0; flex:1 1 16rem}
.tr__merk-cta .l p{font-size:13.5px; color:var(--ink); margin:0; font-weight:700}
.tr__merk-cta .l span{font-size:12px; color:var(--muted); font-weight:400}

/* Video-Fassade (DSGVO-Zwei-Klick: selbst gehostetes Thumb, YouTube erst nach Klick) */
.tr__video{position:relative; border-radius:14px; overflow:hidden; background:#0d1512; cursor:pointer; aspect-ratio:16/9}
.tr__video img{display:block; width:100%; height:100%; object-fit:cover; opacity:.92; transition:opacity .15s, transform .3s}
.tr__video:hover img{opacity:1; transform:scale(1.015)}
.tr__video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.tr__video-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background:rgba(15,118,110,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -8px rgba(0,0,0,.5); transition:background .15s, transform .15s}
.tr__video:hover .tr__video-play{background:var(--brand); transform:translate(-50%,-50%) scale(1.06)}
.tr__video-play svg{width:28px; height:28px; color:#fff; margin-left:4px}
.tr__video-dur{position:absolute; bottom:10px; right:12px; background:rgba(13,21,18,.75); color:#fff; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px}
.tr__video-note{font-size:11px; color:var(--muted); margin:9px 0 0}
.tr__video-note a{color:var(--brand-d); font-weight:600; text-decoration:none}

/* Merkliste per E-Mail (Lead-Motor unter dem PDF-Button) */
.tr__mail{position:relative; margin-top:12px; border-top:1px dashed var(--line-teal); padding-top:13px}
.tr__mail-row{display:flex; gap:10px; flex-wrap:wrap}
.tr__mail-row .tr__input{flex:1 1 14rem; min-width:0}
.tr__mail-row .tr__btn{flex-shrink:0}
.tr__mail-row .tr__btn:disabled{opacity:.55; cursor:not-allowed}
.tr__mail-nl{display:flex; gap:8px; align-items:flex-start; font-size:12px; color:#37423d; line-height:1.5; margin:10px 0 0; cursor:pointer}
.tr__mail-nl input{margin-top:2px; accent-color:var(--brand)}
.tr__mail-hint{font-size:11px; color:var(--muted); margin:7px 0 0}
.tr__mail-hint a{color:var(--brand-d); font-weight:600; text-decoration:none}
.tr__mail-msg{font-size:12.5px; font-weight:600; color:var(--brand-d); margin:8px 0 0; min-height:1em}

/* Merkliste (nur im Druck sichtbar) */
#merkliste-print{display:none}
.mk-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #0f766e; padding-bottom:11px; margin-bottom:18px}
.mk-brand{font-size:17px; font-weight:800; color:#0f766e; margin:0}
.mk-brand span{display:block; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#5d6862; margin-top:2px}
.mk-title{font-size:21px; font-weight:800; margin:0; text-align:right}
.mk-title span{display:block; font-size:11px; font-weight:400; color:#5d6862; margin-top:3px}
.mk-sec{margin:0 0 15px}
.mk-sec h3{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#0b5a54; margin:0 0 7px; font-weight:800}
.mk-row{display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:5px 0; border-bottom:1px solid #eceae3}
.mk-row .n{color:#26302c}
.mk-row .n small{display:block; color:#8a857c; font-size:11px}
.mk-row .p{font-weight:700; white-space:nowrap}
.mk-total{display:flex; justify-content:space-between; font-size:17px; font-weight:800; border-top:2px solid #0f766e; padding-top:10px; margin-top:8px}
.mk-foot{font-size:10px; color:#9a958c; margin-top:20px; border-top:1px solid #eceae3; padding-top:9px; line-height:1.5}

@media print{
  body{background:#fff !important}
  body *{visibility:hidden !important}
  #merkliste-print, #merkliste-print *{visibility:visible !important}
  #merkliste-print{display:block !important; position:absolute; left:0; top:0; width:100%; padding:0 8mm; font-family:'Inter',system-ui,sans-serif; color:#15211c}
  .tr__mbar, #fb-widget{display:none !important}
  @page{margin:12mm}
}