/* 20.10.2026: MEEYO Herzensprojekt (/herzensprojekt) — Vorlage _herz.html, Verhalten herzensprojekt.js. Markenwelt (Korall/Violett).
   Umbau 20.10. abends (Owner: «mehr Emotionen, mehr Bilder, das MEEYOVERSUM im Vordergrund»): Held ueber die volle Breite des Inhalts
   (negativer Rand = die Polsterung von .inhalt, kein 100vw — sonst rollt die Seite seitlich um die Bildlaufleiste), Beitrag + Bildband,
   Posten-Karten, Aufklapper. Mobil zuerst (400 px), Desktop ab 900 px zweispaltig. Der Held bleibt in beiden Farbschemen dunkel. */
.hz-wurzel { padding-bottom: 40px }
.hz-bald { text-align: center; padding: 60px 0 }
.hz { --hz-rand: clamp(16px, 3.5vw, 64px) }

/* 1 — Held: MEEYOVERSUM */
.hz-held { position: relative; overflow: hidden; margin: -24px calc(-1 * var(--hz-rand)) 0; padding: 28px var(--hz-rand) 34px; color: #fff;
  display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; text-align: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 79, 122, .38), transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(139, 61, 255, .35), transparent 50%),
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 64%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 72%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 92%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #1a0a26 0%, #120619 100%) }
.hz-held-bild { order: -1; display: flex; justify-content: center }
.hz-held-bild img { width: min(78vw, 340px); height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 60px rgba(255, 79, 122, .45), 0 0 120px rgba(139, 61, 255, .35);
  animation: hz-schweben 7s ease-in-out infinite }
@keyframes hz-schweben { 50% { transform: translateY(-8px) } }
@media (prefers-reduced-motion: reduce) { .hz-held-bild img { animation: none } }
.hz-marke { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff8fab; margin: 0; font-size: .85rem }
.hz-vision { font-size: clamp(1.55rem, 4.2vw, 3rem); line-height: 1.12; letter-spacing: .01em; margin: .3em 0 .25em;
  background: linear-gradient(100deg, #fff 0%, #ffc2d6 55%, #d9bdff 100%); -webkit-background-clip: text; background-clip: text; color: transparent }
.hz-unter { font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700; margin: 0 0 12px; color: #fff }
.hz-vorschau { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: var(--gelb); color: #1a0f24; font-weight: 700; font-size: .85rem }
.hz-stand { display: flex; align-items: center; gap: 14px; text-align: left; margin: 6px auto 0; max-width: 460px; padding: 12px 16px;
  border-radius: var(--radius); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14) }
.hz-herz { width: 58px; height: 53px; flex: none; filter: drop-shadow(0 0 10px rgba(255, 79, 122, .55)) }
.hz-stand-text { min-width: 0; flex: 1 }
.hz-stand p { margin: 0 }
.hz-ziel-titel { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #e9d8f5 }
.hz-ziel-zahl { font-size: 1.15rem; color: #fff } .hz-ziel-zahl b { font-size: 1.3rem }
.hz-anzahl { font-size: .88rem; color: #e9d8f5 }
.hz-balken { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .15); overflow: hidden; margin: 6px 0 }
.hz-balken span { display: block; height: 100%; background: var(--verlauf); border-radius: 999px; min-width: 6px }
.hz-held-knopf { margin: 16px 0 0 } .hz-held-knopf .knopf { font-size: 1.05rem; padding: 12px 26px }
@media (min-width: 900px) {
  .hz-held { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); text-align: left; padding: 48px var(--hz-rand) 52px; gap: 32px; min-height: 480px }
  .hz-held-bild { order: 0 } .hz-held-bild img { width: min(100%, 500px) }
  .hz-stand { margin-left: 0 }
}

/* Zustaende, allgemeine Kaesten */
.hz-box { background: var(--pflaume); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 18px; margin: 16px 0 }
.hz-box h2 { margin-top: 0 }
.hz-zustand { border-color: var(--minze); margin-top: 20px } .hz-zustand.leise { border-color: var(--linie) }

/* 2 — Beitrag + Bildband */
.hz-zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 22px; align-items: start }
@media (min-width: 900px) { .hz-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px } }
.hz-beitrag { margin: 0; box-shadow: 0 10px 40px rgba(139, 61, 255, .18) }
.hz-beitrag h2 { font-size: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.hz-pille { font-size: .75rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--linie); color: var(--nebel); font-weight: 600 }
.hz-feld { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-weight: 600 }
.hz-feld select, .hz-eigen input { font: inherit; padding: 9px 10px; border-radius: var(--radius-klein); border: 1px solid var(--linie); background: var(--nacht); color: var(--milch); max-width: 100% }
.hz-land-bald { margin: 4px 0 8px; padding: 8px 12px; border-radius: var(--radius-klein); background: var(--pflaume-hell); border-left: 4px solid var(--gelb); font-weight: 600 }
.hz-betraege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 }
@media (min-width: 520px) { .hz-betraege { grid-template-columns: repeat(6, minmax(0, 1fr)) } }
.hz-betrag { font: inherit; font-weight: 800; font-size: 1rem; padding: 12px 0; border-radius: var(--radius-klein); border: 1px solid var(--linie);
  background: var(--pflaume-hell); color: var(--milch); cursor: pointer; white-space: nowrap; min-width: 0 }
.hz-betrag[aria-pressed="true"] { background: var(--verlauf); border-color: transparent; color: #fff }
.hz-betrag:focus-visible, .hz-klapp summary:focus-visible { outline: 3px solid var(--korall); outline-offset: 2px }
.hz-eigen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px; font-weight: 600 }
.hz-eigen input { width: 8em }
.hz-kanton .klein { font-weight: 400 }
.hz-kurz { border-left: 4px solid var(--korall); background: var(--pflaume-hell); border-radius: var(--radius-klein); padding: 10px 14px; margin: 12px 0; font-size: .9rem }
.hz-kurz h3 { font-size: .98rem; margin: 0 0 .35em } .hz-kurz ul { margin: 0; padding-left: 1.1em } .hz-kurz li { margin: 2px 0 }
.hz-kurz p { margin: 6px 0 0 } .hz-kurz a { color: var(--korall-schrift) }
.hz-zusammenfassung { font-weight: 700; margin: 10px 0 }
.hz-haken { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-weight: 600 } .hz-haken input { margin-top: 4px; width: 20px; height: 20px; flex: none }
.hz-zahlen { width: 100%; font-size: 1.1rem; padding: 14px }
.hz-zahlen:not([disabled]) { background: var(--verlauf); color: #fff; box-shadow: 0 10px 28px rgba(255, 79, 122, .35) }   /* sonst grau (button[type=button] in meeyo.css) */
.hz-zahlen[disabled] { opacity: .75; cursor: not-allowed; background: var(--pflaume-hell); color: var(--milch) }
.hz-mitte { text-align: center }

.hz-band h2 { margin: 0 0 12px; font-size: 1.4rem }
.hz-bilder { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
@media (min-width: 560px) { .hz-bilder { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.hz-bilder li { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--pflaume-hell) }
.hz-bilder img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease }
.hz-bilder li:hover img { transform: scale(1.05) }
.hz-bilder span { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 10px 10px; color: #fff; font-weight: 800; font-size: .95rem; line-height: 1.2;
  background: linear-gradient(transparent, rgba(20, 6, 28, .85)) }
.hz-ki { margin: 6px 0 0; color: var(--nebel) }
.hz-warum { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius); background: var(--pflaume); border: 1px solid var(--linie) }
.hz-warum h3 { margin: 0 0 4px; font-size: 1.05rem } .hz-warum p { margin: 0 }

/* 3 — Wofuer die CHF 300'000 */
.hz-budget { margin-top: 36px; text-align: center }
.hz-budget h2 { font-size: clamp(1.35rem, 3vw, 2rem); margin: 0 0 4px }
.hz-budget-text { color: var(--nebel); margin: 0 auto 16px; max-width: 60ch }
.hz-posten { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: left }
@media (min-width: 760px) { .hz-posten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px } }
.hz-posten li { background: var(--pflaume); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.hz-icon { font-size: 1.6rem; line-height: 1 }
.hz-posten-betrag { font-size: 1.15rem; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent }
.hz-posten-titel { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere }
.hz-posten-satz { color: var(--nebel); font-size: .85rem }
.hz-budget-summe { margin: 12px 0 0; font-size: 1.05rem }

/* 4 — Aufklapper */
.hz-mehr { margin-top: 36px }
.hz-mehr h2 { text-align: center; font-size: clamp(1.3rem, 2.6vw, 1.7rem) }
.hz-klapp { background: var(--pflaume); border: 1px solid var(--linie); border-radius: var(--radius); margin: 10px auto; max-width: 860px }
.hz-klapp summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; position: relative; display: flex; flex-direction: column; gap: 2px; border-radius: var(--radius) }
.hz-klapp summary::-webkit-details-marker { display: none }
.hz-klapp summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--nebel); border-bottom: 2px solid var(--nebel);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s }
.hz-klapp[open] summary::after { transform: translateY(-30%) rotate(-135deg) }
.hz-klapp-titel { font-weight: 800; font-size: 1.05rem } .hz-klapp-satz { color: var(--nebel); font-size: .9rem }
.hz-klapp-inhalt { padding: 0 16px 14px } .hz-klapp-inhalt p:first-child { margin-top: 0 }
.hz-verwendung, .hz-schritte { padding-left: 1.3em } .hz-verwendung li, .hz-schritte li { margin: 3px 0 }
.hz-stiftung { border-style: dashed }

.hz-teilen { max-width: 860px; margin: 24px auto }
.hz-link { word-break: break-all; font-family: ui-monospace, monospace; font-size: .9rem; color: var(--nebel) }
.hz-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.hz-fuss { text-align: center; color: var(--nebel); margin-top: 26px }