/* Ergänzungen zu style.css für die PHP-Fassung (ohne eigenes JavaScript).
   style.css bleibt identisch mit der Werkstatt-Fassung, damit Änderungen 1:1 übernommen werden können. */

/* Menü auf dem Handy und Untermenüs: Kontrollkästchen statt Klick-Skript */
.menu-check, .sub-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.menu-toggle { cursor: pointer; user-select: none; }
.menu-check:focus-visible + .menu-toggle, .sub-check:focus-visible + a + .sub-toggle { outline: 3px solid var(--kachel); outline-offset: 2px; }
.nav-item:has(> .sub-check:checked) .sub { opacity: 1; visibility: visible; transform: none; }
.nav-item:has(> .sub-check:checked) .sub-toggle { transform: rotate(180deg); }
.sub-toggle { display: inline-grid; place-items: center; }
@media (max-width: 720px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .menu-check:checked ~ .menu { display: flex; }
  .nav-item:has(> .sub-check:checked) .sub { display: grid; }
  .nav-item:has(> .sub-check:checked) .sub.groups { display: block; }
  /* Handy: nur „Mein Pool“ und Menü, sonst passt der Kopf nicht auf 320 px */
  .nav-plan { display: none; }
}

/* Livewire-Grundregeln (sonst als <style> eingefügt, was die strenge CSP blockiert) */
[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.flex][wire\:loading\.flex] { display: none; }
[wire\:offline][wire\:offline] { display: none; }
[wire\:dirty]:not(textarea):not(input):not(select) { display: none; }
[x-cloak="x-cloak"], [x-cloak=""], [wire\:cloak="wire:cloak"], [wire\:cloak=""] { display: none !important; }

/* Kosten- und Heiz-Chips (Anreicherung::chips): Radio + Label je Karte; Karten in .cost-panels der Reihe nach */
.chip-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips[data-panels] { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-radio:checked + .chip { background: var(--kachel); border-color: var(--kachel); color: #fff; }
.chip-radio:focus-visible + .chip { outline: 3px solid var(--kachel); outline-offset: 2px; }
.guide #heizen .chip-radio:not(:checked) + .chip { background: var(--weiss); }
.chips[data-panels] + .cost-panels > .cost-card { display: none; }
.chips[data-panels]:has(> .chip-radio:nth-of-type(1):checked) + .cost-panels > .cost-card:nth-of-type(1),
.chips[data-panels]:has(> .chip-radio:nth-of-type(2):checked) + .cost-panels > .cost-card:nth-of-type(2),
.chips[data-panels]:has(> .chip-radio:nth-of-type(3):checked) + .cost-panels > .cost-card:nth-of-type(3),
.chips[data-panels]:has(> .chip-radio:nth-of-type(4):checked) + .cost-panels > .cost-card:nth-of-type(4),
.chips[data-panels]:has(> .chip-radio:nth-of-type(5):checked) + .cost-panels > .cost-card:nth-of-type(5),
.chips[data-panels]:has(> .chip-radio:nth-of-type(6):checked) + .cost-panels > .cost-card:nth-of-type(6),
.chips[data-panels]:has(> .chip-radio:nth-of-type(7):checked) + .cost-panels > .cost-card:nth-of-type(7),
.chips[data-panels]:has(> .chip-radio:nth-of-type(8):checked) + .cost-panels > .cost-card:nth-of-type(8),
.chips[data-panels]:has(> .chip-radio:nth-of-type(9):checked) + .cost-panels > .cost-card:nth-of-type(9),
.chips[data-panels]:has(> .chip-radio:nth-of-type(10):checked) + .cost-panels > .cost-card:nth-of-type(10) { display: block; }
/* Direkter Link auf eine Karte (#k-abdeckung) zeigt genau diese */
.chips[data-panels] + .cost-panels:has(> .cost-card:target) > .cost-card { display: none; }
.chips[data-panels] + .cost-panels > .cost-card:target { display: block; }

/* Pool selber bauen (Anreicherung::bauweg): Karten verlinken auf ihre Anleitung, sichtbar ist nur die angesprungene */
.diy-opt-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.diy-path { display: none; }
.diy-path:target, .diy-path:has(:target) { display: block; }
.diy-paths:has(.diy-path:target, .diy-path :target) #diyHint { display: none; }
body:has(#weg-fertig:target, #weg-fertig :target) .diy-opt[data-weg="fertig"],
body:has(#weg-bausatz:target, #weg-bausatz :target) .diy-opt[data-weg="bausatz"],
body:has(#weg-eigenbau:target, #weg-eigenbau :target) .diy-opt[data-weg="eigenbau"] { outline: 3px solid var(--kachel); outline-offset: 2px; }

/* Technik-Skizze (Anreicherung::skizze): Bauteil anklicken = Link auf #teil-…, die Karte dazu wird per :target sichtbar */
.part-detail { display: none; }
.part-detail:target { display: block; }
.part-card:has(.part-detail:target) .part-intro { display: none; }
.part-detail:target { scroll-margin-top: 120px; }
body:has(#teil-skimmer:target) .sketch .part[data-part="skimmer"] .body { fill: #ffe9e2; stroke: var(--nudel); }
body:has(#teil-pumpe:target) .sketch .part[data-part="pumpe"] .body { fill: #ffe9e2; stroke: var(--nudel); }
body:has(#teil-filter:target) .sketch .part[data-part="filter"] .body { fill: #ffe9e2; stroke: var(--nudel); }
body:has(#teil-bypass:target) .sketch .part[data-part="bypass"] .body { fill: #ffe9e2; stroke: var(--nudel); }
body:has(#teil-waermepumpe:target) .sketch .part[data-part="waermepumpe"] .body { fill: #ffe9e2; stroke: var(--nudel); }
body:has(#teil-salz:target) .sketch .part[data-part="salz"] .body { fill: #ffe9e2; stroke: var(--nudel); }
body:has(#teil-duese:target) .sketch .part[data-part="duese"] .body { fill: #ffe9e2; stroke: var(--nudel); }
body:has(#teil-abdeckung:target) .sketch .part[data-part="abdeckung"] .body { fill: #ffe9e2; stroke: var(--nudel); }
body:has(#teil-pflege:target) .sketch .part[data-part="pflege"] .body { fill: #ffe9e2; stroke: var(--nudel); }
body:has(#teil-roboter:target) .sketch .part[data-part="roboter"] .body { fill: #ffe9e2; stroke: var(--nudel); }
.km-calc-wrap { display: contents; }

/* Kleine Tools (Anreicherung::aufklappen): aufklappen per Link und :target */
a.kt-row { text-decoration: none; }
.kt-item .kt-panel { display: none; }
.kt-item:target .kt-panel, .kt-list:not(:has(.kt-item:target)) .kt-item.kt-offen .kt-panel { display: block; }
.kt-item:target, .kt-list:not(:has(.kt-item:target)) .kt-item.kt-offen { border-color: var(--kachel); }
.kt-item:target .kt-chev, .kt-list:not(:has(.kt-item:target)) .kt-item.kt-offen .kt-chev { transform: rotate(90deg); }
@media (min-width: 760px) { .kt-item:target, .kt-list:not(:has(.kt-item:target)) .kt-item.kt-offen { grid-column: 1 / -1; } }
.hz-tool { display: contents; }
.pf-tool { display: contents; }