:root {
  --ink: #0b0d13;
  --panel: #12151e;
  --panel-soft: #171b26;
  --panel-raised: #1c202c;
  --gold: #c9a34d;
  --gold-light: #e4c878;
  --cream: #f5f1e6;
  --muted: rgba(245, 241, 230, .58);
  --faint: rgba(245, 241, 230, .36);
  --line: rgba(255, 255, 255, .09);
  --success: #77c994;
  --danger: #ee9a87;
  --shadow: 0 22px 55px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: Manrope, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body.modalOpen { overflow: hidden; }

button,
input,
select,
textarea { font: inherit; }

button,
select { cursor: pointer; }

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

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(228, 200, 120, .45);
  outline-offset: 3px;
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand { display: flex; justify-content: center; }

.brand img {
  display: block;
  width: min(100%, 330px);
  height: auto;
}

.brand.compact { justify-content: flex-start; }

.brand.compact img { width: 180px; }

.eyebrow,
.categoryHeading > span,
.summaryHeading > span {
  margin: 0;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.primaryButton,
.secondaryButton,
.voteButton {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 800;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.primaryButton {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.primaryButton:hover:not(:disabled) {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.secondaryButton {
  border: 1px solid rgba(245, 241, 230, .25);
  background: transparent;
  color: var(--cream);
}

.secondaryButton:hover:not(:disabled) { border-color: var(--gold); }

.primaryButton:disabled,
.secondaryButton:disabled,
.voteButton:disabled {
  cursor: not-allowed;
  opacity: .32;
}

.quietLink {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quietLink:hover { color: var(--gold-light); }

/* Animated gold frame around the main call to action */

.glowFrame {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: 13px;
  background: linear-gradient(90deg, #8a6a1e, var(--gold-light), #8a6a1e);
  background-size: 200% 100%;
  animation: goldSlide 6s linear infinite;
  transition: transform .4s ease;
}

.glowFrame::before {
  position: absolute;
  z-index: -10;
  inset: 0;
  margin: auto;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a6a1e, var(--gold-light), #8a6a1e);
  background-size: 200% 100%;
  content: "";
  filter: blur(.5em);
  opacity: .4;
  animation: goldSlide 6s linear infinite;
  transition: filter .4s ease, opacity .4s ease;
}

.glowFrame:hover::before {
  filter: blur(1.2em);
  opacity: .78;
}

.glowFrame:active::before { filter: blur(.2em); }

.glowFrame:hover { transform: translateY(-2px); }

.glowFrame.block {
  display: flex;
  width: 100%;
  margin-top: 28px;
}

.glowFrame.block > .submitButton { margin-top: 0; }

.glowFrame > .primaryButton {
  width: 100%;
  border: 0;
  background: linear-gradient(180deg, #171b26, #0e1119);
  color: var(--cream);
}

.glowFrame > .primaryButton:hover:not(:disabled) {
  background: linear-gradient(180deg, #1d2230, #121620);
  color: var(--gold-light);
  transform: none;
}

.glowFrame:has(> .primaryButton:disabled) {
  background: rgba(245, 241, 230, .16);
  animation: none;
}

.glowFrame:has(> .primaryButton:disabled)::before { display: none; }

@keyframes goldSlide {
  to { background-position: 200% 0; }
}

/* Light sweeping across the primary buttons on hover */

.primaryButton {
  position: relative;
  overflow: hidden;
}

.primaryButton::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
  content: "";
  transform: translateX(-220%) skewX(-18deg);
  pointer-events: none;
}

.primaryButton:hover:not(:disabled)::after { animation: shineSweep .85s ease; }

@keyframes shineSweep {
  to { transform: translateX(320%) skewX(-18deg); }
}

/* Start */

.startScreen,
.thanksScreen {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 72px 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(201, 163, 77, .1), transparent 34%),
    var(--ink);
}

.startScreen::before,
.thanksScreen::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 46px 46px;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 78%);
  pointer-events: none;
}

/* Falling gold rain, adapted from the classic green matrix pattern.

   The drops themselves are unchanged: a streak centred on the bottom edge of
   its own tile, so only its top half is painted and it keeps its sharp leading
   edge, plus a sparkle offset half a tile away. Every column still carries its
   own tile height, which is what keeps the fall irregular.

   What changed is how it moves. Scrolling background-position repainted all
   thirty-odd gradients across the whole viewport on the main thread every
   single frame. Instead the drops are split over two layers that are
   rasterised once and then only shifted by the compositor, which costs no
   repaints at all. Each tile height divides the 600px travel distance, so the
   loop closes seamlessly, and the two layers fall at different speeds. */

.goldRain {
  position: absolute;
  z-index: 0;
  contain: layout paint;
  overflow: hidden;
  inset: 0;
  opacity: .5;
  mask-image: linear-gradient(to bottom, black, black 52%, transparent 92%);
  pointer-events: none;
}

.goldRainLayer {
  position: absolute;
  top: -600px;
  right: 0;
  bottom: 0;
  left: 0;
  animation: goldRainFall linear infinite;
  will-change: transform;
}

.goldRainLayer:nth-child(1) {
  background-image:
    radial-gradient(4px 100px at 8px 150px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 158px 75px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 57px 200px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 207px 100px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 104px 120px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 254px 60px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 152px 300px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 2px 150px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 199px 100px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 49px 50px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 248px 200px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 98px 100px, rgba(228, 200, 120, .9) 100%, #0000 150%);
  background-size:
    300px 150px, 300px 150px,
    300px 200px, 300px 200px,
    300px 120px, 300px 120px,
    300px 300px, 300px 300px,
    300px 100px, 300px 100px,
    300px 200px, 300px 200px;
  animation-duration: 6s;
}

.goldRainLayer:nth-child(2) {
  background-image:
    radial-gradient(4px 100px at 32px 200px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 182px 100px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 78px 300px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 228px 150px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 128px 150px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 278px 75px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 176px 100px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 26px 50px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 224px 120px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 74px 60px, rgba(228, 200, 120, .9) 100%, #0000 150%),
    radial-gradient(4px 100px at 272px 300px, rgba(201, 163, 77, .5), #0000),
    radial-gradient(1.5px 1.5px at 122px 150px, rgba(228, 200, 120, .9) 100%, #0000 150%);
  background-size:
    300px 200px, 300px 200px,
    300px 300px, 300px 300px,
    300px 150px, 300px 150px,
    300px 100px, 300px 100px,
    300px 120px, 300px 120px,
    300px 300px, 300px 300px;
  animation-duration: 13s;
}

@keyframes goldRainFall {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 600px, 0); }
}

.startContent {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(640px, 100%);
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.startContent .brand { margin-bottom: 28px; }

.startCopy h1 {
  max-width: 620px;
  margin: 10px 0 16px;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.04;
  letter-spacing: -.04em;
}

.startCopy > p:last-child {
  max-width: 560px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 16px;
}

.startMeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 28px 0;
}

.startMeta span {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 12px;
}

.startMeta strong { color: var(--cream); }

.startButton {
  display: flex;
  min-width: 238px;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 16px;
}

.startHint {
  margin: 14px 0 0;
  color: var(--faint);
  font-size: 11px;
}

.loadingCard .brand,
.accessCard .brand { margin-bottom: 28px; }

.accessCard h1 {
  margin: 12px 0;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.05;
}

.accessCard > p:not(.eyebrow) {
  max-width: 520px;
  color: var(--muted);
}

/* Anforderung des persönlichen Links */

.requestForm {
  width: 100%;
  max-width: 420px;
  margin: 28px auto 0;
  text-align: left;
}

.requestForm .field { margin-bottom: 14px; }

.requestForm input {
  width: 100%;
  text-align: left;
}

.requestForm .primaryButton {
  width: 100%;
  min-height: 52px;
}

.requestForm .statusMessage {
  margin: 14px 0 0;
  min-height: 20px;
  font-size: 13px;
  text-align: center;
}

.loadingSpinner {
  width: 34px;
  height: 34px;
  margin-top: 24px;
  border: 3px solid rgba(245, 241, 230, .14);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Voting structure */

.votingScreen {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 268px minmax(0, 1fr);
}

.votingSidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  gap: 28px;
  padding: 28px 18px 98px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: #0d1017;
}

.votingSidebar .brand.compact img { width: 190px; }

.votingSidebar > .quietLink {
  margin-top: auto;
  text-align: left;
}

.mobileVotingHeader { display: none; }

.progressBlock { width: 100%; }

.progressLabel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
}

.progressLabel strong { color: var(--cream); }

.progressTrack {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
}

.progressFill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  background-size: 200% 100%;
  animation: goldSlide 3.2s linear infinite;
  transition: width .25s ease;
}

.categoryNav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.categoryNavItem {
  display: grid;
  min-height: 50px;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  text-align: left;
  font-size: 12px;
  line-height: 1.25;
}

.categoryNavItem:hover { background: rgba(255, 255, 255, .04); }

.categoryNavItem.active {
  background: rgba(201, 163, 77, .12);
  color: var(--cream);
}

.categoryNavItem.done:not(.active) { color: rgba(245, 241, 230, .75); }

.categoryStatus {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(245, 241, 230, .22);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.categoryNavItem.active .categoryStatus,
.categoryNavItem.done .categoryStatus {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.votingContent {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 46px 44px 128px;
}

.categoryHeading { margin-bottom: 30px; }

.categoryHeading h1 {
  margin: 8px 0 8px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.categoryHeading p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.nomineeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

/* Only set by app.js when the category actually changes, so switching
   carousel slides or voting does not replay the entrance. */

.nomineeGrid.enter > .nomineeCard {
  animation: cardEnter .52s cubic-bezier(.23, 1, .32, 1) backwards;
}

.nomineeGrid.enter > .nomineeCard:nth-child(1) { animation-delay: .03s; }
.nomineeGrid.enter > .nomineeCard:nth-child(2) { animation-delay: .1s; }
.nomineeGrid.enter > .nomineeCard:nth-child(3) { animation-delay: .17s; }
.nomineeGrid.enter > .nomineeCard:nth-child(4) { animation-delay: .24s; }
.nomineeGrid.enter > .nomineeCard:nth-child(5) { animation-delay: .31s; }
.nomineeGrid.enter > .nomineeCard:nth-child(6) { animation-delay: .38s; }
.nomineeGrid.enter > .nomineeCard:nth-child(n+7) { animation-delay: .45s; }

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.nomineeCard {
  position: relative;
  min-width: 0;
  border-radius: 16px;
  transition: transform .48s cubic-bezier(.23, 1, .32, 1);
}

.nomineeCardInner {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Two gold "sheets" stacked behind the card; they fan out on hover. */

.nomineeCardInner::before,
.nomineeCardInner::after {
  position: absolute;
  left: 50%;
  border-radius: inherit;
  content: "";
  transform: translateX(-50%);
  transform-origin: bottom;
  transition: all .48s cubic-bezier(.23, 1, .32, 1);
  pointer-events: none;
}

.nomineeCardInner::before {
  z-index: -1;
  top: -2%;
  width: 93%;
  height: 100%;
  background: rgba(201, 163, 77, .26);
}

.nomineeCardInner::after {
  z-index: -2;
  top: -4%;
  width: 86%;
  height: 100%;
  background: rgba(201, 163, 77, .12);
}

@media (hover: hover) {
  .nomineeCard:hover { transform: translateY(-10px); }

  .nomineeCard:hover .nomineeCardInner::before {
    top: 0;
    width: 100%;
    height: 100%;
    rotate: -5deg;
  }

  .nomineeCard:hover .nomineeCardInner::after {
    top: 0;
    width: 100%;
    height: 100%;
    rotate: 5deg;
  }
}

.nomineeCard.selected .nomineeCardInner {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 14px 34px rgba(201, 163, 77, .15);
}

.nomineeHeader {
  display: flex;
  min-height: 24px;
  align-items: center;
  gap: 10px;
}

.nomineeHeader h3 {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--cream);
  font-size: 16px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nomineeNumber {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid rgba(245, 241, 230, .2);
  border-radius: 6px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
}

.selectedLabel {
  flex: 0 0 auto;
  color: var(--gold-light);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.carouselWrap { min-width: 0; }

.carousel {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #080a0f;
  touch-action: pan-y;
}

.carouselSlide {
  width: 100%;
  height: 100%;
}

.storySlide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(26px, 5cqw, 54px);
  overflow-y: auto;
  background:
    linear-gradient(145deg, rgba(201, 163, 77, .08), transparent 45%),
    linear-gradient(145deg, var(--panel-raised), var(--ink));
}

.storySlide > span {
  color: var(--gold);
  font-size: clamp(10px, 2.2cqw, 13px);
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.storySlide p {
  margin: 0;
  color: var(--cream);
  font-weight: 500;
  line-height: 1.38;
  text-wrap: pretty;
}

.storySlide--short p { font-size: clamp(17px, 5.2cqw, 28px); }
.storySlide--medium p { font-size: clamp(15px, 4.25cqw, 23px); }
.storySlide--long {
  gap: 10px;
  padding: clamp(18px, 3.8cqw, 38px);
}
.storySlide--long p { font-size: clamp(12px, 3.4cqw, 18px); line-height: 1.42; }

.imageSlide {
  position: relative;
  display: grid;
  padding: 0;
  place-items: center;
  border: 0;
  background: #07080c;
  color: var(--cream);
  cursor: zoom-in;
}

.imageSlide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zoomHint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 7px;
  background: rgba(0, 0, 0, .68);
  color: rgba(255, 255, 255, .72);
  font-size: 9px;
  font-weight: 700;
  pointer-events: none;
}

.slideButton {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  color: var(--cream);
  font-size: 20px;
}

.slideButton.prev { left: 9px; }
.slideButton.next { right: 9px; }
.slideButton:disabled { opacity: .22; cursor: default; }

.carouselMeta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 26px;
  color: var(--faint);
  font-size: 10px;
}

.dots { display: flex; gap: 5px; }

.dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .19);
}

.dot.active { background: var(--gold); }

.voteButton {
  width: 100%;
  border: 1px solid rgba(245, 241, 230, .25);
  background: transparent;
  color: var(--cream);
  font-size: 13px;
}

.voteButton:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-light);
}

.voteButton.selected {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.votingActionBar {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 268px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px max(24px, calc((100vw - 1420px) / 2));
  border-top: 1px solid var(--line);
  background: rgba(11, 13, 19, .92);
  backdrop-filter: blur(14px);
}

/* Summary and thanks */

.summaryScreen {
  min-height: 100vh;
  padding: 54px 24px;
  background: var(--ink);
}

.summaryShell {
  width: min(720px, 100%);
  margin: 0 auto;
}

.summaryShell > .brand { margin-bottom: 34px; }

.summaryHeading h1 {
  margin: 8px 0 6px;
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.summaryHeading p {
  margin: 0 0 24px;
  color: var(--muted);
}

.summaryList { border-top: 1px solid var(--line); }

.summaryRow {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
}

.summaryNumber {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.summaryRow small {
  display: block;
  margin-bottom: 3px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.summaryRow strong {
  display: block;
  color: var(--cream);
  font-size: 14px;
}

.summaryRow > button {
  border: 0;
  background: transparent;
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 800;
}

.submitButton {
  width: 100%;
  min-height: 56px;
  margin-top: 28px;
  font-size: 15px;
}

.summaryBack {
  display: block;
  margin: 18px auto 0;
}

.thanksCard {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(480px, 100%);
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.thanksCard > .brand { margin-bottom: 34px; }

.thanksCheck {
  display: grid;
  width: 68px;
  height: 68px;
  margin-bottom: 22px;
  place-items: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  font-size: 28px;
  font-weight: 800;
  animation: checkPop .7s cubic-bezier(.23, 1, .32, 1) backwards, checkHalo 2.6s ease-out .6s infinite;
}

@keyframes checkPop {
  0% {
    opacity: 0;
    transform: scale(.4) rotate(-18deg);
  }

  60% {
    opacity: 1;
    transform: scale(1.12) rotate(4deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes checkHalo {
  0% { box-shadow: 0 0 0 0 rgba(201, 163, 77, .45); }
  70% { box-shadow: 0 0 0 24px rgba(201, 163, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 163, 77, 0); }
}

.thanksCard h1 {
  margin: 0 0 8px;
  font-size: 38px;
  letter-spacing: -.035em;
}

.thanksCard p {
  margin: 0 0 28px;
  color: var(--cream);
  font-size: 16px;
}

.thanksCard .secondaryButton { margin-bottom: 14px; }

/* Lightbox */

.lightbox {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  padding: 34px;
  place-items: center;
}

.lightboxBackdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, .86);
  cursor: zoom-out;
}

.lightboxContent {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1200px, 100%);
  height: min(84vh, 900px);
  padding: 22px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.lightboxContent img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightboxClose {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(0, 0, 0, .72);
  color: white;
  font-size: 24px;
}

/* Geschlossenes Voting */

.closedCard {
  width: min(430px, 100%);
  padding: 34px 30px 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: center;
}

.closedCard .brand { margin-bottom: 24px; }
.closedCard .brand img { width: 210px; }

.closedGif {
  display: block;
  width: min(230px, 74%);
  height: auto;
  margin: 4px auto 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.closedCard h1 {
  margin: 0 0 12px;
  font-size: 31px;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.closedCard > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

/* Formulare und Statusmeldungen — von Voting und Admin geteilt */

.field {
  display: block;
  margin-bottom: 16px;
}

.field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 800;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(245, 241, 230, .18);
  border-radius: 8px;
  outline: none;
  background: #0a0c12;
  color: var(--cream);
}

.field textarea { min-height: 130px; resize: vertical; }
.field small { display: block; margin-top: 5px; color: var(--faint); }

.emptyState,
.statusMessage { color: var(--muted); }
.statusMessage.error { color: var(--danger); }
.statusMessage.success { color: var(--success); }

@media (max-width: 1040px) {
  .nomineeGrid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .votingScreen { display: block; }
  .votingSidebar { display: none; }

  .mobileVotingHeader {
    position: sticky;
    z-index: 18;
    top: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 18px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(11, 13, 19, .94);
    backdrop-filter: blur(14px);
  }

  .mobileVotingHeader .brand.compact img { width: 106px; }
  .mobileVotingHeader .progressBlock { min-width: 0; }
  .mobileVotingHeader .progressLabel { margin-bottom: 5px; }

  .mobileCategorySelect { grid-column: 1 / -1; }

  .mobileCategorySelect select {
    width: 100%;
    min-height: 42px;
    padding: 0 38px 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel);
    color: var(--cream);
    font-size: 12px;
    font-weight: 700;
  }

  .votingContent { padding: 25px 16px 116px; }
  .categoryHeading { margin-bottom: 20px; }
  .categoryHeading h1 { font-size: 27px; }
  .nomineeGrid { gap: 16px; }
  .nomineeCard { border-radius: 14px; }
  .nomineeCardInner { padding: 14px; border-radius: 14px; }
  .nomineeHeader h3 { font-size: 14px; }
  .selectedLabel { display: none; }
  .storySlide { padding: clamp(20px, 6cqw, 28px); }
  .storySlide--long { padding: 16px 18px; }

  .votingActionBar {
    left: 0;
    padding: 12px 14px;
  }

  .votingActionBar .secondaryButton { padding: 0 14px; }
  .votingActionBar .primaryButton { flex: 1; padding: 0 14px; font-size: 12px; }

  .summaryScreen { padding: 30px 18px; }
  .summaryShell > .brand { margin-bottom: 26px; }
  .summaryRow { grid-template-columns: 24px 1fr; }
  .summaryRow > button { grid-column: 2; justify-self: start; padding: 0; }
  .lightbox { padding: 12px; }
  .lightboxContent { height: 90vh; padding: 10px; }
}

@media (max-width: 480px) {
  .startScreen { padding: 48px 20px; }
  .startContent .brand { margin-bottom: 20px; }
  .brand img { width: 270px; }
  .startCopy h1 { font-size: 33px; }
  .startCopy > p:last-child { font-size: 14px; }
  .startMeta { margin: 22px 0; }
  .startMeta span { padding: 7px 9px; font-size: 10px; }
  .startButton { width: 100%; }
  .closedCard { padding: 30px 22px; }
  .closedCard h1 { font-size: 27px; }
}

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

  /* Decorative motion only; the loading spinner keeps animating. */

  .goldRainLayer,
  .glowFrame,
  .glowFrame::before,
  .progressFill,
  .thanksCheck,
  .primaryButton::after,
  .nomineeGrid.enter > .nomineeCard {
    animation: none !important;
  }

  .nomineeGrid.enter > .nomineeCard {
    opacity: 1;
    transform: none;
  }

  .thanksCheck { opacity: 1; }
}