/* HFM-Beitrittsseite – „Aushang in der Gildenhalle".
   Links (Desktop) das Wappen mit Gildennamen wie ein Aushang an der Wand, rechts das Formular
   als Tafel in einem Steinrahmen, der den Rahmen des Wappens aufgreift.
   Farben: Ruß/Braun vom Hintergrundbild, Stein vom Wappenrand, Gold = --accent (per JS gesetzt).
   Schriften: Cinzel (Überschriften, Knopf), Lato (Text) – selbst gehostet, fonts/fonts.css. */
:root {
  --accent: #a6987b;          /* Bronze des Wappenrahmens */
  --accent-text: #1e1b16;

  --soot: #14100c;            /* Hallen-Dunkel aus dem Hintergrund */
  --panel: #1e1813;           /* Tafel */
  --panel-deep: #16120e;
  --well: #0f0c09;            /* eingelassene Felder */
  --stone-hi: #d2c8af;        /* Steinrahmen hell (Wappenrand) */
  --stone: #8d826c;
  --stone-lo: #4b4437;
  --line: #3d3328;
  --text: #efe6d3;            /* Pergament-Weiß */
  --muted: #b2a48c;
  --err: #ff9d87;
  --err-bg: rgba(190, 60, 40, .14);

  --head: 'Cinzel', 'Times New Roman', serif;
  --body: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Metall aus dem Wappen: Bronze vom Rahmen (#B4A688 … #766C58), Silber von den Krügen.
     Aus --accent abgeleitet (gleiche Verhältnisse wie im Wappen), damit eine andere ACCENT-Farbe passt. */
  --gold: var(--accent);                                          /* Rahmen, Mitte      #A6987B */
  --gold-glint: color-mix(in oklab, var(--accent) 40%, #f3eee2);  /* Glanz              ~#D7D0BF */
  --gold-hi: color-mix(in oklab, var(--accent) 78%, #e2d6ba);     /* Rahmen, hell       ~#B4A688 */
  --gold-shade: color-mix(in oklab, var(--accent) 66%, #3c3529);  /* Rahmen, dunkel     ~#7F7460 */
  --gold-deep: color-mix(in oklab, var(--accent) 38%, #25211b);   /* Tiefe              ~#4B453B */
  --gold-lo: var(--gold-shade);
  --silver-glint: #ededed;   /* Krüge, Glanz */
  --silver-hi: #d0cfce;
  --silver: #b5b3b2;
  --silver-shade: #93928e;
  --silver-deep: #636059;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Cinzel gibt es nur in 500: der Browser darf keinen Fettschnitt vortäuschen. */
html { font-synthesis-weight: none; }
html, body { margin: 0; min-height: 100%; }

body {
  font-family: var(--body); font-size: 1rem; line-height: 1.55; color: var(--text);
  background:
    radial-gradient(ellipse 80% 70% at 30% 20%, transparent 0%, rgba(8, 6, 4, .55) 100%),
    var(--soot) url('/img/hintergrund.jpg') center / cover no-repeat fixed;
  min-height: 100vh; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* iOS/Android rendern "fixed" schlecht – dort mitscrollen */
@media (max-width: 959px), (hover: none) {
  body { background-attachment: scroll, scroll; background-position: center, 72% top; }
}
[hidden] { display: none !important; }
a { color: var(--gold-hi); text-underline-offset: .18em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Gerüst ---------- */
.join {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  width: 100%; max-width: 34rem; margin: 0 auto;
  padding: 2.5rem 1rem 3.5rem;
}
@media (min-width: 960px) {
  /* Kopf links, Formular rechts – beide vertikal mittig im Fenster; höchstens 1440 px breit, darüber mittig */
  .join {
    max-width: 90rem; padding: 0 clamp(2rem, 5vw, 6rem);
    grid-template-columns: minmax(0, 40rem) minmax(2rem, 1fr) 30rem;
    grid-template-areas: "side . card";
    min-height: 100vh; column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  /* Wappen-Spalte: steht fest um die Fenstermitte, unabhängig von der Höhe der Tafel (auch beim Scrollen).
     Feste Oberkante statt Zentrieren – sonst verschiebt ein längerer Intro-Text das Wappen. */
  .side {
    grid-area: side; position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; gap: 1.5rem;
    padding-top: max(2.5rem, calc(50vh - 9rem));
  }
  /* Tafel: in jedem Schritt mittig (ist sie höher als das Fenster, scrollt die Seite) */
  .card { grid-area: card; align-self: center; margin: 2.5rem 0; }
  .join .foot { justify-content: flex-start; padding: 0; }
}

/* ---------- Kopf: Wappen + Name ---------- */
.head { text-align: center; }
.logo {
  display: block; width: auto; height: 110px; margin: 0 auto 1.1rem;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .7)) drop-shadow(0 0 1px rgba(0, 0, 0, .9));
}
/* Titel zweiteilig: "Have Fun" groß in Gold, "Malfurion" kleiner und gesperrt in Silber */
.head h1 {
  margin: 0; font-family: var(--head); font-weight: 500; line-height: 1.05;
  font-size: clamp(2rem, 9vw, 2.6rem);
  /* Prägekante: heller Grat oben, dunkle Fuge unten, dann der Schatten auf der Wand */
  filter:
    drop-shadow(0 -1px 0 rgba(255, 236, 190, .18))
    drop-shadow(0 1px 0 rgba(20, 10, 0, .9))
    drop-shadow(0 6px 14px rgba(0, 0, 0, .65));
}
.t-main, .t-second {
  display: block; color: var(--gold);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Zwei Ebenen: ein schräger Lichtreflex über vertikalen Metallbändern
   (Glanz oben – Körper – dunkles Band – scharfe Horizontlinie – Tiefe – Rückstrahlung unten). */
.t-main {
  letter-spacing: .02em;
  background-image:
    linear-gradient(112deg, transparent 38%, rgba(243, 238, 226, .16) 46%, transparent 54%),
    linear-gradient(180deg,
      var(--gold-hi) 0%, var(--gold-glint) 16%, var(--gold-hi) 32%, var(--gold) 52%, var(--gold-shade) 78%, var(--gold) 100%);
}
.t-second {
  margin-top: .06em; font-size: .38em; letter-spacing: .2em; color: var(--silver);
  background-image:
    linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .22) 46%, transparent 54%),
    linear-gradient(180deg,
      var(--silver-hi) 0%, var(--silver-glint) 18%, var(--silver-hi) 34%, var(--silver) 55%, var(--silver-shade) 80%, var(--silver) 100%);
}
.t-second:empty { display: none; }
.sub {
  margin: .6rem 0 0; font-style: italic; font-size: 1.125rem; color: var(--muted);
}
.intro { margin: 1.25rem auto 0; max-width: 30em; font-size: 1.0625rem; color: var(--text); }
.intro:empty { display: none; }

@media (min-width: 960px) {
  .head {
    text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 2rem; align-items: center;
  }
  .logo { height: 150px; margin: 0; }
  .head h1 { font-size: clamp(2.6rem, 3.8vw, 3.4rem); }
  .intro {
    grid-column: 1 / -1; margin: 2.25rem 0 0; max-width: 36rem; font-size: 1.125rem;
  }
  /* Oberkante von "Have Fun" auf Höhe der oberen Schildecken (bei ~20 % der Wappenhöhe); Intro darunter über die volle Breite */
  .head-text { grid-column: 2; align-self: start; margin-top: 1.45rem; }
}

/* ---------- Tafel mit Steinrahmen ---------- */
.card {
  position: relative; padding: 2rem 1.75rem 1.75rem;
  /* Stahlrahmen: echte Rahmenfarben (Licht von oben) statt Verlauf – ein 1px-Verlauf mit Rundung
     wird in den Ecken vom Kantenglätten abgedunkelt und wirkt dort dünner. */
  border: 1px solid; border-radius: 4px;
  border-color: var(--stone-hi) var(--stone) var(--stone-lo) var(--stone);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-deep) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .85),
    0 28px 60px -10px rgba(0, 0, 0, .75),
    0 8px 20px rgba(0, 0, 0, .45);
}
/* feine Innenkante wie beim Wappen: dunkle Fuge, dann heller Grat */
.card::before {
  /* Radius = Außenradius minus Rahmenbreite, sonst überdeckt die Schattenkante den Rahmen in den Ecken */
  content: ""; position: absolute; inset: 0; border-radius: 3px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 240, 210, .05), inset 0 18px 40px -20px rgba(255, 220, 160, .06);
}
@media (max-width: 420px) { .card { padding: 1.5rem 1.15rem 1.25rem; } }

/* Überschriften im Silberverlauf wie "Malfurion ♦ Malygos" – heben sich vom Bronze-Rest ab */
.card h2, .card h3 {
  margin: 0 0 .5rem; font-family: var(--head); font-weight: 500; font-size: 1.5rem; line-height: 1.2;
  letter-spacing: .03em; color: var(--silver);
  background-image:
    linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .22) 46%, transparent 54%),
    linear-gradient(180deg,
      var(--silver-hi) 0%, var(--silver-glint) 18%, var(--silver-hi) 34%, var(--silver) 55%, var(--silver-shade) 80%, var(--silver) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7));
}
.card h2 label { cursor: inherit; }
.muted { color: var(--muted); }
.small { font-size: .875rem; text-align: center; margin: .75rem 0 0; }
.loading { margin: 0; text-align: center; font-style: italic; }
.closed p { margin: .25rem 0 0; }

/* ---------- Felder ---------- */
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 700; font-size: .9375rem; margin-bottom: .35rem; color: var(--text); }
.opt { font-weight: 400; color: var(--muted); }
.field input:not([type=checkbox]) {
  width: 100%; padding: .7rem .8rem; border-radius: 4px; font: inherit; color: var(--text);
  background: var(--well);
  border: 1px solid var(--line); border-bottom-color: #5a4d3c;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: #7a6e5d; }
.field input:hover { border-color: #5a4d3c; }
.field input:focus,
.field input:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .04em; }
.hint { font-size: .875rem; line-height: 1.45; color: var(--muted); margin: .35rem 0 0; }
.err {
  font-size: .875rem; line-height: 1.45; color: var(--err); margin: .4rem 0 0;
  padding-left: 1.1rem; position: relative;
}
.err::before {
  content: ""; position: absolute; left: .1rem; top: .42em; width: .45rem; height: .45rem;
  background: var(--err); transform: rotate(45deg);
}
.field.invalid input:not([type=checkbox]) { border-color: var(--err); }
.field.invalid input:not([type=checkbox]):focus { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), 0 0 0 3px rgba(255, 157, 135, .3); }
.field.invalid .hint { display: none; }

/* Beitrittspasswort: der „Schlüssel" – leicht abgesetzt */
.key label { color: var(--gold-hi); }
.key input:not([type=checkbox]) { font-size: 1.0625rem; padding-block: .8rem; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }

.check { display: grid; grid-template-columns: auto 1fr; gap: .25rem .65rem; align-items: start; }
.check input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: var(--accent); }
.check label { font-weight: 400; margin: 0; }
.check .err { grid-column: 2; }

/* Trenner mit Raute (wie eine Fuge im Stein) */
.divider {
  position: relative; height: 1px; margin: 1.6rem 0 1.5rem;
  background: linear-gradient(90deg, transparent, var(--stone-lo) 18%, var(--stone-lo) 82%, transparent);
}
.divider::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--panel); border: 1px solid var(--stone);
}

/* ---------- Knopf: Goldplakette ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%;
  min-height: 3.1rem; padding: .75rem 1rem; margin-top: 1.4rem;
  border: 1px solid var(--gold-deep); border-radius: 4px;
  cursor: pointer; text-decoration: none; text-align: center;
  /* Goldplakette: Glanzkante oben, gewölbte Fläche, Horizont knapp unter der Mitte, Rückstrahlung unten */
  background:
    linear-gradient(180deg,
      var(--gold-hi) 0%, var(--gold) 50%, color-mix(in oklab, var(--gold) 75%, var(--gold-shade)) 100%);
  color: var(--accent-text);
  font-family: var(--head); font-weight: 500; font-size: 1.0625rem; letter-spacing: .05em;
  text-shadow: 0 1px 0 rgba(243, 238, 226, .25);
  box-shadow:
    inset 0 1px 0 rgba(243, 238, 226, .45), inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 1px 0 rgba(0, 0, 0, .6), 0 6px 16px rgba(0, 0, 0, .55);
  transition: filter .15s ease, transform .1s ease;
}
.btn:hover { filter: brightness(1.08); color: var(--accent-text); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.btn:disabled { cursor: wait; filter: saturate(.7) brightness(.9); }
.spinner {
  width: 1em; height: 1em; flex: none; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.nowrap { white-space: nowrap; }

/* ---------- Meldungen ---------- */
.alert {
  margin-bottom: 1.25rem; padding: .7rem .9rem .7rem 1rem; border-radius: 3px;
  background: var(--err-bg); border: 1px solid rgba(255, 157, 135, .35); border-left: 3px solid var(--err);
  color: var(--text); font-size: .9375rem;
}

/* ---------- Stepper ---------- */
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Fortschritt: schmale Linie aus sechs Abschnitten (keine Punkte, keine Ziffern) –
   erledigte und der aktuelle Abschnitt in Bronze. */
.progress {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: flex; gap: 3px;
}
.progress li { flex: 1 1 0; height: 3px; border-radius: 2px; background: var(--stone-lo); }
.progress li.done { background: var(--gold-shade); }
.progress li[aria-current] { background: linear-gradient(90deg, var(--gold-shade), var(--gold-hi)); box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 40%, transparent); }
.dot { display: none; }

.step h2 { outline: none; margin-bottom: .9rem; }
.step h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.step p { margin: 0 0 1rem; }
.step .hint { margin-top: .35rem; }
.lead { color: var(--muted); }
.step .field:last-child { margin-bottom: 0; }

.nav { display: flex; gap: .75rem; margin-top: 1.6rem; }
.nav .btn { margin-top: 0; flex: 1 1 auto; }
.btn-back {
  flex: 0 0 auto; min-height: 3.1rem; padding: .75rem 1.15rem; border-radius: 4px; cursor: pointer;
  font: inherit; font-family: var(--head); font-weight: 500; letter-spacing: .04em; color: var(--text);
  background: transparent; border: 1px solid var(--stone-lo);
}
.btn-back:hover { border-color: var(--stone); background: rgba(255, 240, 210, .04); }
/* "Schon registriert?" – unauffälliger Textlink unter dem Weiter-Knopf */
.skip { margin: 1rem 0 0; text-align: center; }
.link-btn {
  padding: .25rem; border: 0; background: none; cursor: pointer; font: inherit; font-size: .9375rem;
  color: var(--gold-hi); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--gold-hi) 50%, transparent);
}
.link-btn:hover { color: var(--gold-glint); text-decoration-color: currentColor; }

/* Download (Schritt 5): das Wichtigste auf der Seite – größer, mit Symbol und leichtem Schein */
.btn.btn-download {
  min-height: 3.8rem; margin: .5rem 0 1.25rem; font-size: 1.25rem; letter-spacing: .08em;
  box-shadow:
    inset 0 1px 0 rgba(243, 238, 226, .45), inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 0 0 1px rgba(0, 0, 0, .6), 0 0 22px color-mix(in srgb, var(--gold) 35%, transparent), 0 8px 20px rgba(0, 0, 0, .55);
}
.btn.btn-download:hover { filter: brightness(1.1); }
/* Download-Pfeil als reines CSS (Schaft + Spitze + Ablage) */
.dl-icon {
  position: relative; width: 1.1rem; height: 1.2rem; flex: none;
  border-bottom: 2px solid currentColor;
}
.dl-icon::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: .8rem; margin-left: -1px; background: currentColor;
}
.dl-icon::after {
  content: ""; position: absolute; left: 50%; top: .38rem; width: .5rem; height: .5rem; margin-left: -.26rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .btn.btn-download { animation: glow 2.6s ease-in-out infinite; }
  @keyframes glow { 50% { box-shadow: inset 0 1px 0 rgba(243, 238, 226, .45), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .6), 0 0 32px color-mix(in srgb, var(--gold) 55%, transparent), 0 8px 20px rgba(0, 0, 0, .55); } }
}

/* Zusammenfassung */
.summary { margin: 0 0 1.25rem; border-top: 1px solid var(--line); }
.summary > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.summary dt { grid-column: 1; font-size: .8125rem; color: var(--muted); }
.summary dd { margin: 0; }
.summary dd:nth-of-type(1) { grid-column: 1; overflow-wrap: anywhere; color: var(--text); }
.summary dd:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.change {
  font: inherit; font-size: .875rem; color: var(--gold-hi); background: none; border: 0; padding: .25rem 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent);
}
.change:hover { color: var(--accent); }

/* Hinweise nach der Registrierung */
.success, .notice {
  padding: .65rem .9rem .65rem 1rem; border-radius: 3px; font-size: .9375rem;
}
.success {
  color: var(--text); background: rgba(95, 138, 74, .14);
  border: 1px solid rgba(140, 180, 110, .3); border-left: 3px solid #8cb46e;
}
.notice {
  color: var(--text); background: color-mix(in srgb, var(--gold) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); border-left: 3px solid var(--gold);
}
.step .notice + h2, .step .success + h2 { margin-top: 1.5rem; }
.step .after-dl { margin-top: 1.25rem; }
/* Zwischenüberschrift im Download-Schritt: wie die Schrittüberschrift, nur mit Abstand nach oben */
.card h3 { margin: 1.75rem 0 .9rem; }
.instance-note > p { margin: 0 0 .6rem; }
.instance-note .shot { display: block; width: 100%; height: auto; margin: 0 0 .75rem; border: 1px solid var(--line); border-radius: 4px; }
.instance-note .copy { margin: 0; }
.instance-note #copy-state { margin: .35rem 0 0; }
.instance-note #copy-state:empty { display: none; }
.value { color: var(--gold-hi); font-weight: 700; overflow-wrap: anywhere; }
.farewell { font-family: var(--head); font-size: 1.125rem; color: var(--gold-hi); margin-bottom: 0 !important; }

/* Adresse zum Kopieren */
.copy {
  display: flex; align-items: stretch; margin: 0 0 .25rem;
  border: 1px solid var(--line); border-bottom-color: #5a4d3c; border-radius: 4px; background: var(--well);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
}
.copy code {
  flex: 1 1 auto; min-width: 0; padding: .8rem .9rem; overflow-wrap: anywhere;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 1rem; color: var(--gold-hi);
  user-select: all;
}
.copy-btn {
  flex: none; padding: 0 1rem; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 700; color: var(--text);
  background: rgba(255, 240, 210, .05); border: 0; border-left: 1px solid var(--line); border-radius: 0 3px 3px 0;
}
.copy-btn:hover { background: rgba(255, 240, 210, .1); color: var(--gold-hi); }
.copy-btn:focus-visible { outline-offset: -3px; }


/* ---------- Fußzeile: Impressum / Datenschutz ---------- */
/* Mobil: Wappen, Tafel, Fußzeile untereinander – .side ist dort nur eine Klammer */
@media (max-width: 959px) {
  .side { display: contents; }
  .card { order: 1; }
  .foot { order: 2; }
}
.foot {
  display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
  padding: 0 1rem 2rem; font-size: .875rem;
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--accent); text-decoration: underline; }

/* ---------- ALTCHA-Widget (nur über seine Variablen) ---------- */
altcha-widget {
  --altcha-max-width: 100%;
  --altcha-color-base: var(--well);
  --altcha-color-base-content: var(--text);
  --altcha-color-primary: var(--accent);
  --altcha-color-primary-content: var(--accent-text);
  --altcha-color-error: #b8452f;
  --altcha-color-error-content: #fff;
  --altcha-color-success: #5f8a4a;
  --altcha-color-neutral: var(--stone-lo);
  --altcha-color-neutral-content: var(--text);
  --altcha-border-color: var(--line);
  --altcha-checkbox-border-color: var(--stone);
  --altcha-checkbox-outline-color: var(--accent);
  --altcha-border-radius: 4px;
  --altcha-checkbox-border-radius: 3px;
  --altcha-shadow: none;
  display: block; font-family: var(--body);
}
.captcha { margin-top: .5rem; }
.field.invalid altcha-widget { --altcha-border-color: var(--err); --altcha-checkbox-border-color: var(--err); }

/* ---------- ein einziger Auftritt beim Laden ---------- */
@media (prefers-reduced-motion: no-preference) {
  .logo:not([hidden]) { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .head h1 { animation: rise .7s .08s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .spinner { animation-duration: 2.4s; }
}