/* HFM-Beitrittsseite – „Void-Licht hinter Glas“, passend zum Midnight-Layout von have-fun-malfurion.de.
   Hintergrund: Midnight-Motiv weichgezeichnet (bg.webp – Void-Auge, Sonnenbrunnen-Strahl, blass der Löwe).
   Die Tafel ist Milchglas (backdrop-filter) und fängt dessen Licht ein; ihre Oberkante glimmt in Bronze –
   das eine auffällige Detail.
   Farben: Purpur, Mondlicht und Void-Violett von der Webseite (dort --mn-*), Knöpfe und Akzente aber in der
   Bronze des Wappenrahmens (Gold der Webseite beißt sich mit dem Wappen). Knöpfe als Pills wie dort.
   Schriften: Cinzel (nur Überschriften), Lato (Text und alle Knöpfe) – selbst gehostet, fonts/fonts.css. */
:root {
  --bg: #0e0719;              /* Void-Purpur */
  --bg-2: #150a27;            /* Nacht */
  --well: rgba(9, 4, 15, .55);  /* eingelassene Felder */
  --line: rgba(170, 110, 255, .22);
  --line-strong: rgba(170, 110, 255, .4);
  --text: #ece4ff;            /* Mondlicht */
  --muted: #a894cc;
  --heading: #f7f2ff;
  --bronze: #a6987b;           /* Wappenrahmen, Mitte – Knöpfe und Akzente */
  --bronze-hi: #b4a688;        /* Rahmen, hell */
  --bronze-glint: #d7d0bf;     /* Glanzkante */
  --bronze-shade: #7f7460;     /* Rahmen, dunkel */
  --bronze-ink: #1e1b16;       /* Schrift auf Bronze */
  /* Silber von den Krügen – nur für „Malfurion ♦ Malygos“ im Logo */
  --silver-glint: #ededed;
  --silver-hi: #d0cfce;
  --silver: #b5b3b2;
  --silver-shade: #93928e;
  --void: #b78bff;            /* Links, Leuchten */
  --void-hi: #d6bcff;
  --void-2: #5b2bd6;
  --ok: #7ee2a8;
  --err: #ff6b7a;
  --radius: 18px;             /* Tafel */
  --radius-sm: 10px;          /* Felder, Hinweise */

  --head: 'Cinzel', 'Times New Roman', serif;
  --body: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  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.6; color: var(--text);
  background: var(--bg);
  min-height: 100vh; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Himmel: ein festes Pseudo-Element statt background-attachment: fixed – ruckelt auch mobil nicht.
   bg.webp ist schon weichgezeichnet (Midnight: Void-Auge, Sonnenbrunnen-Strahl, darüber blass der Löwe) –
   darüber nur eine Vignette und unten etwas Nacht, damit Text und Glas ruhig bleiben. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 30%, rgba(9, 4, 15, 0) 45%, rgba(9, 4, 15, .55) 100%),
    linear-gradient(180deg, rgba(14, 7, 25, .1) 0%, rgba(14, 7, 25, .15) 55%, rgba(9, 4, 15, .7) 100%),
    var(--bg) url('/img/bg.webp') center 30% / cover no-repeat;
}
[hidden] { display: none !important; }
/* Links (auch die Knöpfe, die wie Links aussehen): ohne Unterstreichung; beim Hover zieht ein leuchtender Strich
   von Violett nach Bronze von links durch und die Schrift glimmt. Der Strich ist ein Hintergrund statt
   text-decoration – nur so lässt er sich animieren. */
a:not(.btn), .link-btn, .change {
  color: var(--void); text-decoration: none;
  background-image: linear-gradient(90deg, var(--void-hi), var(--bronze-glint));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-origin: content-box;
  transition: background-size .45s cubic-bezier(.2, .7, .2, 1), color .2s ease, text-shadow .2s ease;
}
a:not(.btn):hover, a:not(.btn):focus-visible, .link-btn:hover, .link-btn:focus-visible, .change:hover, .change:focus-visible {
  color: #ffffff; background-size: 100% 1px;
  text-shadow: 0 0 12px rgba(183, 139, 255, .7);
}
strong, b { color: #ffffff; }
:focus-visible { outline: 2px solid var(--bronze-hi); 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 1600 px breit, darüber mittig */
  .join {
    max-width: 100rem; padding: 0 clamp(2rem, 5vw, 6rem);
    grid-template-columns: minmax(0, 48rem) 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; }
}

/* ---------- Kopf: Wappen + Name ---------- */
.head { text-align: center; }
.logo {
  display: block; flex: none; width: auto; height: 110px; margin: 0 auto 1.1rem;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .7)) drop-shadow(0 0 30px rgba(183, 139, 255, .3));
}
/* Titel = Gildenlogo, bleibt wie es ist: "Have fuN" groß im Gold-/Bronzeverlauf des Wappenrahmens, darunter
   "Malfurion ♦ Malygos" gesperrt in Silber wie die Krüge – genau so breit wie die erste Zeile (common.js rechnet
   die Schriftgröße passend). */
.head h1 {
  width: fit-content; margin: 0 auto; 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 dem Himmel */
  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(--bronze);
  -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; margin-right: -.02em;
  background-image:
    linear-gradient(112deg, transparent 38%, rgba(243, 238, 226, .16) 46%, transparent 54%),
    linear-gradient(180deg,
      var(--bronze-hi) 0%, var(--bronze-glint) 16%, var(--bronze-hi) 32%, var(--bronze) 52%, var(--bronze-shade) 78%, var(--bronze) 100%);
}
.t-second {
  margin-top: .06em; font-size: .3em; letter-spacing: .2em; margin-right: -.2em; white-space: nowrap; 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%);
}
.sub { margin: .7rem 0 0; font-size: .9375rem; letter-spacing: .02em; color: var(--muted); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.intro { margin: 1.25rem auto 0; max-width: 30em; font-size: 1.0625rem; color: var(--text); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.intro:empty { display: none; }
/* Impressum / Datenschutz: schlicht unter der Begrüßung */
.legal { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin: 1rem 0 0; font-size: .875rem; }
.legal a { color: var(--muted); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }

@media (min-width: 960px) {
  /* Wappen links neben dem ganzen Textblock (Titel, Unterzeile, Begrüßung) */
  .head { text-align: left; display: flex; align-items: flex-start; gap: 2rem; }
  .logo { height: 150px; margin: 0; }
  .head h1 { margin: 0; font-size: clamp(2.6rem, 3.8vw, 3.4rem); }
  .intro { margin: 1.5rem 0 0; max-width: 38rem; font-size: 1.125rem; }
  .legal { justify-content: flex-start; }
  /* Oberkante von "Have fuN" auf Höhe der oberen Schildecken (bei ~20 % der Wappenhöhe) */
  .head-text { min-width: 0; margin-top: 1.45rem; }
}

/* ---------- Tafel: Milchglas ---------- */
.card {
  position: relative; padding: 2.25rem 2rem 2rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(44, 22, 82, .55) 0%, rgba(16, 8, 30, .7) 65%);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 40px 80px -30px rgba(0, 0, 0, .9),
    0 0 90px -30px rgba(91, 43, 214, .7);
}
/* Oberkante in Bronze: ein Lichtstreif, der zur Mitte hin aufglimmt (::before), mit Schein (::after) */
.card::before, .card::after { content: ""; position: absolute; pointer-events: none; }
.card::before {
  top: -1px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 188, 160, .9) 35%, #efebe2 50%, rgba(200, 188, 160, .9) 65%, transparent);
}
.card::after {
  top: -8px; left: 25%; right: 25%; height: 16px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(200, 188, 160, .45), transparent 100%);
}
@media (max-width: 420px) { .card { padding: 1.75rem 1.15rem 1.35rem; border-radius: 16px; } }

.card h2, .card h3 {
  margin: 0 0 .5rem; font-family: var(--head); font-weight: 500; font-size: 1.5rem; line-height: 1.25;
  letter-spacing: .04em; color: var(--heading);
  text-shadow: 0 0 22px rgba(183, 139, 255, .4);
}
.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: .4rem; color: var(--heading); }
.opt { font-weight: 400; color: var(--muted); }
.field input:not([type=checkbox]) {
  width: 100%; padding: .75rem .95rem; border-radius: var(--radius-sm); font: inherit; color: #ffffff;
  background: var(--well);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field input::placeholder { color: rgba(230, 226, 242, .35); }
.field input:hover { border-color: rgba(183, 139, 255, .6); }
.field input:focus,
.field input:focus-visible {
  outline: none; border-color: var(--bronze); background-color: rgba(9, 4, 15, .75);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 3px rgba(166, 152, 123, .22), 0 0 24px -4px rgba(166, 152, 123, .4);
}
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .04em; }
.hint { font-size: .875rem; line-height: 1.5; color: var(--muted); margin: .4rem 0 0; }
/* .field davor: sonst gewinnt ".step p" und setzt den Abstand nach oben auf 0 */
.field .err {
  font-size: .875rem; line-height: 1.45; color: var(--err); margin: .5rem 0 0;
  padding-left: 1.1rem; position: relative;
}
.field .err::before {
  content: ""; position: absolute; left: .1rem; top: .42em; width: .45rem; height: .45rem;
  background: var(--err); transform: rotate(45deg); box-shadow: 0 0 8px rgba(255, 107, 122, .7);
}
.field.invalid input:not([type=checkbox]) { border-color: var(--err); }
.field.invalid input:not([type=checkbox]):focus { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 3px rgba(255, 107, 122, .25), 0 0 24px -4px rgba(255, 107, 122, .4); }

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

/* Passwortfelder nebeneinander (mobil untereinander, dann mit Feldabstand dazwischen); die Felder selbst ohne
   Abstand nach unten – der gemeinsame Hinweis darunter sitzt so wie jeder andere Hinweis direkt unter dem Feld. */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1rem; }
.row .field { margin-bottom: 0; }
.step .pass-hint { margin-bottom: 1.15rem; }
@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: .22rem 0 0; accent-color: var(--bronze); }
.check label { font-weight: 400; margin: 0; color: var(--text); }
.check .err { grid-column: 2; }

/* Trenner: Void-Linie mit Bronze-Raute */
.divider {
  position: relative; height: 1px; margin: 1.75rem 0 1.5rem;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}
.divider::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--bronze); box-shadow: 0 0 10px rgba(200, 188, 160, .7);
}

/* ---------- Knöpfe: Pills wie auf der Webseite, Metall wie der Wappenrahmen (oben hell, unten tiefer) ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%;
  min-height: 3.1rem; padding: .75rem 1.35rem; margin-top: 1.4rem;
  border: 1px solid var(--bronze); border-radius: 999px;
  cursor: pointer; text-decoration: none; text-align: center;
  background: linear-gradient(180deg, var(--bronze-hi) 0%, var(--bronze) 55%, #978a6f 100%); color: var(--bronze-ink);
  font-family: var(--body); font-weight: 700; font-size: 1.0625rem; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 26px -10px rgba(166, 152, 123, .6);
  transition: border-color .18s ease, box-shadow .25s ease, filter .18s ease;
}
/* Glanzlicht: ein schräger Lichtstreif gleitet beim Hover einmal über das Metall – zwischen Fläche und Schrift
   (isolation + z-index -1), zurück springt er unsichtbar (Übergang nur im Hover). */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .6) 50%, transparent 68%);
  transform: translateX(-105%);
}
.btn:hover::before { transform: translateX(105%); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.btn:hover {
  color: var(--bronze-ink); border-color: var(--bronze-glint); filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 1px rgba(215, 208, 191, .22),
    0 0 30px -4px rgba(200, 188, 160, .65), 0 14px 30px -12px rgba(0, 0, 0, .85);
}
.btn:active {
  filter: brightness(.97); transition-duration: .06s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 16px -6px rgba(200, 188, 160, .5);
}
.btn:focus-visible { outline: 2px solid var(--heading); outline-offset: 3px; }
.btn:disabled { cursor: wait; filter: saturate(.7) brightness(.85); }
.btn:disabled::before { content: none; }
.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; }

/* Hauptaktionen (Account anlegen, Battle.net, Download): Bronze mit Glanzkante, die leuchtet */
.btn.btn-go {
  border-color: rgba(215, 208, 191, .8);
  background: linear-gradient(180deg, var(--bronze-glint) 0%, var(--bronze-hi) 38%, var(--bronze) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(60, 53, 41, .25),
    0 0 26px -4px rgba(200, 188, 160, .55), 0 12px 30px -12px rgba(0, 0, 0, .8);
}
.btn.btn-go:hover {
  background: linear-gradient(180deg, #e6e1d4 0%, #c9bda2 38%, var(--bronze-hi) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(60, 53, 41, .2), 0 0 0 1px rgba(215, 208, 191, .3),
    0 0 44px 0 rgba(200, 188, 160, .7), 0 14px 30px -12px rgba(0, 0, 0, .85);
}
/* Download (Fluxer installieren): das Wichtigste auf der Seite – größer, mit Symbol und pulsierendem Schein */
.btn.btn-download { min-height: 3.8rem; margin: .5rem 0 1.25rem; font-size: 1.25rem; }
/* 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.8s ease-in-out infinite; }
  @keyframes glow {
    50% {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(60, 53, 41, .25),
        0 0 48px 2px rgba(200, 188, 160, .6), 0 12px 30px -12px rgba(0, 0, 0, .8);
    }
  }
}

/* Zurück, Abbrechen, Löschen: Glas-Pill – beim Hover leuchtet das Glas von innen in Void-Violett auf
   (Metall glänzt, Glas glimmt) */
.btn-back {
  flex: 0 0 auto; min-height: 3.1rem; padding: .75rem 1.35rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--heading);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .25s ease;
}
/* „Überspringen“ (Battle.net-Schritt): der Weiter-Knopf, aber still wie „Zurück“ */
.btn.btn-quiet {
  color: var(--heading); background: rgba(255, 255, 255, .04); border-color: var(--line-strong); box-shadow: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn.btn-quiet::before { content: none; }
.btn-back:hover, .btn.btn-quiet:hover {
  color: #ffffff; background: rgba(183, 139, 255, .12); border-color: rgba(214, 188, 255, .7); filter: none;
  box-shadow: inset 0 0 18px rgba(183, 139, 255, .25), 0 0 24px -4px rgba(183, 139, 255, .65);
}
.btn-back:active, .btn.btn-quiet:active { box-shadow: inset 0 0 12px rgba(183, 139, 255, .3); }

.nav { display: flex; gap: .75rem; margin-top: 1.75rem; }
.nav .btn { margin-top: 0; flex: 1 1 auto; }
/* Links unter dem Hauptknopf („Schon registriert?“, „Noch kein Account?“): unauffällig, mittig, untereinander.
   .card davor: in einem .step würde sonst „.step p“ den Abstand nach oben auf 0 setzen. */
.card .skip { display: grid; justify-items: center; gap: .35rem; margin: 1.1rem 0 0; text-align: center; }
/* Linie und Hover wie bei Links (oben bei a); hier nur der Knopf ohne Knopf-Optik */
.link-btn { padding: .25rem; border: 0; background-color: transparent; cursor: pointer; font: inherit; font-size: .9375rem; }

/* ---------- Meldungen ---------- */
.alert, .success, .notice {
  padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .9375rem; color: var(--text);
}
/* Fehler und Erfolg mit Statuslicht vor der ersten Zeile – getönt allein würde Mint auf Purpur grau */
.alert, .success { position: relative; padding-left: 2.15rem; }
.alert::before, .success::before {
  content: ""; position: absolute; left: .95rem; top: calc(.75rem + .8em - .25rem);
  width: .5rem; height: .5rem; border-radius: 50%;
}
.alert {
  margin-bottom: 1.25rem;
  background: rgba(255, 107, 122, .1); border: 1px solid rgba(255, 107, 122, .4);
  box-shadow: 0 0 28px -12px rgba(255, 107, 122, .6);
}
.alert::before { background: var(--err); box-shadow: 0 0 10px 1px rgba(255, 107, 122, .8); }
.success {
  color: #e3fbee; background: rgba(126, 226, 168, .1); border: 1px solid rgba(126, 226, 168, .45);
  box-shadow: 0 0 28px -12px rgba(126, 226, 168, .6);
}
.success::before { background: var(--ok); box-shadow: 0 0 10px 1px rgba(126, 226, 168, .8); }
/* Hinweis in Void-Lila – Bronze getönt würde auf dem Purpur zu Grau */
.notice { background: rgba(183, 139, 255, .1); border: 1px solid rgba(183, 139, 255, .32); }
/* Meldungen mit mehreren Absätzen/Listen (Battle.net-Ergebnis) */
.alert > p, .notice > p, .success > p { margin: 0 0 .5rem; }
.alert > :last-child, .notice > :last-child, .success > :last-child { margin-bottom: 0; }
.alert ol, .notice ol { margin: .25rem 0 0; padding-left: 1.25rem; }

/* ---------- Schritte ---------- */
.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 Abschnitten (keine Punkte, keine Ziffern) – erledigte in Bronze,
   der aktuelle glimmt. */
.progress {
  list-style: none; margin: 0 0 1.9rem; padding: 0;
  display: flex; gap: 6px;
}
.progress li { flex: 1 1 0; height: 4px; border-radius: 999px; background: rgba(170, 110, 255, .2); transition: background-color .3s ease, box-shadow .3s ease; }
.progress li.done { background: rgba(166, 152, 123, .65); }
.progress li[aria-current] { background: linear-gradient(90deg, var(--bronze), var(--bronze-hi)); box-shadow: 0 0 12px rgba(200, 188, 160, .65); }
.dot { display: none; }

.step h2 { outline: none; margin-bottom: .9rem; }
.step h2:focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: 4px; border-radius: 4px; }
.step p { margin: 0 0 1rem; }
.step .hint { margin-top: .4rem; }
.lead { color: var(--muted); }
.step .field:last-child { margin-bottom: 0; }
.step .notice + h2, .step .success + h2 { margin-top: 1.5rem; }
.step .alert + p, .step .alert + h2 { margin-top: 1rem; }
.step .after-dl { margin-top: 1.25rem; }

/* Zusammenfassung */
.summary { margin: 0 0 1.25rem; }
.summary > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid rgba(170, 110, 255, .14);
}
.summary > div:last-child { border-bottom: 0; }
.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: #ffffff; }
.summary dd:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.change { font: inherit; font-size: .875rem; background-color: transparent; border: 0; padding: .25rem 0; cursor: pointer; }

/* 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: var(--radius-sm); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .9);
}
.instance-note .copy { margin: 0; }
.instance-note #copy-state { margin: .4rem 0 0; }
.instance-note #copy-state:empty { display: none; }
.value { font-weight: 700; overflow-wrap: anywhere; }
.farewell {
  font-family: var(--head); font-size: 1.125rem; color: var(--bronze-hi); margin-bottom: 0 !important;
  text-shadow: 0 0 18px rgba(200, 188, 160, .35);
}

/* Adresse zum Kopieren: schreibgeschütztes Feld (bricht nicht um, zu lang -> „…“) + Knopf in einem Rahmen,
   der beim Fokus wie die anderen Felder in Bronze aufleuchtet */
.copy {
  display: flex; align-items: stretch; margin: 0 0 .25rem; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--well);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.copy:has(input:focus) {
  border-color: var(--bronze);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 3px rgba(166, 152, 123, .22), 0 0 24px -4px rgba(166, 152, 123, .4);
}
.copy input {
  flex: 1 1 auto; min-width: 0; padding: .8rem .85rem; margin: 0;
  font-size: .9375rem; letter-spacing: .02em; color: var(--bronze-hi); text-overflow: ellipsis;
  background: transparent; border: 0; outline: none; cursor: text;
}
.copy input::selection { background: rgba(183, 139, 255, .45); color: #ffffff; }
.copy-btn {
  flex: none; padding: 0 1.1rem; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 700; color: var(--heading);
  background: rgba(255, 255, 255, .05); border: 0; border-left: 1px solid var(--line);
  transition: background-color .2s ease, color .2s ease, box-shadow .25s ease;
}
.copy-btn:hover { background: rgba(183, 139, 255, .14); color: #ffffff; box-shadow: inset 0 0 16px rgba(183, 139, 255, .3); }
.copy-btn:focus-visible { outline-offset: -3px; }

/* ---------- Kontoseite ---------- */
#result { margin-bottom: 1.25rem; }
.who { margin-top: -.35rem; }
.who .link-btn { padding: 0; font-size: inherit; }
/* Charaktere: lange Listen (Twinks!) scrollen in einem eingelassenen Feld, statt die Tafel endlos zu strecken.
   Höhe ≈ 6½ Zeilen – die angeschnittene letzte zeigt, dass es weitergeht. */
.chars {
  list-style: none; margin: 0 0 .25rem; padding: 0 .85rem;
  max-height: 17rem; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--well);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
  scrollbar-width: thin; scrollbar-color: var(--bronze-shade) transparent;
}
.chars li { padding: .5rem 0; border-bottom: 1px solid rgba(170, 110, 255, .14); color: var(--muted); overflow-wrap: anywhere; }
.chars li:last-child { border-bottom: 0; }
.chars strong { color: #ffffff; font-weight: 700; }
.unlink { width: 100%; }

/* Mobil: Wappen und Tafel untereinander – .side ist dort nur eine Klammer */
@media (max-width: 959px) {
  .side { display: contents; }
}

/* Markenhinweis + Datenquelle (Blizzard): klein, aber lesbar. Desktop unter dem Kopf, bündig mit dem Text neben
   dem Wappen (Wappenbreite bei 150 px Höhe + Abstand); mobil per order ganz unten nach der Tafel. */
.trademark {
  margin: 0; max-width: 38rem; font-size: .75rem; line-height: 1.5; color: var(--muted);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
@media (min-width: 960px) { .trademark { margin-left: calc(150px * 300 / 368 + 2rem); } }
@media (max-width: 959px) { .trademark { order: 1; margin: 0 auto; text-align: center; } }

/* ---------- ALTCHA-Widget (nur über seine Variablen) ---------- */
altcha-widget {
  --altcha-max-width: 100%;
  --altcha-color-base: rgba(9, 4, 15, .55);
  --altcha-color-base-content: var(--text);
  --altcha-color-primary: var(--bronze);
  --altcha-color-primary-content: var(--bronze-ink);
  --altcha-color-error: #d94a5a;
  --altcha-color-error-content: #fff;
  --altcha-color-success: #3fa86f;
  --altcha-color-neutral: rgba(170, 110, 255, .25);
  --altcha-color-neutral-content: var(--text);
  --altcha-border-color: var(--line-strong);
  --altcha-checkbox-border-color: var(--void);
  --altcha-checkbox-outline-color: var(--bronze);
  --altcha-border-radius: var(--radius-sm);
  --altcha-checkbox-border-radius: 4px;
  --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: Wappen, Name, dann die Tafel ---------- */
@media (prefers-reduced-motion: no-preference) {
  .logo { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .head h1 { animation: rise .7s .08s cubic-bezier(.2, .7, .2, 1) both; }
  .card { animation: rise .8s .18s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .spinner { animation-duration: 2.4s; }
}