/* Satoshi wie bei Tempus Flow, selbst gehostet statt über ein CDN */
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/satoshi-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --page-max: 1180px;
  --gutter: 20px;

  /* Schwarz als Grund. Flächen und Linien sind halbtransparent, damit das
     blaue und rote Licht im Hintergrund durchscheint. */
  --night: #000;
  --smoke: rgba(255, 255, 255, .045);
  --line: rgba(255, 255, 255, .11);
  --fog: #a3a8b3;
  --text: #f5f7fa;
  --gold: #e3b341;
  --ink: #140d02;
  --ink-soft: #3f2e0b;

  /* Gold und Weiß als Material, Werte aus dem Tempus-Flow-Markenblatt */
  --gold-sheen: linear-gradient(100deg,
    #9a6a18 0%, #c9972f 14%, #f3dc8c 24%, #fff6dd 30%, #f3dc8c 36%,
    #d9ab42 48%, #a8741d 62%, #c9972f 80%, #9a6a18 100%);
  --silber-sheen: linear-gradient(100deg,
    #bfc4cc 0%, #e6e9ee 22%, #ffffff 48%, #f0f2f6 72%, #c8cdd5 100%);
  /* Für Knöpfe mit dunkler Schrift: dieselbe Kurve ohne die tiefen Enden,
     damit die Beschriftung überall mindestens 4,5:1 hat. */
  /* Weiß zum Wandern: dieselben Stufen waagerecht und doppelt breit wie beim
     Gold, mit Silbergrau als Grund und reinem Weiß als Glanzkante. */
  --silber-sheen-wide: linear-gradient(100deg,
    #a3aab5 0%, #c6cad1 14%, #eceef2 22%, #ffffff 28%, #eceef2 34%,
    #c6cad1 46%, #a3aab5 62%, #c6cad1 80%, #a3aab5 100%);
  --gold-sheen-btn: linear-gradient(100deg,
    #c08a28 0%, #c9972f 14%, #f3dc8c 24%, #fff6dd 30%, #f3dc8c 36%,
    #d9ab42 48%, #c38d2a 62%, #c9972f 80%, #c08a28 100%);
  /* Das Ticket selbst ist aus Gold, nur der helle Teil des Verlaufs,
     damit die dunkle Schrift darauf überall lesbar bleibt. */
  --gold-sheet: linear-gradient(135deg,
    #c9972f 0%, #e2bd5c 26%, #f3dc8c 48%, #dfb24a 72%, #c48f2a 100%);

  --display: "Satoshi", system-ui, sans-serif;
  --body: "Satoshi", system-ui, sans-serif;
  --mono: "Satoshi", system-ui, sans-serif;

  --radius: 14px;
  color-scheme: dark;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}

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

/* Platz für den klebenden Header bei Sprüngen und Fokus */
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

a, button { -webkit-tap-highlight-color: transparent; }

html { background: var(--night); }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Blaues und rotes Licht, stark transparent: der Grund bleibt schwarz und
   wird nur an einzelnen Stellen etwas heller. Die Ebene läuft mit der
   Seite mit, so liegt jedes Licht an einer anderen Stelle des Abends. */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(620px 520px at 6% 2%, rgba(47, 91, 255, .17), transparent 70%),
    radial-gradient(560px 480px at 98% 14%, rgba(255, 45, 69, .12), transparent 70%),
    radial-gradient(640px 560px at 0% 42%, rgba(255, 45, 69, .10), transparent 70%),
    radial-gradient(680px 600px at 100% 66%, rgba(47, 91, 255, .14), transparent 70%),
    radial-gradient(620px 420px at 40% 100%, rgba(255, 45, 69, .10), transparent 70%);
}

/* Leichtes Filmkorn, wie ein abfotografiertes Flyer-Plakat */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Header ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
  padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2));
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.top-mark {
  font: 900 1.375rem/1 var(--display);
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.top-mark b { font-weight: 900; }

.top-cta {
  font: 700 .8125rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .2s, color .2s;
}
.top-cta:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Seitenraster ---------- */

main {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: 72px; }
section + section { border-top: 1px solid var(--line); }

.eyebrow {
  margin: 0 0 16px;
  font: 700 .8125rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fog);
}

h2 {
  margin: 0 0 36px;
  font: 900 clamp(2.25rem, 7vw, 4rem)/.95 var(--display);
  text-transform: uppercase;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* ---------- Gold und Weiß mit Übergang ----------
   background-clip: text nur auf Elementen, die selbst den Text tragen und
   keine Kindelemente haben, sonst entsteht Geisterschrift. Unter etwa 24px
   keinen Verlauf, dort flach (Regel aus dem Tempus-Flow-Markenblatt). */
.gold-text,
.silber-text {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.gold-text {
  background-image: var(--gold-sheen);
  background-size: 230% 100%;
  background-position: 150% 0;
  animation: sheen 7s ease-in-out infinite;
}
.silber-text { background-image: var(--silber-sheen); }
.silber-live {
  background-image: var(--silber-sheen-wide);
  background-size: 230% 100%;
  background-position: 150% 0;
  animation: sheen 7s ease-in-out infinite;
}

/* Der Glanz wandert langsam über das Gold, bewusst weich */
@keyframes sheen {
  0%, 12% { background-position: 150% 0; }
  58%, 100% { background-position: -50% 0; }
}

/* ---------- Hero ---------- */

.hero { padding-block: 48px 72px; }

/* Partyvideo als Hintergrund: hängt direkt an der Seite (nicht an main),
   damit es ohne 100vw die volle Breite füllt und keine Scrollleiste
   auslöst. Oben liegt es unter dem durchscheinenden Header, unten läuft
   es nach einer Bildschirmhöhe weich ins Schwarz. */
.hero-media {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  max-height: 1000px;
  overflow: hidden;
  pointer-events: none;
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}
/* Kein Abspiel-Symbol von iOS, falls Autoplay blockiert ist */
.hero-media video::-webkit-media-controls,
.hero-media video::-webkit-media-controls-start-playback-button,
.hero-media video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .05) 60%, rgba(0, 0, 0, .25) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .2) 35%, rgba(0, 0, 0, .7) 70%, #000 100%);
}
/* Schmal liegt der Fließtext schon in der Bildschirmmitte: dort früher abdunkeln */
@media (max-width: 899px) {
  .hero-media::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 30%, rgba(0, 0, 0, .72) 46%, rgba(0, 0, 0, .88) 70%, #000 100%);
  }
}

.hero-title {
  margin: 0 0 40px;
  font: 900 clamp(4rem, 20.5vw, 12rem)/.86 var(--display);
  text-transform: uppercase;
  letter-spacing: -.045em;
}

.hero-title .line {
  display: block;
  overflow: hidden;
  padding-block: .03em .05em;
}
.hero-title .line > span {
  display: inline-block;
  padding-right: .04em;
  animation: rise .9s cubic-bezier(.2, .8, .2, 1) both;
}
/* Der Glanz läuft von links nach rechts durch den ganzen Titel: erst
   TWENTY, dann TWO, darunter Ben, x, Jonas leicht versetzt hinterher. */
.hero-title .line > .silber-live {
  animation: rise .9s cubic-bezier(.2, .8, .2, 1) both, sheen 7s ease-in-out 1s infinite;
}
.hero-title .line > .gold-text {
  animation: rise .9s cubic-bezier(.2, .8, .2, 1) .08s both, sheen 7s ease-in-out 1.9s infinite;
}
.hero-title .line--hosts .gold-text:first-child { animation-delay: 1.3s; }
.hero-title .line--hosts .x { animation-delay: 1.7s; }
.hero-title .line--hosts .gold-text:last-child { animation-delay: 1.9s; }
.hero-title .line:nth-child(2) > span { animation-delay: .08s; }
.hero-title .line:nth-child(3) > span { animation-delay: .16s; }

/* Wie auf einem Plakat: die Gastgeber als kleinere Zeile unter dem Partynamen */
.hero-title .line--hosts {
  margin-top: .22em;
  font-size: .34em;
  line-height: 1;
  letter-spacing: -.02em;
}
.hero-title .x {
  background-image: var(--silber-sheen-wide);
  background-size: 230% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 7s ease-in-out infinite;
  text-transform: lowercase;
  font-weight: 500;
}

/* Breit genug: der Partyname in einer Zeile, damit die Einladung im Bild bleibt */
@media (min-width: 900px) {
  .hero-title {
    display: flex;
    flex-wrap: wrap;
    font-size: clamp(7rem, 12vw, 11rem);
  }
  .hero-title .line:nth-child(3) { flex-basis: 100%; }
}


@keyframes rise {
  from { transform: translateY(105%); }
  to { transform: none; }
}

.hero-body {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .hero-body { grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: end; }
}

.invite p { margin: 0 0 16px; max-width: 34em; color: var(--fog); }
.invite .invite-close { color: var(--text); font-weight: 700; }
.invite .invite-lead {
  font: 900 1.625rem/1.25 var(--body);
  letter-spacing: -.02em;
  color: var(--text);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  background-image: var(--gold-sheen-btn);
  background-size: 230% 100%;
  background-position: 60% 0;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 248, 228, .35);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7);
  font: 700 1rem/1 var(--body);
  text-decoration: none;
  transition: background-position .65s cubic-bezier(.22, 1, .36, 1), transform .25s cubic-bezier(.22, 1, .36, 1);
  touch-action: manipulation;
}
/* Glanz wandert einmal durch, der Knopf wächst an Ort und Stelle */
@media (hover: hover) {
  .btn:hover { background-position: 0% 0; transform: scale(1.03); }
}
.btn:active { transform: scale(.99); }

.facts { margin: 0; display: grid; }
.facts div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 12px;
  padding-block: 16px;
  border-top: 1px solid var(--line);
}
.facts div:last-child { border-bottom: 1px solid var(--line); }
.facts dt {
  font: 700 .8125rem/1.6 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fog);
}
.facts dd { margin: 0; font-weight: 500; }
.facts .maps {
  text-decoration: underline;
  text-decoration-color: rgba(227, 179, 65, .5);
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
.facts .maps:hover { color: var(--gold); text-decoration-color: var(--gold); }
.facts small { display: block; color: var(--fog); font-size: .9375rem; }

/* ---------- Ticketshop ---------- */

.shop-grid {
  display: grid;
  gap: 40px;
}
@media (min-width: 960px) {
  .shop-grid { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; }
  .ticket { position: sticky; top: 96px; }
}

/* Das Ticket: Papier, Perforation, Abriss beim Bezahlen */
.ticket {
  --notch: 13px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .6));
}

.ticket-main,
.ticket-stub {
  position: relative;
  background: var(--gold-sheet);
}

.ticket-main {
  padding: 24px 24px 22px;
  border-radius: var(--radius) var(--radius) 0 0;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) top left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) top right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) top left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) top right / 51% 100% no-repeat;
}

.ticket-stub {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 22px 24px 24px;
  border-radius: 0 0 var(--radius) var(--radius);
  background-image: linear-gradient(90deg, var(--ink-soft) 50%, transparent 0), var(--gold-sheet);
  background-size: 10px 1.5px, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: 0 0, 0 0;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top right / 51% 100% no-repeat;
  transform-origin: 0 0;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.ticket-head {
  display: flex;
  justify-content: space-between;
  font: 700 .75rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
}

.ticket-title {
  margin: 18px 0 4px;
  font: 900 clamp(2rem, 8vw, 3rem)/.95 var(--display);
  text-transform: uppercase;
  letter-spacing: -.04em;
}

.ticket-guest {
  margin: 0 0 22px;
  min-height: 1.5em;
  font: 500 1.125rem/1.4 var(--mono);
  overflow-wrap: anywhere;
}
.ticket-guest.is-empty { color: var(--ink-soft); }

.ticket-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding-top: 14px;
  border-top: 1.5px solid var(--ink);
}
.ticket-meta dt {
  font: 700 .6875rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
}
.ticket-meta dd { margin: 0; font: 700 .875rem/1.35 var(--mono); overflow-wrap: anywhere; }

.stub-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  font: 700 .75rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink);
}
.stub-required {
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

/* Das Namensfeld auf der Karte: gleiche Maße wie jedes Feld der Seite,
   aber dunkel eingelassen, damit es auf dem Gold lesbar bleibt. */
.ticket input[type="text"] {
  background: rgba(20, 13, 2, .88);
  border-color: rgba(20, 13, 2, .9);
  color: #fff6dd;
}
.ticket input[type="text"]::placeholder { color: #b9ab8c; }
.ticket input[type="text"]:hover { border-color: var(--ink); }
.ticket input[type="text"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.ticket input[aria-invalid="true"] { outline: 2px solid #7a1408; outline-offset: 2px; }

.stub-hint,
.stub-error {
  margin: 0;
  font: 500 .8125rem/1.35 var(--body);
  color: var(--ink-soft);
}
.stub-error { font-weight: 700; color: #7a1408; }

.barcode { width: 100%; max-width: 220px; height: 40px; display: block; margin-top: 8px; }
.barcode rect { fill: var(--ink); }
.stub-admit {
  grid-column: 1 / -1;
  font: 700 .6875rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink-soft);
}

/* Kippt nach unten weg, nie über die Seitenkante hinaus */
.ticket.is-torn .ticket-stub { transform: translateY(18px) rotate(3deg); }

@media (min-width: 560px) {
  .ticket { flex-direction: row; }
  .ticket-main {
    flex: 1;
    min-width: 0;
    padding: 28px;
    border-radius: var(--radius) 0 0 var(--radius);
    -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  }
  .ticket-stub {
    width: 240px;
    flex-shrink: 0;
    align-content: center;
    gap: 8px;
    padding: 28px 22px;
    border-radius: 0 var(--radius) var(--radius) 0;
    background-image: linear-gradient(180deg, var(--ink-soft) 50%, transparent 0), var(--gold-sheet);
    background-size: 1.5px 10px, 100% 100%;
    background-repeat: repeat-y, no-repeat;
    -webkit-mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle var(--notch) at 0 0, #0000 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  }
  .ticket.is-torn .ticket-stub { transform: translateY(16px) rotate(2.5deg); }
}

/* Kaufbereich */
.buy {
  display: grid;
  gap: 20px;
}

.product {
  display: grid;
  gap: 16px;
  padding: 20px;
  background: var(--smoke);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.product-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.product p { margin: 0; }

/* Was in den 20 Euro steckt */
.included {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
}
.included li {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: baseline;
  gap: 10px;
}
.included li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-2px);
}

/* Frist: deutlich, aber ohne Alarmfarbe */
.deadline {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid rgba(227, 179, 65, .45);
  border-radius: var(--radius);
  background: rgba(227, 179, 65, .07);
  color: var(--fog);
  font-size: .9375rem;
}
.deadline strong { display: block; margin-bottom: 4px; color: var(--gold); font-size: 1rem; }
.product-name { font-weight: 700; font-size: 1.125rem; }
.product-note { color: var(--fog); font-size: .9375rem; }
.product-price {
  font: 900 1.75rem/1.1 var(--display);
  letter-spacing: -.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: var(--smoke);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 500 1.0625rem/1.3 var(--body);
  transition: border-color .2s;
}
input[type="text"]::placeholder,
input[type="password"]::placeholder { color: #8d929c; }
input[type="text"]:hover,
input[type="password"]:hover { border-color: rgba(255, 255, 255, .22); }
input[type="text"]:focus-visible,
input[type="password"]:focus-visible { outline: 1px solid var(--gold); outline-offset: 0; border-color: var(--gold); border-radius: var(--radius); }
input[aria-invalid="true"] { border-color: #ff7a6b; }

.btn--pay { width: 100%; margin-top: 0; min-height: 58px; font-size: 1.0625rem; }

.status { margin: -6px 0 0; min-height: 1.5em; color: var(--gold); font-size: .9375rem; }

.steps-title {
  margin: 12px 0 0;
  font: 700 .8125rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fog);
}
/* Party-Guide: Dresscode als eigener Block über den Zusage-Schritten */
.guide-item {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--smoke);
}
.guide-item p { margin: 0; }
.guide-label {
  margin: 4px 0 0;
  font: 700 .75rem/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fog);
}
.guide-item .guide-label { margin: 0 0 2px; }
.guide-value { font-weight: 700; font-size: 1.125rem; }
.guide-note { color: var(--fog); font-size: .9375rem; }

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 14px;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 10px;
  color: var(--fog);
  font-size: .9375rem;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  font: 700 .8125rem/1 var(--mono);
  color: var(--gold);
}

/* ---------- Footer ---------- */

.bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 32px 40px;
  padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2));
  border-top: 1px solid var(--line);
  color: var(--fog);
  font-size: .9375rem;
}
.bottom p { margin: 0; }
/* Im Footer ist die Schrift zu klein für den Verlauf: Gold flach */
.bottom-hosts { font-weight: 700; color: var(--text); white-space: nowrap; }
.bottom-hosts .gold-text { background: none; color: var(--gold); animation: none; }
.bottom-meta { font: 700 .75rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}