/* =========================================================================
   seite-region.css  --  Anordnung der Regionen-Seiten (views/region.ejs:
   Zuerich, Winterthur, Thurgau, Frauenfeld) nach solaranlage-zu-rich-p1
   bis p6 und solaranlage-thurgau-p1 bis p6 (Umbau R4, E9). Komponenten aus
   styles.css; hier nur, was es nur auf diesen Seiten gibt. Nur Tokens.
   .seite-region--tg = Thurgauer Spielart (Karten-Text mittig, Schritte mit
   Pfeil statt Kartenrahmen).
   Desktop aus den Handy-Entwuerfen abgeleitet: gleiche Abschnitte und
   Texte, links Titel und Knopf, rechts Karte, Liste oder Fragen.
   ========================================================================= */

/* Icons in den Kacheln etwas groesser als im Standard (Entwuerfe p2 bis p5) */
.seite-region .icon-kachel .icon, .seite-region .icon-kreis .icon { width: 56%; height: 56%; }

/* --- Kopf (p1, R8): Foto der Region hinter Titel und Text, PLZ-Karte darauf --------------------------
   Rida 2026-10-27 20:23, Entwurf kt-zuerich.pdf: Foto ueber die ganze Breite, weicher heller Verlauf hinter dem Text,
   Pille mit Ortsmarker. Handy: Titel oben, darunter die weisse Karte (Lead, PLZ-Feld, Knopf); E18: PLZ-Feld und Knopf
   liegen bei 590 CSS-Pixeln im ersten Bildschirm. Desktop: Titel und Lead links, Karte mit PLZ-Feld rechts unten. */
.seite-region--tg .plz-form input { border-radius: var(--r-rund); }   /* Thurgau p1: PLZ-Feld als Pille */
.region-kopf { position: relative; isolation: isolate; overflow: hidden; }
.region-kopf__bild { position: absolute; inset: 0; z-index: -1; margin: 0; }
.region-kopf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--bild-x, 50%) 50%; }
.seite-region--zuerich { --bild-x: 40%; }
.seite-region--winterthur { --bild-x: 45%; }
.seite-region--thurgau, .seite-region--frauenfeld { --bild-x: 50%; }
/* Handy: Schleier nur schwach wie auf der Startseite (R9, Rida 2026-10-28 «unnötig weiss», «sieht aus wie nebel», «Ein klares bild bitte»);
   die Lesbarkeit traegt der helle Schein direkt an den Buchstaben */
.region-kopf__bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(255 255 255 / 0.42) 0, rgb(255 255 255 / 0.2) 14rem, rgb(255 255 255 / 0) 21rem); }
.region-kopf__page { display: grid; gap: clamp(2rem, 14vw, 4.5rem); padding-block: 1.25rem 1.25rem; }
.region-kopf__pille { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.875rem; }
.region-kopf__pille .icon { width: 1.125rem; height: 1.125rem; flex: none; }
.region-kopf .h1, .region-kopf__pille { text-shadow: 0 0 0.08em #fff, 0 0 0.22em rgb(255 255 255 / 0.9), 0 0 0.45em rgb(255 255 255 / 0.6); }
.region-kopf__karte { padding: 1.125rem 1.25rem 1rem; border-radius: var(--r-gross); background: #fff; box-shadow: var(--schatten-hoch); }
.region-kopf__lead { margin: 0; font-size: 1rem; line-height: 1.45; }
.region-kopf__form .plz-form { max-width: none; margin-top: 0.875rem; gap: 0.625rem; }
.region-kopf__form input[type="text"] { background: var(--bg-hell); }
.kopf-vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; color: var(--marine); text-align: center; font-size: clamp(0.75rem, 3.4vw, var(--fs-klein)); font-weight: 500; line-height: 1.25; }
.kopf-vorteile li { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; text-wrap: balance; }
.kopf-vorteile .icon { width: 1.25rem; height: 1.25rem; color: var(--gruen); }
@media (max-width: 47.99rem) {
  .region-kopf__form .knopf { gap: 0.5rem; padding-inline: 0.75rem; font-size: clamp(0.8125rem, 3.6vw, 1.0625rem); white-space: nowrap; }
  .region-kopf__form .knopf .icon { flex: none; width: 1.125rem; height: 1.125rem; }
}
@media (min-width: 48rem) {
  .region-kopf__page { padding-block: 2.5rem 2.5rem; gap: 3rem; }
  .region-kopf__karte { padding: 1.5rem 1.75rem 1.25rem; }
}
/* R12 (Steven ueber Rida 2026-10-29 17:19, Entwurf der Zuerich-Seite am Handy: «So sieht das formular viel besser aus statt in dieser box»,
   «Bei allen Regionen»): unter 64rem keine weisse Karte mehr. Wie der Hero der Startseite seit R11 (.r6-hero): auf Weiss Pille, Titel,
   Lead, PLZ-Feld, Knopf und die drei Vorteile (Symbol im mintfarbenen Kreis), darunter das Regionsfoto klar mit geschwungener Oberkante,
   ohne Schleier (E21). Das Foto hinter dem Text trug nur auf Zuerich und Thurgau, auf Winterthur lag der Text auf dunklen Haeusern
   (Kontrast 1.0). Desktop (Foto bis an alle Kanten, Karte rechts unten) unveraendert. */
/* R12b (Rida 17:55 mit Stevens Entwurf: «Nur noch den Hintergrund»): Himmel hinter dem Text statt Weiss, das Regionsfoto
   klar darunter und weich in den Himmel auslaufend (Maske, kein Schleier ueber dem Foto, R9 «Ein klares bild bitte»). */
@media (max-width: 63.99rem) {
  .region-kopf { display: flex; flex-direction: column; background: linear-gradient(180deg, #f3f8fc 0, #dcecf8 100%); }
  .region-kopf__bild { position: relative; inset: auto; z-index: -1; order: 1; height: clamp(17rem, 82vw, 30rem); margin-top: -3.5rem; }
  .region-kopf__bild img { object-position: var(--bild-x, 50%) 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42%); mask-image: linear-gradient(180deg, transparent 0, #000 42%); }
  .region-kopf__bild::after { content: none; }
  .region-kopf .h1, .region-kopf__pille { text-shadow: none; }
  .region-kopf__page { gap: 1rem; padding-bottom: 0; }
  .region-kopf__karte { padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .kopf-vorteile { margin-top: 1.25rem; }
  .kopf-vorteile .icon { box-sizing: content-box; padding: 0.5rem; border-radius: 50%; background: var(--mint); }
  /* Abnahme-Check 2026-11-01: das Foto beginnt 3.5rem vor dem Ende der Vorteile. Mit einzeiligen Texten (EN, Tablet) rutschte die
     Zeile ganz aufs Foto (Haeuser); die Vorteile halten darum immer zwei Textzeilen hoch (Kreis 2.25rem, Abstand 0.375rem,
     2 x 1.25em) und liegen wie bei DE auf dem Himmel. */
  .kopf-vorteile li { min-height: calc(2.625rem + 2.5em); }
}
@media (min-width: 64rem) {
  .region-kopf { min-height: min(calc(100svh - var(--header-h)), 46rem); display: flex; }
  /* Foto bis an alle Kanten, links nur ein schwacher Schleier (R9: kein Nebel); Schein an Titel, Pille und Lead */
  .region-kopf__bild::after { background: linear-gradient(90deg, rgb(255 255 255 / 0.34) 0%, rgb(255 255 255 / 0.26) 32%, rgb(255 255 255 / 0.08) 46%, rgb(255 255 255 / 0) 54%); }
  .region-kopf .h1, .region-kopf__pille { text-shadow: 0 0 0.04em #fff, 0 0 0.1em #fff, 0 0 0.22em rgb(255 255 255 / 0.9), 0 0 0.5em rgb(255 255 255 / 0.55); }
  .region-kopf .akzent { color: var(--gruen-dunkel); }
  .kopf-vorteile { font-size: 0.8125rem; }
  .region-kopf__page { align-self: stretch; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-rows: auto 1fr; column-gap: clamp(2rem, 4vw, 4rem); row-gap: 1.25rem; padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
  .region-kopf__text { grid-column: 1; grid-row: 1; align-self: start; }
  /* R9: Lead in der weissen Karte rechts unten wie am Handy und auf der Startseite, links bleibt das Foto frei */
  .region-kopf__karte { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; width: 100%; max-width: 30rem; padding: 1.5rem; }
}

/* --- Solarfirmen (p2): Karte, Orte, drei Karten nebeneinander ------------ */
.region-firmen__karte { padding: 0.75rem 0.75rem 0.5rem; border-radius: var(--r-karte); background: var(--bg-hell); }
/* Thurgau: Weinfelden, Amriswil und Romanshorn liegen eng; Namen wie im Entwurf p2 unter den
   Pin (Frauenfeld, Weinfelden, Amriswil) bzw. rechts davon (Arbon). Reihenfolge = PINS.thurgau in
   region.ejs, Masse in Karten-Einheiten (100 m). ponytail: feste Versaetze, bei anderen Pins neu setzen. */
.seite-region--thurgau .karte-ch__ort:nth-of-type(2) { text-anchor: middle; transform: translate(-14px, 40px); }
.seite-region--thurgau .karte-ch__ort:nth-of-type(3) { text-anchor: middle; transform: translate(-14px, 40px); }
.seite-region--thurgau .karte-ch__ort:nth-of-type(4) { text-anchor: middle; transform: translate(14px, 40px); }
.seite-region--thurgau .karte-ch__ort:nth-of-type(6) { text-anchor: start; transform: translate(29px, 0); }
.region-firmen__orte { margin-top: 1rem; }
.region-firmen__orte li { flex: 0 0 auto; text-align: center; }
/* drei Karten auch am Handy nebeneinander (Entwurf p2; A2: nie drei gleiche Karten untereinander) */
.region-vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
/* Lange Woerter tragen weiche Trennstriche im Text (locales); break-word faengt den Rest ab. */
.region-vorteile__item { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem 0.625rem; border: 1px solid var(--linie); border-radius: var(--r-karte); background: #fff; overflow-wrap: break-word; }
.region-vorteile .icon-kachel { align-self: flex-start; width: 3rem; height: 3rem; }
/* R7: Foto im runden Rahmen mit Icon-Abzeichen statt der Kachel (bild-kreis in styles.css) */
.region-vorteile .bild-kreis { align-self: flex-start; margin-bottom: 0.25rem; }
.region-vorteile__titel { color: var(--marine); font: 700 0.9375rem/1.25 var(--font-titel); }
.region-vorteile__text { color: var(--text); font-size: 0.8125rem; line-height: 1.45; }
.seite-region--tg .region-vorteile__item { text-align: center; }
.seite-region--tg .region-vorteile .icon-kachel, .seite-region--tg .region-vorteile .bild-kreis { align-self: center; }
.region-firmen__knopf { margin-top: 1.5rem; }
/* R10: am Handy mehr Breite fuer die drei Karten (Text brach auf zwei Woerter je Zeile), Reihe 10px ueber den Rand wie die Offerten der Startseite */
@media (max-width: 29.99rem) {
  .region-vorteile { gap: 0.375rem; margin-inline: -0.625rem; }
  .region-vorteile__item { padding-inline: 0.5rem; }
  .region-vorteile__text { font-size: 0.75rem; }
  .region-vorteile__titel { font-size: clamp(0.75rem, 3.5vw, 0.9375rem); }
}
@media (min-width: 48rem) {
  .region-vorteile { gap: var(--gap); }
  .region-vorteile__item { gap: 0.75rem; padding: 1.5rem 1.25rem; }
  .region-vorteile .icon-kachel { width: 3.5rem; height: 3.5rem; }
  .region-vorteile__titel { font-size: var(--fs-h3); }
  .region-vorteile__text { font-size: var(--fs-klein); }
}
/* Desktop: links Titel, Orte, drei Karten und Knopf; rechts die Karte (Zuerich hoch, Thurgau breit) */
@media (min-width: 64rem) {
  .region-firmen__page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "kopf karte" "orte karte" "vorteile karte" "knopf karte"; gap: 0 clamp(3rem, 5vw, 5rem); align-items: start; }
  .region-firmen__kopf { grid-area: kopf; }
  .region-firmen__karte { grid-area: karte; align-self: center; margin-top: 0 !important; padding: 1.25rem 1.25rem 0.75rem; }
  .region-firmen__orte { grid-area: orte; margin-top: 2rem; }
  .region-vorteile { grid-area: vorteile; margin-top: 1.5rem; }
  .region-vorteile__item { padding: 1.25rem 1rem; }
  .region-firmen__knopf { grid-area: knopf; margin-top: 2rem; }
  /* Thurgau: die Karte ist breit und flach, deshalb neben Titel und Orten, die drei Karten darunter ueber die ganze Breite */
  .seite-region--tg .region-firmen__page { grid-template-rows: auto; grid-template-areas: "kopf karte" "orte karte" "vorteile vorteile" "knopf knopf"; }
  .seite-region--tg .region-vorteile { margin-top: 3rem; }
  .seite-region--tg .region-firmen__knopf { display: flex; justify-content: center; margin-top: 2.5rem; }
}

/* --- Kosten (p3): vier Karten, die letzte in Mint ------------------------ */
.region-kosten__liste .icon-karte { align-items: center; }
.region-kosten__tipp { border-color: var(--mint-2); background: var(--mint); }
.region-kosten__tipp .icon-kachel { background: var(--mint-hell); }
.region-kosten__fuss { display: grid; justify-items: start; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 64rem) {
  .region-kosten__page { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "kopf liste" "fuss liste"; gap: 0 clamp(3rem, 6vw, 6rem); align-items: start; }
  .region-kosten__kopf { grid-area: kopf; }
  .region-kosten__liste { grid-area: liste; margin-top: 0 !important; }
  .region-kosten__fuss { grid-area: fuss; margin-top: 2rem; }
}

/* --- Foerderung und Bewilligung (p4): zwei Bloecke mit Zeilen, Hinweis --- */
.region-foerderung__bloecke { display: grid; gap: 1rem; }
.region-block { padding: 1.25rem 1.25rem 0.375rem; }
/* R7: Foto oben bis an die Kanten des Blocks (karte--mit-bild in styles.css; Innenabstand 1.25rem, am Desktop 1.75rem 2rem) */
.region-block .karte__bild { margin: -1.25rem -1.25rem 1.25rem; }
/* Blocktitel am Handy deutlich groesser als die Zeilentitel (Entwurf p4), am Desktop die h3-Stufe */
.region-block .karte__titel { font-size: 1.375rem; }
@media (min-width: 64rem) { .region-block .karte__titel { font-size: var(--fs-h3); } .region-block .karte__bild { margin: -1.75rem -2rem 1.5rem; } }
.region-block .karte__titel + * { margin-top: 0.25rem; }
.region-block .zeilen__item { padding-block: 0.875rem; }
.region-block .icon-kreis { width: 3.5rem; height: 3.5rem; }
.region-block__titel { color: var(--marine); font: 700 1.0625rem/1.3 var(--font-titel); }
.region-foerderung__fuss { display: grid; gap: 1.25rem; margin-top: 1rem; }
/* Hinweis-Text auf derselben Kante wie die Zeilen der Bloecke darueber (Rand 1px, Innenabstand, Icon 3.5rem) */
.region-foerderung__fuss .infobox { padding-left: calc(1.25rem + 1px); }
.region-foerderung__fuss .infobox .icon-kachel { width: 3.5rem; height: 3.5rem; }
@media (min-width: 64rem) {
  .region-foerderung__bloecke { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .region-block { padding: 1.75rem 2rem 0.75rem; }
  .region-block__titel { font-size: 1.0625rem; }
  .region-foerderung__fuss { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; margin-top: var(--gap); }
  .region-foerderung__fuss .infobox { padding-left: calc(2rem + 1px); }
}

/* --- Bildband vor dem Ablauf (R7): Vollbreite bis an die Kanten, nur Bild -------- */
.region-band { height: clamp(10rem, 26vw, 20rem); margin: 0; overflow: hidden; }
.region-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }

/* --- Ablauf (p5): Zuerich Karten (styles.css schritte--karten), Thurgau mit Pfeil (styles.css schritte--pfeil) --- */
.schritte--karten .icon-kachel { width: 3.75rem; height: 3.75rem; }
.region-ablauf__knopf { margin-top: 2rem; }
@media (min-width: 64rem) {
  .schritte--karten .icon-kachel { width: 4.25rem; height: 4.25rem; }
  .region-ablauf__page { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "kopf liste" "knopf liste"; gap: 0 clamp(3rem, 6vw, 6rem); align-items: start; }
  .region-ablauf__kopf { grid-area: kopf; }
  .region-ablauf__liste { grid-area: liste; margin-top: 0 !important; }
  .region-ablauf__knopf { grid-area: knopf; }
}

/* --- Fragen (p6 oben): Plus im Mint-Kreis, die erste offen ---------------- */
/* Fragen folgen direkt auf den Ablauf (dessen Abstand unten reicht): oben knapp */
.region-fragen { padding-top: clamp(1.5rem, 3vw, 3rem); padding-bottom: var(--pad-eng); }
.region-fragen .faq__antwort { padding-top: 0; border-top: 0; }
@media (min-width: 64rem) {
  .region-fragen__page { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .region-fragen__kopf { position: sticky; top: calc(var(--header-h) + 2rem); }
  .region-fragen__liste { margin-top: 0 !important; }
}

/* --- Jetzt starten (p6 unten): Text auf ruhiger Flaeche, Foto klar darunter (R10, styles.css .schluss) ------- */

/* --- Bewegung («auflegen», theme.css und styles.css 23) -----------------------
   Kopf wie die Startseite: das Foto setzt sich, die Pille legt sich, der Titel
   steigt (partials/akzent zeilen), am Desktop legt sich die Karte mit dem PLZ-Feld
   von rechts auf das Foto. Karte der Region: Gebiet und Pins in styles.css 23,
   danach legen sich die Orte als Pillen nacheinander hin. Endzustand unveraendert. */
@media (prefers-reduced-motion: no-preference) {
  .region-kopf__bild img { animation: ht-setzen calc(2180ms * var(--tempo)) var(--ease-auflegen) backwards; }
  .region-kopf__pille { animation: ht-auflegen calc(var(--dur-blatt) * var(--tempo)) var(--ease-auflegen) backwards; }
  .region-kopf .h1 { --z-start: 220ms; }
  .region-kopf__lead { animation: ht-da calc(1050ms * var(--tempo)) var(--ease) calc(630ms * var(--tempo)) backwards; }
  .region-firmen__orte li { transition: opacity 390ms var(--ease) calc(750ms + min(var(--i, 0), 8) * 70ms), transform 900ms var(--ease-auflegen) calc(750ms + min(var(--i, 0), 8) * 70ms); }
  .region-firmen__orte li:nth-child(2) { --i: 1; } .region-firmen__orte li:nth-child(3) { --i: 2; } .region-firmen__orte li:nth-child(4) { --i: 3; }
  .region-firmen__orte li:nth-child(5) { --i: 4; } .region-firmen__orte li:nth-child(6) { --i: 5; } .region-firmen__orte li:nth-child(7) { --i: 6; }
  .region-firmen__orte li:nth-child(8) { --i: 7; } .region-firmen__orte li:nth-child(n+9) { --i: 8; }
  .js .region-firmen__page:has(.karte-ch:not(.is-in)) .region-firmen__orte li { opacity: 0; transform: translateX(0.75rem); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
  .region-kopf__karte { position: relative; animation: ht-auflegen calc(var(--dur-blatt) * 1.1 * var(--tempo)) var(--ease-auflegen) calc(570ms * var(--tempo)) backwards; }
  .region-kopf__karte::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--schatten-flug); opacity: 0; pointer-events: none; animation: ht-flug calc(var(--dur-blatt) * 1.1 * var(--tempo)) var(--ease-auflegen) calc(570ms * var(--tempo)) backwards; }
  .region-kopf__lead { animation: none; }
}