/* Phase 26: Sperrseite (Countdown / Nicht verfuegbar). Alle Selektoren tragen das Praefix .sperrseite. */

.sperrseite {
  position: relative;
  min-height: 100vh;
  max-width: none;
  margin: 0;
  padding: 28px 16px 190px;
  box-sizing: border-box;
}

.sperrseite-karte {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #DBEAFE;
  border-radius: 12px;
  padding: 36px 24px 40px;
  text-align: center;
  color: #111827;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.sperrseite-logo {
  display: block;
  max-height: 132px;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto 18px;
}

.sperrseite-verein {
  font: 400 clamp(1.7rem, 6vw, 2.4rem)/1.05 var(--schrift-headline);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1a4a7a;
  margin: 0 0 18px;
}

.sperrseite-anlass {
  font: 700 .85rem var(--schrift-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6B7280;
  margin: 0 0 10px;
}

.sperrseite-zaehler {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 3vw, 22px);
  margin: 0 0 14px;
}

.sperrseite-einheit {
  min-width: 64px;
}

.sperrseite-zahl {
  font: 400 clamp(3rem, 14vw, 5.2rem)/1 var(--schrift-headline);
  color: #1a4a7a;
  font-variant-numeric: tabular-nums;
}

.sperrseite-label {
  font: 700 .72rem var(--schrift-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6B7280;
}

.sperrseite-trenner {
  font: 400 clamp(3rem, 14vw, 5.2rem)/1 var(--schrift-headline);
  color: #6BAADF;
}

.sperrseite-zieltermin {
  font-size: .95rem;
  color: #111827;
  margin: 0 0 18px;
}

.sperrseite-hinweis {
  font-size: .8rem;
  color: #6B7280;
  max-width: 46ch;
  margin: 0 auto;
  white-space: pre-line;
}

.sperrseite-nicht {
  font: 400 clamp(1.8rem, 6vw, 2.6rem)/1.1 var(--schrift-headline);
  text-transform: uppercase;
  color: #1a4a7a;
  margin: 6px 0 10px;
  letter-spacing: .03em;
}

.sperrseite-nicht-text {
  max-width: 44ch;
  margin: 0 auto;
  font-size: 1rem;
}

.sperrseite-test-knopf {
  position: absolute;
  right: 8px;
  bottom: 6px;
  background: none;
  border: 0;
  padding: 6px 8px;
  font: 500 11px var(--schrift-text);
  color: #6B7280;
  opacity: .4;
  cursor: pointer;
  border-radius: 4px;
}

.sperrseite-test-knopf:hover,
.sperrseite-test-knopf:focus-visible {
  opacity: 1;
  outline: 2px solid #2577c8;
}

.sperrseite-pw {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 18px;
  flex-wrap: wrap;
}

.sperrseite-pw input {
  font: 400 14px var(--schrift-text);
  padding: 8px 10px;
  border: 1px solid #94A3B8;
  border-radius: 6px;
  min-width: 0;
  flex: 1 1 160px;
  max-width: 220px;
}

.sperrseite-pw button {
  font: 700 13px var(--schrift-text);
  background: #2577c8;
  color: #FFFFFF;
  border: 0;
  padding: 9px 14px;
  border-radius: 6px;
  cursor: pointer;
}

.sperrseite-fehler {
  flex-basis: 100%;
  text-align: right;
  color: #DC2626;
  font-size: .8rem;
}

@media (prefers-reduced-motion: reduce) {
  .sperrseite-test-knopf {
    transition: none;
  }
}