/* ZT-Büro Pevetz · gemeinsames Layout aller sechs Seiten · Verbesserung 2 · 07.10.2026
   Desktop: kompakte Spalten, natürliche Seitenhöhe ohne abgeschnittenen Inhalt.
   Tablet / Smartphone: Umbruch und normales Scrollen, weiterhin 16px Fließtext. */
:root {
  color-scheme: light;
  --ink: #173d43;
  --text: #263e43;
  --muted: #4e6469;
  --line: #dce5e6;
  --paper: #fff;
  --canvas: #fffbe4;
  --header: #ffe0bb;
  --footer: #def0ce;
  --yellow: #fff6cc;
  --green: #e5f2df;
  --blue: #eff6fa;
  --max: 1640px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1rem; }
body { margin: 0; background: var(--canvas); color: var(--text); font-size: 1rem; line-height: 1.4; min-height: 100svh; display: flex; flex-direction: column; }
a { color: inherit; text-underline-offset: .2em; }
button { font: inherit; cursor: pointer; }
button, dialog { color: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid #0877ac; outline-offset: 4px; }
svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
.page-width { width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 20; top: .75rem; left: 1rem; padding: .6rem 1rem; background: white; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* Einheitlicher Header und fünf farbige Themenlinks */
.site-header { background: var(--header); border-top: 4px solid var(--ink); }
.header-inner { padding-block: .7rem; text-align: center; }
.energy-title { font-family: Arial, Helvetica, sans-serif; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: .025em; line-height: 1.2; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.topic-navigation { padding-bottom: .75rem; }
.topic-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; }
.topic-link { --accent: #1876a4; --tint: #f1f8fc; min-height: 3rem; display: flex; align-items: center; gap: .55rem; border: 1px solid var(--accent); border-radius: 4px; padding: .55rem .8rem; text-decoration: none; font-size: 1rem; font-weight: 600; color: var(--accent); background: var(--tint); overflow-wrap: anywhere; transition: background .15s, box-shadow .15s; }
.topic-link:hover, .topic-link[aria-current] { background: white; box-shadow: 0 2px 7px #183f4514; }
.topic-icon { display: flex; flex-shrink: 0; }
.topic-energiesparen { --accent: #397746; --tint: #f0f7f0; }
.topic-haustechnik { --accent: #7c4e8d; --tint: #f8f2fa; }
.topic-photovoltaik { --accent: #aa581a; --tint: #fff5eb; }
.topic-solaranlage { --accent: #986600; --tint: #fff9e6; }
.menu-toggle[hidden] { display: none; }

/* Gemeinsames Raster: gleiche Außenabstände, Schrift und Bildrahmen */
.main-layout, .energy-main, .saving-main, .pv-main, .tips-main, .solar-main { padding-block: 1rem; flex: 1; }
.energy-columns, .saving-columns, .pv-columns, .tips-blocks, .solar-columns { display: grid; gap: 1rem; align-items: start; }
main h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin-bottom: .65rem; }
main h3 { font-size: 1rem; line-height: 1.35; }
main :is(aside, section, .solar-information, .solar-equipment) { min-width: 0; }
.energy-intro, .saving-goal, .pv-intro { text-align: center; margin-bottom: 1rem; font-size: 1rem; }
.energy-intro strong, .energy-intro span { display: block; }
.energy-intro span { margin-top: .15rem; }
.saving-goal h2 { margin-bottom: .25rem; }
.energy-data, .energy-optimization, .saving-loss, .saving-measures, .pv-factors, .pv-storage, .tips-block, .solar-panel { padding: .85rem; border: 0; border-radius: 4px; background: var(--yellow); }
.energy-optimization, .saving-measures, .pv-storage, .tips-investment, .solar-components { background: var(--green); }
.tips-law, .solar-planning { background: var(--blue); }
.solar-use { background: #f3f8ed; }
.section-rule { display: none; }
.diagram-card { background: white; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; min-width: 0; }
.diagram-link { display: flex; align-items: center; justify-content: center; padding: .5rem; cursor: zoom-in; }
.diagram-link img { width: 100%; max-height: 220px; object-fit: contain; }
.diagram-card figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .65rem; padding: .5rem .65rem; font-size: .875rem; line-height: 1.35; overflow-wrap: anywhere; }
.enlarge-link { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; min-height: 28px; font-size: .875rem; text-decoration: none; color: var(--muted); }
.enlarge-link:hover { text-decoration: underline; color: var(--ink); }
.enlarge-link svg { width: 1.1rem; height: 1.1rem; }
.diagram-gallery, .energy-gallery, .saving-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

/* Startseite */
.main-layout { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(0, 2.2fr) minmax(210px, .8fr); gap: 1rem; align-content: start; }
.section-heading { margin-bottom: .65rem; }
.section-heading h2 { margin: 0; }
.side-list { list-style: none; padding: 0; margin: .7rem 0 0; }
.side-list li { display: flex; align-items: baseline; gap: .6rem; margin: .2rem 0; overflow-wrap: anywhere; hyphens: auto; }
.list-marker { width: .3rem; height: .3rem; flex: 0 0 .3rem; background: #78999d; align-self: center; border-radius: 50%; }
.side-list .subitem { padding-left: .9rem; color: var(--muted); }
.side-list .subitem .list-marker { display: none; }
.side-list .new-group { margin-top: .5rem; }
.home-page .diagram-gallery { grid-template-columns: minmax(0, 1fr); }
.home-page .diagram-link img { width: auto; max-height: clamp(260px, calc(100svh - 370px), 460px); }
.funding-group { margin-top: .8rem; }
.funding-group h3 { font-size: .875rem; color: var(--muted); font-weight: 600; }
.funding-group .side-list { margin-top: .25rem; }
.topic-overviews { grid-column: 1 / -1; width: 100%; }
.topic-overviews:not(:has(.topic-detail:target)) { display: none; }
.topic-detail { display: none; padding: 1rem; background: white; border: 1px solid var(--line); border-radius: 4px; }
.topic-detail:target { display: block; }
.topic-detail p { max-width: 65ch; margin-top: .6rem; }
.eyebrow { font-size: .875rem; color: var(--muted); }
.back-link { display: inline-block; margin-top: .8rem; }

/* Energieausweis */
.energy-columns { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(260px, 300px); }
.building-data { padding: 0; margin: 0; list-style: none; }
.building-data > li { margin: .3rem 0; }
.building-data ul { padding-left: 1.2rem; margin-block: .25rem; }
.building-data ul li { margin: .15rem 0; }
.energy-gallery .diagram-link { height: clamp(180px, calc(50svh - 210px), 260px); }
.energy-gallery img { width: auto; max-height: 100%; }
.optimization-steps { padding: 0; list-style: none; counter-reset: steps; margin: 0; display: grid; gap: .3rem; }
.optimization-steps li { counter-increment: steps; display: flex; gap: .55rem; align-items: baseline; background: #f9fcf7; border: 1px solid #cbdac2; border-radius: 3px; padding: .3rem .5rem; line-height: 1.35; overflow-wrap: anywhere; }
.optimization-steps li::before { content: counter(steps, decimal-leading-zero); color: #526e40; font-size: .875rem; flex-shrink: 0; font-weight: bold; }

/* Energiesparen */
.saving-columns { grid-template-columns: minmax(230px, .9fr) minmax(0, 1.55fr) minmax(330px, 1.3fr); }
.loss-boxes { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.loss-boxes li { background: #fffdf3; padding: .3rem .5rem; border-radius: 3px; overflow-wrap: anywhere; }
.saving-loss .trace-title { margin-top: .85rem; }
.saving-gallery .diagram-link { height: 150px; }
.saving-gallery .diagram-link img { width: auto; max-height: 100%; }
.saving-measures .diagram-link img { max-height: 165px; }
.cost-principle { font-weight: bold; margin: .7rem 0; }
.measure-list { padding-left: 1.15rem; margin: 0; }
.measure-list li { margin: .3rem 0; line-height: 1.4; }

/* Photovoltaik: kompakte Ertragsfaktoren, zwei Sonnengang-Bilder */
.pv-columns { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1.2fr) minmax(240px, .9fr); }
.pv-left { min-width: 0; }
.pv-factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pv-text-group ul, .tips-block ul, .solar-panel ul { padding-left: 1.15rem; margin: 0; }
.pv-text-group li, .tips-block li, .solar-panel li { margin: .3rem 0; line-height: 1.4; overflow-wrap: anywhere; hyphens: auto; }
.pv-figures { display: grid; gap: .7rem; }
.pv-sun .diagram-link img { max-height: 200px; }
.pv-examples .diagram-link img { max-height: 135px; }
.pv-image-note { font-size: .875rem; color: var(--muted); margin-bottom: .5rem; }
.pv-storage { margin-top: .75rem; }

/* Realisierungstips */
.tips-blocks { grid-template-columns: 1fr 1.55fr 1fr; }
.tips-source { font-size: .875rem; line-height: 1.4; margin-top: .7rem; }
.tips-cartoon { max-width: 800px; margin: .85rem auto 0; }
.tips-cartoon .diagram-link img { max-height: 230px; }

/* Solaranlagen */
.solar-columns { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(260px, 1fr); }
.solar-information, .solar-equipment { display: grid; gap: .75rem; }
.solar-lead { font-weight: 600; margin-bottom: .5rem; }
.solar-panel li:last-child { margin-bottom: 0; }
.solar-small-note, .solar-reference, .solar-curve-note { font-size: .875rem; line-height: 1.4; margin-top: .65rem; }
.solar-recommendation { margin-top: .65rem; font-weight: 600; }
.storage-capacity { display: inline-block; white-space: nowrap; }
.solar-photo .diagram-link img { max-height: 160px; }
.solar-curve .diagram-link img { width: auto; max-height: 125px; }
.solar-main .diagram-card figcaption small { display: block; color: var(--muted); font-size: .8125rem; margin-top: .15rem; }
.solar-incidence { margin-top: .75rem; }
.solar-incidence > p { margin-bottom: .55rem; }
.solar-angle-table { border-collapse: collapse; width: 100%; table-layout: fixed; margin-top: .55rem; background: white; font-size: 1rem; }
.solar-angle-table th, .solar-angle-table td { border: 1px solid #d5e0e1; padding: .3rem .2rem; text-align: center; overflow-wrap: anywhere; }
.solar-angle-table th:first-child { width: 26%; text-align: left; padding-left: .45rem; }
.solar-angle-table thead { background: #edf4f7; }
.solar-angle-table th { font-weight: 600; }
.solar-incidence .solar-curve-note { margin-bottom: 0; color: #465d63; }

/* Gleicher hellgrüner Footer auf allen Seiten */
.site-footer { background: var(--footer); color: var(--ink); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .65rem; }
.footer-identity { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.footer-emblem { width: 42px; height: auto; background: white; padding: 3px; border-radius: 3px; flex-shrink: 0; }
.footer-office { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.footer-office strong { font-size: .875rem; font-weight: normal; }
.footer-office span { font-size: 1.125rem; overflow-wrap: anywhere; }
.contact-list { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1.5rem; font-size: 1rem; }
.contact-list > div { display: flex; flex-direction: column; gap: .1rem; }
.contact-list dt { color: #446137; font-size: .875rem; }
.contact-list a { text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover, .contact-list a:focus-visible { color: #0056a8; text-decoration: underline; }

/* Bestehende Bildvergrößerung */
.image-dialog { width: min(96vw, 1200px); max-width: none; max-height: 94svh; border: 0; border-radius: 8px; padding: 0; box-shadow: 0 20px 80px #0005; background: white; }
.image-dialog::backdrop { background: #122d39d9; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.dialog-header h2 { font-size: 1.125rem; font-weight: 600; }
.close-dialog { border: 0; background: var(--canvas); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 4px; flex-shrink: 0; }
.image-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem 1rem; }
.image-controls button { min-width: 44px; min-height: 44px; padding: .5rem .9rem; border: 1px solid #b2c4c6; background: white; border-radius: 4px; }
.image-controls p { font-size: .875rem; color: var(--muted); }
.image-viewport { max-height: calc(94svh - 180px); overflow: auto; background: white; padding: 1rem; }
.enlarged-image { max-width: none; margin: auto; height: auto; }
.dialog-open { overflow: hidden; }

/* Mittlere Bildschirme: flexible Spalten statt enger Mindestbreiten */
@media (max-width: 1199px) {
  .page-width { width: calc(100% - 2rem); }
  .energy-columns { grid-template-columns: 180px minmax(0, 1fr) 260px; }
  .saving-columns { grid-template-columns: minmax(180px, .85fr) minmax(0, 1.2fr) minmax(260px, 1.2fr); }
  .pv-columns { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(210px, .9fr); }
  .pv-factors { grid-template-columns: 1fr; }
  .solar-columns { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.15fr) minmax(230px, 1fr); }
  .saving-gallery { grid-template-columns: 1fr; }
  .saving-gallery .diagram-link { height: 160px; }
  .topic-link { padding-inline: .5rem; font-size: .9375rem; gap: .4rem; }
}

/* Verbesserung 2: vertikale Zentrierung im Desktop-Raster */
@media (min-width: 1001px) {
  .home-page .main-layout { align-items: center; align-content: center; }
  .energy-main { display: flex; flex-direction: column; }
  .energy-columns { flex: 1; align-items: center; }
  .tips-blocks { align-items: center; }
}

/* Tablet: zwei Spalten und ausreichend große Bilder */
@media (max-width: 1000px) {
  .topic-links { gap: .45rem; }
  .topic-link { flex-direction: column; justify-content: center; text-align: center; font-size: .875rem; }
  .main-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .illustrations { grid-column: 1 / -1; grid-row: 1; }
  .influence-panel { grid-column: 1; }
  .funding-panel { grid-column: 2; }
  .energy-columns, .saving-columns, .pv-columns, .solar-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .energy-examples, .saving-examples { grid-column: 1 / -1; grid-row: 2; }
  .energy-data, .saving-loss { grid-column: 1; grid-row: 1; }
  .energy-optimization, .saving-measures { grid-column: 2; grid-row: 1; }
  .saving-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-examples { grid-column: 1 / -1; }
  .pv-examples .pv-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .solar-equipment { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips-investment { grid-column: 1 / -1; }
  .diagram-link img { max-height: 230px; }
  .home-page .diagram-link img { max-height: 400px; }
  .solar-curve .diagram-link img { max-height: 160px; }
  .energy-gallery .diagram-link { height: 220px; }
  .footer-inner { align-items: flex-start; }
  .contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; }
  .contact-list > div:last-child { grid-column: 1 / -1; }
}

/* Smartphone und hohe Textvergrößerung: normaler Seitenfluss, keine feste Höhe */
@media (max-width: 650px) {
  .page-width { width: calc(100% - 2rem); }
  .header-inner { padding-block: .8rem; }
  .energy-title { font-size: clamp(1.25rem, 5.5vw, 1.75rem); }
  .topic-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .topic-link { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 44px; padding: .6rem; }
  .topic-link:last-child { grid-column: 1 / -1; }
  .main-layout, .energy-columns, .saving-columns, .pv-columns, .tips-blocks, .solar-columns { display: flex; flex-direction: column; gap: 1.1rem; }
  .main-layout > *, .energy-columns > *, .saving-columns > *, .pv-columns > *, .tips-blocks > *, .solar-columns > * { width: 100%; }
  .illustrations { order: -1; }
  .energy-data, .saving-loss { order: 0; }
  .energy-examples, .saving-examples { order: 1; }
  .energy-optimization, .saving-measures { order: 2; }
  .energy-intro, .saving-goal, .pv-intro { text-align: left; }
  .energy-gallery, .saving-gallery, .pv-examples .pv-figures, .solar-equipment { grid-template-columns: minmax(0, 1fr); }
  .energy-gallery .diagram-link, .saving-gallery .diagram-link { height: auto; }
  .energy-gallery img, .saving-gallery .diagram-link img { width: auto; max-height: 260px; }
  .pv-examples .diagram-link img, .solar-photo .diagram-link img, .solar-curve .diagram-link img, .tips-cartoon .diagram-link img { max-height: 260px; }
  .home-page .diagram-link img { max-height: 320px; }
  .diagram-card figcaption { padding: .55rem .65rem; }
  .enlarge-link { min-height: 44px; }
  .solar-panel { padding: 1rem; }
  .footer-inner { flex-direction: column; gap: .9rem; padding-block: 1rem; }
  .contact-list { width: 100%; }
  .image-controls p { flex-basis: 100%; }
  .image-viewport { padding: .5rem; max-height: calc(94svh - 240px); }
}
@media (max-width: 360px) {
  .topic-links, .contact-list { grid-template-columns: 1fr; }
  .topic-link:last-child { grid-column: auto; }
  .solar-panel { padding: .75rem; }
  .storage-capacity { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .topic-link { transition: none; } }
@media print {
  body { display: block; background: white; color: black; }
  .site-header { border-top: 0; }
  .page-width { width: 100%; }
  .topic-navigation, .enlarge-link, .skip-link, .image-dialog, .topic-overviews { display: none; }
  .main-layout, .energy-columns, .saving-columns, .pv-columns, .solar-columns, .tips-blocks { display: block; }
  main section, main aside { margin-bottom: 1rem; }
  .diagram-card, .solar-panel { break-inside: avoid; }
  .site-footer { color: black; background: white; border-top: 1px solid #ccc; }
  .contact-list dt { color: black; }
}