/* ============================================================
   Kampagne „Höchste Zeit für ein Familienrecht von heute.“
   Wird NUR auf dem Template page-hoechste-zeit.php geladen.
   Alles unter .hz gekapselt — kein Eingriff in Bestandsstyles.
   Farbwerte aus 250826-ISUV-Motive.pdf gemessen (Druck-PDF, CMYK->sRGB),
   Gegenprobe im Figma-Dev-Mode steht noch aus.
   ============================================================ */

.hz{
  /* Palette aus 040926-ISUV-Flyer-V1.pdf gemessen (neueste Quelle, 04.09.2026).
     ACHTUNG: Weisser Text auf dem Kampagnen-Tuerkis #00ABAC erreicht nur
     2,83:1 und faellt durch WCAG AA. Deshalb ein eigener Bandton:
       --hz-tuerkis       Flaechen und Akzente, Markenfarbe unveraendert
       --hz-tuerkis-band  Flaechen MIT weissem Text -> 4,77:1, AA in allen Groessen
       --hz-tuerkis-text  Tuerkis ALS Text auf weiss -> 4,77:1 */
  --hz-tuerkis:#00ABAC;
  --hz-tuerkis-band:#008081;
  --hz-tuerkis-text:#007373;
  --hz-tuerkis-dunkel:#007373;
  --hz-signatur:#007373;
  --hz-panel:#CCEEEE;
  --hz-panel-leise:#E5F6F7;
  --hz-magenta:#EE7DAF;
  --hz-korall:#E94646;
  --hz-navy:#002F3E;
  --hz-ink:#1D1D1B;
  --hz-leise:#5A5A57;
  --hz-grund:#F6F7F7;
  --hz-linie:#E3E6E6;
  --hz-brief:#FCFBF7;

  --hz-h1:clamp(2.1rem,5.2vw,3.9rem);
  /* 24.09.2026: Obergrenze von 2.5rem (40px) auf 3rem (48px).
     Begründung aus der Messung: Abschnittstitel stehen auf der Startseite bei
     64px, auf normalen Unterseiten bei 48px — die Kampagnenseite war mit 40px
     die kleinste der Website. Der Entwurf von Stefan Mannes sieht 55px vor.
     48px bewegt die Seite auf beide zu. Schriftart (Rubik) und Gewicht (600)
     bleiben unverändert, damit die Seite zur übrigen Website gehört. */
  --hz-h2:clamp(1.6rem,3.2vw,3rem);
  --hz-h3:clamp(1.15rem,1.9vw,1.45rem);
  --hz-body:1.125rem;
  --hz-body-s:1rem;
  --hz-body-xs:.8125rem;

  --hz-luft:clamp(3rem,7vw,6rem);
  --hz-radius:14px;

  color:var(--hz-ink);
  font-size:var(--hz-body);
  line-height:1.62;
}

.hz *,.hz *::before,.hz *::after{box-sizing:border-box}
.hz section{padding:var(--hz-luft) 0}
.hz h1,.hz h2,.hz h3{line-height:1.16;margin:0 0 .6em;font-weight:600;letter-spacing:-.015em}
.hz h1{font-size:var(--hz-h1)}
.hz h2{font-size:var(--hz-h2)}
.hz h3{font-size:var(--hz-h3)}
.hz p{margin:0 0 1.05em;max-width:68ch}
.hz img{max-width:100%;height:auto;display:block}

/* Anker-Landung: Kopfhöhe wird per JS gemessen, nicht geraten.
   Nur scroll-margin-top verwenden — zusammen mit scroll-padding-top
   addieren sich die Werte. */
.hz section[id]{scroll-margin-top:var(--hz-kopf,80px)}

/* ---------- Knöpfe ---------- */
.hz .hz-knopf{display:inline-block;padding:.72rem 1.6rem;border-radius:999px;
  font-size:var(--hz-body-s);font-weight:500;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;transition:background .15s,color .15s}
.hz .hz-knopf-hell{border-color:#fff;color:var(--hz-navy);background:#fff;font-weight:600}
.hz .hz-knopf-hell:hover,.hz .hz-knopf-hell:focus{background:var(--hz-navy);color:#fff;border-color:var(--hz-navy)}
.hz .hz-knopf-voll{background:var(--hz-navy);color:#fff}
.hz .hz-knopf-voll:hover,.hz .hz-knopf-voll:focus{background:#0a1a31;color:#fff}

/* ---------- 1 Hero ---------- */
.hz .hz-hero{background:var(--hz-tuerkis-band);color:#fff;padding:clamp(2.6rem,6vw,4.6rem) 0}
.hz .hz-hero h1,.hz .hz-hero p{color:#fff}
/* „HEUTE." steht auf dem Plakat in Versalien und fett, unterstrichen von einem
   gemalten Pinselstrich — kein text-decoration. Der Strich ist als Inline-SVG
   im Template, damit er mit der Schriftgroesse mitwaechst. */
.hz .hz-hero h1 em{font-style:normal;font-weight:800;position:relative;
  display:inline-block;letter-spacing:.005em}
.hz .hz-strich{position:absolute;left:0;right:-.06em;bottom:-.16em;
  height:.13em;pointer-events:none}
.hz .hz-strich svg{width:100%;height:100%;display:block}
.hz .hz-strich path{fill:#fff}
.hz .hz-hero p{font-size:1.25rem;font-weight:600;max-width:46ch}
.hz .hz-hero-raster{display:grid;gap:clamp(1.8rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:900px){.hz .hz-hero-raster{grid-template-columns:1.05fr .95fr;align-items:center}}

/* ---------- 2 Zahlen ---------- */
.hz .hz-zahlen{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:760px){.hz .hz-zahlen{grid-template-columns:repeat(3,1fr)}}
.hz .hz-zahl{background:var(--hz-grund);border-radius:var(--hz-radius);padding:1.5rem}
.hz .hz-zahl strong{display:block;font-size:1.95rem;line-height:1.1;
  color:var(--hz-tuerkis-dunkel);margin-bottom:.35rem}
.hz .hz-zahl span{font-size:var(--hz-body-s);color:var(--hz-leise)}

/* ---------- 3 Leitplanken ---------- */
.hz .hz-grund{background:var(--hz-grund)}
.hz .hz-leit{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-top:2.2rem}
@media(min-width:820px){.hz .hz-leit{grid-template-columns:repeat(3,1fr)}}
.hz .hz-leit article{border-top:3px solid var(--hz-tuerkis);padding-top:1.1rem}
.hz .hz-ziffer{font-size:var(--hz-body-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--hz-leise);margin-bottom:.4rem}
.hz .hz-leit p{font-size:var(--hz-body-s)}

/* ---------- 4 Akkordeon ---------- */
.hz details{border:1px solid var(--hz-linie);border-radius:var(--hz-radius);
  margin-bottom:.7rem;background:#fff}
.hz details[open]{border-color:var(--hz-tuerkis)}
.hz summary{cursor:pointer;padding:1.15rem 3rem 1.15rem 1.3rem;font-weight:600;
  font-size:var(--hz-h3);position:relative;list-style:none}
.hz summary::-webkit-details-marker{display:none}
.hz summary::after{content:"+";position:absolute;right:1.2rem;top:50%;
  transform:translateY(-50%);font-size:1.6rem;font-weight:400;
  color:var(--hz-tuerkis-dunkel);line-height:1}
.hz details[open] summary::after{content:"\2013"}
.hz .hz-inhalt{padding:0 1.3rem 1.4rem}
.hz .hz-inhalt dt{font-weight:600;margin-top:1rem;font-size:var(--hz-body-s)}
.hz .hz-inhalt dd{margin:.2rem 0 0;font-size:var(--hz-body-s);color:var(--hz-leise)}
.hz .hz-bildidee{margin-top:1rem;padding:.75rem .9rem;background:var(--hz-grund);
  border-radius:8px;font-size:var(--hz-body-xs);color:var(--hz-leise)}
.hz .hz-schluss{margin-top:2rem;font-size:var(--hz-h3);font-weight:600;
  color:var(--hz-tuerkis-dunkel);max-width:none}

/* ---------- 5 Quellen + Downloads ---------- */
.hz .hz-quellen{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-top:2.2rem}
@media(min-width:820px){.hz .hz-quellen{grid-template-columns:repeat(3,1fr)}}
.hz .hz-quellen article{background:#fff;border-radius:var(--hz-radius);padding:1.4rem}
.hz .hz-quellen h3{font-size:var(--hz-body-s);text-transform:uppercase;
  letter-spacing:.08em;color:var(--hz-tuerkis-dunkel)}
.hz .hz-quellen p{font-size:var(--hz-body-s);margin:0}

.hz .hz-dl{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:1.8rem}
@media(min-width:760px){.hz .hz-dl{grid-template-columns:repeat(3,1fr)}}
.hz .hz-dl-2{grid-template-columns:1fr}
@media(min-width:760px){.hz .hz-dl-2{grid-template-columns:repeat(2,1fr)}}
.hz .hz-kachel{border:1px solid var(--hz-linie);border-radius:var(--hz-radius);
  padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;background:#fff}
.hz .hz-kachel .hz-typ{font-size:var(--hz-body-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--hz-leise)}
.hz .hz-kachel .hz-bald{margin-top:auto;font-size:var(--hz-body-xs);color:#8A5A00;
  background:#FFF6E3;padding:.3rem .55rem;border-radius:6px;align-self:flex-start}
.hz .hz-kachel .hz-kachel-text{font-size:1rem;color:var(--hz-leise)}

/* ---------- Tastaturbedienung ----------
   Das Theme setzt in style.css `.site a:focus{outline:none!important}` fuer
   JEDEN Link der Website. Wer mit der Tastatur navigiert, sieht dadurch nicht,
   wo er steht. Hier nur fuer die Kampagnenseite geheilt: Die Regel greift
   ausschliesslich bei :focus-visible, also bei Tastatur- und nicht bei
   Mausbedienung — fuer Besucher mit Maus aendert sich nichts.
   `:focus:focus-visible` statt `:focus-visible`, damit die Spezifitaet die
   Theme-Regel erreicht; hoechste-zeit.css wird danach geladen und gewinnt. */
.site .hz a:focus:focus-visible,
.site .hz button:focus:focus-visible,
.hz summary:focus-visible{outline:3px solid var(--hz-navy)!important;outline-offset:3px;border-radius:4px}
.hz .hz-presse a:focus:focus-visible{outline-color:#fff!important}
/* Kachel mit vorliegender Datei: ganze Flaeche klickbar, Text bleibt schwarz —
   eine blau unterstrichene Ueberschrift wuerde die Kachelform zerreissen. */
.hz .hz-kachel-link{text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.hz .hz-kachel-link strong{color:var(--hz-ink)}
.hz .hz-kachel-link:hover,.hz .hz-kachel-link:focus-visible{border-color:var(--hz-tuerkis);
  box-shadow:0 2px 10px rgba(0,47,62,.08)}
.hz .hz-kachel .hz-jetzt{margin-top:auto;font-size:var(--hz-body-xs);color:#00565C;
  background:var(--hz-panel-leise);padding:.3rem .55rem;border-radius:6px;align-self:flex-start;
  font-weight:600;letter-spacing:.02em}
.hz .hz-kachel-link:hover .hz-jetzt{background:var(--hz-panel)}
.hz .hz-presse .hz-kachel-link:hover,.hz .hz-presse .hz-kachel-link:focus-visible{border-color:#fff}
.hz .hz-presse .hz-kachel .hz-jetzt{background:rgba(255,255,255,.14);color:#fff}

/* ---------- 6 Plakate ---------- */
.hz .hz-plakate{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:700px){.hz .hz-plakate{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.hz .hz-plakate{grid-template-columns:repeat(3,1fr)}}
.hz .hz-plakat{border:1px solid var(--hz-linie);border-radius:var(--hz-radius);
  overflow:hidden;background:#fff;display:flex;flex-direction:column}
.hz .hz-blatt{background:var(--hz-brief);padding:1.35rem 1.3rem;flex:1}
.hz .hz-anrede{font-size:var(--hz-body-xs);letter-spacing:.05em;
  color:var(--hz-leise);margin-bottom:.5rem}
.hz .hz-plakat .hz-text{font-size:var(--hz-body-s);margin:0}
.hz .hz-pate{margin-top:1rem;font-size:var(--hz-body-xs);font-weight:600;color:var(--hz-leise)}
.hz .hz-plakat details{border:0;border-top:1px solid var(--hz-linie);border-radius:0;margin:0}
.hz .hz-plakat summary{font-size:var(--hz-body-xs);font-weight:600;
  padding:.8rem 2.4rem .8rem 1.3rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--hz-tuerkis-dunkel)}
.hz .hz-plakat summary::after{font-size:1.2rem;right:1rem}
.hz .hz-plakat .hz-inhalt{padding:0 1.3rem 1.1rem}
.hz .hz-plakat .hz-inhalt p{font-size:var(--hz-body-xs);color:var(--hz-leise);margin:0}
.hz .hz-plakat.hz-versal .hz-text{font-size:.95rem;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.45}

/* ---------- 7 Beteiligung ---------- */
.hz .hz-mitmachen{background:var(--hz-tuerkis-band);color:#fff}
.hz .hz-mitmachen h2,.hz .hz-mitmachen p{color:#fff}
.hz .hz-mit-raster{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.hz .hz-mit-raster{grid-template-columns:1.1fr .9fr}}
.hz .hz-leerkarte{background:#fff;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.22);
  aspect-ratio:1/1.36;display:flex;align-items:flex-start;padding:1.8rem;
  max-width:290px;margin-inline:auto}
.hz .hz-leerkarte span{font-size:.95rem;color:var(--hz-leise)}

/* ---------- 8 Beratung ---------- */
.hz .hz-wege{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:1.8rem}
@media(min-width:760px){.hz .hz-wege{grid-template-columns:repeat(3,1fr)}}
.hz .hz-weg{border:1px solid var(--hz-linie);border-radius:var(--hz-radius);
  padding:1.3rem;text-decoration:none;color:inherit;display:block}
.hz .hz-weg:hover,.hz .hz-weg:focus{border-color:var(--hz-tuerkis);color:inherit}
.hz .hz-weg strong{display:block;margin-bottom:.3rem}
.hz .hz-weg span{font-size:var(--hz-body-s);color:var(--hz-leise)}
.hz .hz-haltung{margin-top:1.8rem;padding:1.1rem 1.3rem;background:var(--hz-grund);
  border-radius:var(--hz-radius);font-size:var(--hz-body-s);color:var(--hz-leise)}

/* ---------- 9 Presse ---------- */
.hz .hz-presse{background:var(--hz-navy);color:#fff}
.hz .hz-presse h2,.hz .hz-presse h3,.hz .hz-presse p{color:#fff}
.hz .hz-presse .hz-kachel{border-color:rgba(255,255,255,.24);background:transparent}
.hz .hz-presse .hz-kachel strong{color:#fff}
.hz .hz-presse .hz-kachel .hz-typ{color:rgba(255,255,255,.75)}
.hz .hz-presse .hz-kachel .hz-bald{background:rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.hz .hz-presse a{color:#9FE0E4}
.hz .hz-trenner{height:1px;background:rgba(255,255,255,.2);margin:var(--hz-luft) 0}

/* ---------- Redaktionsnotiz: nur für angemeldete Redaktion ---------- */
.hz .hz-notiz{background:#FFF6E3;border-left:4px solid #E0A500;padding:.85rem 1.1rem;
  margin:1.2rem 0;font-size:var(--hz-body-xs);color:#6B4A00;border-radius:0 8px 8px 0}
.hz .hz-notiz strong{color:#4A3300}

/* ---------- Fokus sichtbar halten (WCAG 2.1 AA) ---------- */
.hz a:focus-visible,.hz summary:focus-visible,.hz button:focus-visible{
  outline:3px solid var(--hz-navy);outline-offset:3px}
.hz .hz-hero a:focus-visible,.hz .hz-mitmachen a:focus-visible,
.hz .hz-presse a:focus-visible{outline-color:#fff}

@media (prefers-reduced-motion:reduce){
  .hz *{transition:none !important;animation:none !important}
}

/* ---------- 7 Briefformular (Formidable, Form „brief-ans-familienrecht") ---------- */
.hz .hz-formularkarte{background:#fff;border-radius:var(--hz-radius);
  padding:clamp(1.4rem,3vw,2.4rem);margin-top:2rem;color:var(--hz-ink);
  box-shadow:0 18px 40px rgba(0,0,0,.14)}
.hz .hz-formularkarte .frm_forms{max-width:none}
.hz .hz-formularkarte .frm_form_field{margin-bottom:1.15rem}
.hz .hz-formularkarte label,
.hz .hz-formularkarte .frm_primary_label{display:block;font-weight:600;
  font-size:var(--hz-body-s);margin-bottom:.35rem;color:var(--hz-ink)}
.hz .hz-formularkarte input[type=text],
.hz .hz-formularkarte input[type=email],
.hz .hz-formularkarte textarea{width:100%;padding:.75rem .9rem;
  border:1px solid #B9C0C0;border-radius:8px;font:inherit;font-size:var(--hz-body-s);
  background:#fff;color:var(--hz-ink)}
.hz .hz-formularkarte textarea{min-height:11rem;resize:vertical}
.hz .hz-formularkarte input:focus,.hz .hz-formularkarte textarea:focus{
  outline:3px solid var(--hz-navy);outline-offset:1px;border-color:var(--hz-navy)}
.hz .hz-formularkarte .frm_radio,
.hz .hz-formularkarte .frm_checkbox{margin:.3rem 0}
.hz .hz-formularkarte .frm_radio label,
.hz .hz-formularkarte .frm_checkbox label{font-weight:400;display:flex;gap:.6rem;
  align-items:flex-start;line-height:1.5;cursor:pointer}
.hz .hz-formularkarte input[type=radio],
.hz .hz-formularkarte input[type=checkbox]{margin-top:.35rem;flex:0 0 auto;
  width:1.05rem;height:1.05rem;accent-color:var(--hz-tuerkis-text)}
.hz .hz-formularkarte .frm_button_submit,
.hz .hz-formularkarte input[type=submit]{background:var(--hz-navy);color:#fff;
  border:0;border-radius:999px;padding:.8rem 1.9rem;font-size:var(--hz-body-s);
  font-weight:600;cursor:pointer}
.hz .hz-formularkarte .frm_button_submit:hover,
.hz .hz-formularkarte input[type=submit]:hover{background:#0a1a31}
.hz .hz-formularkarte .frm_error,
.hz .hz-formularkarte .frm_blank_field .frm_error{color:#A4262C;font-size:var(--hz-body-xs);
  margin-top:.3rem}
.hz .hz-formularkarte .frm_error_style{background:#FDECEA;border-left:4px solid #A4262C;
  padding:.8rem 1rem;border-radius:0 8px 8px 0;margin-bottom:1rem;font-size:var(--hz-body-s)}
.hz .hz-formularkarte .frm_message{background:#EAF6EE;border-left:4px solid #2E7D4F;
  padding:1rem 1.2rem;border-radius:0 8px 8px 0}
/* Feste Anrede über dem Brieffeld — Handschrift-Anmutung ohne Zusatzschrift */
.hz .hz-anrede-fest{font-size:1.25rem;font-weight:600;color:var(--hz-tuerkis-text);
  margin:0 0 .2rem;letter-spacing:.01em}
.hz .hz-formularkarte .frm_description{font-size:var(--hz-body-xs);color:var(--hz-leise);margin-top:.3rem}

/* ---------- Papiertextur + Kinderzeichnung aus dem Druck-PDF ---------- */
.hz .hz-blatt{background-color:var(--hz-brief);
  background-image:url(../images/hoechste-zeit/papier-textur.jpg);
  background-size:cover;background-position:center;position:relative}
.hz .hz-deko{position:absolute;top:.5rem;right:.9rem;width:74px;height:auto;
  opacity:.92;pointer-events:none}
.hz .hz-plakat.hz-versal .hz-blatt{padding-top:2.6rem}
.hz .hz-pate{color:var(--hz-signatur);font-size:var(--hz-body-s)}

/* ---------- Hero-Bühne: Umschlag, Briefe, Paragraf ----------
   Nachempfunden dem Flyer (040926-ISUV-Flyer-V1.pdf) und dem Figma-Hero:
   türkiser Umschlag unten, davor gestapelte Briefe in leichter Schräglage,
   grosses § als Wasserzeichen dahinter. */
.hz .hz-buehne{position:relative;aspect-ratio:1/.92;min-height:340px;
  container-type:inline-size}
@media(max-width:899px){.hz .hz-buehne{aspect-ratio:1/1.05;margin-top:.5rem}}

.hz .hz-paragraf{position:absolute;right:-2%;top:-8%;font-size:clamp(11rem,42cqi,26rem);
  line-height:.8;font-weight:700;color:#fff;opacity:.10;pointer-events:none;
  user-select:none}

.hz .hz-umschlag{position:absolute;left:4%;bottom:0;width:70%;height:auto}
.hz .hz-u-korpus{fill:#1CA3A4}
.hz .hz-u-klappe{fill:#35B5B6}
.hz .hz-u-kante{fill:#0C8C8D}

.hz .hz-karte{position:absolute;background:var(--hz-brief) center/cover
  url(../images/hoechste-zeit/papier-textur.jpg);
  color:var(--hz-ink);padding:5cqi 5cqi 4cqi;border-radius:2px;
  box-shadow:0 16px 34px rgba(0,0,0,.24);}
.hz .hz-karte p{font-size:clamp(.72rem,3.05cqi,1rem);line-height:1.45;margin:0;
  max-width:none;font-weight:500}
.hz .hz-karte b{display:block;margin-top:.7em;font-size:clamp(.66rem,2.6cqi,.88rem);
  font-weight:700;color:var(--hz-signatur)}

.hz .hz-karte-1{width:44%;top:0;left:8%;transform:rotate(-7deg);z-index:2}
.hz .hz-karte-2{width:47%;top:16%;right:0;transform:rotate(5deg);z-index:3}
.hz .hz-karte-3{width:50%;bottom:4%;left:0;transform:rotate(-2.5deg);z-index:4}

/* Der Kinderbrief steht auf dem Plakat in Versalien */
.hz .hz-karte-kind p{text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(.66rem,2.75cqi,.92rem);line-height:1.5}
.hz .hz-karte-deko{position:absolute;top:-6%;left:-7%;width:26%;height:auto}

@media(max-width:520px){
  .hz .hz-karte-1{width:52%;left:0}
  .hz .hz-karte-2{width:54%}
  .hz .hz-karte-3{width:58%}
}

/* Briefkarten stehen im Hero-Band, erben aber dessen weisse Schrift nicht —
   sie liegen auf hellem Papier. Spezifitaet muss .hz .hz-hero p schlagen. */
.hz .hz-hero .hz-karte p{color:var(--hz-ink);font-weight:500}
.hz .hz-hero .hz-karte b{color:var(--hz-signatur)}


/* ------------------------------------------------------------
   Bildbreiten — ooliv, 22.09.2026.
   Das Theme setzt in style.css global `img{max-width:100%!important}`.
   Das schlaegt jede Kampagnenregel, unabhaengig von Spezifitaet:
   reichstag.png (Original 620px) wurde auf 1219px gezogen,
   familie.png (700px) auf 1296px — beide sichtbar unscharf.
   Deshalb hier ausnahmsweise ebenfalls !important, eng begrenzt
   auf diese drei Illustrationen innerhalb von .hz.
   ------------------------------------------------------------ */

/* Reichstag aus dem Flyer — Abschnitt „Fachliche Grundlage" */
.hz .hz-reichstag{margin:0 0 2rem;background:var(--hz-panel);
  border-radius:var(--hz-radius);padding:clamp(1.4rem,3vw,2.4rem)}
.hz .hz-reichstag img{width:100%;max-width:400px!important;margin-inline:auto;height:auto}

/* ============================================================
   Gestaltungssprache aus 040926-ISUV-Flyer-V1.pdf
   ============================================================ */

/* Zweispaltig: Text + Illustration */
.hz .hz-zwei{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.hz .hz-zwei{grid-template-columns:1.35fr .65fr}}
.hz .hz-illu{margin:0}
.hz .hz-illu img{width:100%;height:auto;margin-inline:auto}
/* Paar-Illustration: vollständige Fassung aus dem Figma-Baukasten von
   Stefan Mannes (23.09.2026, als SVG exportiert). Die Hilfsfläche von vorher
   ist entfallen — sie war nur nötig, solange das Motiv angeschnitten war. */
.hz .hz-illu-paar img{max-width:300px!important;display:block;margin-inline:auto}
.hz .hz-illu-familie{margin:2rem 0 0}
.hz .hz-illu-familie img{max-width:340px!important;margin-inline:0}

/* Überschrift mit Akzentgrafik daneben */
.hz .hz-kopfzeile{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem}
.hz .hz-kopfzeile h2{flex:1}
.hz .hz-akzent{width:clamp(74px,11vw,132px);height:auto;flex:0 0 auto;margin-top:-.4rem}
@media(max-width:600px){.hz .hz-akzent{display:none}}

/* Zahlen im Flyer-Stil: gross, Magenta */
.hz .hz-zahl strong{color:var(--hz-magenta);font-size:clamp(2.1rem,5vw,3rem);
  font-weight:800;letter-spacing:-.02em}
.hz .hz-zahl{background:var(--hz-panel-leise)}

/* Leitplanken: grosse Türkis-Ziffer wie im Flyer */
.hz .hz-leit article{border-top:0;padding-top:0;display:grid;
  grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:start}
.hz .hz-ziffer{font-size:clamp(2rem,4vw,2.9rem);line-height:.95;font-weight:800;
  color:var(--hz-tuerkis-text);letter-spacing:-.03em;text-transform:none;margin:0;
  grid-row:1 / span 2}
.hz .hz-leit h3{margin:0 0 .35rem}
.hz .hz-leit p{margin:0}

/* CTA als Kasten — der Flyer nutzt durchgehend Navy mit türkiser Zweitzeile */
.hz .hz-kasten{display:inline-block;background:var(--hz-navy);color:#fff;
  text-decoration:none;padding:.9rem 1.4rem;border-radius:10px;max-width:22rem}
.hz .hz-kasten span{display:block;font-size:var(--hz-body-s);font-weight:600;line-height:1.35}
.hz .hz-kasten b{display:block;font-size:var(--hz-body-s);font-weight:700;
  color:#4FD6D7;margin-top:.15rem}
.hz .hz-kasten:hover,.hz .hz-kasten:focus{background:#00404f;color:#fff}
.hz .hz-kasten:hover b,.hz .hz-kasten:focus b{color:#6FE3E4}
.hz .hz-presse .hz-kasten-hell{background:#fff}
.hz .hz-presse .hz-kasten-hell span{color:var(--hz-navy)}
.hz .hz-presse .hz-kasten-hell b{color:var(--hz-tuerkis-text)}
.hz .hz-presse .hz-kasten-hell:hover{background:var(--hz-panel)}

/* Panel-Ton für die Quellenkarten */
.hz .hz-quellen article{background:var(--hz-panel-leise)}

/* Zahlen-Kacheln: Navy-Grund, damit das originale Kampagnen-Magenta
   erhalten bleibt UND lesbar ist (5,55:1). Auf hellem Grund käme es
   nur auf 2,3:1 und müsste verfälscht werden. */
.hz .hz-zahl{background:var(--hz-navy)}
.hz .hz-zahl strong{color:var(--hz-magenta)}
.hz .hz-zahl span{color:#D6E3E8}

/* ---------- Korrekturen aus dem Kontrast-Audit ---------- */

/* Die feste Anrede steht in der weissen Formularkarte, erbt aber die
   weisse Bandschrift von .hz .hz-mitmachen p — war dadurch unsichtbar. */
.hz .hz-mitmachen .hz-formularkarte .hz-anrede-fest{color:var(--hz-tuerkis-text)}
.hz .hz-mitmachen .hz-formularkarte,
.hz .hz-mitmachen .hz-formularkarte p,
.hz .hz-mitmachen .hz-formularkarte label,
.hz .hz-mitmachen .hz-formularkarte .frm_primary_label{color:var(--hz-ink)}
.hz .hz-mitmachen .hz-formularkarte .frm_description{color:var(--hz-leise)}

/* Presse-Bereich: deckende Farben statt rgba, damit messbar und sicher */
.hz .hz-presse .hz-kachel .hz-bald{background:#12414F;color:#EAF3F6}
.hz .hz-presse .hz-kachel .hz-typ{color:#BBD2DA}

/* Heller CTA-Kasten im Presse-Bereich: Ankerfarbe explizit setzen,
   sonst erbt er das helle Türkis der Presse-Links auf weissem Grund. */
.hz .hz-presse .hz-kasten-hell{color:var(--hz-navy)}

/* ---------- Beth Ellen: Handschrift der Kampagne ----------
   Selbst gehostet (SIL Open Font License, via Google Fonts).
   Nur fuer Signaturen — der Brieftext bleibt in der Seitenschrift,
   weil Carrotflower (Adobe Fonts) noch nicht lizenziert ist. */
@font-face{
  font-family:"Beth Ellen";
  src:url(../fonts/beth-ellen.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;
}
.hz .hz-pate,
.hz .hz-karte b,
.hz .hz-anrede-fest{font-family:"Beth Ellen","Bradley Hand",cursive;
  font-weight:400;letter-spacing:.01em}
.hz .hz-pate{font-size:1.05rem;line-height:1.3}
.hz .hz-karte b{font-size:clamp(.78rem,3cqi,1.02rem);line-height:1.3}
.hz .hz-anrede-fest{font-size:1.45rem;line-height:1.25}

/* Anrede im Formular: Spezifitaet muss die Plugin-/Theme-Schrift schlagen.
   Handschrift etwas groesser, weil Beth Ellen fein laeuft. */
.hz .hz-mitmachen .hz-formularkarte .hz-anrede-fest{
  font-family:"Beth Ellen","Bradley Hand",cursive;font-size:1.55rem;line-height:1.3}
.hz .hz-plakat .hz-pate{font-size:1.15rem}

/* Das Parent-Theme setzt font-family:Rubik !important auf html,body,p,…
   Die feste Anrede ist ein <p> und wird dadurch ueberschrieben.
   Eng begrenztes !important ist hier die einzige saubere Gegenwehr. */
.hz .hz-mitmachen .hz-formularkarte .hz-anrede-fest{
  font-family:"Beth Ellen","Bradley Hand",cursive !important}

/* Der Umschlag muss sich vom Band absetzen — vorher lag er farbgleich darauf
   und war unsichtbar. Jetzt heller als der Grund, mit Schlagschatten wie im Druck. */
.hz .hz-umschlag{filter:drop-shadow(0 14px 26px rgba(0,0,0,.22))}
.hz .hz-karte{box-shadow:0 18px 38px rgba(0,0,0,.30)}

/* ------------------------------------------------------------
   Formular: Einverständnis-Beschriftungen — ooliv, 23.09.2026.
   style.css des Themes gibt allen Formidable-Ankreuzfeldern
   `text-indent:-30px; padding-left:30px`. Die erste Zeile rutscht
   dadurch unter das Kästchen, die ersten Buchstaben verschwinden
   („h bin einverstanden“ statt „Ich bin einverstanden“).
   Gemeldet von Carina Färber am 23.09.2026 mit Screenshot.
   Korrektur bewusst NUR innerhalb von .hz, damit die übrigen
   Formulare der Website unberührt bleiben.
   ------------------------------------------------------------ */
.hz .frm_form_fields .frm_checkbox label,
.hz .frm_form_fields .frm_radio label{
  text-indent:0;padding-left:0;display:flex;gap:.65rem;align-items:flex-start;line-height:1.45
}
.hz .frm_form_fields .frm_checkbox label input[type=checkbox],
.hz .frm_form_fields .frm_radio label input[type=radio]{
  flex:0 0 auto;margin-top:.2rem
}

/* Zwei Knöpfe nebeneinander im Kopfbereich, mobil untereinander. */
.hz .hz-knopfpaar{display:flex;flex-wrap:wrap;gap:.9rem}