/* TRiALED Lichtrechner im Design der neuen Website.
   The calculator app (index-*.js/css) is unchanged; this layer only adapts colours, type and layout. */
:root{--paper:#111113;--white:#1c1c1f;--soft:#232327;--green:#f18e00;--green-dark:#ffa727;--green-light:#ffa727;--lime:#f18e0040;--brand-grey:#747476}
html,body{background:#111113}
.detailed-calculator{min-height:60vh}
.detailed-calculator .site-shell{min-height:0;padding-top:0;background:transparent;color:var(--ink)}
.detailed-calculator .site-shell>.topbar,.detailed-calculator .site-shell>footer,.detailed-calculator .site-shell .site-footer{display:none!important}
.detailed-calculator :where(h1,h2,h3){color:var(--ink);letter-spacing:-1px}
.detailed-calculator :where(p,li,dd,small){color:var(--muted)}
.detailed-calculator :where(input,select,textarea){background:#141416;color:var(--ink);border-color:#74747690}
.detailed-calculator :where(input,select,textarea)::placeholder{color:#8d8d93}
.detailed-calculator .primary-button{border-radius:28px;color:#171719;font-weight:700}
/* Orange surfaces use dark text, as on the website. */
.detailed-calculator :is(.primary-button,.answer-card:hover,.answer-card:focus-visible,.answer-card.is-selected,.metric-featured,.result-contact-cta,.calendar-days button:hover:not(:disabled),.calendar-days button.is-selected,.submission-success>span){--ink:#171719;--muted:rgba(23,23,25,.72);--white:#171719;color:#171719}
/* Panels that were dark (var(--ink)) in the old light design become raised dark surfaces. */
.detailed-calculator :is(.result-cta,.contact-section){background:#1c1c1f;border:1px solid #74747650;border-radius:12px;color:#f5f5f6}
.detailed-calculator .result-cta{border-left:3px solid #f18e00}
.detailed-calculator .contact-section{border-top:3px solid #f18e00}
.detailed-calculator :is(.consumption-meter i,.consumption-scale em){background:#b6b6bc}
.detailed-calculator :is(.assumptions summary i,.faq-list summary i):is(:before,:after){background:#f18e00}
.detailed-calculator .metric-featured :is(span,small){color:rgba(23,23,25,.72)}
.detailed-calculator .progress-meta{gap:12px}
main[data-static-fallback]{padding:64px 0}
main[data-static-fallback] section{padding:28px 0;border-top:1px solid var(--line)}
.visual-proof strong{color:#f5f5f6}
.result-preview{color:#f5f5f6}
.answer-arrow{color:#b6b6bc}
.question-footer{color:#b6b6bc}
.estimate-note{color:#ffa727;background:#f18e001f}
.metric-grid{background:#1c1c1f}
.metric small{color:#b6b6bc}
.consumption-meter{background:#232327}
.is-sensor .consumption-meter i{background:#ffa727}
.is-sensor>div:first-of-type>span,.is-sensor strong{color:#ffa727}
.consumption-scale i{background:#232327}
.consumption-scale>div:nth-child(4) em{background:#ffa727}
.long-term-savings{background:#1c1c1f}
.result-cta{color:#f5f5f6}
.saving-breakdown{background:#1c1c1f}
.breakdown-bar{background:#232327}
.breakdown-bar b{background:#f18e001f;border-left:3px solid #74747650}
.legend-sensor{background:#f18e001f;box-shadow:inset 0 0 0 1px #f18e0066}
.trust-strip{background:#1c1c1f}
.assumptions{background:#1c1c1f}
.assumptions[open] summary i{background:#f18e001f}
.contact-section{color:#f5f5f6}
.contact-form{background:#1c1c1f}
.contact-type label>span i{background:#1c1c1f}
.contact-type .contact-wide>span{background:#f18e001f}
.contact-type input:checked+span,.contact-type input:focus-visible+span{background:#f18e001f}
.form-section-label>span{background:#f18e001f}
.form-grid input[aria-invalid=true]{background:#f18e001f;border-color:#ff8a80}
.form-grid .field-error,.contact-type-error{color:#ff8a80}
.contact-type-error{background:#f18e001f}
.date-calendar{background:#1c1c1f}
.calendar-head button:hover{background:#f18e001f}
.calendar-weekdays .is-weekend{color:#ffa727}
.calendar-days button.is-weekend:not(.is-selected){color:#ffa727;background:#f18e001f}
.calendar-days button:disabled{color:#b6b6bc}
.date-calendar>p span{background:#f18e001f;box-shadow:inset 0 0 0 1px #f18e0066}
.request-status{color:#ffa727;background:#f18e001f}
.request-status.is-error{color:#ff8a80;background:#f18e001f}
.next-steps li>span{background:#f18e001f}
.calculation-explainer{background:#1c1c1f}
.formula{background:#f18e001f}
.example-card dl div{background:#1c1c1f}
.faq-section{background:#1c1c1f}
footer:not(.site-footer){color:#b6b6bc}
/* ---- Layout and typography (ported from the old calculator wrapper, adapted to the dark design) ---- */
.primary-button>span[aria-hidden="true"],.answer-arrow,.consumption-step-number,.form-section-label>span,.next-steps li>span{display:none}
.calendar-head button{font-size:0!important}.calendar-head button::after{content:attr(aria-label);font-size:14px}
.detailed-calculator .site-shell :where(p,li,label,input,select,textarea,button,a,summary,span,small,dt,dd,legend,b,strong){font-size:18px!important;hyphens:none;word-break:normal;overflow-wrap:normal!important}
.seo-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:64px;width:min(1240px,calc(100% - 96px));max-width:none;margin:0 auto;padding:64px 0 34px;background:transparent}
.seo-hero h1,.welcome h1{color:var(--ink);font-size:clamp(40px,5vw,72px);font-weight:700;line-height:1.05;letter-spacing:-2px}
.detailed-calculator :is(.seo-hero .kicker,.progress-meta,.question-eyebrow,.section-label,.form-section-label,.result-cta>div>span,.breakdown-copy>span,.formula span,.consumption-journey-heading>div>span){color:var(--muted);font-size:14px!important;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.detailed-calculator .progress-meta strong{color:var(--green);font-size:14px!important}
.seo-hero-actions{align-self:end;padding:28px;border:1px solid var(--line);border-radius:12px;background:#1c1c1f}
.primary-button{min-height:52px;padding:14px 24px;border:0;border-radius:28px;background:var(--green);color:#171719;font-weight:700;box-shadow:none}
.primary-button:hover,.primary-button:focus-visible{background:#ffa727;color:#171719}
.calculator,.knowledge-sections{width:min(calc(100% - 96px),1240px)!important;max-width:1240px!important;margin-right:auto!important;margin-left:auto!important}
.detailed-calculator .calculator{display:block;padding:64px 0 80px}
.progress-wrap,.question-card,.result-card{max-width:1180px}
.question-card,.result-card{padding:clamp(24px,4vw,50px);border:1px solid var(--line);border-top:3px solid #f18e00;border-radius:12px;background:#1c1c1f;box-shadow:none}
.detailed-calculator :is(.question-card h2,.result-heading h2){color:var(--ink);font-size:clamp(32px,4vw,52px)!important;line-height:1.08;letter-spacing:-1px}
.detailed-calculator :is(.question-card h3,.consumption-journey h3,.result-cta h3,.contact-intro h3,.knowledge-sections h3){color:var(--ink);font-size:clamp(26px,3.4vw,40px)!important;line-height:1.12;letter-spacing:-1px}
.answer-grid{margin-top:34px;gap:14px}
.answer-card{grid-template-columns:42px minmax(0,1fr);min-height:88px;padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:#141416;color:var(--ink)}
.answer-index{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#232327;color:var(--green)}
.detailed-calculator .answer-copy strong{font-size:20px!important}
.detailed-calculator .answer-copy small{font-size:16px!important;color:var(--muted)}
.answer-card:hover,.answer-card:focus-visible,.answer-card.is-selected{border-color:#f18e00;background:#f18e00;color:#171719}
.answer-card:hover .answer-index,.answer-card:focus-visible .answer-index,.answer-card.is-selected .answer-index{background:#171719;color:#f18e00}
.answer-card:is(:hover,:focus-visible,.is-selected) .answer-copy :is(strong,small){color:#171719!important}
.back-button{min-height:48px}
.result-card{width:100%}
.result-heading{grid-template-columns:minmax(0,1fr) 220px;align-items:stretch;gap:40px}
.result-heading>div:first-child{display:flex;flex-direction:column;justify-content:center;min-width:0}
.saving-badge{align-self:stretch;min-height:190px;padding:24px 18px}
.detailed-calculator .saving-badge span{max-width:180px;font-size:16px!important;line-height:1.35}
.detailed-calculator .saving-badge strong{font-size:40px!important;white-space:nowrap}
.estimate-note{width:fit-content;max-width:100%;margin-top:22px;padding:10px 14px;border-radius:8px}
.consumption-journey{margin-top:38px;padding:32px 30px 30px}
.consumption-journey-heading{align-items:end}
.consumption-steps{align-items:stretch;gap:0}
.consumption-step{display:grid;grid-template-rows:1fr auto;padding:0 24px}
.consumption-step:first-child{padding-left:0;padding-right:24px}.consumption-step:last-child{padding-left:24px;padding-right:0}
.consumption-step>div:first-of-type{display:grid;grid-template-rows:auto auto auto;align-content:start;gap:4px}
.detailed-calculator .consumption-step>div:first-of-type>span{font-size:16px!important;line-height:1.4}
.detailed-calculator .consumption-step strong{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;margin-top:0;font-size:28px!important;line-height:1.2}
.detailed-calculator .consumption-step strong small{font-size:16px!important;line-height:1;white-space:nowrap}
.detailed-calculator .consumption-step p{min-height:0;margin:6px 0 12px;font-size:16px!important;line-height:1.45;white-space:normal}
.consumption-meter{align-self:end;width:100%}
.consumption-scale{margin-top:28px;padding:25px 24px}
.consumption-scale>div:not(.consumption-scale-heading){grid-template-columns:130px minmax(160px,1fr) 150px;gap:16px}
.detailed-calculator :is(.consumption-scale b,.consumption-scale-readout span,.consumption-scale-readout small,.consumption-scale-heading span,.consumption-scale-heading small){font-size:16px!important}
.consumption-scale-readout{min-width:150px}
.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:38px}
.metric{min-width:0;min-height:170px;padding:26px 22px}
.detailed-calculator .metric>span{display:block;min-height:48px;font-size:16px!important;line-height:1.45}
.detailed-calculator :is(.metric strong,.contact-potential strong,.consumption-scale-readout strong){font-size:40px!important;line-height:1.12}
.detailed-calculator .metric small{min-height:24px;margin-top:8px;font-size:16px!important;line-height:1.35}
.long-term-savings{align-items:end;padding:24px 26px}
.long-term-savings div{min-width:0}
.detailed-calculator :is(.long-term-savings span,.long-term-savings small,.trust-strip span,.source-note span,.estimate-note,.privacy-notice,.mail-hint,.field-error,.success-disclaimer,.contact-choice-hint,.next-steps small,.next-steps b,.formula span,.example-card dt,.calendar-weekdays span,.calendar-days button,.date-calendar>p){font-size:16px!important;line-height:1.5}
.detailed-calculator .long-term-savings strong{font-size:28px!important;white-space:nowrap}
.detailed-calculator .breakdown-copy strong{font-size:24px!important}
.detailed-calculator .result-preview>strong{font-size:40px!important}
.detailed-calculator :is(.knowledge-sections h2){font-size:36px!important;line-height:1.2;color:var(--ink)}
.contact-potential{background:#141416;border:1px solid var(--line);border-left:3px solid #f18e00;border-radius:10px}
.contact-form input,.contact-form select,.contact-form textarea,.date-trigger{min-height:50px;border-radius:8px}
.faq-list summary{min-height:56px;color:var(--ink);font-weight:700}
.knowledge-sections,.knowledge-sections>*{min-width:0;box-sizing:border-box}
.knowledge-sections :is(h2,h3,p,summary),.source-note{overflow-wrap:break-word!important;min-width:0}
.result-card fieldset{min-width:0;min-inline-size:0;max-width:100%}
.result-card legend{display:block;width:100%;max-width:100%;white-space:normal;overflow-wrap:break-word}
@media(max-width:1100px){
 .result-heading{grid-template-columns:minmax(0,1fr) 200px;gap:28px}
 .consumption-steps{grid-template-columns:1fr}
 .consumption-step,.consumption-step:first-child,.consumption-step:last-child{grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:auto;align-items:end;gap:24px;padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}
 .consumption-step:first-child{padding-top:0}.consumption-step:last-child{padding-bottom:0;border-bottom:0}
 .consumption-meter{margin-bottom:8px}
}
@media(max-width:1023px){
 .seo-hero{grid-template-columns:1fr;gap:30px;padding-top:48px}
 .calculator,.knowledge-sections{width:min(calc(100% - 48px),900px)!important}
 .calculator{padding:48px 0 64px}
}
@media(max-width:700px){
 .seo-hero{width:calc(100% - 40px);padding:32px 0 20px}
 .detailed-calculator :is(.seo-hero h1,.welcome h1){font-size:40px;letter-spacing:-1px}
 .calculator,.knowledge-sections{width:calc(100% - 32px)!important}
 .calculator{padding:32px 0 48px}
 .answer-grid,.metric-grid,.form-grid,.explanation-grid,.long-term-savings{grid-template-columns:1fr!important}
 .answer-card{grid-template-columns:38px minmax(0,1fr);min-height:72px;padding:14px 16px}
 .back-button,.primary-button{width:100%}
 .result-heading{grid-template-columns:1fr}
 .saving-badge{justify-self:stretch;width:100%;min-height:140px}
 .consumption-journey{padding:22px 16px}
 .consumption-step,.consumption-step:first-child,.consumption-step:last-child{grid-template-columns:1fr;gap:12px}
 .consumption-scale-heading{align-items:flex-start;flex-direction:column}
 .consumption-scale>div:not(.consumption-scale-heading){grid-template-columns:1fr;gap:8px}
 .consumption-scale-readout{align-items:flex-start;min-width:0}
 .metric{min-height:0;border-right:0!important;border-bottom:1px solid var(--line)}
 .metric:last-child{border-bottom:0}
 .detailed-calculator .metric>span{min-height:0}
 .detailed-calculator .metric strong{margin-top:16px;font-size:32px!important;white-space:normal}
 .detailed-calculator .knowledge-sections h2{font-size:28px!important}
 .knowledge-sections{display:grid;grid-template-columns:minmax(0,1fr)!important}
 .knowledge-sections>*,.source-note{max-width:100%;width:auto}
 .source-note{overflow-wrap:anywhere}
 .result-cta{grid-template-columns:1fr!important}
 .result-card .contact-type{display:block!important}
 .result-card .contact-type>label{display:block;margin-top:10px}
}
@media(max-width:420px){
 .question-card,.result-card{padding:18px}
 .detailed-calculator :is(.seo-hero h1,.welcome h1){font-size:36px}
 .seo-hero-actions{padding:20px}
 .detailed-calculator :is(.metric strong,.contact-potential strong,.consumption-scale-readout strong){font-size:32px!important}
 .detailed-calculator .result-heading h2{font-size:32px!important}
}
/* Premium interactions in the calculator */
.answer-card,.primary-button,.back-button,.contact-type label,.faq-list summary{transition:background-color .45s var(--ease-out,ease),border-color .45s var(--ease-out,ease),color .45s var(--ease-out,ease),transform .6s var(--ease-out,ease),box-shadow .6s var(--ease-out,ease)}
@media(hover:hover){.answer-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(241,142,0,.7)}.primary-button:hover{transform:translateY(-2px);box-shadow:0 16px 36px -16px rgba(241,142,0,.8)}}
.answer-card:active,.primary-button:active{transform:scale(.97);transition-duration:.18s}