/* ====================================================================
   hierzusammen · das Fundament
   ====================================================================

   Token, Grundlagen, Typografie, Bedienelemente, Marke, Kopf, Fuß,
   Formulare, Bestellprozess. Alles, was auf mehr als einer Seite
   gleich aussehen muss.

   DIES IST NICHT STUDIO SIEMERING, und der Unterschied ist Absicht.
   Wo dort Pillen (999px) das einzige runde Bedienelement sind, harte
   Grautöne den Grund tragen und eine Grotesk alles setzt, steht hier:

     · warmes Papier statt Neutralgrau
     · eine Serifenschrift mit Charakter für die großen Zeilen
     · weich gerundete Rechtecke statt Pillen
     · weiche Schatten statt harter Kanten
     · Punkte als durchgehendes Zeichen

   Das Produkt muss deutschlandweit als eigene Marke tragen. Es darf
   nicht wie die verkleinerte Unterseite einer Webdesigner-Website
   aussehen · das war der Zustand bis zum 18.08.2026, als diese Datei
   entstand.

   WARUM EIN EIGENES BLATT UND NICHT /assets/css/style.css DER
   HAUPTDOMAIN: Dieser Ordner ist unter hierzusammen.de die Wurzel. Ein
   absoluter Verweis auf die Hauptdomain zeigte dort auf einen fremden
   Server, und img-src/style-src 'self' verwirft ihn lautlos.

   KEINE style-ATTRIBUTE IM MARKUP. style-src 'self' ohne
   'unsafe-inline' · ein style="…" wird live still verworfen und ist
   örtlich nie zu sehen. Was von Fall zu Fall wechselt, steht als
   Klasse hier oder als Zahl in einem SVG-Koordinatensystem.

   01 Schriften              06 Die Marke
   02 Token                  07 Kopf und Navigation
   03 Grundlagen             08 Fuß
   04 Typografie             09 Formulare
   05 Bedienelemente         10 Bestellprozess
                             11 Bewegung
   ==================================================================== */

/* == 01 · Schriften ================================================= */

/*
 * Drei Schriften, drei Aufgaben, und keine davon geliehen von der
 * Hauptdomain. Alle liegen örtlich · nichts wird von Google geladen.
 *
 *   Fraunces   die großen Zeilen. Eine Serifenschrift mit optischer
 *              Achse: Sie wird bei großem Grad enger und kontrast-
 *              reicher, bei kleinem breiter und ruhiger. Genau das
 *              lässt eine Überschrift warm wirken, ohne kitschig zu
 *              werden. Lizenz: SIL Open Font License 1.1.
 *   Manrope    Fließtext, Navigation, Knöpfe, Formulare, Preise. Eine
 *              geometrische Grotesk, die bei 15 Punkten noch klar
 *              ist · Formulare werden am Telefon ausgefüllt.
 *              Lizenz: SIL Open Font License 1.1.
 *   Caveat     nur kleine Akzente. Eine Federschrift, keine
 *              Auszeichnung: Sie steht nie in einem Formular, nie in
 *              der Navigation und nie über zwei Zeilen.
 *              Lizenz: SIL Open Font License 1.1.
 *
 * unicode-range trennt latin von latin-ext. Ein deutscher Text braucht
 * nur latin; die Erweiterung lädt der Browser erst, wenn ein Name
 * wirklich ein ł oder ř enthält.
 */

@font-face {
  font-family: "Fraunces hz";
  src: url("../fonts/fraunces-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces hz";
  src: url("../fonts/fraunces-variable-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope hz";
  src: url("../fonts/manrope-variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope hz";
  src: url("../fonts/manrope-variable-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Caveat hz";
  src: url("../fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

/* == 02 · Token ===================================================== */

:root {
  /* ── Die Farbwelt ──
     Papierweiß und Reinweiß tragen die Flächen, Nachtblau die dunklen
     Abschnitte. Gold ist Akzent und nie Fläche über eine Handbreit.
     Salbei, Staubblau, Terrakotta, Altrosa und Sand sind Punktfarben
     und Anlasskennzeichen · sie kommen nie großflächig vor. */
  --hz-paper: #F6F2EA;
  --hz-paper-2: #EFE9DD;
  --hz-white: #FFFFFF;
  --hz-ink: #182735;
  --hz-ink-tief: #101D28;

  --hz-gold: #B58A49;
  --hz-gold-dark: #8E672F;

  --hz-sage: #879488;
  --hz-blue: #738999;
  --hz-terracotta: #B8715B;
  --hz-rose: #A5747D;
  --hz-sand: #C6AA7E;

  --hz-line: #DCD5CA;
  --hz-line-strong: #96897A;
  --hz-muted-text: #636E77;
  --hz-muted-light: #AEB9C1;
  --hz-on-ink: #EDE7DC;

  /*
   * JEDE AKZENTFARBE BRAUCHT ZWEI WERTE.
   *
   * Was als Fläche oder Punkt richtig aussieht, ist als Schrift auf
   * Papier zu hell. Gemessen, nicht geschätzt: Salbei erreicht auf
   * #F6F2EA nur 2,84:1, die dunklere Variante 4,51:1. Wer nur einen
   * Wert führt, hat entweder blasse Punkte oder unlesbare Schrift.
   */
  --hz-gold-text: #8E672F;         /* 4,55:1 auf Papier */
  --hz-sage-text: #667267;         /* 4,51:1 */
  --hz-blue-text: #5D7180;         /* 4,54:1 */
  --hz-terracotta-text: #A35C47;   /* 4,50:1 */
  --hz-rose-text: #95606A;         /* 4,52:1 */
  --hz-sand-text: #886A3C;         /* 4,51:1 */

  --hz-error: #9E3520;             /* 6,30:1 auf Papier */
  --hz-error-flaeche: #FBF1EE;
  --hz-ok: #276B41;                /* 5,76:1 */

  /* ── Maße ── */
  --hz-container: 1240px;
  --hz-container-eng: 46rem;
  --hz-rand: clamp(1.15rem, 4.5vw, 3rem);
  --hz-section-space: clamp(88px, 10vw, 160px);
  --hz-section-space-klein: clamp(56px, 6vw, 92px);

  --hz-radius-small: 10px;
  --hz-radius-medium: 18px;
  --hz-radius-large: 28px;

  --hz-shadow-card: 0 20px 60px rgb(24 39 53 / 0.10);
  --hz-shadow-soft: 0 6px 24px rgb(24 39 53 / 0.06);
  --hz-shadow-lift: 0 34px 88px rgb(24 39 53 / 0.16);

  /* ── Bewegung ──
     Eine Kurve für Auftritte, eine ruhigere für Zustandswechsel. */
  --hz-ease: cubic-bezier(0.22, 0.68, 0, 1);
  --hz-ease-weich: cubic-bezier(0.33, 1, 0.68, 1);

  color-scheme: light;
}

/* == 03 · Grundlagen ================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /*
   * Die Papierstruktur.
   *
   * Eine nahtlose SVG-Kachel von 180 Punkten, kein PNG · siehe
   * assets/img/papier.svg. Der Browser rastert sie einmal und
   * wiederholt danach ein Bild; es läuft kein Filter mit, während
   * gescrollt wird. Sie ist bewusst so schwach, dass man sie nur
   * bemerkt, wenn man sie wegnimmt.
   */
  background-color: var(--hz-paper);
  background-image: url("../img/papier.svg");
  background-repeat: repeat;
  color: var(--hz-ink);
  font-family: "Manrope hz", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, blockquote { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; }

::selection { background: var(--hz-gold); color: #fff; }

/* ── Container und Abschnitt ── */

.hz-feld {
  width: 100%;
  max-width: var(--hz-container);
  margin-inline: auto;
  padding-inline: var(--hz-rand);
}
.hz-feld--eng { max-width: calc(var(--hz-container-eng) + 2 * var(--hz-rand)); }

.hz-section { padding-block: var(--hz-section-space); }
.hz-section--klein { padding-block: var(--hz-section-space-klein); }
.hz-section--papier2 { background: var(--hz-paper-2); }
.hz-section--weiss { background: var(--hz-white); }

/* Der dunkle Abschnitt. Nachtblau, nicht schwarz · und mit einer
   eigenen Punktfarbe, weil Salbei und Terrakotta gegen Nachtblau
   gemessen unter 4,2:1 liegen. */
.hz-section--nacht {
  background: var(--hz-ink);
  color: var(--hz-on-ink);
}
.hz-section--nacht .hz-eyebrow,
.hz-section--nacht .hz-text--gedaempft { color: var(--hz-muted-light); }

/* ── Sprungmarke und Fokus ── */

.hz-sprungmarke {
  position: absolute;
  left: -9999px;
  z-index: 300;
  padding: 0.85rem 1.35rem;
  border-radius: var(--hz-radius-small);
  background: var(--hz-ink);
  color: var(--hz-on-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.hz-sprungmarke:focus { left: 1rem; top: 1rem; }

/*
 * Ein Fokusring, den man auf beiden Gründen sieht.
 *
 * Gold auf Papier reicht (4,55:1), auf Nachtblau ist es dieselbe
 * Farbe und trägt dort 4,85:1. Zwei Ringe wären zwei Stellen zum
 * Vergessen · deshalb einer, dazu ein weißer Absatz, der ihn auch vor
 * dunklen Flächen freistellt.
 */
:focus-visible {
  outline: 2px solid var(--hz-gold-dark);
  outline-offset: 3px;
  border-radius: 3px;
}
.hz-section--nacht :focus-visible,
.hz-fuss :focus-visible { outline-color: var(--hz-gold); }

[id] { scroll-margin-top: 6.5rem; }

/* ── Nur für Vorleseprogramme ──
   clip-path und nicht display:none · ein ausgeblendetes Element wird
   auch nicht vorgelesen. */
.hz-nur-vorlesen,
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Der Honigtopf. Aus dem Bild geschoben statt hidden: Ein Bot, der das
   Markup liest, erkennt ein hidden und lässt das Feld leer. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* == 04 · Typografie ================================================ */

/*
 * Die großen Zeilen stehen in Fraunces, alles Bedienbare in Manrope.
 * Die Trennung ist streng: Eine Überschrift in der Grotesk sieht aus
 * wie eine Zwischenzeile in einem Formular, ein Knopf in der
 * Serifenschrift sieht aus wie ein Zitat.
 *
 * font-optical-sizing bleibt auto. Fraunces bringt eine opsz-Achse
 * mit, und genau die macht den Unterschied zwischen einer Anzeige und
 * einer vergrößerten Textschrift.
 */

.hz-display,
.hz-h1, .hz-h2, .hz-h3 {
  font-family: "Fraunces hz", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.hz-display {
  font-size: clamp(2.55rem, 1.1rem + 5.9vw, 4.85rem);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.028em;
}
.hz-h1 {
  font-size: clamp(2.2rem, 1.2rem + 4vw, 3.6rem);
  font-weight: 420;
  line-height: 1.06;
  letter-spacing: -0.024em;
}
.hz-h2 {
  font-size: clamp(1.85rem, 1.15rem + 2.6vw, 2.9rem);
  font-weight: 430;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hz-h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

/* Eine Zeile in der Anzeige, die zurücktritt · für den zweiten Teil
   eines Dreiklangs wie „Euer Anlass. Eure Menschen. Hier zusammen." */
.hz-display .hz-leise { color: var(--hz-muted-text); }
.hz-section--nacht .hz-display .hz-leise { color: var(--hz-muted-light); }

/* ── Eyebrow ──
   Die kleine Einordnung über einer Überschrift. Mit einem Punkt
   davor · das ist das Markenzeichen im Kleinen. */
.hz-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  color: var(--hz-muted-text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hz-eyebrow::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hz-gold);
}

/* ── Textblöcke ── */

.hz-text { max-width: 42ch; font-size: 1.0625rem; }
.hz-text--gross {
  max-width: 44ch;
  font-size: clamp(1.075rem, 1rem + 0.45vw, 1.28rem);
  line-height: 1.6;
}
.hz-text--breit { max-width: 62ch; }
.hz-text--gedaempft { color: var(--hz-muted-text); }
.hz-text--klein { font-size: 0.9375rem; }
.hz-text + .hz-text, .hz-text--gross + .hz-text { margin-top: 0.9rem; }

.hz-kopf { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.hz-kopf .hz-text { margin-top: 1rem; max-width: 54ch; }

/* ── Die Handschrift ──
   Nur kurze Akzente. Nie in einem Formular, nie in der Navigation,
   nie über zwei Zeilen · sie ist eine Randnotiz und keine Schrift. */
.hz-hand {
  font-family: "Caveat hz", "Segoe Script", cursive;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--hz-gold-dark);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
}
.hz-section--nacht .hz-hand,
.hz-fuss .hz-hand { color: var(--hz-gold); }
.hz-hand--klein { font-size: 1.0625rem; }

/* ── Eine feine Linie ──
   Sie trennt, wo sonst eine Karte stünde. Vier weiße Kästen auf
   hellem Grund sind der Bausatz-Block, den jede zweite Seite hat. */
.hz-linie { border: 0; border-top: 1px solid var(--hz-line); margin: 0; }
.hz-section--nacht .hz-linie { border-top-color: rgb(237 231 220 / 0.16); }

/* == 05 · Bedienelemente ============================================ */

/*
 * KEINE PILLEN. Studio Siemering setzt 999px als einzige Rundung an
 * Bedienelementen, und daran erkennt man diese Seiten. Hier sind es
 * weich gerundete Rechtecke · 10px, dieselbe Rundung wie an Feldern.
 *
 * Der goldene Punkt im Knopf ist das Markenzeichen und keine
 * Dekoration: Beim Überfahren rückt er ein Stück nach rechts, als
 * ginge jemand los. Mehr Bewegung braucht ein Knopf nicht.
 */

.hz-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3.1rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--hz-radius-small);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease,
              color 200ms ease, box-shadow 240ms var(--hz-ease-weich),
              transform 160ms var(--hz-ease-weich);
}
.hz-knopf:active { transform: translateY(1px); }

.hz-knopf::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  transition: transform 320ms var(--hz-ease);
}
.hz-knopf:hover::after { transform: translateX(4px); }

/* Der primäre Knopf · Nachtblau, und der Punkt darin ist golden. */
.hz-knopf--primaer {
  background: var(--hz-ink);
  color: var(--hz-on-ink);
  box-shadow: var(--hz-shadow-soft);
}
.hz-knopf--primaer:hover {
  background: var(--hz-ink-tief);
  box-shadow: var(--hz-shadow-card);
}
.hz-knopf--primaer::after { background: var(--hz-gold); opacity: 1; }

/* Der sekundäre · nur eine Linie, damit die Wahl eindeutig bleibt. */
.hz-knopf--zweit {
  background: transparent;
  border-color: var(--hz-line-strong);
  color: var(--hz-ink);
}
.hz-knopf--zweit:hover {
  border-color: var(--hz-ink);
  background: rgb(255 255 255 / 0.6);
}
.hz-knopf--zweit::after { background: var(--hz-gold-dark); }

/* Auf dunklem Grund dreht sich beides. */
.hz-section--nacht .hz-knopf--primaer,
.hz-fuss .hz-knopf--primaer {
  background: var(--hz-paper);
  color: var(--hz-ink);
}
.hz-section--nacht .hz-knopf--primaer:hover { background: var(--hz-white); }
.hz-section--nacht .hz-knopf--zweit {
  border-color: rgb(237 231 220 / 0.4);
  color: var(--hz-on-ink);
}
.hz-section--nacht .hz-knopf--zweit:hover {
  border-color: var(--hz-on-ink);
  background: rgb(237 231 220 / 0.08);
}
.hz-section--nacht .hz-knopf--zweit::after { background: var(--hz-gold); }

.hz-knopf--gross { min-height: 3.6rem; padding-inline: 1.9rem; font-size: 1.0625rem; }
.hz-knopf--voll { width: 100%; }

/*
 * Der leise Knopf · sieht aus wie ein Verweis und ist einer nicht.
 *
 * Gebraucht für „ohne Angabe weiter" und „Ändern" in Schritt 2: Beide
 * verändern etwas (die gemerkten Antworten) und müssen deshalb
 * Formularknöpfe sein. Ein <a> für eine Zustandsänderung wäre eine
 * Adresse, die jemand weitergibt oder die ein Vorauslader anfasst.
 *
 * Er trägt keinen Punkt: ::after ist an .hz-knopf erklärt und wird
 * hier abgeschaltet · ein Punkt macht aus einem leisen Knopf einen
 * lauten.
 */
.hz-knopf--still {
  min-height: 0;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--hz-muted-text);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--hz-line-strong);
}
.hz-knopf--still::after { content: none; }
.hz-knopf--still:hover { color: var(--hz-ink); text-decoration-color: currentColor; }

/* ── Textverweis ──
   Unterstrichen, und der Strich ist zunächst zurückhaltend. Ein
   Verweis, der sich nur durch die Farbe zeigt, ist keiner: Wer Farben
   schlecht unterscheidet, sieht ihn nicht. */
.hz-verweis {
  color: var(--hz-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(142 103 47 / 0.5);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 180ms ease;
}
.hz-verweis:hover { text-decoration-color: var(--hz-gold-dark); }
.hz-section--nacht .hz-verweis,
.hz-fuss .hz-verweis {
  color: var(--hz-on-ink);
  text-decoration-color: rgb(181 138 73 / 0.65);
}
.hz-section--nacht .hz-verweis:hover,
.hz-fuss .hz-verweis:hover { text-decoration-color: var(--hz-gold); }

/* Eine Knopfgruppe. Auf dem Telefon untereinander und voll breit ·
   zwei halbe Knöpfe nebeneinander sind bei 360 Punkten zwei
   Zeilenumbrüche. */
.hz-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: center;
}
@media (max-width: 30rem) {
  .hz-knopfreihe { flex-direction: column; align-items: stretch; }
  .hz-knopfreihe > .hz-knopf { width: 100%; }
}

/* == 06 · Die Marke ================================================= */

/* ── Wortmarke ──
   „hier" leichter, „zusammen" kräftiger, der Punkt in Gold. Dieselbe
   Schrift und dieselben Stärken wie in assets/img/logo-wortmarke.svg
   (erzeugt aus .claude/werkzeuge/hz_logo.py) · wer eine ändert,
   ändert die andere mit. */
.hz-wortmarke {
  display: inline-block;
  font-family: "Manrope hz", system-ui, sans-serif;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--hz-ink);
  white-space: nowrap;
}
.hz-wm-hier { font-weight: 420; }
.hz-wm-zusammen { font-weight: 720; }
.hz-wm-punkt { font-weight: 720; color: var(--hz-gold); }
.hz-wm-de { font-weight: 420; color: var(--hz-muted-text); }
.hz-section--nacht .hz-wortmarke,
.hz-fuss .hz-wortmarke { color: var(--hz-on-ink); }
.hz-fuss .hz-wm-de { color: var(--hz-muted-light); }

.hz-wortmarke--gross { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem); }

/* ── Signet und Punkte ──
   Die Farbrollen stehen hier und nicht im Markup: Auf Nachtblau
   tragen Salbei, Staubblau und Terrakotta zu wenig, dort wird aus
   allen dreien Sand. */
.hz-signet { flex: none; width: 2rem; height: 2rem; }
.hz-punkt { fill: var(--hz-ink); }
.hz-punkt--gold { fill: var(--hz-gold); }
.hz-punkt--salbei { fill: var(--hz-sage); }
.hz-punkt--blau { fill: var(--hz-blue); }
.hz-punkt--terrakotta { fill: var(--hz-terracotta); }
.hz-punkt--rose { fill: var(--hz-rose); }
.hz-punkt--sand { fill: var(--hz-sand); }

.hz-section--nacht .hz-punkt,
.hz-fuss .hz-punkt { fill: var(--hz-on-ink); }
.hz-section--nacht .hz-punkt--gold,
.hz-fuss .hz-punkt--gold { fill: var(--hz-gold); }
.hz-section--nacht .hz-punkt--salbei,
.hz-section--nacht .hz-punkt--blau,
.hz-section--nacht .hz-punkt--terrakotta,
.hz-section--nacht .hz-punkt--rose,
.hz-fuss .hz-punkt--salbei,
.hz-fuss .hz-punkt--blau,
.hz-fuss .hz-punkt--terrakotta,
.hz-fuss .hz-punkt--rose { fill: var(--hz-sand); }

/* Punktgruppen als Schmuck. Sie liegen hinter dem Inhalt, immer
   gedämpft, und sie nehmen keine Klicks an. */
.hz-gruppe {
  width: 100%;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
}
.hz-gruppe .hz-punkt { fill: var(--hz-line-strong); }
.hz-gruppe .hz-punkt--gold { fill: var(--hz-gold); }

/* Die Anlassformationen. Der Ton kommt von aussen über hz-ton--…, der
   goldene Punkt bleibt immer golden · er ist die Konstante, an der
   zehn verschiedene Anlässe als eine Marke erkennbar bleiben. */
.hz-anlassform { width: 3.5rem; height: 2.75rem; }
.hz-anlassform .hz-punkt { fill: var(--hz-ink); transition: fill 200ms ease; }
.hz-anlassform .hz-punkt--gold { fill: var(--hz-gold); }

.hz-ton--salbei .hz-anlassform .hz-punkt:not(.hz-punkt--gold) { fill: var(--hz-sage); }
.hz-ton--blau .hz-anlassform .hz-punkt:not(.hz-punkt--gold) { fill: var(--hz-blue); }
.hz-ton--terrakotta .hz-anlassform .hz-punkt:not(.hz-punkt--gold) { fill: var(--hz-terracotta); }
.hz-ton--rose .hz-anlassform .hz-punkt:not(.hz-punkt--gold) { fill: var(--hz-rose); }
.hz-ton--sand .hz-anlassform .hz-punkt:not(.hz-punkt--gold) { fill: var(--hz-sand); }
.hz-ton--gold .hz-anlassform .hz-punkt:not(.hz-punkt--gold) { fill: var(--hz-sand); }

/* Dieselben Rollen als Schrift- und Linienfarbe · immer die dunklere
   Variante, siehe den Kommentar an den Token. */
.hz-ton--salbei { --hz-ton: var(--hz-sage); --hz-ton-text: var(--hz-sage-text); }
.hz-ton--blau { --hz-ton: var(--hz-blue); --hz-ton-text: var(--hz-blue-text); }
.hz-ton--terrakotta { --hz-ton: var(--hz-terracotta); --hz-ton-text: var(--hz-terracotta-text); }
.hz-ton--rose { --hz-ton: var(--hz-rose); --hz-ton-text: var(--hz-rose-text); }
.hz-ton--sand { --hz-ton: var(--hz-sand); --hz-ton-text: var(--hz-sand-text); }
.hz-ton--gold { --hz-ton: var(--hz-gold); --hz-ton-text: var(--hz-gold-text); }
.hz-ton--tinte { --hz-ton: var(--hz-ink); --hz-ton-text: var(--hz-ink); }

/* ── Der offene Punktkreis als großes Zeichen ──
   Für Abschnittstrenner. Er steht als eigene Zeile zwischen zwei
   Abschnitten und ersetzt dort eine Linie. */
.hz-trenner {
  display: flex;
  justify-content: center;
  padding-block: clamp(2rem, 4vw, 3.25rem);
}
.hz-trenner .hz-signet { width: 2.75rem; height: 2.75rem; opacity: 0.75; }

/* ── Signatur ──
 *
 * Zwei Wege für dieselbe Datei:
 *
 *   .hz-signatur-svg    das eingebettete SVG im Intro. Dort muss der
 *                       Pfad in der Maske erreichbar sein, damit er
 *                       sich schreiben kann · siehe hz-start.css.
 *   .hz-signatur-maske  überall sonst. Eine Fläche in currentColor,
 *                       ausgestanzt von derselben Datei.
 *
 * Der Umweg über die Maske ist nötig, weil currentColor in einem <img>
 * die Schriftfarbe der Seite nicht kennt: Die SVG ist dort ein eigenes
 * Dokument und fällt auf Schwarz zurück. Im Fuß auf Nachtblau war die
 * Signatur damit praktisch unsichtbar.
 *
 * Das Verhältnis 6,5:1 ist gemessen (266,2 x 40,9 aus hz_logo.py).
 */
.hz-signatur-svg { width: auto; height: 2.25rem; color: var(--hz-gold-dark); }

.hz-signatur-maske {
  display: inline-block;
  width: calc(2.25rem * 6.5);
  height: 2.25rem;
  background: currentColor;
  color: var(--hz-gold-dark);
  -webkit-mask: url("../img/signatur-studio.svg") no-repeat center / contain;
  mask: url("../img/signatur-studio.svg") no-repeat center / contain;
}
.hz-section--nacht .hz-signatur-svg,
.hz-section--nacht .hz-signatur-maske,
.hz-fuss .hz-signatur-svg,
.hz-fuss .hz-signatur-maske { color: var(--hz-gold); }

/* == 07 · Kopf und Navigation ======================================= */

/*
 * Eine klebende Leiste auf Papier, keine Glasscheibe.
 *
 * Beim Scrollen bekommt sie einen leicht deckenden Papiergrund und
 * eine Haarlinie · kein starkes Glassmorphism, das ist die Ästhetik,
 * von der sich diese Marke absetzen soll. Die Klasse setzt das Skript
 * (hz-start.js); ohne Skript ist die Leiste von Anfang an gedeckt und
 * damit lesbar.
 */
.hz-kopfleiste {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgb(246 242 234 / 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease, background-color 240ms ease;
}
html.js .hz-kopfleiste { background: rgb(246 242 234 / 0); }
html.js .hz-kopfleiste.ist-gescrollt {
  background: rgb(246 242 234 / 0.92);
  border-bottom-color: var(--hz-line);
}

.hz-kopfleiste-innen {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}

.hz-marke-verweis {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /* 44 Punkte, gemessen und nicht geschätzt: Der Verweis war 38 hoch,
     und das ist unter dem, was ein Daumen sicher trifft. Er ist keine
     Zeile im Text, sondern das erste Bedienelement der Seite. */
  min-height: 2.75rem;
  margin-right: auto;
  padding: 0.35rem 0.15rem;
  text-decoration: none;
}
.hz-marke-verweis .hz-signet { width: 1.7rem; height: 1.7rem; }
.hz-marke-verweis .hz-wortmarke { font-size: 1.28rem; }

/* ── Die Wege ── */
.hz-wege {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.hz-wege a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--hz-radius-small);
  color: var(--hz-ink);
  font-size: 0.9688rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 180ms ease;
}
.hz-wege a:hover { background: rgb(24 39 53 / 0.06); }

/*
 * Der Weg, auf dem man steht.
 *
 * aria-current="page" und nicht eine eigene Klasse: Die Auszeichnung
 * für Vorleseprogramme und die sichtbare Markierung hängen dann am
 * selben Attribut und können nicht auseinanderlaufen. Der Punkt
 * darunter ist die Markierung · Fettung allein wäre bei einer
 * Navigation aus fünf Wörtern kaum zu sehen.
 */
.hz-wege a[aria-current="page"] { font-weight: 700; }
.hz-wege a[aria-current="page"]::after {
  content: "";
  position: absolute;
  margin-top: 1.85rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hz-gold);
}
.hz-wege a { position: relative; }

/*
 * Auf dem Telefon steckt die Navigation im Klappmenü · aber nur mit
 * Skript.
 *
 * 52rem ist gemessen und nicht geraten: Bei vier Wegen plus Knopf plus
 * Marke wird es darunter eng.
 *
 * OHNE SKRIPT BLEIBT DIE WEGELISTE STEHEN und bricht auf eine zweite
 * Zeile um. Ein Schalter, den kein Skript bedient, wäre ein Knopf, der
 * nichts tut · und dahinter eine Navigation, die niemand erreicht.
 * Deshalb hängt jede Regel dieses Abschnitts an html.js.
 */
.hz-menue-schalter { display: none; }
.hz-menue { display: none; }

@media (max-width: 52rem) {
  .hz-kopfleiste-innen { flex-wrap: wrap; row-gap: 0.25rem; }
  .hz-wege { flex-wrap: wrap; }

  /*
   * NUR IM MARKETING-KOPF, und das ist keine Feinheit.
   *
   * Der ruhige Kopf des Bestellprozesses und der Rechtstexte hat kein
   * Klappmenü · er braucht keins, zwei kurze Wege passen dort in jede
   * Zeile. Ohne diese Einschränkung verschwand seine Navigation am
   * Telefon vollständig und wurde durch nichts ersetzt. Gemessen am
   * 18.08.2026 auf /bestellen bei 375 Punkten.
   */
  html.js .hz-kopfleiste--markt .hz-wege,
  html.js .hz-kopfleiste--markt .hz-kopf-knopf { display: none; }
  html.js .hz-kopfleiste--markt .hz-menue { display: block; }

  html.js .hz-kopfleiste--markt .hz-menue-schalter {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem 0.5rem 0.85rem;
    border: 1px solid var(--hz-line-strong);
    border-radius: var(--hz-radius-small);
    background: transparent;
    color: var(--hz-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
  }
  /* Drei Punkte statt drei Striche · dasselbe Zeichen wie überall. */
  .hz-menue-punkte { display: flex; gap: 3px; }
  .hz-menue-punkte span {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--hz-ink);
    transition: transform 260ms var(--hz-ease);
  }
  .hz-menue-punkte span:nth-child(2) { background: var(--hz-gold); }
  .hz-menue-schalter[aria-expanded="true"] .hz-menue-punkte span:first-child { transform: translateY(-3px); }
  .hz-menue-schalter[aria-expanded="true"] .hz-menue-punkte span:last-child { transform: translateY(3px); }

  /*
   * Das Menü ist ein Blatt unter der Leiste und kein Vollbild.
   *
   * Ein Vollbildmenü nimmt bei fünf Wegen den ganzen Schirm für fünf
   * Wörter ein und verdeckt dabei, wo man war. Dieses hier hängt an
   * der Leiste, lässt den Inhalt darunter sehen und ist mit einem
   * Daumen erreichbar.
   */
  .hz-menue {
    position: absolute;
    inset-inline: var(--hz-rand);
    top: calc(100% + 0.5rem);
    padding: 0.75rem;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-medium);
    background: var(--hz-white);
    box-shadow: var(--hz-shadow-card);
  }
  /* html.js davor, und das ist keine Zierde: „html.js .hz-menue"
     wiegt eine Klasse mehr als „.hz-menue[hidden]" und würde ein
     zugeklapptes Menü wieder aufklappen. Gleiche Spezifität, und die
     spätere Regel gewinnt. */
  html.js .hz-kopfleiste--markt .hz-menue[hidden] { display: none; }
  .hz-menue ul { list-style: none; margin: 0; padding: 0; }
  .hz-menue a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--hz-radius-small);
    color: var(--hz-ink);
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
  }
  .hz-menue a:hover { background: var(--hz-paper); }
  .hz-menue a[aria-current="page"] { font-weight: 700; }
  .hz-menue a[aria-current="page"]::before {
    content: "";
    width: 6px; height: 6px;
    margin-right: 0.6rem;
    border-radius: 50%;
    background: var(--hz-gold);
  }
  .hz-menue .hz-knopf { margin-top: 0.5rem; }
}

.hz-kopfleiste-innen { position: relative; }

/*
 * Die Marke „ganz oben".
 *
 * hz-start.js legt sie als erstes Kind in den Körper und beobachtet
 * sie. Kreuzt sie den Rand nicht mehr, ist die Seite gescrollt und die
 * Kopfleiste bekommt ihren Grund. Ein Beobachter statt eines Handlers
 * an scroll: Der Handler läuft bei jedem Bild, der Beobachter zweimal
 * je Sitzung.
 */
.hz-obenmarke {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/*
 * Der klebende Knopf am unteren Rand, sobald der Hero verlassen ist.
 *
 * Nur am Telefon, nur auf der Startseite, und mit Rücksicht auf die
 * Safe Area · unter dem Rand eines iPhones liegt die Wischleiste, und
 * ein Knopf darunter wird beim Tippen zum Verlassen der Seite.
 */
.hz-klebeknopf {
  position: fixed;
  inset-inline: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  display: none;
  box-shadow: var(--hz-shadow-lift);
}
@media (max-width: 52rem) {
  html.js .hz-klebeknopf { display: flex; opacity: 0; transform: translateY(1.5rem);
    pointer-events: none; transition: opacity 260ms ease, transform 320ms var(--hz-ease); }
  html.js .hz-klebeknopf.ist-da { opacity: 1; transform: none; pointer-events: auto; }
}

/* == 08 · Fuß ======================================================= */

.hz-fuss {
  padding-block: clamp(3rem, 6vw, 4.75rem) clamp(1.75rem, 3vw, 2.5rem);
  background: var(--hz-ink);
  color: var(--hz-muted-light);
  font-size: 0.9375rem;
}
.hz-fuss-oben {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 46rem) {
  .hz-fuss-oben { grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr); }
}

.hz-fuss-marke { display: flex; align-items: center; gap: 0.7rem; }
.hz-fuss-marke .hz-signet { width: 2.1rem; height: 2.1rem; }
.hz-fuss-marke .hz-wortmarke { font-size: 1.4rem; }
.hz-fuss-satz { margin-top: 1rem; max-width: 34ch; }
.hz-fuss-studio { margin-top: 1.25rem; color: var(--hz-on-ink); }

.hz-fuss-wege {
  display: grid;
  gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.hz-fuss-wege h2 {
  margin-bottom: 0.6rem;
  color: var(--hz-on-ink);
  font-family: "Manrope hz", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.hz-fuss-wege ul { list-style: none; margin: 0; padding: 0; }
.hz-fuss-wege li + li { margin-top: 0.1rem; }
.hz-fuss-wege a {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  color: var(--hz-muted-light);
  text-decoration: none;
}
.hz-fuss-wege a:hover { color: var(--hz-on-ink); text-decoration: underline; }

/*
 * Am Finger gemessen: 44 Punkte.
 *
 * Auf einem Zeigergerät sind 37 Punkte Zeilenhöhe im Fuß angenehm
 * kompakt; mit dem Daumen trifft man daneben. Die Ausnahme sind
 * Verweise IM SATZ (.hz-verweis) · die bleiben inline, weil ein Link
 * mitten in einem Absatz keine 44 Punkte hoch sein kann, ohne den
 * Zeilenabstand zu sprengen. WCAG nimmt genau die aus.
 */
@media (pointer: coarse) {
  .hz-fuss-wege a,
  .hz-wege a { min-height: 2.75rem; }
  .hz-fuss-wege li + li { margin-top: 0.2rem; }
}

.hz-fuss-unten {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(237 231 220 / 0.16);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: 0.875rem;
}
.hz-fuss-unten p { max-width: 62ch; }
.hz-fuss-klein { margin-top: 1rem; max-width: 68ch; font-size: 0.875rem; }

/* == 09 · Formulare ================================================= */

/*
 * Ein Feld ist eine Beschriftung, eine Hilfe, das Eingabefeld und die
 * Fehlerzeile. Die Bausteine dazu stehen in teile/formular.php · hier
 * steht nur, wie sie aussehen.
 *
 * Alle Eingabefelder sind mindestens 3rem hoch. Das ist keine
 * Geschmacksfrage: Unter 44 Punkten trifft ein Daumen daneben, und
 * dieses Formular wird am Telefon ausgefüllt.
 */

.feld-block { margin-block: 1.4rem; }
.feld-block label,
.akzentwahl legend,
.funktionswahl legend,
.zugangform label,
.ortsblock legend {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.002em;
}
.pflicht { color: var(--hz-error); margin-left: 0.15em; }

.feld-hilfe {
  margin: 0 0 0.55rem;
  max-width: 62ch;
  color: var(--hz-muted-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="date"], input[type="time"], input[type="number"], input[type="password"],
textarea, select {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--hz-line-strong);
  border-radius: var(--hz-radius-small);
  background: var(--hz-white);
  color: var(--hz-ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
textarea { resize: vertical; min-height: 5.5rem; line-height: 1.55; }

input:hover, textarea:hover { border-color: var(--hz-ink); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--hz-ink);
  box-shadow: 0 0 0 3px rgb(181 138 73 / 0.22);
  outline: 2px solid var(--hz-gold-dark);
  outline-offset: 1px;
}

.feld-block--fehler input,
.feld-block--fehler textarea,
.adressbau--fehler input { border-color: var(--hz-error); }

.feld-fehler,
.ev-feld-fehler {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.4rem;
  color: var(--hz-error);
  font-size: 0.9375rem;
  font-weight: 600;
}
/* Ein Zeichen vor der Meldung · eine Fehlermeldung darf nicht allein
   an der Farbe hängen. */
.feld-fehler::before,
.ev-feld-fehler::before { content: "→"; flex: none; }

.feld-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 1.5rem;
}
.feld-reihe--drei { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

/* ── Häkchen ── */

.haken {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 0.85rem;
  align-items: start;
  margin-block: 1.15rem;
}
.haken input {
  margin-top: 0.3rem;
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--hz-ink);
}
.haken label { font-size: 1rem; font-weight: 400; line-height: 1.55; }
.haken .feld-fehler { grid-column: 2; }
.haken--fehler label { color: var(--hz-error); }
.haken-unter {
  margin-left: 2.05rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--hz-line);
}

/* Am Telefon ist das Kästchen die Tippfläche. */
@media (pointer: coarse) {
  .haken input { width: 1.5rem; height: 1.5rem; }
  .haken label { padding-block: 0.25rem; }
}

/* ── Kästen mit einer Meldung ── */

.hinweis {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--hz-line-strong);
  border-radius: var(--hz-radius-small);
  background: var(--hz-white);
  font-size: 0.9375rem;
}
.fehlerkasten {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--hz-error);
  border-radius: var(--hz-radius-small);
  background: var(--hz-error-flaeche);
  color: var(--hz-error);
}
.fehlerkasten::before { content: "→"; flex: none; font-weight: 700; }
.fehlerkasten p { margin: 0; }

/* ── Ein Kasten, in dem ein Formular steht ──
   Weiß auf Papier, weiche Kante, ein weicher Schatten. Er trennt das
   Bedienbare vom Erklärenden, ohne einen Rahmen zu ziehen. */
.hz-formkarte {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
  box-shadow: var(--hz-shadow-soft);
}

/* == 10 · Bestellprozess ============================================ */

/*
 * Ruhiger als die Startseite und ausdrücklich anders: Wer hier ist,
 * hat sich entschieden und will jetzt ein Formular ausfüllen. Kein
 * Intro, keine Punktgruppen im Hintergrund, keine Anzeigezeilen ·
 * dafür große Auswahlflächen, klare Zustände und ein Weiter-Knopf,
 * der am Telefon immer erreichbar ist.
 */

.kfg { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }

.kfg-kopf { margin-bottom: 1.75rem; }
.kfg-kopf h1 {
  margin-top: 0.5rem;
  font-family: "Fraunces hz", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
  font-weight: 430;
  line-height: 1.06;
  letter-spacing: -0.022em;
}

.kfg-satz { max-width: 62ch; margin-bottom: 1.6rem; color: var(--hz-muted-text); }
.kfg-klein { max-width: 68ch; margin-top: 0.9rem; color: var(--hz-muted-text); font-size: 0.9375rem; }
.kfg-klein--vor { margin-top: 0; margin-bottom: 1.25rem; }

/*
 * Die Gruppenüberschrift in Schritt 2 · und die Frage darüber.
 *
 * Sie ist bewusst leise: Die Entscheidung fällt an den Karten, und die
 * Überschrift soll den Weg dorthin zeigen, nicht mit ihnen um
 * Aufmerksamkeit ringen.
 *
 * Für die Rückfrage gilt das NICHT. Dort ist die Überschrift der ganze
 * Inhalt der Seite („Wie alt wird gefeiert?"), und darunter stehen nur
 * fünf schmale Karten. Deshalb --frage: größer, und mit Luft darunter.
 */
.kfg-gruppe {
  margin-bottom: 1rem;
  font-family: "Fraunces hz", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.25rem;
  font-weight: 480;
  letter-spacing: -0.012em;
}
.kfg-gruppe--zweit {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hz-line);
  margin-bottom: 0.5rem;
}
.kfg-gruppe--frage {
  margin-top: 0.35rem;
  margin-bottom: 0.6rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.15;
  text-wrap: balance;
}
.kfg-fussnote { max-width: 70ch; margin-top: 1.5rem; color: var(--hz-muted-text); font-size: 0.9375rem; }

/*
 * Der Konfigurator auf breiten Schirmen: Formular links, eine ruhige
 * Zusammenfassung rechts.
 *
 * Sie ist bewusst KEIN Warenkorb. Sie steht da, damit niemand nach
 * dem vierten Schritt vergessen hat, welches Paket er gewählt hat ·
 * und sie klebt, weil das Formular länger ist als der Schirm.
 */
.kfg-spalten {
  display: grid;
  gap: clamp(1.75rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
/*
 * Zwei Spalten NUR, wenn es auch etwas für die zweite gibt.
 *
 * Der Stand erscheint erst ab Schritt 3 (siehe stand_anzeigen() in
 * seiten/konfigurator.php). Ohne :has() stünde in Schritt 1 und 2 eine
 * leere Spalte von 19rem daneben, und die Auswahlkarten drängten sich
 * links zusammen · gemessen am 18.08.2026: 800 von 1440 Punkten
 * genutzt, der Rest weiß.
 */
@media (min-width: 64rem) {
  .kfg-spalten:has(.kfg-nebenspalte) { grid-template-columns: minmax(0, 1fr) 19rem; }
  .kfg-nebenspalte { position: sticky; top: 5.75rem; }
}
@media (max-width: 63.999rem) {
  /* Am Telefon steht sie unter dem Formular und nicht darüber: Oben
     wäre sie eine Wand vor dem ersten Feld. */
  .kfg-nebenspalte { order: 2; }
}

.kfg-stand { font-size: 0.9375rem; }
.kfg-stand h2 {
  margin-bottom: 0.9rem;
  font-family: "Manrope hz", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--hz-muted-text);
}
.kfg-stand dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.45rem 1rem; }
.kfg-stand dt { color: var(--hz-muted-text); }
.kfg-stand dd { margin: 0; font-weight: 600; text-align: right; }
.kfg-stand-betrag {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hz-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.kfg-stand-betrag strong {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.kfg-stand-bild {
  margin-bottom: 1rem;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-small);
  overflow: hidden;
}
.kfg-stand-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ── Die sieben Stationen ──
   Punkte auf einer Linie, und die Linie ist die Marke. Was erreicht
   ist, ist gefüllt; was kommt, ist eine leere Kontur. Der aktuelle
   Schritt trägt einen Ring · Farbe allein würde ihn nicht auszeichnen. */
.schrittleiste {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: 0.25rem;
}
.schrittleiste ol {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: station;
}
.schrittleiste li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
/* Die Linie zwischen zwei Stationen · sie sitzt am linken Rand jeder
   Station ausser der ersten, dann braucht nur eine eine Ausnahme. */
.schrittleiste li:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0.65rem;
  right: 50%;
  left: -50%;
  height: 1px;
  background: var(--hz-line);
}
.schrittleiste li.schritt-fertig::before,
.schrittleiste li.schritt-jetzt::before { background: var(--hz-gold); }

.schrittleiste a,
.schrittleiste li > span {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.15rem 0.35rem;
  color: var(--hz-muted-text);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.schrittleiste a { min-height: 2.75rem; }
.schrittleiste .schritt-nummer {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--hz-line-strong);
  border-radius: 50%;
  background: var(--hz-paper);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--hz-muted-text);
}
.schritt-fertig .schritt-nummer {
  border-color: var(--hz-gold);
  background: var(--hz-gold);
  color: #fff;
}
.schritt-fertig a { color: var(--hz-ink); }
.schritt-jetzt > span { color: var(--hz-ink); }
.schritt-jetzt .schritt-nummer {
  border-color: var(--hz-ink);
  background: var(--hz-ink);
  color: var(--hz-on-ink);
  box-shadow: 0 0 0 4px rgb(181 138 73 / 0.3);
}
.schritt-offen > span { opacity: 0.7; }

/* Bei 640 Punkten haben sieben Wörter keinen Platz. Dann bleibt der
   Titel nur am aktuellen Schritt stehen · sieben Punkte und ein Wort
   sagen mehr als sieben abgeschnittene Wörter. */
@media (max-width: 40rem) {
  .schrittleiste .schritt-titel { display: none; }
  .schritt-jetzt .schritt-titel {
    display: block;
    position: absolute;
    top: 2.1rem;
    left: 50%;
    translate: -50% 0;
    white-space: nowrap;
  }
  .schrittleiste { padding-bottom: 1.6rem; }
}

.kfg-form { margin-bottom: 3.5rem; }

.kfg-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hz-line);
}
.kfg-fuss--einzeln { border-top: 0; }
.kfg-fuss .hz-knopf--primaer { margin-left: auto; }

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding-inline: 0.15rem;
  color: var(--hz-muted-text);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.zurueck::before { content: "←"; }
.zurueck:hover { color: var(--hz-ink); text-decoration: underline; }

/*
 * Am Telefon klebt der Weiter-Knopf am unteren Rand.
 *
 * Ein Formular mit dreißig Feldern hat seinen Knopf sonst zwei
 * Bildschirmhöhen unter dem letzten Feld. Zwei Dinge sind dabei
 * wichtig: die Safe Area, und der Platz darunter · ohne ihn liegt der
 * Knopf auf dem letzten Feld, und genau das trifft man beim Tippen.
 */
@media (max-width: 52rem) {
  .kfg-form { padding-bottom: 5.5rem; }
  .kfg-fuss {
    position: sticky;
    bottom: 0;
    z-index: 90;
    margin-inline: calc(-1 * var(--hz-rand));
    padding: 0.85rem var(--hz-rand) calc(0.85rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--hz-line);
    background: rgb(246 242 234 / 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  /*
   * Zwei Fälle kleben NICHT.
   *
   * --einzeln steht allein auf seiner Seite. --frage steht unter fünf
   * schmalen Karten, die zusammen kaum einen Bildschirm füllen · ein
   * klebender Balken bringt dort nichts und schöbe „Ohne Angabe
   * weiter" darunter, das im DOM dahinter steht.
   */
  .kfg-fuss--einzeln,
  .kfg-fuss--frage {
    position: static;
    margin-inline: 0;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .kfg-rueckfrage { padding-bottom: 1.5rem; }
  .kfg-fuss .hz-knopf { flex: 1 1 auto; }
  /* Der leise Knopf bleibt schmal · er soll kein zweiter Weiter sein. */
  .kfg-fuss .hz-knopf--still,
  .kfg-ueberspringen .hz-knopf--still { flex: 0 0 auto; }
}

/* ── Blöcke im Formular ── */

.block {
  margin-block: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hz-line);
}
.block:first-of-type { border-top: 0; padding-top: 0; }
.block h2 {
  margin-bottom: 0.85rem;
  font-family: "Fraunces hz", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.45rem;
  font-weight: 480;
  letter-spacing: -0.014em;
}

.ortsblock {
  margin-block: 1.5rem;
  padding: 1.15rem 1.25rem 0.5rem;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
}
.ortsblock legend {
  padding-inline: 0.4rem;
  margin-left: -0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hz-muted-text);
}

.ablaufliste { display: grid; gap: 0.5rem; }
.ablaufzeile {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 44rem) {
  .ablaufzeile { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1.4fr); }
  .ablaufzeile .feld-block { margin-block: 0.4rem; }
}
.ablauf-mehr { margin-top: 1rem; }

.knopf-schlicht {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.85rem;
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--hz-line-strong);
  border-radius: var(--hz-radius-small);
  background: transparent;
  color: var(--hz-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.knopf-schlicht::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hz-gold);
}
.knopf-schlicht:hover { background: var(--hz-white); border-color: var(--hz-ink); }
.knopf-weg { border-color: transparent; color: var(--hz-muted-text); }
.knopf-weg::before { background: var(--hz-line-strong); }
.knopf-weg:hover { color: var(--hz-error); border-color: var(--hz-error); }
.knopf-weg:hover::before { background: var(--hz-error); }

/* == 10a · Auswahlkarten ============================================ */

/*
 * Radio-Knöpfe, und das Aussehen macht :checked.
 *
 * Kein Kacheln-mit-JavaScript: Die Auswahl muss mit der Tastatur
 * bedienbar sein und ohne Skript funktionieren. Der eigentliche Knopf
 * liegt sichtbar in der Karte · ein Zustand, der nur an Rahmenfarbe
 * und Schatten hängt, ist bei zwei Karten nebeneinander schwer zu
 * lesen und für jemanden mit Farbschwäche gar nicht.
 */

.wahlraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.85rem;
}

.wahlkarte input,
.vorlagenkarte input,
.ev-paket input,
.akzent input { position: absolute; opacity: 0; pointer-events: none; }

.wahlkarte label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  height: 100%;
  min-height: 3.5rem;
  padding: 1.05rem 1.15rem 1.05rem 2.9rem;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 200ms ease;
}
.wahlkarte label:hover { border-color: var(--hz-line-strong); box-shadow: var(--hz-shadow-soft); }

/* Der Punkt links ist der Zustand · leer, halb, voll. */
.wahlkarte label::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 1.25rem;
  width: 1.05rem;
  height: 1.05rem;
  border: 1.5px solid var(--hz-line-strong);
  border-radius: 50%;
  background: var(--hz-white);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wahlkarte input:checked + label {
  border-color: var(--hz-ink);
  box-shadow: var(--hz-shadow-soft);
}
.wahlkarte input:checked + label::before {
  border-color: var(--hz-ink);
  background: var(--hz-gold);
  box-shadow: inset 0 0 0 3px var(--hz-white);
}
.wahlkarte input:focus-visible + label {
  outline: 2px solid var(--hz-gold-dark);
  outline-offset: 3px;
}
.wahlkarte-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 0.75rem; }
.wahlkarte-titel { font-weight: 700; }
.wahlkarte-rechts { color: var(--hz-muted-text); font-size: 0.9375rem; }
.wahlkarte-satz { color: var(--hz-muted-text); font-size: 0.9375rem; line-height: 1.5; }

/* Eine Auswahlkarte mit Punktformation · für die Anlässe. */
.wahlkarte--anlass label { padding: 1.05rem 1.15rem; }
.wahlkarte--anlass label::before { left: auto; right: 1.05rem; top: 1.15rem; }
.wahlkarte--anlass .hz-anlassform { width: 3rem; height: 2.35rem; margin-bottom: 0.35rem; }
.wahlkarte--anlass .wahlkarte-kopf { padding-right: 2rem; }

/* ══════════════════════════════════════════════════════════════════
   Die Rückfrage in Schritt 2
   ══════════════════════════════════════════════════════════════════

   „Wie alt wird gefeiert?" und „Für wen ist die Seite?" · die zwei
   Fragen, die aus sechzehn Vorlagen zwei bis vier machen. Die Fragen
   stehen in events/daten/auswahl.php, hier steht nur, wie sie aussehen.

   DIE KARTEN SIND SCHMALER ALS DIE ANLASSKARTEN. Fünf Altersstufen
   sind fünf kurze Etiketten mit einem Satz darunter; in 14rem breiten
   Kacheln stünden sie in einer Reihe, die auf jedem Schirm anders
   umbricht. 11rem ergibt auf dem Telefon eine Spalte, auf dem Tablet
   zwei und auf dem Schirm alle fünf.
   ══════════════════════════════════════════════════════════════════ */

.kfg-rueckfrage .wahlraster {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.wahlkarte--rueckfrage label {
  padding: 1rem 1.1rem 1rem 2.7rem;
  gap: 0.25rem;
}
.wahlkarte--rueckfrage .wahlkarte-titel { font-size: 1.0625rem; }

/* Der Fuß der Frage trägt keinen Trennstrich · zwischen den Karten und
   dem Weiter-Knopf ist schon Luft, und eine zweite Linie machte aus
   einer Frage ein Formular. */
.kfg-fuss--frage { border-top: 0; padding-top: 1.25rem; }

/* „Ohne Angabe alle Vorlagen zeigen" · unter dem Fuß und nicht darin.
   Er ist der Weg vorbei an der Frage und darf nicht neben dem
   Weiter-Knopf um dieselbe Aufmerksamkeit ringen. */
.kfg-ueberspringen { margin-top: 0.25rem; }

/* ── Die Zeile mit den gegebenen Angaben ──

   Sie steht über den Vorschlägen und sagt, wonach gefiltert wurde.
   Ohne sie stehen vier Karten da, und niemand weiß, warum diese vier.
   Der Ändern-Knopf gehört dazu: Eine Vorauswahl ohne Weg zurück ist
   eine Sackgasse. */
.kfg-auswahlzeile {
  margin-bottom: 1.4rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-paper-2);
}
.kfg-auswahlzeile p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin: 0;
}
.kfg-auswahlzeile-text { font-size: 0.9375rem; color: var(--hz-muted-text); }
.kfg-auswahlzeile-text strong { color: var(--hz-ink); }

/* ── Die Klappe mit allen Vorlagen ──

   Ein <details> und kein Skript: Es klappt ohne JavaScript auf, ist
   mit der Tastatur bedienbar, und der Browser kennt den Zustand. Die
   Begründung dafür, dass hier überhaupt geklappt wird, steht in
   events/seiten/schritte/2.php.

   Das Zeichen ist ein Winkel aus zwei Rändern und kein Pfeil-SVG · so
   dreht es sich beim Öffnen mit einer Zeile CSS. Der eigene Marker des
   Browsers ist abgeschaltet, weil er auf jedem anders aussieht. */
.kfg-alle {
  margin-top: 2.25rem;
  border-top: 1px solid var(--hz-line);
  padding-top: 1.5rem;
}
.kfg-alle > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  transition: border-color 180ms ease, box-shadow 200ms ease;
}
.kfg-alle > summary::-webkit-details-marker { display: none; }
.kfg-alle > summary:hover { border-color: var(--hz-line-strong); box-shadow: var(--hz-shadow-soft); }
.kfg-alle > summary:focus-visible { outline: 2px solid var(--hz-gold-dark); outline-offset: 3px; }

.kfg-alle-zeichen {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--hz-muted-text);
  border-bottom: 2px solid var(--hz-muted-text);
  rotate: 45deg;
  translate: 0 -0.15rem;
  transition: rotate 200ms var(--hz-ease), translate 200ms var(--hz-ease);
}
.kfg-alle[open] > summary .kfg-alle-zeichen { rotate: 225deg; translate: 0 0.1rem; }

.kfg-alle .kfg-klein--vor { margin-top: 1.25rem; }

/* ── Vorlagen ── */

.vorlagenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.25rem;
}
.vorlagenkarte {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 220ms ease;
}
.vorlagenkarte:hover { border-color: var(--hz-line-strong); box-shadow: var(--hz-shadow-card); }
.vorlagenkarte label { display: block; cursor: pointer; }
.vorlagenkarte picture,
.vorlagenkarte img {
  display: block;
  width: 100%;
}
.vorlagenkarte img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  background: var(--hz-paper-2);
}
.vorlagenkarte-text { display: block; padding: 1.15rem 1.25rem 0.5rem; }
.vorlagenkarte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 0.75rem; }
.vorlagenkarte-name {
  font-family: "Fraunces hz", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.4rem;
  font-weight: 480;
  letter-spacing: -0.014em;
}
.marke-passt {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--hz-gold);
  border-radius: 999px;
  color: var(--hz-gold-text);
  font-size: 0.75rem;
  font-weight: 700;
}
.vorlagenkarte-stimmung {
  display: block;
  margin-top: 0.25rem;
  color: var(--hz-muted-text);
  font-size: 0.9375rem;
  font-weight: 600;
}
.vorlagenkarte-satz { display: block; margin-top: 0.55rem; color: var(--hz-muted-text); font-size: 0.9375rem; }
.vorlagenkarte-demo { padding: 0 1.25rem 1.25rem; }
.vorlagenkarte-demo a { font-size: 0.9375rem; }

.vorlagenkarte:has(input:checked) { border-color: var(--hz-ink); box-shadow: var(--hz-shadow-card); }
.vorlagenkarte:has(input:focus-visible) { outline: 2px solid var(--hz-gold-dark); outline-offset: 3px; }

/* „Gewählt" als Wort und nicht nur als Rahmen · ein Rahmen ist bei
   drei Karten nebeneinander schwer zu sehen. */
.vorlagenkarte label { position: relative; }
.vorlagenkarte:has(input:checked) label::after {
  content: "Gewählt";
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--hz-radius-small);
  background: var(--hz-ink);
  color: var(--hz-on-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: var(--hz-shadow-soft);
}

/* ── Pakete im Konfigurator ── */

.paketraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
}
.ev-paket {
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
  transition: border-color 180ms ease, box-shadow 220ms ease;
}
.ev-paket:hover { border-color: var(--hz-line-strong); box-shadow: var(--hz-shadow-card); }
.ev-paket label {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem 1.5rem 1.75rem;
  cursor: pointer;
}
.ev-paket-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 0.75rem; }
.ev-paket-name {
  font-family: "Fraunces hz", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.35rem;
  font-weight: 490;
  letter-spacing: -0.014em;
}
.ev-paket-marke {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--hz-line-strong);
  border-radius: 999px;
  color: var(--hz-muted-text);
  font-size: 0.75rem;
  font-weight: 700;
}
.ev-paket-betrag {
  display: block;
  margin-top: 0.9rem;
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}
.ev-paket-waehrung { font-size: 0.5em; font-weight: 600; }
.ev-paket-anfrage { font-size: 1.5rem; letter-spacing: -0.02em; }
.ev-paket-satz { display: block; margin-top: 0.9rem; color: var(--hz-muted-text); font-size: 0.9375rem; }
.ev-paket-zwischen {
  display: block;
  margin-top: 1.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hz-line);
  color: var(--hz-muted-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.ev-paket-punkte { display: block; margin-top: 0.8rem; }
.ev-paket-punkte span {
  display: block;
  position: relative;
  padding-left: 1.25rem;
  margin-block: 0.42rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.ev-paket-punkte span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hz-gold);
}
.ev-paket:has(input:checked) { border-color: var(--hz-ink); box-shadow: var(--hz-shadow-card); }
.ev-paket:has(input:checked) label::after {
  content: "Gewählt";
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--hz-radius-small);
  background: var(--hz-ink);
  color: var(--hz-on-ink);
  font-size: 0.8125rem;
  font-weight: 700;
}
.ev-paket:has(input:checked) .ev-paket-marke { visibility: hidden; }
.ev-paket:has(input:focus-visible) { outline: 2px solid var(--hz-gold-dark); outline-offset: 3px; }

/* Ein Paket, das gerade nicht buchbar ist · gedämpft, aber lesbar. Es
   verschwindet nicht: Wer wissen will, was Plus kostet, soll das auch
   dann sehen, wenn die Onlinezahlung gerade zu ist. */
.ev-paket--zu { border-color: var(--hz-line); background: var(--hz-paper-2); }
.ev-paket--zu:hover { border-color: var(--hz-line); box-shadow: none; }
.ev-paket--zu label { cursor: default; opacity: 0.74; }

/* ── Akzente und Zusatzfunktionen ── */

.plusblock {
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
}
.plusblock h2 {
  margin-bottom: 0.5rem;
  font-family: "Fraunces hz", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 490;
}
.plusblock[data-aus] { opacity: 0.55; }

.akzentwahl { margin-block: 1.5rem; }
.akzentreihe { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.akzent label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem 0.5rem 0.7rem;
  border: 1px solid var(--hz-line-strong);
  border-radius: var(--hz-radius-small);
  background: var(--hz-white);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
}
.akzent input:checked + label {
  border-color: var(--hz-ink);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--hz-ink);
}
.akzent input:focus-visible + label { outline: 2px solid var(--hz-gold-dark); outline-offset: 3px; }
.akzent-punkt {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(24 39 53 / 0.15);
}

/* == 11 · Bewegung ================================================== */

/*
 * getrennt → bewegt → zusammen.
 *
 * Ein Element mit .hz-ein ist OHNE SKRIPT vollständig sichtbar. Erst
 * html.js versteckt es, und ein IntersectionObserver holt es zurück.
 * Andersherum wäre die Seite ohne Skript leer · und genau das ist der
 * Fehler, den man erst bemerkt, wenn jemand mit abgeschaltetem
 * JavaScript anruft.
 *
 * Beobachtet wird JE ELEMENT. Eine Stufenklasse, die eine ganze
 * Gruppe freischaltet, blendet beim ersten Treffer alles ein · dann
 * ist die Staffelung weg und man sieht es nur, wenn man langsam
 * scrollt.
 */
html.js .hz-ein {
  opacity: 0;
  transform: translateY(16px);
}
html.js .hz-ein.ist-da {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--hz-ease-weich), transform 720ms var(--hz-ease);
}
html.js .hz-ein--2.ist-da { transition-delay: 90ms; }
html.js .hz-ein--3.ist-da { transition-delay: 180ms; }
html.js .hz-ein--4.ist-da { transition-delay: 270ms; }

/*
 * prefers-reduced-motion: reduce
 *
 * Nicht „weniger", sondern „keine". Alles bleibt sichtbar und an
 * seinem Platz; scroll-behavior geht auf auto, sonst rutscht die
 * Seite bei einem Ankersprung immer noch. Die Punkte bewegen sich
 * nirgends mehr · auch nicht im Intro, siehe hz-start.css.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.js .hz-ein,
  html.js .hz-ein.ist-da {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* == 12 · Orte, Ablauf und Bilder im Formular ======================== */

.orteliste { display: grid; gap: 1rem; }

/*
 * Der erste Ort steht ohne Kasten da.
 *
 * Fast jede Veranstaltung hat einen Ort. Drei gleich aussehende Kästen
 * übereinander lesen sich wie eine Pflicht · so sagt der zweite Kasten
 * von selbst, dass er eine Zugabe ist.
 */
.orteliste .ortsblock:first-child {
  padding: 0;
  border: 0;
  background: none;
}
/* Die Beschriftung wird nur unsichtbar, nicht entfernt: display: none
   nähme sie auch dem Vorleseprogramm, und dann hiesse das dritte Feld
   „Vollständige Anschrift" genau wie das siebte. */
.orteliste .ortsblock:first-child legend {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ablaufzeile label { font-size: 0.8125rem; font-weight: 600; color: var(--hz-muted-text); }

/* Am Telefon wird jede Ablaufzeile ein eigener Kasten · drei Felder
   ohne Trennung untereinander sind nicht mehr als Zeile zu erkennen. */
@media (max-width: 43.999rem) {
  .ablaufzeile {
    padding: 0.9rem 1rem;
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius-medium);
    background: var(--hz-white);
  }
}

/* ── Die Farbtupfer der Akzentwahl ──
   Sie stehen als Klassen und nicht als style-Attribut, weil die
   Sicherheitsrichtlinie kein unsafe-inline für Stile erlaubt. Die
   Werte kommen aus VORLAGEN in daten/vorlagen.php und sind
   Vorlagenfarben, keine Markenfarben · deshalb stehen sie hier als
   Zahl und nicht als Token. */
.akzent-punkt--rosenholz { background: #c08578; }
.akzent-punkt--salbei    { background: #8ca081; }
.akzent-punkt--nachtblau { background: #5b6d8c; }
.akzent-punkt--bernstein { background: #c79a4a; }
.akzent-punkt--pflaume   { background: #8d6480; }
.akzent-punkt--tinte     { background: #1b1b1b; }
.akzent-punkt--kobalt    { background: #2f5ecb; }
.akzent-punkt--terrakota { background: #c2542c; }
.akzent-punkt--moos      { background: #2f7a52; }
.akzent-punkt--gold      { background: #d9b64a; }
.akzent-punkt--sonne     { background: #f0a92b; }
.akzent-punkt--himbeere  { background: #e0526f; }
.akzent-punkt--lagune    { background: #2aa3ac; }
.akzent-punkt--wiese     { background: #63ad3c; }
.akzent-punkt--flieder   { background: #9b7bd4; }

/* ── Bilder ── */

.bildliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}
.bildkachel {
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
  overflow: hidden;
}
.bildkachel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--hz-paper-2); }
.bildkachel figcaption { padding: 0.5rem 1rem 1rem; }
.bildkachel .feld-block { margin-block: 0.5rem; }

.ablegefeld {
  position: relative;
  border: 2px dashed var(--hz-line-strong);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
  transition: border-color 180ms ease, background-color 180ms ease;
}
.ablegefeld[data-drueber] { border-color: var(--hz-gold-dark); background: #FDF8EE; }
.ablegefeld input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.ablegefeld label {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: clamp(1.75rem, 5vw, 3rem) 1.5rem;
  text-align: center;
  cursor: pointer;
  color: var(--hz-muted-text);
}
.ablegefeld-gross { font-size: 1.1rem; font-weight: 700; color: var(--hz-ink); }
.ablegefeld-klein { font-size: 0.9375rem; }
.ablegefeld input:focus-visible + label { outline: 2px solid var(--hz-gold-dark); outline-offset: -4px; }

.fortschritt { padding: 0 1.5rem 1.5rem; }
.fortschritt-balken {
  height: 6px;
  border-radius: 999px;
  background: var(--hz-paper-2);
  overflow: hidden;
}
.fortschritt-balken i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--hz-gold);
  transition: width 200ms linear;
}
.fortschritt-text { margin-top: 0.5rem; color: var(--hz-muted-text); font-size: 0.9375rem; text-align: center; }

.rechtekasten {
  margin-top: 1.75rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
}
.rechtekasten .haken { margin-top: 0; }

/* == 13 · Prüfen und bestellen ====================================== */

.pruefblock { border-top: 0; padding-top: 0; }

.pruefliste { border-top: 1px solid var(--hz-line); }
.pruefzeile {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr) auto;
  gap: 0.35rem 1.5rem;
  align-items: start;
  padding-block: 1rem;
  border-bottom: 1px solid var(--hz-line);
}
.pruefzeile dt { color: var(--hz-muted-text); font-size: 0.9375rem; }
.pruefzeile dd { margin: 0; }
.pruefzeile-aendern {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--hz-gold-text);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.pruefzeile--betrag dd strong {
  display: block;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.pruef-neben, .danke-neben {
  display: block;
  margin-top: 0.2rem;
  color: var(--hz-muted-text);
  font-size: 0.9375rem;
}
.pruef-leer { color: var(--hz-muted-text); }
.pruef-ablauf, .pruef-punkte { list-style: none; padding: 0; }
.pruef-ablauf li { display: flex; gap: 0.9rem; padding-block: 0.15rem; }
.pruef-zeit { width: 4rem; flex: none; color: var(--hz-muted-text); font-variant-numeric: tabular-nums; }
.pruef-punkte li {
  position: relative;
  padding-left: 1.3rem;
  margin-block: 0.35rem;
  font-size: 0.9375rem;
}
.pruef-punkte li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hz-gold);
}
.pruef-bilder { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pruef-bilder img { width: 7rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }

@media (max-width: 40rem) {
  .pruefzeile { grid-template-columns: minmax(0, 1fr) auto; }
  .pruefzeile dt { grid-column: 1 / -1; }
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  word-break: break-all;
}

.zusagenblock { border-top: 2px solid var(--hz-ink); }

/*
 * Die Bestellzeile · Betrag und Knopf auf Nachtblau.
 *
 * Sie ist der einzige dunkle Block im Bestellprozess, und das ist
 * Absicht: Hier wird der Vertrag geschlossen. Der Knopf heisst
 * „Zahlungspflichtig bestellen" (§ 312j Abs. 3 BGB), und er soll
 * aussehen wie das Ende eines Weges und nicht wie der nächste Schritt.
 */
.bestellzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  margin-top: 2rem;
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-ink);
  color: var(--hz-on-ink);
}
.bestellzeile-marke {
  color: var(--hz-muted-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bestellzeile-zahl {
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}
.bestellzeile-neben { color: var(--hz-muted-light); font-size: 0.9375rem; }
.bestellzeile-knopf { flex: 1 1 22rem; }
.bestellzeile-knopf--breit { flex-basis: 100%; }
.bestellzeile-klein { margin-top: 0.9rem; max-width: 52ch; color: var(--hz-muted-light); font-size: 0.9375rem; }
.bestellzeile .hz-knopf--primaer { background: var(--hz-paper); color: var(--hz-ink); }
.bestellzeile .hz-knopf--primaer:hover { background: var(--hz-white); }
.bestellzeile :focus-visible { outline-color: var(--hz-gold); }

/* == 14 · Der Kundenbereich ========================================= */

/* Eine Spalte aus Blöcken, jeder mit einer Linie darüber. Keine
   Karten: Der Bereich ist eine Auskunft und kein Aufbau · was hier
   steht, liest jemand einmal und schliesst das Fenster wieder. */

.kbereich { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 9vw, 7rem); }
.kbereich .hz-feld { max-width: 58rem; }

.kb-kopf { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.kb-nummer {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--hz-muted-text);
}
.kb-kopf h1 {
  margin-top: 0.6rem;
  font-family: "Fraunces hz", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3rem);
  font-weight: 430;
  line-height: 1.06;
  letter-spacing: -0.022em;
}
.kb-termin { margin-top: 0.5rem; color: var(--hz-muted-text); font-size: 1.05rem; }

/* Der Stand. Das Wort trägt die Farbe, der Satz erklärt es · eine
   Ampel ohne Satz lässt jeden raten, was Gelb bedeutet. */
.kb-lage {
  display: grid;
  gap: 0.3rem;
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius-medium);
  background: var(--hz-white);
}
.kb-lage-wort { font-weight: 700; }
.kb-lage-satz { color: var(--hz-muted-text); font-size: 0.9375rem; }
.kb-lage[data-stand="published"] { border-color: var(--hz-ok); }
.kb-lage[data-stand="published"] .kb-lage-wort { color: var(--hz-ok); }
.kb-lage[data-stand="expired"] .kb-lage-wort,
.kb-lage[data-stand="cancelled"] .kb-lage-wort { color: var(--hz-muted-text); }

.kb-meldung {
  margin-bottom: 1.5rem;
  padding: 0.95rem 1.2rem;
  border: 1px solid var(--hz-ok);
  border-radius: var(--hz-radius-small);
  color: var(--hz-ok);
}

.kb-block {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--hz-line);
}
.kb-block h2 {
  margin-bottom: 0.9rem;
  font-family: "Fraunces hz", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.35rem;
  font-weight: 480;
  letter-spacing: -0.014em;
}
.kb-block--leise h2 { font-size: 1.1rem; color: var(--hz-muted-text); }

.kb-klein { margin-top: 0.7rem; max-width: 66ch; color: var(--hz-muted-text); font-size: 0.9375rem; }

.kb-adresse {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
  word-break: break-all;
}
.kb-adresse--wartet { color: var(--hz-muted-text); }

.kb-qr { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; align-items: center; }
.kb-qr svg { width: 148px; height: 148px; border: 1px solid var(--hz-line); border-radius: var(--hz-radius-small); }

.kb-zahlen { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin-bottom: 1.25rem; }
.kb-zahlen span { color: var(--hz-muted-text); font-size: 0.9375rem; }
.kb-zahlen strong {
  display: block;
  color: var(--hz-ink);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Die Tabelle rollt in ihrem eigenen Kasten · eine Seite, die
   waagerecht rollt, ist auf dem Telefon nicht mehr zu bedienen. */
.kb-tabelle { overflow-x: auto; border: 1px solid var(--hz-line); border-radius: var(--hz-radius-medium); }
.kb-tabelle table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.kb-tabelle th, .kb-tabelle td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.kb-tabelle td:last-child { white-space: normal; min-width: 16rem; }
.kb-tabelle thead th { background: var(--hz-paper); font-weight: 700; font-size: 0.875rem; }
.kb-tabelle tbody tr { border-top: 1px solid var(--hz-line); }

.kb-form { margin-top: 1.25rem; }
.kb-form .feld-block { margin-bottom: 1.1rem; }
.kb-fuss { margin-top: clamp(2.5rem, 5vw, 3.5rem); color: var(--hz-muted-text); font-size: 0.9375rem; }
.kb-tatzeile { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.kb-zurueck { margin-bottom: 1.5rem; }
.kb-zurueck a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--hz-muted-text);
  font-size: 0.9375rem;
}

/* Herunterladen ist eine Handlung und kein Verweis im Fließtext · am
   Finger gemessen sind 20 Punkte Höhe zu wenig. Nur diese bekommen
   die Fläche: ein inline-flex auf jedem Link im Absatz bräche den
   Umbruch bei langen Adressen. */
.kb-tat { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }

/* == 15 · Bestätigung, Abbruch, Zugang, Fehlseite =================== */

.dankeseite { padding-block: clamp(3.5rem, 8vw, 6rem) 0; }
.dankeseite h1 {
  max-width: 20ch;
  font-family: "Fraunces hz", Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem);
  font-weight: 420;
  line-height: 1.05;
  letter-spacing: -0.024em;
}
.danke-vorspann { margin-top: 1.1rem; max-width: 58ch; color: var(--hz-muted-text); font-size: 1.125rem; }
.danke-vorspann + .danke-vorspann { margin-top: 0.9rem; }

/* Ein Ring und kein Häkchen · dasselbe Zeichen wie überall. Grün sagt
   „durch", Gold sagt „wartet noch". */
.danke-zeichen {
  display: grid;
  place-items: center;
  width: 3.4rem; height: 3.4rem;
  margin-bottom: 1.5rem;
  border: 2px solid var(--hz-ok);
  border-radius: 50%;
  color: var(--hz-ok);
}
.danke-zeichen--warten { border-color: var(--hz-gold); color: var(--hz-gold-text); }

.danke-liste { margin-top: 2.5rem; border-top: 1px solid var(--hz-line); }
.danke-liste > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0.3rem 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--hz-line);
}
.danke-liste dt { color: var(--hz-muted-text); font-size: 0.9375rem; }
.danke-klein { margin-top: 1.5rem; max-width: 66ch; color: var(--hz-muted-text); font-size: 0.9375rem; }

@media (max-width: 40rem) {
  .danke-liste > div { grid-template-columns: minmax(0, 1fr); }
}

.danke-handlung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.5rem;
}

.zugangform { margin-top: 2rem; max-width: 24rem; }