@php
    $decision = $service->decision_content;
    $calculatorSources = collect($decision['calculator_sources'] ?? [])->keyBy('key');
@endphp

<section class="pv-decision section" id="projektvorteile">
    <div class="section-shell">
        <div class="section-heading pv-decision-heading" data-reveal>
            <div>
                <p class="eyebrow"><span></span> {{ $decision['eyebrow'] ?? 'Photovoltaik nach Bedarf' }}</p>
                <h2>{{ $decision['title'] ?? 'Ihr Nutzen hängt vom Projekt ab.' }}</h2>
            </div>
            @if(!empty($decision['intro']))<p>{{ $decision['intro'] }}</p>@endif
        </div>

        @if(!empty($decision['audiences']))
            <div class="pv-audience" data-pv-audiences data-reveal>
                <div class="pv-audience-tabs" role="tablist" aria-label="Photovoltaik nach Zielgruppe">
                    @foreach($decision['audiences'] as $audience)
                        <button type="button" role="tab" id="pv-tab-{{ $audience['key'] }}" aria-controls="pv-panel-{{ $audience['key'] }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}" tabindex="{{ $loop->first ? '0' : '-1' }}" data-pv-tab="{{ $audience['key'] }}">
                            <span>{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>{{ $audience['label'] }}
                        </button>
                    @endforeach
                </div>

                <div class="pv-audience-panels">
                    @foreach($decision['audiences'] as $audience)
                        <article class="pv-audience-panel" role="tabpanel" id="pv-panel-{{ $audience['key'] }}" aria-labelledby="pv-tab-{{ $audience['key'] }}" data-pv-panel="{{ $audience['key'] }}" @if(!$loop->first) hidden @endif>
                            <header>
                                <p class="editorial-eyebrow">{{ $audience['eyebrow'] ?? $audience['label'] }}</p>
                                <h3>{{ $audience['title'] }}</h3>
                                @if(!empty($audience['intro']))<p>{{ $audience['intro'] }}</p>@endif
                            </header>
                            <div class="pv-audience-benefits">
                                @foreach($audience['benefits'] ?? [] as $benefit)
                                    <div>
                                        <span aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></svg></span>
                                        <h4>{{ $benefit['title'] }}</h4>
                                        <p>{{ $benefit['text'] }}</p>
                                    </div>
                                @endforeach
                            </div>
                            @if(!empty($audience['note']) || !empty($audience['source_url']))
                                <footer>
                                    @if(!empty($audience['note']))<p><strong>Gut zu wissen:</strong> {{ $audience['note'] }}</p>@endif
                                    @if(!empty($audience['source_url']))<a href="{{ $audience['source_url'] }}" target="_blank" rel="noopener noreferrer">{{ $audience['source_label'] ?? 'Offizielle Informationen' }} <span>↗</span></a>@endif
                                </footer>
                            @endif
                        </article>
                    @endforeach
                </div>
            </div>
        @endif

        @if(!empty($decision['performance_factors']))
            <article class="pv-performance" data-reveal>
                <div class="pv-performance-copy">
                    <p class="eyebrow eyebrow-dark"><span></span> {{ $decision['performance_eyebrow'] ?? 'Das kann Ihre Anlage leisten' }}</p>
                    <h3>{{ $decision['performance_title'] }}</h3>
                    @if(!empty($decision['performance_intro']))<p>{{ $decision['performance_intro'] }}</p>@endif
                    <div class="pv-factor-list">
                        @foreach($decision['performance_factors'] as $factor)
                            <div>
                                <span>{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                                <p><strong>{{ $factor['title'] }}</strong>{{ $factor['text'] }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
                <figure class="pv-performance-visual" aria-labelledby="pv-model-title" aria-describedby="pv-model-caption">
                    <header>
                        <span>Zusammenhang im Gebäude</span>
                        <strong id="pv-model-title">So greifen die vier Planungsfaktoren ineinander.</strong>
                    </header>

                    <div class="pv-system-diagram">
                        <div class="pv-system-mobile" role="img" aria-label="Mobile Systemdarstellung: Dach und Module bestimmen die Erzeugung. Module und Wechselrichter machen den Solarstrom nutzbar. Danach verzweigt sich die Betrachtung auf den zeitlichen Direktverbrauch sowie auf Speicher, Wallbox und Steuerung.">
                            <div class="pv-mobile-node pv-mobile-node-source">
                                <b>01</b>
                                <span>Dach &amp; Sonne</span>
                                <strong>Nutzbare Modulfläche</strong>
                                <small>Fläche, Ausrichtung und Schatten bestimmen die mögliche Erzeugung.</small>
                            </div>
                            <i class="pv-mobile-flow" aria-hidden="true">↓</i>
                            <div class="pv-mobile-node">
                                <b>03</b>
                                <span>Technisches System</span>
                                <strong>Module &amp; Wechselrichter</strong>
                                <small>Leistung, Auslegung und Wirkungsgrad bestimmen den nutzbaren Ertrag.</small>
                            </div>
                            <div class="pv-mobile-split"><span></span><strong>Danach werden zwei Bereiche betrachtet</strong><span></span></div>
                            <div class="pv-mobile-branches">
                                <div class="pv-mobile-node">
                                    <b>02</b>
                                    <span>Direkt vor Ort</span>
                                    <strong>Zeitlicher Verbrauch</strong>
                                    <small>Wann das Gebäude Strom benötigt.</small>
                                </div>
                                <div class="pv-mobile-node">
                                    <b>04</b>
                                    <span>Überschüsse nutzen</span>
                                    <strong>Speicher &amp; Steuerung</strong>
                                    <small>Batterie und Wallbox verschieben Solarstrom zeitlich.</small>
                                </div>
                            </div>
                        </div>
                        <svg viewBox="0 0 520 650" role="img" aria-label="Photovoltaiksystem eines Gebäudes: Marker 01 zeigt die nutzbare Modulfläche auf dem Dach, 02 das zeitliche Verbrauchsprofil im Gebäude, 03 Module und Wechselrichter und 04 Speicher, Wallbox und Energiesteuerung.">
                            <defs>
                                <linearGradient id="pv-panel-gradient" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#94d4e9" stop-opacity=".42"/><stop offset="1" stop-color="#2a5f88" stop-opacity=".7"/></linearGradient>
                                <filter id="pv-soft-glow"><feGaussianBlur stdDeviation="6" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
                                <marker id="pv-flow-arrow" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto-start-reverse"><path d="M0 0 8 4 0 8Z" fill="#94d4e9"/></marker>
                            </defs>

                            <g class="pv-diagram-sun">
                                <circle cx="76" cy="74" r="24"/><circle cx="76" cy="74" r="39"/><path d="M76 20v13M76 115v13M22 74h13M117 74h13M38 36l9 9M105 103l9 9M114 36l-9 9M47 103l-9 9"/>
                            </g>
                            <path class="pv-sun-path" d="M106 101 178 174" marker-end="url(#pv-flow-arrow)"/>

                            <g class="pv-diagram-building">
                                <path class="pv-house-shell" d="M104 318 259 177l156 141v253H104Z"/>
                                <path class="pv-house-floor" d="M105 445h310M258 317v254"/>
                                <rect class="pv-house-window" x="137" y="352" width="76" height="59" rx="3"/>
                                <path class="pv-house-window" d="M175 352v59M137 381h76"/>
                                <rect class="pv-house-window" x="298" y="352" width="77" height="59" rx="3"/>
                                <path class="pv-house-window" d="M336 352v59M298 381h77"/>
                            </g>

                            <g class="pv-diagram-panels">
                                <path d="m155 225 104-94 105 95-51 2-55-48-54 48Z"/>
                                <path d="m183 205 75-68 76 68M220 171l-4 56M258 137v43M296 171l4 56M183 205l151 0"/>
                            </g>

                            <g class="pv-diagram-inverter">
                                <rect x="124" y="469" width="69" height="78" rx="5"/>
                                <circle cx="158.5" cy="495" r="12"/><path d="M148 496c4-11 7 11 12 0s8 10 11 0M139 526h40"/>
                                <text x="158.5" y="562">Wechselrichter</text>
                            </g>

                            <g class="pv-diagram-load">
                                <path d="M300 426h94M300 426v-70"/>
                                <path class="pv-load-curve" d="M305 418c11-3 13-42 25-42s14 35 26 31c14-4 16-53 30-53 8 0 10 39 13 58"/>
                                <path class="pv-solar-curve" d="M306 417c14 0 19-7 26-24 11-24 21-33 33-25 16 9 17 36 35 47"/>
                                <text x="300" y="443">Verbrauchsprofil</text>
                            </g>

                            <g class="pv-diagram-house-load">
                                <path d="m277 387 16-14 16 14v22h-32Z"/><path d="M270 397h8M308 397h8"/>
                                <circle cx="293" cy="397" r="7"/><path d="M289 397h8M293 393v8"/>
                                <text x="293" y="423">Hausverbrauch</text>
                            </g>

                            <g class="pv-diagram-battery">
                                <rect x="276" y="476" width="50" height="72" rx="5"/><path d="M326 496h7v30h-7M286 489v46M296 489v46M306 489v46"/>
                            </g>

                            <g class="pv-diagram-wallbox">
                                <rect x="350" y="474" width="38" height="49" rx="5"/><circle cx="369" cy="488" r="5"/><path d="M369 493v16M388 500h10v29"/>
                                <path class="pv-diagram-car" d="M340 550h95l-7-26-20-15h-39l-24 18-5 23Zm17 0a12 12 0 1 0 24 0m29 0a12 12 0 1 0 24 0M357 531h71"/>
                            </g>

                            <g class="pv-diagram-controller">
                                <circle cx="236" cy="505" r="23"/><path d="M236 489v32M220 505h32M226 495l20 20M246 495l-20 20"/>
                                <text x="236" y="540"><tspan x="236">Energie-</tspan><tspan x="236" dy="11">management</tspan></text>
                            </g>

                            <g class="pv-energy-lines">
                                <path class="pv-flow-generation" d="M258 180v106H159v183" marker-end="url(#pv-flow-arrow)"/>
                                <path class="pv-flow-to-controller" d="M193 505h20" marker-end="url(#pv-flow-arrow)"/>
                                <path class="pv-flow-to-load" d="M236 482v-58h42" marker-end="url(#pv-flow-arrow)"/>
                                <path class="pv-flow-to-battery" d="M259 501h17" marker-end="url(#pv-flow-arrow)"/>
                                <path class="pv-flow-to-wallbox" d="M259 512h88" marker-end="url(#pv-flow-arrow)"/>
                                <path class="pv-flow-to-grid" d="M268 488c65-48 130-46 200-46" marker-start="url(#pv-flow-arrow)" marker-end="url(#pv-flow-arrow)"/>
                            </g>

                            <g class="pv-diagram-marker pv-marker-01"><circle cx="400" cy="195" r="20"/><text x="400" y="199">01</text><path d="M380 202 333 215"/></g>
                            <g class="pv-diagram-marker pv-marker-02"><circle cx="425" cy="360" r="20"/><text x="425" y="364">02</text><path d="M405 369 386 379M405 356 309 388"/></g>
                            <g class="pv-diagram-marker pv-marker-03"><circle cx="78" cy="310" r="20"/><text x="78" y="314">03</text><path d="M98 301 178 233M89 328 145 469"/></g>
                            <g class="pv-diagram-marker pv-marker-04"><circle cx="338" cy="590" r="20"/><text x="338" y="594">04</text><path d="M322 577 252 526M331 571 305 549M346 571 369 529"/></g>

                            <g class="pv-diagram-grid">
                                <path d="M468 311v205M448 352h40M441 402h54M432 516h72M455 311l-23 205M481 311l23 205"/>
                                <text x="495" y="541">Netz</text>
                            </g>
                        </svg>

                        <div class="pv-diagram-output" aria-hidden="true"><span>Auslegung ergibt</span><strong>Ertrag + Eigenversorgung</strong></div>
                    </div>

                    <figcaption id="pv-model-caption">Die Nummern verweisen direkt auf die vier Planungspunkte links. Die Linien zeigen die möglichen Energiewege von den Modulen über Wechselrichter und Energiemanagement zu Hausverbrauch, Speicher, Wallbox und Netz. Am Netz sind sowohl Bezug als auch Einspeisung möglich.</figcaption>
                </figure>
            </article>
        @endif

        @if(!empty($decision['facts']))
            <section class="pv-facts" id="zahlen" aria-labelledby="pv-facts-title" data-reveal>
                <header>
                    <div>
                        <p class="eyebrow"><span></span> {{ $decision['facts_eyebrow'] ?? 'Zahlen zur Orientierung' }}</p>
                        <h3 id="pv-facts-title">{{ $decision['facts_title'] }}</h3>
                    </div>
                    @if(!empty($decision['facts_intro']))<p>{{ $decision['facts_intro'] }}</p>@endif
                </header>
                <div class="pv-fact-grid">
                    @foreach($decision['facts'] as $fact)
                        <article>
                            <span>{{ $fact['value'] }} <small>{{ $fact['unit'] }}</small></span>
                            <h4>{{ $fact['title'] }}</h4>
                            <p>{{ $fact['text'] }}</p>
                            @if(!empty($fact['source_url']))<a href="{{ $fact['source_url'] }}" target="_blank" rel="noopener noreferrer">{{ $fact['source_label'] ?? 'Quelle' }} <span>↗</span></a>@endif
                        </article>
                    @endforeach
                </div>
            </section>
        @endif

        @if(!empty($decision['economics_inputs']))
            @php
                $economicsChartData = collect($decision['economics_chart_data'] ?? [
                    ['year' => 2, 'without_pv' => 2424, 'with_pv' => 23347],
                    ['year' => 4, 'without_pv' => 4944, 'with_pv' => 23014],
                    ['year' => 6, 'without_pv' => 7560, 'with_pv' => 22681],
                    ['year' => 8, 'without_pv' => 10272, 'with_pv' => 22347],
                    ['year' => 10, 'without_pv' => 13080, 'with_pv' => 22014],
                    ['year' => 12, 'without_pv' => 15984, 'with_pv' => 21681],
                    ['year' => 14, 'without_pv' => 18984, 'with_pv' => 21347],
                    ['year' => 16, 'without_pv' => 22100, 'with_pv' => 21014],
                    ['year' => 18, 'without_pv' => 25272, 'with_pv' => 20681],
                    ['year' => 20, 'without_pv' => 28560, 'with_pv' => 20347],
                    ['year' => 22, 'without_pv' => 31944, 'with_pv' => 20014],
                    ['year' => 24, 'without_pv' => 35424, 'with_pv' => 19681],
                    ['year' => 26, 'without_pv' => 39000, 'with_pv' => 19347],
                    ['year' => 28, 'without_pv' => 42672, 'with_pv' => 19014],
                    ['year' => 30, 'without_pv' => 46440, 'with_pv' => 18681],
                ])->map(fn (array $point) => [
                    'year' => (int) $point['year'],
                    'without_pv' => (int) $point['without_pv'],
                    'with_pv' => (int) $point['with_pv'],
                ])->values();
                $chartLeft = 76;
                $chartRight = 724;
                $chartTop = 46;
                $chartBottom = 344;
                $chartMaximum = 50000;
                $chartCount = max(1, $economicsChartData->count() - 1);
                $chartPoints = $economicsChartData->map(function (array $point, int $index) use ($chartLeft, $chartRight, $chartTop, $chartBottom, $chartMaximum, $chartCount) {
                    $x = $chartLeft + (($chartRight - $chartLeft) * $index / $chartCount);
                    $withoutY = $chartBottom - (($chartBottom - $chartTop) * $point['without_pv'] / $chartMaximum);
                    $withY = $chartBottom - (($chartBottom - $chartTop) * $point['with_pv'] / $chartMaximum);

                    return [...$point, 'x' => round($x, 2), 'without_y' => round($withoutY, 2), 'with_y' => round($withY, 2)];
                });
                $withoutPvPolyline = $chartPoints->map(fn (array $point) => $point['x'].','.$point['without_y'])->implode(' ');
                $withPvPolyline = $chartPoints->map(fn (array $point) => $point['x'].','.$point['with_y'])->implode(' ');
                $lastChartPoint = $economicsChartData->last();
            @endphp
            <article class="pv-economics" data-reveal>
                <div class="pv-economics-copy">
                    <p class="eyebrow"><span></span> {{ $decision['economics_eyebrow'] ?? 'Wirtschaftlichkeit verstehen' }}</p>
                    <h3>{{ $decision['economics_title'] }}</h3>
                    @if(!empty($decision['economics_intro']))<p>{{ $decision['economics_intro'] }}</p>@endif
                    <div class="pv-economics-inputs">
                        @foreach($decision['economics_inputs'] as $input)
                            <div><span>{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span><p><strong>{{ $input['title'] }}</strong>{{ $input['text'] }}</p></div>
                        @endforeach
                    </div>
                </div>
                <figure class="pv-economics-chart" data-pv-cost-chart>
                    <figcaption><strong>Langfristige Kosteneinsparungen durch Photovoltaik</strong><span>30 Jahre · Modellvergleich</span></figcaption>

                    <div class="pv-cost-summary" aria-label="Ergebnis des Modellvergleichs nach 30 Jahren">
                        <span><small>Jahr 30 · ohne PV-Anlage</small><strong>{{ number_format($lastChartPoint['without_pv'], 0, ',', '.') }} €</strong></span>
                        <span><small>Jahr 30 · mit PV-Anlage</small><strong>{{ number_format($lastChartPoint['with_pv'], 0, ',', '.') }} €</strong></span>
                        <span><small>Differenz im Modell</small><strong>{{ number_format($lastChartPoint['without_pv'] - $lastChartPoint['with_pv'], 0, ',', '.') }} €</strong></span>
                    </div>

                    <div class="pv-cost-chart-wrap">
                        <svg viewBox="0 0 760 410" role="img" aria-labelledby="pv-chart-title pv-chart-desc">
                            <title id="pv-chart-title">Gesamtkosten mit und ohne Photovoltaikanlage über 30 Jahre</title>
                            <desc id="pv-chart-desc">Die rote Reihe zeigt im Modell steigende Kosten ohne Photovoltaikanlage von 2.424 Euro in Jahr 2 bis 46.440 Euro in Jahr 30. Die grüne Reihe zeigt Modellkosten mit Photovoltaikanlage von 23.347 Euro in Jahr 2 bis 18.681 Euro in Jahr 30. Die Reihen schneiden sich zwischen Jahr 14 und Jahr 16.</desc>

                            <g class="pv-chart-grid" aria-hidden="true">
                                @foreach([50000, 37500, 25000, 12500, 0] as $gridValue)
                                    @php($gridY = $chartBottom - (($chartBottom - $chartTop) * $gridValue / $chartMaximum))
                                    <line x1="{{ $chartLeft }}" y1="{{ $gridY }}" x2="{{ $chartRight }}" y2="{{ $gridY }}"/>
                                    <text x="62" y="{{ $gridY + 4 }}">{{ number_format($gridValue, 0, ',', '.') }}</text>
                                @endforeach
                                <line x1="{{ $chartLeft }}" y1="{{ $chartTop }}" x2="{{ $chartLeft }}" y2="{{ $chartBottom }}"/>
                                <text class="pv-chart-axis-title" x="18" y="194" transform="rotate(-90 18 194)">Gesamtkosten in €</text>
                            </g>

                            <polyline class="pv-chart-line pv-chart-without-pv" pathLength="1" points="{{ $withoutPvPolyline }}"/>
                            <polyline class="pv-chart-line pv-chart-with-pv" pathLength="1" points="{{ $withPvPolyline }}"/>

                            <g class="pv-chart-points">
                                @foreach($chartPoints as $point)
                                    <g class="pv-cost-point{{ $loop->last ? ' is-active' : '' }}" tabindex="0" role="button"
                                        aria-label="Jahr {{ $point['year'] }}: Kosten ohne PV-Anlage {{ number_format($point['without_pv'], 0, ',', '.') }} Euro, Kosten mit PV-Anlage {{ number_format($point['with_pv'], 0, ',', '.') }} Euro"
                                        data-year="{{ $point['year'] }}" data-without-pv="{{ $point['without_pv'] }}" data-with-pv="{{ $point['with_pv'] }}">
                                        <line class="pv-cost-guide" x1="{{ $point['x'] }}" y1="{{ $chartTop }}" x2="{{ $point['x'] }}" y2="{{ $chartBottom }}"/>
                                        <circle class="pv-cost-hitarea" cx="{{ $point['x'] }}" cy="{{ $point['without_y'] }}" r="14"/>
                                        <circle class="pv-cost-hitarea" cx="{{ $point['x'] }}" cy="{{ $point['with_y'] }}" r="14"/>
                                        <circle class="pv-cost-dot pv-cost-dot-without" cx="{{ $point['x'] }}" cy="{{ $point['without_y'] }}" r="4"/>
                                        <circle class="pv-cost-dot pv-cost-dot-with" cx="{{ $point['x'] }}" cy="{{ $point['with_y'] }}" r="4"/>
                                        <text x="{{ $point['x'] }}" y="370">{{ $point['year'] }}</text>
                                    </g>
                                @endforeach
                                <text class="pv-chart-x-title" x="400" y="401">Jahre nach Projektstart</text>
                            </g>
                        </svg>

                        <div class="pv-cost-tooltip" aria-live="polite">
                            <strong>Jahr <span data-cost-year>{{ $lastChartPoint['year'] }}</span></strong>
                            <span><i></i> Ohne PV <b data-cost-without>{{ number_format($lastChartPoint['without_pv'], 0, ',', '.') }} €</b></span>
                            <span><i></i> Mit PV <b data-cost-with>{{ number_format($lastChartPoint['with_pv'], 0, ',', '.') }} €</b></span>
                        </div>
                    </div>

                    <div class="pv-chart-legend">
                        <span><i></i><span><strong>Ohne PV-Anlage</strong> Kumulierte Stromkosten bei durchschnittlich 2 % angenommener jährlicher Preissteigerung.</span></span>
                        <span><i></i><span><strong>Mit PV-Anlage</strong> Anfangsinvestition abzüglich modellierter Einsparungen durch Eigenverbrauch und Einspeisung.</span></span>
                    </div>

                    <details class="pv-cost-data">
                        <summary>Alle 15 Werte der Statistik anzeigen</summary>
                        <div>
                            <table>
                                <thead><tr><th>Jahr</th><th>Ohne PV</th><th>Mit PV</th></tr></thead>
                                <tbody>
                                    @foreach($economicsChartData as $point)
                                        <tr><th>{{ $point['year'] }}</th><td>{{ number_format($point['without_pv'], 0, ',', '.') }} €</td><td>{{ number_format($point['with_pv'], 0, ',', '.') }} €</td></tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </details>

                    <p><strong>Einordnung:</strong> {{ $decision['economics_chart_note'] ?? 'Die dargestellte 30-Jahres-Reihe ist ein transparentes Modellbeispiel und keine individuelle Prognose für ein Luxemburger Projekt. Alle verwendeten Modellwerte sind direkt in der Statistik einsehbar. Ihre tatsächlichen Kosten hängen unter anderem von Angebot, Verbrauch, Ertrag, Strompreis, Einspeisemodell, Förderung, Wartung und Finanzierung ab.' }}</p>
                    <a class="button button-primary" href="{{ route('pv-configurator.create') }}">Unverbindlich anfragen <span>↗</span></a>
                </figure>
            </article>
        @endif

        @if(!empty($decision['calculator_enabled']) && !empty($decision['calculator_yield']))
            <article class="pv-calculator" data-pv-calculator data-yield="{{ $decision['calculator_yield'] }}" data-area-per-kwp="{{ $decision['calculator_area_per_kwp'] ?? 4.5 }}" data-cost-per-kwp="{{ $decision['calculator_cost_per_kwp'] ?? 2500 }}" data-cost-per-storage-kwh="{{ $decision['calculator_storage_cost_per_kwh'] ?? 1000 }}" data-ev-consumption="{{ $decision['calculator_ev_consumption'] ?? 2500 }}" data-heat-pump-consumption="{{ $decision['calculator_heat_pump_consumption'] ?? 4500 }}" data-reveal>
                <header>
                    <p class="eyebrow eyebrow-dark"><span></span> {{ $decision['calculator_eyebrow'] ?? 'Veränderbares Rechenbeispiel' }}</p>
                    <h3>{{ $decision['calculator_title'] }}</h3>
                    @if(!empty($decision['calculator_intro']))<p>{{ $decision['calculator_intro'] }}</p>@endif
                </header>
                <div class="pv-calculator-layout">
                    <form class="pv-calculator-controls" onsubmit="return false">
                        <div class="pv-guide-intro">
                            <span>In 3 einfachen Angaben</span>
                            <h4>Starten Sie mit dem, was Sie ungefähr wissen.</h4>
                            <p>Die Fachwerte leitet das Rechenmodell daraus ab. Jede Annahme bleibt sichtbar und kann später angepasst werden.</p>
                        </div>

                        <fieldset class="pv-guide-step">
                            <legend><span>01</span> Wie viel Strom brauchen Sie ungefähr?</legend>
                            <p>Der genaue Wert steht als „Jahresverbrauch“ auf Ihrer Stromabrechnung. Wenn Sie ihn nicht kennen, wählen Sie einfach die passendste Haushaltsgröße.</p>
                            <div class="pv-guide-choices pv-guide-choices-three">
                                <button type="button" data-calc-consumption-preset="2500" aria-pressed="false"><strong>1–2 Personen</strong><small>ca. 2.500 kWh/Jahr</small></button>
                                <button type="button" data-calc-consumption-preset="4000" class="is-selected" aria-pressed="true"><strong>3–4 Personen</strong><small>ca. 4.000 kWh/Jahr</small></button>
                                <button type="button" data-calc-consumption-preset="6000" aria-pressed="false"><strong>5+ / hoher Bedarf</strong><small>ca. 6.000 kWh/Jahr</small></button>
                            </div>
                            <label class="pv-guide-exact"><span>Oder bekannten Jahresverbrauch eingeben</span><span><input type="number" min="1000" max="30000" step="100" value="{{ $decision['calculator_default_consumption'] ?? 4000 }}" data-calc-consumption> kWh/Jahr</span></label>
                        </fieldset>

                        <fieldset class="pv-guide-step">
                            <legend><span>02</span> Wie viel freie Dachfläche könnte nutzbar sein?</legend>
                            <p>Eine grobe Schätzung reicht. Fenster, Kamine, Abstände, Ausrichtung und Verschattung werden erst bei der echten Planung berücksichtigt.</p>
                            <div class="pv-guide-choices pv-guide-choices-three">
                                <button type="button" data-calc-roof-preset="20" aria-pressed="false"><strong>Kleine Fläche</strong><small>etwa 20 m²</small></button>
                                <button type="button" data-calc-roof-preset="35" class="is-selected" aria-pressed="true"><strong>Mittlere Fläche</strong><small>etwa 35 m²</small></button>
                                <button type="button" data-calc-roof-preset="50" aria-pressed="false"><strong>Große Fläche</strong><small>etwa 50 m²</small></button>
                            </div>
                            <label class="pv-guide-exact"><span>Oder grobe Fläche eingeben</span><span><input type="number" min="10" max="150" step="1" value="{{ $decision['calculator_default_roof_area'] ?? 35 }}" data-calc-roof-area> m²</span></label>
                        </fieldset>

                        <fieldset class="pv-guide-step">
                            <legend><span>03</span> Was soll mitgedacht werden?</legend>
                            <p>Diese Geräte erhöhen den Strombedarf und können mehr Solarstrom direkt im Gebäude nutzbar machen.</p>
                            <div class="pv-guide-toggles">
                                <label><input type="checkbox" data-calc-ev><span><strong>Elektroauto</strong><small>Modell: +{{ number_format($decision['calculator_ev_consumption'] ?? 2500, 0, ',', '.') }} kWh/Jahr</small></span></label>
                                <label><input type="checkbox" data-calc-heat-pump><span><strong>Wärmepumpe</strong><small>Modell: +{{ number_format($decision['calculator_heat_pump_consumption'] ?? 4500, 0, ',', '.') }} kWh/Jahr</small></span></label>
                            </div>
                            <div class="pv-storage-choice" role="group" aria-label="Speicher im Beispiel berücksichtigen">
                                <label><input type="radio" name="pv-storage-mode" value="none" data-calc-storage-mode checked><span>Ohne Speicher starten</span></label>
                                <label><input type="radio" name="pv-storage-mode" value="auto" data-calc-storage-mode><span>Passenden Speicher vorschlagen</span></label>
                            </div>
                        </fieldset>

                        <div class="pv-guided-assumptions" aria-live="polite">
                            <p>Das Beispiel rechnet jetzt mit</p>
                            <div><span><strong data-calc-total-consumption>–</strong><small>Strombedarf pro Jahr</small></span><span><strong data-calc-model-system>–</strong><small>abgeleitetes System</small></span><span><strong data-calc-model-investment>–</strong><small>Modellinvestition brutto</small></span></div>
                            <small class="pv-guided-method">Automatisch abgeleitet: Anlagenleistung aus Strombedarf und Fläche · Speicher aus Anlagengröße · Eigenverbrauch aus Bedarfs- und Nutzungsmodell · Kosten aus {{ number_format($decision['calculator_cost_per_kwp'] ?? 2500, 0, ',', '.') }} €/kWp plus {{ number_format($decision['calculator_storage_cost_per_kwh'] ?? 1000, 0, ',', '.') }} €/kWh Speicher.</small>
                        </div>

                        <details class="pv-advanced-controls">
                            <summary><span>Technische Annahmen ansehen & anpassen</span><small>Optional – nur wenn Sie bereits genauere Werte kennen</small></summary>
                            <div>
                                <label><span>Anlagenleistung <output data-calc-power-output>{{ $decision['calculator_power'] }} kWp</output></span><input type="range" min="2" max="20" step="0.5" value="{{ $decision['calculator_power'] }}" data-calc-power></label>
                                <label><span>Nutzbarer Speicher <output data-calc-storage-output>{{ $decision['calculator_storage'] }} kWh</output></span><input type="range" min="0" max="15" step="1" value="{{ $decision['calculator_storage'] }}" data-calc-storage></label>
                                <label><span>Angenommener Eigenverbrauch <output data-calc-self-use-output>{{ $decision['calculator_self_use'] }} %</output></span><input type="range" min="15" max="85" step="1" value="{{ $decision['calculator_self_use'] }}" data-calc-self-use></label>
                                <label><span>Modellinvestition brutto <output data-calc-investment-output>{{ number_format($decision['calculator_investment'], 0, ',', '.') }} €</output></span><input type="range" min="5000" max="60000" step="500" value="{{ $decision['calculator_investment'] }}" data-calc-investment></label>
                                <p class="pv-model-cost-note">Automatische Kostenannahme: {{ number_format($decision['calculator_cost_per_kwp'] ?? 2500, 0, ',', '.') }} €/kWp plus {{ number_format($decision['calculator_storage_cost_per_kwh'] ?? 1000, 0, ',', '.') }} €/kWh Speicher. Das ist kein Angebot.</p>
                                <div class="pv-price-inputs">
                                    <label><span>Netzstrom</span><span><input type="number" min="0" max="100" step="0.1" value="{{ $decision['calculator_grid_price'] }}" data-calc-grid-price> ct/kWh</span></label>
                                    <label><span>Einspeisung</span><span><input type="number" min="0" max="100" step="0.1" value="{{ $decision['calculator_feed_price'] }}" data-calc-feed-price> ct/kWh</span></label>
                                </div>
                            </div>
                        </details>
                    </form>
                    <div class="pv-calculator-results" aria-live="polite">
                        <div><span>Vorgeschlagenes Beispielsystem</span><strong data-calc-system>–</strong><small data-calc-system-note>Aus Ihren einfachen Angaben abgeleitet</small>@if($calculatorSources->has('area'))<a class="pv-result-source" href="{{ $calculatorSources['area']['url'] }}" target="_blank" rel="noopener noreferrer">Herleitung prüfen: Moduldaten <span>↗</span></a>@endif</div>
                        <div><span>Geschätzter Jahresertrag</span><strong data-calc-generation>–</strong><small>PVGIS-Ansatz: {{ number_format($decision['calculator_yield'], 0, ',', '.') }} kWh/kWp · Jahr</small>@if($calculatorSources->has('yield'))<a class="pv-result-source" href="{{ $calculatorSources['yield']['url'] }}" target="_blank" rel="noopener noreferrer">Quelle prüfen: EU PVGIS <span>↗</span></a>@endif</div>
                        <div><span>Rechnerischer PV-Förderbetrag</span><strong data-calc-pv-aid>–</strong><small>Klimabonus-Formel 2026 – sofern alle Voraussetzungen erfüllt sind</small>@if($calculatorSources->has('aid'))<a class="pv-result-source" href="{{ $calculatorSources['aid']['url'] }}" target="_blank" rel="noopener noreferrer">Quelle prüfen: Guichet.lu <span>↗</span></a>@endif</div>
                        <div><span>Rechnerischer Speicher-Förderbetrag</span><strong data-calc-storage-aid>–</strong><small>Klimabonus-Formel 2026 – sofern alle Voraussetzungen erfüllt sind</small>@if($calculatorSources->has('aid'))<a class="pv-result-source" href="{{ $calculatorSources['aid']['url'] }}" target="_blank" rel="noopener noreferrer">Quelle prüfen: Guichet.lu <span>↗</span></a>@endif</div>
                        <div class="pv-result-accent"><span>Modellierter Energiewert pro Jahr</span><strong data-calc-energy-value>–</strong><small>Eigenverbrauchsersparnis plus Einspeisung</small>@if($calculatorSources->has('prices'))<a class="pv-result-source" href="{{ $calculatorSources['prices']['url'] }}" target="_blank" rel="noopener noreferrer">Preisannahmen prüfen <span>↗</span></a>@endif</div>
                        <div class="pv-result-accent"><span>Statische Rücklaufzeit im Modell</span><strong data-calc-payback>–</strong><small>Modellinvestition minus Förderung ÷ Energiewert</small><a class="pv-result-source" href="#rechner-quellen">Berechnungsgrundlagen prüfen <span>↓</span></a></div>
                    </div>
                </div>
                <footer>
                    @if(!empty($decision['calculator_note']))<p><strong>Einordnung:</strong> {{ $decision['calculator_note'] }}</p>@endif
                </footer>
                @if($calculatorSources->isNotEmpty())
                    <aside class="pv-calculator-sources" id="rechner-quellen" aria-labelledby="pv-calculator-sources-title">
                        <header>
                            <span aria-hidden="true">i</span>
                            <div>
                                <p>Nachprüfbare Grundlagen</p>
                                <h4 id="pv-calculator-sources-title">{{ $decision['calculator_sources_title'] ?? 'Quellen des Rechenbeispiels' }}</h4>
                            </div>
                        </header>
                        <div>
                            @foreach($calculatorSources as $source)
                                <a href="{{ $source['url'] }}" target="_blank" rel="noopener noreferrer">
                                    <span>{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                                    <strong>{{ $source['label'] }}</strong>
                                    <p>{{ $source['detail'] }}</p>
                                    <i aria-hidden="true">↗</i>
                                </a>
                            @endforeach
                        </div>
                    </aside>
                @endif
            </article>
        @endif
    </div>
</section>
