/* =========================================================================
   seite-ratgeber.css  --  Anordnung der Ratgeber-Seiten nach den Entwuerfen
   des Kunden (Umbau R4, E9): Kosten (kosten-p1 bis p6), Foerderung
   (fo-rderung-p1 bis p7) und Uebersicht Solaranlage (Ticket-Bild t8-e1-2).
   Komponenten aus styles.css; hier nur die Anordnung. Nur Tokens aus
   theme.css. Geladen ueber include('partials/head', { pageCss: 'ratgeber' }).
   Desktop aus den Handy-Entwuerfen abgeleitet, gleiche Abschnitte und Texte:
   Karten paarweise nebeneinander (.ratgeber-raster), Tipp und Knopf in einer
   Zeile (.ratgeber-abschluss), lange Listen mit dem Titel links
   (.ratgeber-zwei).
   ========================================================================= */

/* --- Kopf: «Kurz gesagt», «Inhalt», Knopf (kosten-p1, fo-rderung-p1) und
       die Link-Karten der Uebersicht (t8-e1-2) ------------------------------- */
.kopf__side > * + * { margin-top: var(--gap); }
/* R12 (Steven ueber Rida 2026-10-29 17:19 «Kurz gesagt bitte ausblenden bei mobile das man direkt inhalt sieht»): unter 64rem
   wie die uebrigen Handy-Regeln der Startseite; «Inhalt» rueckt an die Stelle, Desktop unveraendert */
@media (max-width: 63.99rem) { .kurz { display: none; } .kurz + * { margin-top: 0; } }
/* Desktop: Titel oben neben «Kurz gesagt», nicht mittig zur langen rechten Spalte */
.kopf__inner--seite { align-items: start; }

/* --- Takt in den Sections: Inhalt nach dem Kopfblock mit --gap ------------ */
.ratgeber-teil .page > * + * { margin-top: var(--gap); }
.ratgeber-teil .page > .kopfblock + * { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.ratgeber-teil .page > .fussnote { margin-top: 0.75rem; }
.ratgeber-teil .fussnote { text-align: left; }
.ratgeber-teil .infobox { max-width: 46rem; }

.ratgeber-raster, .ratgeber-stapel, .ratgeber-abschluss { display: grid; gap: var(--gap); align-content: start; }
.ratgeber-raster { grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
/* Betrag rechts; reicht die Breite nicht (320, EN), rutscht er rechtsbuendig in die naechste Zeile */
.ratgeber-teil .werte__zeile { flex-wrap: wrap; }
.ratgeber-teil .werte dd { margin-left: auto; }
/* «Häufig gewählt» sitzt auf der Kante: am Handy etwas Luft darueber (kosten-p2) */
@media (max-width: 63.99rem) { .icon-karte--hervor { margin-top: 0.5rem; } }
/* Am Handy knapper wie im Entwurf (kosten-p2 bis p5): so stehen kWp und Preis in
   einer Zeile und die Zeilen des Rechenbeispiels brechen nicht (kosten-p4). */
@media (max-width: 47.99rem) {
  .ratgeber-teil .icon-karte { padding: 0.875rem; column-gap: 1rem; }
  .ratgeber-teil .icon-kachel--gross { width: 3.75rem; height: 3.75rem; }
  .ratgeber-teil .icon-karte__kopf { column-gap: 0.5rem; }
  .ratgeber-teil .icon-karte__preis--gross { font-size: 1.0625rem; }
  .ratgeber-teil .karte { padding: 1rem; }
  .ratgeber-teil .werte__zeile { column-gap: 0.75rem; }
  .ratgeber-teil .werte--rechnung dt { font-size: var(--fs-klein); }
  .ratgeber-teil .infobox { padding: 1rem; column-gap: 1rem; }
  /* «Inhalt» und Links in den Kantonskarten einzeilig wie im Entwurf (fo-rderung-p1, p3) */
  .inhalt__link, .ratgeber-teil .karte .textlink { font-size: 0.9375rem; }
  .inhalt { padding-inline: 1rem; }
  .inhalt__link { gap: 0.75rem; }
  .ratgeber-teil .formel { padding: 1rem; }
  .ratgeber-teil .formel__wert { font-size: 1.125rem; }
  .ratgeber-teil .werte__zeile--summe dt { font-size: var(--fs-h3); }
  .ratgeber-teil .werte__zeile--summe dd { font-size: 1.25rem; }
}

/* R10: gleiche Ziffernbreite, damit rechtsbuendige Preise in Nachbarkarten auf einer Kante enden */
.icon-karte__preis--gross { font-variant-numeric: tabular-nums; }

/* R10: Text der Pillen-Kicker steht auf der Kante des Kartentextes darunter (Rand 1px + Innenabstand 1.25rem) */
@media (min-width: 48rem) {
  .ratgeber-teil .kicker--pille { padding-inline: calc(1.75rem + 1px); }
  #groesse .kicker--pille, #extras .kicker--pille, #lohnt .kicker--pille { padding-inline: calc(1.25rem + 1px); }
  #groesse .infobox, #extras .infobox, #lohnt .infobox { padding-inline: calc(1.25rem + 1px); }
}

/* Karten mit Haken-Liste, Absaetzen oder Nummern (fo-rderung-p2 bis p6) */
.ratgeber-teil .karte .textlink { margin-top: 1rem; }
.ratgeber-absaetze { margin: 0; padding: 0; list-style: none; }
.ratgeber-absaetze li { padding-block: 1rem; }
.karte > .ratgeber-absaetze:first-child li:first-child { padding-top: 0; }
.ratgeber-absaetze li:last-child { padding-bottom: 0; }
.ratgeber-absaetze li + li { border-top: 1px solid var(--linie); }
.ratgeber-absaetze .h3 + p { margin-top: 0.25rem; }
.ratgeber-teil .nummern.karte { padding-block: 0.25rem; }
.nummern__item .h3 + p { margin-top: 0.25rem; }

/* --- Jetzt starten als gerundete Flaeche (fo-rderung-p7): am Handy bis an
       die Kanten und oben gerundet, ab 48rem in der Seitenbreite ------------ */
.ratgeber-schluss .schluss--karte { border-radius: var(--r-gross) var(--r-gross) 0 0; }
@media (min-width: 48rem) {
  .ratgeber-schluss { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: 0 var(--gutter) var(--pad-eng); }
  .ratgeber-schluss .schluss--karte { border-radius: var(--r-gross); }
}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width: 64rem) {
  .ratgeber-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ratgeber-raster > .ratgeber-punkte { align-self: start; }
  .ratgeber-stapel > .knopf { justify-self: start; }
  .ratgeber-abschluss { grid-template-columns: minmax(0, 46rem) auto; justify-content: start; align-items: center; column-gap: clamp(2rem, 4vw, 3.5rem); }

  /* Titel links (klebt), Inhalt rechts (kosten-p5, p6, fo-rderung-p4, p6, p7) */
  .ratgeber-zwei { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .ratgeber-zwei > .kopfblock { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: calc(var(--header-h) + 2rem); }
  .ratgeber-zwei > :not(.kopfblock) { grid-column: 2; }
  .ratgeber-teil .ratgeber-zwei > .kopfblock + * { margin-top: 0; }
  .ratgeber-zwei > .knopf { justify-self: start; }
  .ratgeber-zwei .ratgeber-abschluss { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* --- R6 (Mail Steven 2026-10-26: «oberen Teile der Website auf desktop ist bisschen leer», Ratgeber
       «fast nur Text und kleine Icons [...] paar Elemente bildlich visualisieren, halt ähnlich wie auf der
       Startseite»): Foto im Kopf, Fotos im runden Rahmen, Fotos in Karten und neben Titeln ---------------- */

/* Foto im Kopf (page-head fotoNeben): am Handy nach «Inhalt» und Knopf bis an die Kanten wie bisher,
   ab 64rem links unter Titel und Lead, so hoch wie die rechte Spalte (dort war die Flaeche leer) */
.kopf--foto-neben .kopf__foto { margin: 0 calc(-1 * var(--gutter)); }
@media (min-width: 64rem) {
  .kopf--foto-neben { padding-bottom: clamp(2rem, 4.5vw, 4rem); }
  .kopf--foto-neben .kopf__inner--seite { grid-template-rows: auto 1fr; row-gap: 2.5rem; }
  .kopf--foto-neben .kopf__text { grid-column: 1; grid-row: 1; }
  .kopf--foto-neben .kopf__side { grid-column: 2; grid-row: 1 / span 2; }
  .kopf--foto-neben .kopf__foto { grid-column: 1; grid-row: 2; align-self: stretch; height: auto; min-height: 15rem; margin: 0; overflow: hidden; border-radius: var(--r-gross); }
  .kopf--foto-neben .kopf__foto::after { content: none; }
  .kopf--foto-neben .kopf__foto img { position: absolute; inset: 0; }
  /* Uebersicht: die vier Link-Karten fuellen die Hoehe von Titel, Lead und Foto */
  .kopf__side:has(> .uebersicht-karten) { align-self: stretch; }
  .uebersicht-karten { height: 100%; grid-auto-rows: 1fr; }
  .uebersicht-karten .link-karte { height: 100%; }
}

/* Foto neben dem Titel einer Section (links, klebt am Desktop mit dem Titel) oder in der Spalte */
.ratgeber-foto { position: relative; margin-top: 1.75rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-gross); }
.ratgeber-foto img, .ratgeber-foto .foto-platzhalter { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.ratgeber-foto--breit { margin-top: 0; aspect-ratio: 16 / 10; }

/* --- R8 Paket 1 (Rida 2026-10-27 20:23 «bilder verwenden wo auch zum thema passt», «das mit den
       KI-Berechnungen so grafikmaessig abzeichnen»): Inhalt mit Symbolen, Faustformel mit Zeichnung,
       Balken, «Wichtig zu wissen», Steuer-Stationen, Einspeise-Szene mit aufklappbaren Gruppen ------- */
.grafik { display: block; width: 100%; height: auto; }

/* «Inhalt» mit Symbol im hellgruenen Kreis (neu.pdf S. 2) */
.inhalt--icons .inhalt__link { gap: 0.875rem; min-height: 4.25rem; }
.inhalt--icons .inhalt__text { flex: 1; min-width: 0; }
/* wie im Entwurf neu.pdf (Rida 2026-10-27): dunkelblaue Symbole in kleineren hellen Kreisen; gilt fuer /kosten und /foerderung gleich
   (Steven ueber Rida 2026-10-29 «Und inhalt sollte einheitlich aussehen») */
.inhalt--icons .icon-kreis--klein { flex: none; width: 2.5rem; height: 2.5rem; background: var(--mint); color: var(--marine-2); }
.inhalt--icons .icon-kreis--klein .icon { width: 1.3rem; height: 1.3rem; color: var(--marine-2); }

/* Faustformel mit Haus und Muenzen rechts */
.formel--grafik { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); align-items: end; gap: 0.75rem; padding-bottom: 0; overflow: hidden; }
.formel--grafik > figcaption { align-self: center; padding-bottom: 1.25rem; }
.formel--grafik .grafik { max-width: 22rem; justify-self: end; }
@media (min-width: 48rem) { .formel--grafik { padding-inline: calc(1.75rem + 1px) 1.5rem; } .formel--grafik .grafik { max-width: 20rem; } }
@media (max-width: 47.99rem) { .ratgeber-teil .formel--grafik { padding: 1rem 0.75rem 0 1rem; } }

/* «So viel zahlt der Bund»: Balken je Zeile, Laenge = kWp von 30 (nur Zeichnung, die Zahl steht im Text) */
.werte--balken .werte__zeile { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; column-gap: 0.875rem; }
.werte--balken .werte__zeile::before, .werte--balken .werte__zeile::after { content: ''; grid-column: 2; grid-row: 1; height: 0.625rem; border-radius: 999px; }
.werte--balken .werte__zeile::before { background: var(--linie); }
.werte--balken .werte__zeile::after { width: var(--anteil); background: var(--gruen); }
/* Laenge aus data-kwp (von 30), weil die CSP Inline-Styles blockt */
.werte--balken [data-kwp="10"] { --anteil: 33%; } .werte--balken [data-kwp="15"] { --anteil: 50%; }
.werte--balken [data-kwp="20"] { --anteil: 67%; } .werte--balken [data-kwp="25"] { --anteil: 83%; }
/* Bewegung (styles.css 23): die Balken laufen nacheinander auf ihren Wert, wenn die Tabelle ins Bild kommt (data-inview) */
@media (prefers-reduced-motion: no-preference) {
  .werte--balken .werte__zeile::after { transform-origin: left center; transition: transform 1500ms var(--ease-auflegen) calc(220ms + var(--z, 0ms)); }
  .werte--balken .werte__zeile:nth-child(2)::after { --z: 180ms; }
  .werte--balken .werte__zeile:nth-child(3)::after { --z: 360ms; }
  .werte--balken .werte__zeile:nth-child(n+4)::after { --z: 540ms; }
  .js .werte--balken[data-inview]:not(.is-in) .werte__zeile::after { transform: scaleX(0); }
}
.werte--balken dt { grid-column: 1; grid-row: 1; }
.werte--balken dd { grid-column: 3; grid-row: 1; }
@media (max-width: 47.99rem) { .werte--balken .werte__zeile { grid-template-columns: 3.25rem minmax(0, 1fr) auto; column-gap: 0.625rem; } .ratgeber-teil .werte--balken dd { font-size: 0.9375rem; } }

/* «Wichtig zu wissen»: Symbol im Kreis, Titel, Text */
.karte--wichtig { background: var(--bg-hell); }
.symbol-zeilen { display: grid; margin: 0; padding: 0; list-style: none; }
.symbol-zeilen li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding-block: 0.875rem; }
.symbol-zeilen li + li { border-top: 1px solid var(--linie); }
.symbol-zeilen li:last-child { padding-bottom: 0; }
.symbol-zeilen .h3 { margin: 0; }
.symbol-zeilen p { margin-top: 0.125rem; }
.karte--wichtig .karte__titel { margin-bottom: 0.25rem; }
.ratgeber-foto--flach { aspect-ratio: 2 / 1; }
/* R10: Steuern am Desktop, das Foto fuellt die linke Spalte bis zur Unterkante der rechten (vorher rund 350px leer unter dem Foto), ohne mitzulaufen */
@media (min-width: 64rem) {
  #steuern .ratgeber-zwei > .kopfblock { position: static; align-self: stretch; display: flex; flex-direction: column; }
  #steuern .ratgeber-foto--flach { flex: 1 1 auto; min-height: 14rem; aspect-ratio: auto; }
}

/* Steuern: drei Stationen mit Pfeilen ueber dem Haus (steuern.pdf) */
.stationen { padding: 1.5rem 1.25rem 0.5rem; border-radius: var(--r-gross); background: var(--mint-hell); box-shadow: inset 0 0 0 1px var(--mint-2); }
.stationen__liste { display: grid; align-items: start; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.station { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.station__text { padding: 0.75rem 1rem; border-radius: var(--r-karte); background: #fff; box-shadow: var(--schatten); }
.station__text p { margin: 0; font-size: var(--fs-klein); }
.station__text .station__titel { color: var(--marine); font: 800 1rem/1.3 var(--font-titel); }
.station:not(:last-child)::before { content: ''; position: absolute; left: calc(2.625rem - 1px); top: 100%; width: 2px; height: 1.25rem; margin-top: 0.25rem; background: var(--gruen); }
.station:not(:last-child)::after { content: ''; position: absolute; left: calc(2.625rem - 4px); top: calc(100% + 1.25rem); width: 0.5rem; height: 0.5rem; border: solid var(--gruen); border-width: 0 2px 2px 0; rotate: 45deg; }
.stationen .grafik { max-width: 20rem; margin: 0.5rem auto 0; }
@media (min-width: 40rem) and (max-width: 63.99rem), (min-width: 75rem) {
  .stationen__liste { --spalt: 2.5rem; --r: 2.625rem; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); }
  .station { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 0.75rem; }
  .station__text { width: 100%; }
  .station:not(:last-child)::before { left: calc(50% + var(--r) + 0.5rem); top: var(--r); width: calc(100% + var(--spalt) - 2 * var(--r) - 1rem); height: 2px; margin: -1px 0 0; }
  .station:not(:last-child)::after { left: calc(150% + var(--spalt) - var(--r) - 1.2rem); top: calc(var(--r) - 0.25rem); }
  .station--2 { margin-top: -0.75rem; }
}

/* Einspeisung: Szene mit Pfeilen, Beschriftung als HTML (am Handy als Liste mit Farbpunkt) */
.szene { margin: 0; padding: 1rem; border-radius: var(--r-gross); background: var(--mint-hell); box-shadow: inset 0 0 0 1px var(--mint-2); }
.szene__chips { display: grid; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.szene__chip { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.875rem; border-radius: 999px; background: #fff; color: var(--marine); font-weight: 700; font-size: var(--fs-klein); box-shadow: var(--schatten); }
.szene__chip::before { content: ''; flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--gruen); }
.szene__chip--sonne::before { background: #F5B731; }
.szene__chip--nachbarn::before { background: #2F7DD1; }
.szene__chip--netz::before { background: #E9A21C; }
@media (min-width: 40rem) {
  .szene { position: relative; padding: 0; overflow: hidden; }
  .szene__chips { display: block; margin: 0; }
  .szene__chip { position: absolute; width: max-content; max-width: 30%; padding: 0.375rem 0.75rem; font-size: 0.8125rem; line-height: 1.25; }
  .szene__chip--sonne { left: 25%; top: 6%; }
  .szene__chip--nachbarn { left: 61%; top: 2%; }
  .szene__chip--selbst { left: 3%; top: 74%; }
  .szene__chip--netz { left: 57%; top: 83%; }
}
@media (min-width: 64rem) { .szene__chip { font-size: 0.9375rem; padding: 0.5rem 0.875rem; } }

/* Zwei Gruppen mit aufklappbaren Punkten (details/summary, ohne JS) */
.gruppen { align-items: start; }
.gruppe { padding: 1rem; border-radius: var(--r-gross); background: var(--mint-hell); box-shadow: inset 0 0 0 1px var(--mint-2); }
.gruppe--2 { background: var(--bg-hell); box-shadow: inset 0 0 0 1px var(--linie); }
.gruppe__kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.875rem; align-items: center; padding: 0.5rem 0.5rem 1rem; }
.gruppe__kopf p { grid-column: 2; margin: 0; font-size: var(--fs-klein); }
.gruppe__nr { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--mint-2); color: var(--gruen-dunkel); font: 800 1.125rem/1 var(--font-titel); }
.gruppe--2 .gruppe__nr { background: var(--himmel); color: var(--marine-2); }
.gruppe__titel { margin: 0; color: var(--marine); font: 800 var(--fs-h3)/1.3 var(--font-titel); letter-spacing: -0.01em; }
.detail { border-radius: var(--r-karte); background: #fff; box-shadow: var(--schatten); }
.detail + .detail { margin-top: 0.625rem; }
.detail__kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.875rem; align-items: center; padding: 0.75rem 1rem; cursor: pointer; list-style: none; }
.detail__kopf::-webkit-details-marker { display: none; }
.detail__kopf .icon-kreis { width: 2.75rem; height: 2.75rem; }
.gruppe--2 .detail__kopf .icon-kreis { background: var(--himmel); color: var(--marine-2); }
.detail__titel { color: var(--marine); font: 800 1rem/1.3 var(--font-titel); }
.detail__zeichen { display: grid; color: var(--gruen); transition: transform var(--dur) var(--ease); }
.detail__zeichen .icon { width: 1.25rem; height: 1.25rem; }
.detail[open] .detail__zeichen { transform: rotate(180deg); }
.detail__text { margin: 0 1rem; padding: 0 0 1rem 3.625rem; font-size: var(--fs-klein); }
.detail__text p + p { margin-top: 0.5rem; }
@media (max-width: 47.99rem) { .detail__text { padding-left: 0; margin-inline: 1rem; border-top: 1px solid var(--linie); padding-top: 0.75rem; } }
@media (min-width: 48rem) { .gruppe { padding: 1.25rem; } }
.symbol-zeilen .h3 { font-size: 1.0625rem; }
.formel--grafik .grafik { max-width: 26rem; }
.werte--balken dt { white-space: nowrap; }
@media (max-width: 47.99rem) { .werte--balken .werte__zeile { grid-template-columns: 3.75rem minmax(0, 1fr) auto; } }
@media (min-width: 40rem) and (max-width: 63.99rem), (min-width: 75rem) { .station:not(:last-child)::after { rotate: -45deg; width: 0.625rem; height: 0.625rem; top: calc(var(--r) - 0.3125rem); left: calc(150% + var(--spalt) - var(--r) - 1.25rem); } }