/* ====================================================================
   hierzusammen · Startseite und Anlassseiten
   ====================================================================

   Zusatzblatt zu hierzusammen.css. Was dort steht · Token, Schriften,
   Knöpfe, Marke, Kopf, Fuß, Formulare ·, wird hier NICHT wiederholt.
   Hier steht nur, was es allein auf den Verkaufsseiten gibt.

   Die Reihenfolge ist die der Seite:

   01 Intro                  06 Ein Link. Alles drin.
   02 Hero                   07 Ablauf
   03 Vertrauenszeile        08 Preise
   04 Live-Beispiele         09 Vertrauen
   05 Anlässe                10 Fragen
                             11 Grenzen
                             12 Abschluss
   ==================================================================== */

/* == 01 · Das Intro ================================================= */

/*
 * Eine Einladungskarte, die sich öffnet.
 *
 * Ausgangszustand: warmer Sandton als Tisch, darauf eine fast
 * bildschirmfüllende weiße Karte. Elf Punkte liegen über die Karte
 * verteilt, wandern zur Mitte, bilden den offenen Kreis; darunter
 * erscheint die Wortmarke, unten rechts schreibt sich die Signatur.
 * Danach dehnt sich die Karte bis an die Kanten und gibt den Hero frei.
 *
 * WAS ES NICHT IST: ein Ladebalken. Es wird nichts geladen und nichts
 * gewartet · der Hero steht die ganze Zeit fertig darunter im Markup.
 * Das Intro ist eine Ebene DARÜBER, damit es die Largest Contentful
 * Paint nicht verschlechtert.
 *
 * OHNE SKRIPT GIBT ES KEIN INTRO. Die Fläche wird erst durch
 * html.hz-intro-an sichtbar, und die Klasse setzt hz-vorab.js.
 * Andersherum lägen bei abgeschaltetem JavaScript zwei Sekunden
 * Papier über der Seite, die niemand wegklicken kann.
 */

.hz-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  background: #E3D9C6;
  /* Die Fläche nimmt keine Klicks an · ein Klick soll die Sequenz
     beenden UND dort ankommen, wo er hinzielte. Das Beenden hängt am
     Fenster (hz-start.js) und nicht an dieser Fläche. */
  pointer-events: none;
}

/*
 * Zwei Klassen und nicht eine, und der Grund ist der Abgang.
 *
 *   html.hz-halten     sperrt das Scrollen
 *   html.hz-intro-an   zeigt die Fläche
 *
 * Getrennt, weil beides zu verschiedenen Zeitpunkten endet: Die Sperre
 * fällt sofort, sobald jemand wischt, die Fläche blendet danach noch
 * 300 ms ab. An einer gemeinsamen Klasse wäre die Fläche in demselben
 * Moment weg, in dem die Sperre fällt · und der Abgang ein Schnitt.
 */
html.hz-halten { overflow: hidden; }
html.hz-intro-an .hz-intro,
html.hz-intro-kurz .hz-intro { display: grid; }

/* Die Karte. */
.hz-intro-karte {
  position: relative;
  width: calc(100vw - 32px);
  height: calc(100svh - 32px);
  max-width: 1500px;
  border-radius: var(--hz-radius-large);
  background: var(--hz-white);
  background-image: url("../img/papier.svg");
  background-repeat: repeat;
  box-shadow: 0 30px 90px rgb(24 39 53 / 0.14), 0 2px 6px rgb(24 39 53 / 0.06);
  overflow: hidden;
  animation: hz-karte-auf 520ms var(--hz-ease-weich) both;
}
@media (max-width: 40rem) {
  .hz-intro-karte {
    width: calc(100vw - 16px);
    height: calc(100svh - 16px);
    border-radius: 20px;
  }
}

@keyframes hz-karte-auf {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* Der Inhalt der Karte · mittig, mit Luft nach unten für die Signatur. */
.hz-intro-mitte {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1.25rem, 3vh, 2.25rem);
  padding: 2rem;
}

/* ── Die Punkte ──
 *
 * Dieselben Koordinaten wie das Signet · sie kommen aus
 * teile/hz-punkte.php, erzeugt aus .claude/werkzeuge/hz_logo.py. Hier
 * steht nur, WOHER jeder Punkt kommt, und das darf beliebig sein: Die
 * Startlage soll verstreut aussehen.
 *
 * overflow: visible am SVG, damit ein Punkt ausserhalb des Signets
 * beginnen kann. Geclippt wird er an der Karte, nicht am Signet.
 *
 * Wie weit gestreut wird, steht als --fw und --fh am Signet und wächst
 * mit dem Fenster · die Begründung dazu am Flug weiter unten.
 */
.hz-intro-signet {
  width: min(46vmin, 300px);
  height: min(46vmin, 300px);
  overflow: visible;
  /* Wie weit die Punkte streuen · siehe den Kommentar am Flug. */
  --fw: 0.038vw;
  --fh: 0.036vh;
  animation: hz-kreis-setzen 620ms var(--hz-ease-weich) 1.32s both;
}
@keyframes hz-kreis-setzen {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

.hz-intro-signet .hz-punkt {
  animation: hz-flug 900ms var(--hz-ease) both;
  animation-delay: calc(0.2s + var(--hz-t, 0) * 0.044s);
}

/*
 * Der Weg ist gebogen und nicht gerade.
 *
 * Elf Punkte, die auf Geraden zur Mitte laufen, sehen aus wie ein
 * Diagramm. Der Zwischenschritt bei 52 Prozent zieht jeden Punkt ein
 * Stück quer · das ist der Unterschied zwischen „Elemente animiert"
 * und „Menschen kommen zusammen".
 *
 * DIE STREUUNG WÄCHST MIT DEM FENSTER, und das ist keine Feinheit.
 *
 * Ein erster Anlauf gab die Startlage in SVG-Einheiten an: fest, und
 * bei einem Signet von 300 Punkten sind 168 Einheiten rund 790
 * Bildpunkte. Auf einem 1280 Punkte breiten Fenster ist die Kachel 624
 * Punkte halbbreit · die Punkte starteten also AUSSERHALB und wurden
 * die erste Sekunde lang von der Kachel abgeschnitten. Gemessen am
 * 18.08.2026: eine Sekunde leeres Papier, dann kamen sie aus dem
 * Nichts.
 *
 * Jetzt sind --fx und --fy Vielfache und --fw/--fh die Umrechnung in
 * Fensterbreite und -höhe. Beide Faktoren wachsen zusammen mit der
 * Kachel, und der weiteste Punkt bleibt bei 390 wie bei 1920 Punkten
 * Fensterbreite innerhalb des Papiers. Nachgerechnet, nicht geschätzt:
 * bei 1920 landet der äusserste bei 677 von 750 Punkten Halbbreite.
 */
@keyframes hz-flug {
  0% {
    opacity: 0;
    transform: translate(calc(var(--fx) * var(--fw)), calc(var(--fy) * var(--fh))) scale(0.5);
  }
  12% { opacity: 1; }
  52% {
    transform: translate(calc(var(--fx) * var(--fw) * 0.36),
                         calc(var(--fy) * var(--fh) * 0.36 + var(--fb, 0) * 1px))
               scale(0.9);
  }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* Startlage und Reihenfolge je Punkt. Der goldene kommt zuletzt · er
   ist im Logo der eine, der noch dazukommt. */
.hz-intro-signet .hz-punkt--1  { --fx: -168; --fy: -104; --fb: 26; --hz-t: 0; }
.hz-intro-signet .hz-punkt--2  { --fx:  152; --fy: -138; --fb: -22; --hz-t: 3; }
.hz-intro-signet .hz-punkt--3  { --fx:  186; --fy:  -34; --fb: 30; --hz-t: 1; }
.hz-intro-signet .hz-punkt--4  { --fx:  128; --fy:  126; --fb: -28; --hz-t: 5; }
.hz-intro-signet .hz-punkt--5  { --fx:   38; --fy:  176; --fb: 24; --hz-t: 2; }
.hz-intro-signet .hz-punkt--6  { --fx:  -96; --fy:  158; --fb: -20; --hz-t: 7; }
.hz-intro-signet .hz-punkt--7  { --fx: -178; --fy:   72; --fb: 28; --hz-t: 4; }
.hz-intro-signet .hz-punkt--8  { --fx: -142; --fy:  -26; --fb: -26; --hz-t: 8; }
.hz-intro-signet .hz-punkt--9  { --fx:  -54; --fy: -166; --fb: 22; --hz-t: 6; }
.hz-intro-signet .hz-punkt--10 { --fx:   84; --fy: -172; --fb: -24; --hz-t: 9; }
.hz-intro-signet .hz-punkt--11 { --fx:    6; --fy: -198; --fb: 34; --hz-t: 11; }

/* ── Die Wortmarke ──
   Sie steigt aus dem Papier: eine Clip-Maske von unten, dazu ein
   kleiner Versatz. Beides nur transform und clip-path. */
.hz-intro-wort {
  animation: hz-wort-auf 720ms var(--hz-ease) 1.5s both;
}
@keyframes hz-wort-auf {
  from { clip-path: inset(0 0 108% 0); transform: translateY(0.32em); }
  to   { clip-path: inset(0 0 -12% 0); transform: translateY(0); }
}

/* ── Die Signatur ──
   Sie wird geschrieben: eine sehr dicke Strichmaske über der Schrift,
   von links nach rechts freigegeben. Der Pfad steht in
   assets/img/signatur-studio.svg und ist im Intro als Markup
   eingebettet, damit diese Regel ihn erreicht. */
.hz-intro-signatur {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  color: var(--hz-gold-dark);
}
.hz-intro-signatur .hz-signatur-svg { height: clamp(1.9rem, 4vw, 2.6rem); }

/*
 * pathLength kennt dieses Stylesheet nicht, also wird die Strichlänge
 * grosszügig gesetzt: Der Weg ist rund 290 Einheiten lang, 420 deckt
 * ihn mit Rand. Zu viel schadet nicht · dann startet die Maske nur
 * etwas weiter links ausserhalb.
 */
.hz-intro .hz-schreibweg {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: hz-schreiben 780ms cubic-bezier(0.5, 0.1, 0.35, 1) 1.86s both;
}
@keyframes hz-schreiben {
  to { stroke-dashoffset: 0; }
}

/* ── Der Übergang in den Hero ──
   Die Karte dehnt sich bis an die Kanten, verliert ihre Rundung und
   blendet ab. Kein harter Schnitt: Der Hero liegt schon darunter. */
.hz-intro-karte {
  animation: hz-karte-auf 520ms var(--hz-ease-weich) both,
             hz-karte-oeffnen 620ms var(--hz-ease) 2.4s both;
}
@keyframes hz-karte-oeffnen {
  0% { width: calc(100vw - 32px); height: calc(100svh - 32px);
       border-radius: var(--hz-radius-large); opacity: 1; }
  55% { width: 100vw; height: 100svh; border-radius: 0; opacity: 1; }
  100% { width: 100vw; height: 100svh; border-radius: 0; opacity: 0; }
}
.hz-intro { animation: hz-intro-weg 380ms ease 2.64s both; }
@keyframes hz-intro-weg {
  to { background-color: rgb(227 217 198 / 0); }
}

/* Ein Klick, eine Taste, eine Wischbewegung · und alles ist sofort
   weg. Ohne Ruck: 240 ms Ausblenden, dann nimmt das Skript die Fläche
   aus dem Baum. */
.hz-intro.ist-fertig {
  animation: none;
  opacity: 0;
  transition: opacity 240ms ease;
}
.hz-intro.ist-fertig .hz-intro-karte { animation-play-state: paused; }

/* ── Die kurze Fassung ──
   Zweiter Aufruf in derselben Sitzung. Keine Punktwanderung, keine
   Schreibanimation · nur die Karte mit dem Logo, sehr kurz. Das ist
   das Höchste, was ein zweiter Aufruf zeigen darf. */
html.hz-intro-kurz .hz-intro { animation: hz-intro-weg 240ms ease 380ms both; }
html.hz-intro-kurz .hz-intro-karte {
  animation: hz-karte-auf 260ms var(--hz-ease-weich) both,
             hz-karte-oeffnen 340ms var(--hz-ease) 300ms both;
}
html.hz-intro-kurz .hz-intro-signet { animation: none; }
html.hz-intro-kurz .hz-intro-signet .hz-punkt { animation: none; }
html.hz-intro-kurz .hz-intro-wort { animation: hz-wort-auf 300ms var(--hz-ease) 60ms both; }
html.hz-intro-kurz .hz-intro-signatur { display: none; }

/*
 * Ruhe gewünscht: kein Flug, kein Schreiben.
 *
 * Das Logo steht einen Moment still da, dann wechselt die Seite in den
 * Hero. Die Karte dehnt sich nicht, sie blendet nur ab · eine Fläche,
 * die ihre Maße ändert, ist genau die Bewegung, die hier nicht
 * erwünscht ist.
 */
@media (prefers-reduced-motion: reduce) {
  .hz-intro-karte,
  html.hz-intro-kurz .hz-intro-karte {
    animation: hz-intro-weg 260ms ease 900ms both;
  }
  .hz-intro-signet,
  .hz-intro-signet .hz-punkt,
  .hz-intro-wort,
  html.hz-intro-kurz .hz-intro-wort { animation: none; }
  .hz-intro .hz-schreibweg { stroke-dashoffset: 0; animation: none; }
  .hz-intro { animation: hz-intro-weg 260ms ease 900ms both; }
}

/* == 02 · Hero ====================================================== */

/*
 * Links steht, was verkauft wird. Rechts der Beweis.
 *
 * Die Aufteilung ist absichtlich unsymmetrisch (7 zu 5) und die
 * Bildseite ragt nach oben aus der Textzeile heraus. Zwei gleich
 * große Hälften wären der Aufbau, den jede zweite Produktseite hat.
 */
.hz-hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}
.hz-hero-raster {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 62rem) {
  .hz-hero-raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5.6fr);
    gap: clamp(2rem, 4vw, 4.5rem);
  }
}

.hz-hero-text .hz-display { margin-bottom: 1.4rem; }
.hz-hero-text .hz-text--gross { margin-bottom: 2rem; }
.hz-hero-knoepfe { margin-bottom: clamp(2rem, 4vw, 2.75rem); }

/* ── Der Film hinter dem Hero ──
 *
 * Er liegt über die ganze Breite und nicht in einer Spalte. Deshalb
 * bekommt der Abschnitt eine Mindesthöhe: Ein Film, der nur so hoch
 * ist wie sein Text, ist ein Streifen und kein Bild.
 *
 * DER SCHLEIER IST EINE MASKE UND KEIN VERLAUF. Eine Fläche in
 * Papierfarbe, der die Maske nach rechts hin die Deckung nimmt. Der
 * Unterschied zählt am Tag, an dem ein Browser die Maske nicht kann:
 * Dann bleibt die Fläche vollständig deckend, der Film ist weg und
 * der Text lesbar. Mit einem Verlauf wäre es andersherum · Film da,
 * Text unlesbar. Ein Rückfall darf nicht schlimmer sein als gar
 * keine Verzierung.
 *
 * WO DIE MASKE VOLL DECKT, IST GEMESSEN UND NICHT GESCHÄTZT. Der
 * gedämpfte Fließtext der Marke steht auf Papier bei 4,7:1 und hat
 * damit fast keine Reserve; schon vierzig Prozent durchscheinendes
 * Sommerbild drücken ihn auf 2,4:1.
 *
 * Genau deshalb steht im Hero seit dem 19.08.2026 kein gedämpfter
 * Text mehr, sondern nur die Überschrift in voller Tinte und ein
 * Knopf mit eigener Fläche. Beide vertragen den Film, und darum darf
 * die Maske schon bei 20 Prozent aufmachen statt bei 50. Der
 * Zusammenhang gilt in beide Richtungen: Wer wieder Text in den Hero
 * stellt, muss die Maske zuziehen · und misst nach.
 */
.hz-hero--film {
  position: relative;
  isolation: isolate;
  min-height: min(40rem, 84svh);
  display: grid;
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.hz-hero-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--hz-paper);
}
.hz-hero--film .hz-hero-raster {
  position: relative;
  z-index: 1;
}

/* object-position leicht nach rechts: Beim Beschnitt auf schmalen
   Fenstern soll die Beifahrerin mit der Karte im Bild bleiben und
   nicht als Erstes herausfallen. */
.hz-hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}

.hz-hero-schleier {
  position: absolute;
  inset: 0;
  background: var(--hz-paper);
  -webkit-mask-image: linear-gradient(to right,
      #000 0%, #000 20%,
      rgba(0, 0, 0, 0.86) 34%,
      rgba(0, 0, 0, 0.46) 48%,
      rgba(0, 0, 0, 0) 62%);
          mask-image: linear-gradient(to right,
      #000 0%, #000 20%,
      rgba(0, 0, 0, 0.86) 34%,
      rgba(0, 0, 0, 0.46) 48%,
      rgba(0, 0, 0, 0) 62%);
}

/*
 * Schmale Fenster: der Film steht ÜBER dem Text und nicht dahinter.
 *
 * Dahinter ginge nicht. Auf 375 Punkten füllt der Text die ganze
 * erste Bildschirmhöhe · es gibt dort keine Stelle, an der der Film
 * sichtbar sein könnte, ohne unter Schrift zu liegen. Gemessen: mit
 * einem Schleier von oben lag die Vertrauenszeile am unteren Rand
 * bei 2,2:1. Entweder man deckt ihn so weit ab, dass nichts mehr von
 * ihm übrig ist, oder man gibt ihm eine eigene Fläche. Das Zweite
 * ist ehrlicher.
 *
 * Der Schleier bleibt und wird zur Kante: Er nimmt dem Film den
 * unteren Rand, damit er ins Papier übergeht statt abgeschnitten zu
 * enden.
 */
@media (max-width: 61.99rem) {
  .hz-hero--film {
    grid-template-rows: clamp(15rem, 38svh, 22rem) auto;
    min-height: 0;
    align-items: stretch;
    padding-block-start: 0;
  }
  .hz-hero-film {
    position: relative;
    inset: auto;
    grid-row: 1;
  }
  .hz-hero--film .hz-hero-raster {
    grid-row: 2;
    padding-block-start: clamp(1.75rem, 6vw, 2.5rem);
  }
  .hz-hero-video { object-position: 62% 50%; }
  .hz-hero-schleier {
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 62%,
        rgba(0, 0, 0, 0.55) 86%,
        #000 100%);
            mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 62%,
        rgba(0, 0, 0, 0.55) 86%,
        #000 100%);
  }
}

/* Ruhe gewünscht: das Standbild genügt. Angehalten wird der Film in
   hz-start.js · hier steht nur, dass er dann nichts Halbes zeigt. */
@media (prefers-reduced-motion: reduce) {
  .hz-hero-video { object-position: 55% 50%; }
}

/* ── Der Beweis · drei echte Seiten unter dem Film ──
 *
 * Text links und schmal, Stapel rechts und breit. Umgekehrt zum
 * Hero darüber, damit die zweite Bildschirmhöhe nicht aussieht wie
 * eine Wiederholung der ersten.
 */
.hz-beweis {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hz-beweis-raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 62rem) {
  .hz-beweis-raster {
    grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr);
  }
}
.hz-beweis-text .hz-eyebrow { margin-bottom: 0.9rem; }

/* ── Die Vorschau-Stapel ──
 *
 * Drei echte Beispielseiten, leicht versetzt übereinander. Kein
 * 3D-Kippen beim Überfahren: Eine perspektivisch verzogene Webseite
 * ist schlechter zu erkennen, und darum geht es hier.
 */
.hz-stapel {
  position: relative;
  aspect-ratio: 5 / 4.4;
  min-height: 20rem;
}
.hz-stapel-karte {
  position: absolute;
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
  box-shadow: var(--hz-shadow-card);
  overflow: hidden;
  transition: transform 520ms var(--hz-ease), box-shadow 420ms ease;
}
.hz-stapel-karte img { width: 100%; display: block; }

/* Hinten links, hinten rechts, vorn. Die Drehungen sind klein · über
   drei Grad sieht es nach Versehen aus. */
.hz-stapel-karte--a {
  left: 0; top: 6%;
  width: 62%;
  rotate: -2.4deg;
  z-index: 1;
}
.hz-stapel-karte--b {
  right: 0; top: 0;
  width: 54%;
  rotate: 2deg;
  z-index: 2;
}
.hz-stapel-karte--c {
  left: 14%; bottom: 0;
  width: 72%;
  rotate: -0.6deg;
  z-index: 3;
  box-shadow: var(--hz-shadow-lift);
}

@media (hover: hover) and (pointer: fine) {
  .hz-stapel:hover .hz-stapel-karte--a { transform: translate(-2%, -1.5%) rotate(-0.8deg); }
  .hz-stapel:hover .hz-stapel-karte--b { transform: translate(2%, -2%) rotate(0.6deg); }
  .hz-stapel:hover .hz-stapel-karte--c { transform: translateY(-1.5%); }
}

/*
 * Die vordere Karte zeigt, dass es eine ganze Seite ist.
 *
 * Ein hohes Bildschirmfoto wandert im Rahmen sehr langsam nach oben
 * und wieder zurück · 24 Sekunden für einen Weg. Es ist eine einzige
 * transform-Animation auf einem Bild, keine Leinwand und kein
 * Scrollhandler; die Grafikkarte macht das ohne Zutun des Hauptfadens.
 */
.hz-stapel-fenster {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.hz-stapel-fenster img {
  position: absolute;
  inset-inline: 0;
  top: 0;
}
.hz-stapel-karte--c .hz-stapel-fenster img {
  animation: hz-blaettern 48s cubic-bezier(0.45, 0, 0.55, 1) 2.5s infinite;
}
@keyframes hz-blaettern {
  0%, 8%    { transform: translateY(0); }
  46%, 54%  { transform: translateY(calc(-100% + 100cqh)); }
  92%, 100% { transform: translateY(0); }
}
.hz-stapel-fenster { container-type: size; }

@media (prefers-reduced-motion: reduce) {
  .hz-stapel-karte--c .hz-stapel-fenster img { animation: none; }
}

/* ── Die Leiste einer Attrappe ──
   Drei Punkte statt drei Kreise in Rot, Gelb, Grün. Dieselbe
   Formensprache wie überall, und sie behauptet kein Betriebssystem. */
.hz-fensterleiste {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--hz-line);
  background: var(--hz-paper);
}
.hz-fensterleiste span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hz-line-strong);
  opacity: 0.6;
}
.hz-fensterleiste span:first-child { background: var(--hz-gold); opacity: 1; }
.hz-fensterleiste-adresse {
  margin-left: 0.5rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--hz-white);
  color: var(--hz-muted-text);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Auf dem Telefon liegt nichts übereinander · dort wird gewischt. */
@media (max-width: 61.999rem) {
  .hz-stapel {
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    gap: 1rem;
    margin-inline: calc(-1 * var(--hz-rand));
    padding: 0.5rem var(--hz-rand) 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }
  .hz-stapel-karte {
    position: static;
    flex: 0 0 min(78%, 22rem);
    width: auto;
    rotate: none;
    scroll-snap-align: center;
  }
  .hz-stapel-karte--c { box-shadow: var(--hz-shadow-card); }
}

/* == 03 · Die Vertrauenszeile ======================================= */

/*
 * Vier Angaben, als Sätze mit einem Punkt davor · kein Kennzahlenband
 * mit großer Ziffer und Etikett darunter. Das ist der Block, den jede
 * zweite Seite hat, und die Zahlen darin sind meistens erfunden.
 * Diese hier kommen aus den Einstellungen.
 */
.hz-vertrauenszeile {
  display: grid;
  gap: 0.5rem 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  padding-top: 1.4rem;
  border-top: 1px solid var(--hz-line);
  color: var(--hz-muted-text);
  font-size: 0.9375rem;
}
.hz-vertrauenszeile li { list-style: none; display: flex; gap: 0.55rem; }
.hz-vertrauenszeile ul { display: contents; }
.hz-vertrauenszeile li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--hz-gold);
}
.hz-vertrauenszeile strong { color: var(--hz-ink); font-weight: 700; }

/* == 04 · Der Anlassfilter auf /vorlagen ============================

   Eine Reihe aus Verweisen und kein Formular · zehn Anlässe sind zehn
   Adressen, jede lässt sich merken und weitergeben, und ohne
   JavaScript geht alles davon. Die Begründung steht ausführlich in
   events/seiten/vorlagen.php.

   SIE UMBRICHT UND SCROLLT NICHT. Eine waagerecht scrollende
   Filterleiste versteckt die Hälfte ihrer Möglichkeiten hinter einer
   Wischbewegung, die auf dem Schreibtisch niemand macht. Elf Knöpfe in
   drei Zeilen sind auf dem Telefon länger und vollständig.
   ================================================================== */

.hz-vorlagenfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

.hz-filterknopf {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--hz-line);
  border-radius: 999px;
  background: var(--hz-white);
  color: var(--hz-muted-text);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}
.hz-filterknopf:hover { border-color: var(--hz-line-strong); color: var(--hz-ink); }
.hz-filterknopf:focus-visible { outline: 2px solid var(--hz-gold-dark); outline-offset: 3px; }

/* Der gewählte Filter · Fläche und nicht nur Rahmen. Ein Zustand, der
   allein an der Rahmenfarbe hängt, ist bei elf Knöpfen nebeneinander
   schwer zu finden und für jemanden mit Farbschwäche gar nicht. */
.hz-filterknopf--an {
  border-color: var(--hz-ink);
  background: var(--hz-ink);
  color: var(--hz-on-ink);
  font-weight: 600;
}
.hz-filterknopf--an:hover { color: var(--hz-on-ink); border-color: var(--hz-ink); }

/* == 05 · Live-Beispiele ============================================ */

/*
 * Unterschiedliche Höhen, große Vorschauflächen, feine Rahmen, eine
 * handschriftliche Notiz. Keine drei gleich hohen Karten in einer
 * Reihe · das ist der Aufbau, an dem man ein Baukasten-Produkt
 * erkennt, und dieses hier ist keins.
 */
.hz-beispiele-raster {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) {
  .hz-beispiele-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Die mittlere JEDER Reihe sitzt tiefer · das bricht die Reihe
     auf, ohne die Ordnung zu verlieren.

     Bis zum 18.08.2026 stand hier nth-child(2). Das stimmte, solange
     es genau drei Vorlagen gab; bei zwölf wäre nur die erste Reihe
     versetzt gewesen und die drei darunter schnurgerade. */
  .hz-beispiel:nth-child(3n+2) { margin-top: clamp(1.5rem, 4vw, 3.25rem); }
}

.hz-beispiel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
  background-image: url("../img/papier.svg");
  background-repeat: repeat;
  overflow: hidden;
  transition: box-shadow 320ms ease, transform 420ms var(--hz-ease);
}
.hz-beispiel:hover {
  box-shadow: var(--hz-shadow-card);
  transform: translateY(-3px);
}
.hz-beispiel-bild {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.2;
  background: var(--hz-paper-2);
  overflow: hidden;
}
.hz-beispiel-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 800ms var(--hz-ease);
}
.hz-beispiel:hover .hz-beispiel-bild img { transform: scale(1.025); }

.hz-beispiel-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.6rem;
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
}
.hz-beispiel-name { font-family: "Fraunces hz", Georgia, serif; font-optical-sizing: auto;
  font-size: 1.5rem; font-weight: 470; letter-spacing: -0.016em; }
.hz-beispiel-stimmung { color: var(--hz-gold-text); font-size: 0.9375rem; font-weight: 600; }
.hz-beispiel-satz { color: var(--hz-muted-text); font-size: 0.9375rem; }

/* Die Notiz am Rand · sie sagt, für welche Anlässe die Vorlage
   gedacht ist, und sie sagt es in Handschrift, weil es ein Rat ist
   und keine Eigenschaft. */
.hz-beispiel-notiz {
  margin-top: 0.15rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--hz-line);
}
.hz-beispiel-notiz .hz-hand { font-size: 1.2rem; }

.hz-beispiel-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.85rem;
}
.hz-beispiel-knoepfe .hz-knopf { min-height: 2.85rem; padding-inline: 1.1rem; font-size: 0.9375rem; }

.hz-beispiel-punkte {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  width: 4.5rem;
  opacity: 0.85;
}

/* == 06 · Anlässe =================================================== */

/*
 * Zehn Anlässe, jeder mit seiner eigenen Punktformation.
 *
 * Keine Emoji und keine Piktogramme: Zehn kleine Zeichnungen wären
 * zehn Fremdkörper, und für „Abschied und Gedenken" gibt es kein
 * Piktogramm, das nicht falsch wäre. Punkte können das · siehe die
 * Formationen in teile/hz-marke.php.
 */
/*
 * ZWEI ODER FÜNF SPALTEN, und die Zahlen sind nicht beliebig.
 *
 * Beide teilen die zehn Anlässe aus ANLAESSE ohne Rest. Ein auto-fit
 * mit minmax stand hier zuerst und ergab auf einem breiten Schirm vier
 * Spalten · dann blieben in der letzten Reihe zwei leere Felder stehen,
 * eingerahmt von den Trennlinien ihrer Nachbarn, und sahen aus wie
 * zwei Anlässe, die nicht geladen haben.
 *
 * Kommt ein elfter Anlass dazu, gehört diese Zahl mit angepasst. Die
 * Abnahmeprüfung sagt es: Sie rechnet nach, ob die Anzahl der Anlässe
 * durch beide Spaltenzahlen teilbar ist.
 */
.hz-anlassraster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
  overflow: hidden;
}
@media (min-width: 62rem) {
  .hz-anlassraster { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/*
 * Ein Raster aus Linien und keine Kästen mit Abstand.
 *
 * DIE LINIEN SIND SCHATTEN und keine Lücken über einem farbigen Grund.
 * Der erste Anlauf setzte gap: 1px auf einen Grund in Linienfarbe · das
 * ist der bekannte Trick, und er hat einen Fehler: Zehn Anlässe gehen in
 * einem Raster mit vier Spalten nicht auf, und die beiden leeren Felder
 * der letzten Reihe standen als graue Kästen da. Ein box-shadow braucht
 * keinen Grund, verschiebt nichts und lässt leere Felder leer; die
 * äusseren Linien schneidet das overflow: hidden des Rasters ab.
 */
.hz-anlass {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 9.5rem;
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  background: var(--hz-white);
  color: var(--hz-ink);
  text-decoration: none;
  box-shadow: 1px 0 0 var(--hz-line), 0 1px 0 var(--hz-line);
  transition: background-color 220ms ease;
}
.hz-anlass:hover { background: var(--hz-paper); }
.hz-anlass .hz-anlassform { transition: transform 420ms var(--hz-ease); }
.hz-anlass:hover .hz-anlassform { transform: translateY(-2px) scale(1.04); }
.hz-anlass-name { margin-top: auto; font-size: 1.0625rem; font-weight: 700; }
.hz-anlass-satz { color: var(--hz-muted-text); font-size: 0.875rem; }
.hz-anlass:hover .hz-anlass-name { text-decoration: underline; text-underline-offset: 0.2em; }

.hz-anlass-fuss { margin-top: 1.5rem; color: var(--hz-muted-text); font-size: 0.9375rem; }

/* == 07 · Ein Link. Alles drin. ===================================== */

.hz-produkt-raster {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 58rem) {
  .hz-produkt-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}

/*
 * Die Liste der sieben Stellen.
 *
 * Sie ist ohne jede Animation vollständig lesbar · das ist die
 * Bedingung. Mit Skript hebt sich beim Scrollen eine nach der anderen
 * hervor, und die Telefonansicht daneben wandert einen Schritt weiter.
 * KEINE SCROLL-SPERRE und kein erzwungenes Scrollytelling: Wer schnell
 * scrollt, sieht dieselbe Liste, nur ohne die Hervorhebung.
 */
.hz-stellen { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.hz-stelle {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--hz-line);
  color: var(--hz-muted-text);
  transition: color 260ms ease;
}
.hz-stelle:last-child { border-bottom: 1px solid var(--hz-line); }
.hz-stelle::before {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-top: 0.45em;
  border: 1.5px solid var(--hz-line-strong);
  border-radius: 50%;
  transition: background-color 260ms ease, border-color 260ms ease, transform 320ms var(--hz-ease);
}
.hz-stelle b { font-weight: 700; }
.hz-stelle.ist-aktiv { color: var(--hz-ink); }
.hz-stelle.ist-aktiv::before {
  background: var(--hz-gold);
  border-color: var(--hz-gold);
  transform: scale(1.25);
}

/* ── Die Telefonattrappe ──
   Ein Rahmen und ein echtes Bildschirmfoto darin. Keine Nachbildung
   eines bestimmten Geräts · ein gezeichnetes iPhone wäre eine fremde
   Marke auf dieser Seite. */
.hz-telefon {
  position: relative;
  width: min(100%, 20rem);
  margin-inline: auto;
  padding: 0.6rem;
  border: 1px solid var(--hz-line);
  border-radius: 2.1rem;
  background: var(--hz-white);
  box-shadow: var(--hz-shadow-card);
}
.hz-telefon-schirm {
  position: relative;
  aspect-ratio: 9 / 17;
  border-radius: 1.6rem;
  background: var(--hz-paper-2);
  overflow: hidden;
}
.hz-telefon-schirm img {
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 100%;
  transition: transform 900ms var(--hz-ease-weich);
}

/*
 * Sieben Stellen, sieben Schritte über die ganze Seite.
 *
 * Die Zahl kommt aus dem Markup (data-stelle) und die Verschiebung
 * hier · so gibt es keine Rechnung im Skript, die niemand nachlesen
 * kann, und keine Inline-Angabe, die die Sicherheitsrichtlinie
 * verwerfen würde.
 */
.hz-telefon[data-stelle="1"] .hz-telefon-schirm img { transform: translateY(0); }
.hz-telefon[data-stelle="2"] .hz-telefon-schirm img { transform: translateY(-14%); }
.hz-telefon[data-stelle="3"] .hz-telefon-schirm img { transform: translateY(-28%); }
.hz-telefon[data-stelle="4"] .hz-telefon-schirm img { transform: translateY(-42%); }
.hz-telefon[data-stelle="5"] .hz-telefon-schirm img { transform: translateY(-56%); }
.hz-telefon[data-stelle="6"] .hz-telefon-schirm img { transform: translateY(-70%); }
.hz-telefon[data-stelle="7"] .hz-telefon-schirm img { transform: translateY(-84%); }

.hz-telefon-hand {
  position: absolute;
  left: -1.5rem;
  bottom: -2.25rem;
  rotate: -6deg;
}
@media (max-width: 57.999rem) { .hz-telefon-hand { display: none; } }

/* == 08 · Ablauf ==================================================== */

/*
 * Drei Schritte auf der Verkaufsseite, sieben im Bestellprozess.
 *
 * Das ist kein Widerspruch, sondern die Antwort auf zwei verschiedene
 * Fragen: „Was muss ich tun?" hat drei Teile, „Wo bin ich gerade?"
 * hat sieben. Die sieben stehen dort, wo sie helfen · in der
 * Schrittleiste des Formulars.
 */
.hz-ablauf-raster {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: hzschritt;
}
@media (min-width: 48rem) {
  .hz-ablauf-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
}

.hz-ablauf-schritt { position: relative; padding-top: 3.5rem; }
.hz-ablauf-schritt::before {
  counter-increment: hzschritt;
  content: counter(hzschritt);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--hz-gold);
  border-radius: 50%;
  background: var(--hz-paper);
  color: var(--hz-gold-text);
  font-size: 0.9375rem;
  font-weight: 700;
}
.hz-ablauf-schritt h3 { margin-bottom: 0.6rem; }
.hz-ablauf-schritt p { color: var(--hz-muted-text); max-width: 40ch; }

/*
 * Die goldene Linie.
 *
 * Sie sieht von Hand gezogen aus, weil sie es ist: eine Bézierkurve
 * mit leicht ungleichen Kontrollpunkten. Beim Eintritt zeichnet sie
 * sich über stroke-dashoffset, danach laufen drei Punkte darüber.
 *
 * Nur ab 48rem. Darunter stehen die Schritte untereinander, und eine
 * waagerechte Linie hätte dort nichts zu verbinden.
 */
.hz-ablauf-linie { display: none; }
@media (min-width: 48rem) {
  .hz-ablauf-linie {
    display: block;
    position: absolute;
    top: 1.25rem;
    left: 8%;
    width: 84%;
    height: 3rem;
    overflow: visible;
    pointer-events: none;
  }
  .hz-ablauf-linie path {
    fill: none;
    stroke: var(--hz-gold);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
  }
  html.js .hz-ablauf-raster.ist-da .hz-ablauf-linie path {
    animation: hz-linie-ziehen 1.5s var(--hz-ease-weich) both;
  }
  html:not(.js) .hz-ablauf-linie path { stroke-dashoffset: 0; }

  .hz-ablauf-linie circle { fill: var(--hz-gold); opacity: 0; }
  html.js .hz-ablauf-raster.ist-da .hz-ablauf-linie circle {
    animation: hz-punkt-wandern 2.6s var(--hz-ease-weich) both;
  }
  .hz-ablauf-linie circle:nth-of-type(2) { animation-delay: 0.5s !important; }
  .hz-ablauf-linie circle:nth-of-type(3) { animation-delay: 1s !important; }
}
@keyframes hz-linie-ziehen { to { stroke-dashoffset: 0; } }
@keyframes hz-punkt-wandern {
  0%   { opacity: 0; transform: translateX(0) translateY(0); }
  12%  { opacity: 1; }
  50%  { transform: translateX(300px) translateY(-3px); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(600px) translateY(1px); }
}

/* Untereinander verbindet eine senkrechte Linie · dieselbe Farbe,
   dieselbe Aufgabe. */
@media (max-width: 47.999rem) {
  .hz-ablauf-schritt { padding-left: 3.75rem; padding-top: 0; min-height: 3rem; }
  .hz-ablauf-schritt::before { top: -0.15rem; }
  .hz-ablauf-schritt:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 2.85rem;
    bottom: -2.5rem;
    width: 1px;
    background: linear-gradient(var(--hz-gold), rgb(181 138 73 / 0.25));
  }
}

.hz-ablauf-nachsatz {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hz-line);
}

/* == 09 · Preise ==================================================== */

.hz-preisraster {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 46rem) {
  .hz-preisraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hz-preis {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
  box-shadow: var(--hz-shadow-soft);
}
/* Plus trägt einen goldenen Streifen oben · als Kennzeichnung dafür,
   dass hier die Rückmeldungen drin sind, nicht als „beliebteste
   Wahl". Eine solche Behauptung bräuchte Zahlen, die es nicht gibt. */
.hz-preis--plus { border-color: var(--hz-gold); box-shadow: var(--hz-shadow-card); }
.hz-preis--plus::before {
  content: "";
  height: 3px;
  margin: calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) 1.5rem;
  border-radius: var(--hz-radius-medium) var(--hz-radius-medium) 0 0;
  background: var(--hz-gold);
}

.hz-preis-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.hz-preis-name { font-family: "Fraunces hz", Georgia, serif; font-optical-sizing: auto;
  font-size: 1.6rem; font-weight: 470; letter-spacing: -0.016em; }
.hz-preis-marke {
  padding: 0.22rem 0.65rem;
  border: 1px solid var(--hz-gold);
  border-radius: 999px;
  color: var(--hz-gold-text);
  font-size: 0.75rem;
  font-weight: 700;
}
.hz-preis-betrag {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1rem;
}
.hz-preis-zahl {
  font-size: clamp(2.6rem, 1.8rem + 2.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.hz-preis-einmal { color: var(--hz-muted-text); font-size: 0.9375rem; }
.hz-preis-satz { margin-top: 0.9rem; color: var(--hz-muted-text); }
.hz-preis .hz-knopf { margin-top: 1.4rem; }
.hz-preis-liste { margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--hz-line); list-style: none; }
.hz-preis-liste li {
  position: relative;
  padding-left: 1.35rem;
  margin-block: 0.45rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.hz-preis-liste li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hz-gold);
}
.hz-preis-zwischen {
  margin-top: 1.5rem;
  color: var(--hz-muted-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ── Individuell ──
   Eine ruhigere Zeile unter den beiden Paketen und keine dritte
   Karte. Als Karte daneben wäre sie eine Wahl, die hier niemand
   treffen soll. */
.hz-individuell,
.hz-verlaengerung {
  display: grid;
  gap: 1rem 2rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: transparent;
}
@media (min-width: 46rem) {
  .hz-individuell,
  .hz-verlaengerung { grid-template-columns: minmax(0, 1fr) auto; }
}
.hz-individuell h3,
.hz-verlaengerung h3 { font-size: 1.15rem; font-weight: 700; font-family: inherit; letter-spacing: -0.01em; }
.hz-individuell p,
.hz-verlaengerung-text p { margin-top: 0.5rem; max-width: 62ch; color: var(--hz-muted-text); font-size: 0.9375rem; }

.hz-verlaengerung-preis { display: grid; gap: 0.15rem; }
.hz-verlaengerung-preis strong { font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.hz-verlaengerung-preis span { color: var(--hz-muted-text); font-size: 0.875rem; }
@media (min-width: 46rem) {
  .hz-verlaengerung-preis { text-align: right; justify-items: end; }
}

.hz-preisfuss { max-width: 74ch; margin-top: clamp(1.75rem, 3vw, 2.5rem); color: var(--hz-muted-text); font-size: 0.9375rem; }
.hz-preisfuss + .hz-preisfuss { margin-top: 1rem; }

/* == 10 · Vertrauen ================================================= */

.hz-vertrauen-raster {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 42rem) { .hz-vertrauen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .hz-vertrauen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hz-vertrauen-raster li {
  display: flex;
  gap: 0.8rem;
  padding: 1.15rem 1.5rem 1.15rem 0;
  border-top: 1px solid var(--hz-line);
}
.hz-vertrauen-raster li::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--hz-gold);
}
.hz-vertrauen-raster b { display: block; font-weight: 700; }
.hz-vertrauen-raster span { color: var(--hz-muted-text); font-size: 0.9375rem; }

/* == 11 · Fragen ==================================================== */

/*
 * Echte Knöpfe mit aria-expanded, nicht <details>.
 *
 * OHNE SKRIPT STEHT ALLES OFFEN, und aria-expanded steht dann auf
 * true · das ist der Grund, warum das Markup offen ausgeliefert wird
 * und das Skript zuklappt. Andersherum stünde im Markup „zu", während
 * der Text sichtbar wäre: eine Angabe, die ein Vorleseprogramm
 * falsch wiedergibt.
 */
.hz-fragen { max-width: 54rem; }
.hz-frage { border-top: 1px solid var(--hz-line); }
.hz-frage:last-child { border-bottom: 1px solid var(--hz-line); }

.hz-frage-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 1.15rem 0;
  border: 0;
  background: none;
  color: var(--hz-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.008em;
  text-align: left;
  cursor: pointer;
}
@media (pointer: coarse) { .hz-frage-knopf { padding-block: 1.35rem; } }

/* Ein Punkt, der zum Ring wird · dasselbe Zeichen wie überall, und
   es hängt nicht an der Farbe. */
.hz-frage-zeichen {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}
.hz-frage-zeichen::before,
.hz-frage-zeichen::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--hz-gold-dark);
  transition: transform 260ms var(--hz-ease), opacity 200ms ease;
}
.hz-frage-zeichen::before { width: 1.1rem; height: 1.5px; transform: translate(-50%, -50%); }
.hz-frage-zeichen::after { width: 1.5px; height: 1.1rem; transform: translate(-50%, -50%); }
.hz-frage-knopf[aria-expanded="true"] .hz-frage-zeichen::after { transform: translate(-50%, -50%) scaleY(0); }

.hz-frage-antwort { padding-bottom: 1.5rem; }
.hz-frage-antwort p { max-width: 66ch; color: var(--hz-muted-text); }
.hz-frage-antwort[hidden] { display: none; }

.hz-fragen-fuss { margin-top: 1.75rem; color: var(--hz-muted-text); font-size: 0.9375rem; }

/* == 12 · Grenzen =================================================== */

/*
 * „Wofür eine Eventseite nicht gedacht ist."
 *
 * Der Abschnitt bleibt · wer erst hinterher merkt, dass etwas nicht
 * geht, fühlt sich hereingelegt, auch wenn alles stimmt. Er steht
 * aber weit unten und ruhig: als Linienliste auf Papier, ohne Kästen,
 * ohne Signalfarbe. Direkt hinter den Verkaufsargumenten war er eine
 * Warnwand.
 */
.hz-grenzen-raster {
  display: grid;
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 46rem) { .hz-grenzen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hz-grenzen-raster li { padding: 1.35rem 0; border-top: 1px solid var(--hz-line); }
.hz-grenzen-raster h3 { font-family: inherit; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.008em; }
.hz-grenzen-raster p { margin-top: 0.45rem; max-width: 52ch; color: var(--hz-muted-text); font-size: 0.9375rem; }

/* == 13 · Abschluss ================================================= */

/*
 * Die Punkte beginnen am Rand der Fläche und wandern zu einem
 * gemeinsamen Kreis · einmal, beim Eintritt in den Sichtbereich.
 * Nicht in einer Schleife: Eine Fläche, auf der dauernd etwas kreist,
 * ist nach zehn Sekunden anstrengend und kostet die ganze Zeit Strom.
 */
.hz-schluss { position: relative; overflow: hidden; text-align: center; }
.hz-schluss-innen {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}
.hz-schluss .hz-display { max-width: 30ch; }
.hz-schluss .hz-text--gross { max-width: 48ch; color: var(--hz-muted-light); }
.hz-schluss .hz-hand { margin-top: 0.5rem; }

.hz-schluss-signet {
  width: min(58vmin, 320px);
  height: min(58vmin, 320px);
  margin-bottom: -0.5rem;
  overflow: visible;
  /* Weiter als im Intro: Hier SOLLEN die Punkte am Rand der Fläche
     beginnen, nicht mitten darin. Nachgerechnet für 1440 Punkte
     Fensterbreite: der äusserste startet bei 662 von 720 Punkten
     Halbbreite, also gerade eben im Bild. */
  --fw: 0.028vw;
  --fh: 0.039vh;
}
.hz-schluss-signet .hz-punkt { opacity: 0.25; }
html.js .hz-schluss-signet .hz-punkt { opacity: 0; }
html.js .hz-schluss.ist-da .hz-schluss-signet .hz-punkt {
  animation: hz-flug 1.15s var(--hz-ease-weich) both;
  animation-delay: calc(var(--hz-t, 0) * 0.07s);
}
html:not(.js) .hz-schluss-signet .hz-punkt { opacity: 1; }

/* Weiter draussen als im Intro · hier ist die Fläche breiter als hoch. */
.hz-schluss-signet .hz-punkt--1  { --fx: -300; --fy:  -80; --fb: 30; --hz-t: 0; }
.hz-schluss-signet .hz-punkt--2  { --fx:  268; --fy: -118; --fb: -26; --hz-t: 3; }
.hz-schluss-signet .hz-punkt--3  { --fx:  330; --fy:   28; --fb: 34; --hz-t: 1; }
.hz-schluss-signet .hz-punkt--4  { --fx:  242; --fy:  126; --fb: -30; --hz-t: 6; }
.hz-schluss-signet .hz-punkt--5  { --fx:   66; --fy:  158; --fb: 26; --hz-t: 2; }
.hz-schluss-signet .hz-punkt--6  { --fx: -158; --fy:  148; --fb: -22; --hz-t: 8; }
.hz-schluss-signet .hz-punkt--7  { --fx: -312; --fy:   62; --fb: 30; --hz-t: 4; }
.hz-schluss-signet .hz-punkt--8  { --fx: -256; --fy:  -34; --fb: -28; --hz-t: 9; }
.hz-schluss-signet .hz-punkt--9  { --fx:  -92; --fy: -152; --fb: 24; --hz-t: 7; }
.hz-schluss-signet .hz-punkt--10 { --fx:  146; --fy: -160; --fb: -26; --hz-t: 5; }
.hz-schluss-signet .hz-punkt--11 { --fx:   10; --fy: -186; --fb: 36; --hz-t: 11; }

@media (prefers-reduced-motion: reduce) {
  html.js .hz-schluss-signet .hz-punkt,
  html.js .hz-schluss.ist-da .hz-schluss-signet .hz-punkt { opacity: 1; animation: none; }
}

/* == Anlassseiten =================================================== */

/*
 * Eine Anlassseite ist dieselbe Marke mit einem anderen Ton.
 *
 * Der Ton kommt als Klasse hz-ton--… von aussen und färbt genau drei
 * Dinge: die Punktformation im Kopf, die Linie darunter und die
 * Auszeichnung im Text. Alles andere bleibt, wie es überall ist ·
 * eine Anlassseite, die wie eine andere Marke aussieht, wäre der
 * Fehler, den dieses Redesign gerade behebt.
 */
.hz-anlasskopf { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.hz-anlasskopf-raster {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 58rem) {
  .hz-anlasskopf-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}
.hz-anlasskopf .hz-eyebrow::before { background: var(--hz-ton, var(--hz-gold)); }
.hz-anlass-titel { margin-bottom: 1.35rem; }
.hz-anlasskopf .hz-text--gross { margin-bottom: 2rem; }

/* Die Formation als Bild der Seite · gedämpft, damit sie ein Zeichen
   bleibt und nicht als Schaubild gelesen wird. */
.hz-anlass-punkte-gross { width: min(100%, 15rem); margin-inline: auto; opacity: 0.85; }
.hz-anlass-punkte-gross .hz-anlassform { width: 100%; height: auto; }
@media (max-width: 57.999rem) {
  /* Am Telefon steht sie ueber dem Text und klein · dort zaehlt die
     erste Bildschirmhoehe fuer die Aussage und den Knopf. */
  .hz-anlass-punkte-gross { width: 8rem; margin-inline: 0; order: -1; }
}

/* Die Vorzüge · Linien statt Kästen, zwei Spalten. */
.hz-koennen-liste {
  display: grid;
  gap: 0 clamp(1.75rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 48rem) { .hz-koennen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hz-koennen-liste li { padding: 1.5rem 0; border-top: 1px solid var(--hz-line); }
.hz-koennen-liste h2 {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.008em;
}
.hz-koennen-liste h2::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hz-ton, var(--hz-gold));
}
.hz-koennen-liste p { margin-top: 0.55rem; max-width: 56ch; color: var(--hz-muted-text); font-size: 0.9375rem; }