/* ===========================================================================
   Jubilaeums-Sperre - Stil
   ---------------------------------------------------------------------------
   Gehoert zu jubilaeum_sperre.js. Bewusst OHNE Tailwind geschrieben, damit
   dieselbe Datei auch auf der Sperrseite und neben styles.css der Galerie
   funktioniert - dort gibt es kein Tailwind.

   SICHTBARKEITSREGEL: Alles Gesperrte ist standardmaessig UNSICHTBAR und wird
   erst durch .jubi-gesperrt am <html> eingeblendet. Faellt das Skript aus,
   sieht der Besucher also die normale, offene Seite - nie eine halbe Sperre.
   =========================================================================== */

:root {
  --jubi-creme:  #FBF7F0;
  --jubi-sand:   #EFE6D9;
  --jubi-wald:   #4A5D4E;
  --jubi-wald-h: #5C7057;
  --jubi-lehm:   #845C3E;
  --jubi-salbei: #A3B18A;
  --jubi-rinde:  #3B352E;
}

/* ---- 1. Countdown ------------------------------------------------------- */

.jubi-countdown {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin: 18px 0;
}
.jubi-cd-feld {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
}
.jubi-cd-label {
  margin-bottom: 2px;
  color: currentColor;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
}
.jubi-cd-zahl {
  font-family: 'Quicksand', 'Nunito', system-ui, sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  /* Ziffern gleich breit - sonst zappelt der Sekundenzeiger. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.jubi-cd-trenner {
  align-self: flex-end;
  padding-bottom: 2px;
  font-family: 'Quicksand', 'Nunito', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  opacity: .38;
}

.jubi-countdown-klein { margin: 8px 0 0; gap: 2px; }
.jubi-countdown-klein .jubi-cd-feld { min-width: 46px; }
.jubi-countdown-klein .jubi-cd-zahl { font-size: 1.35rem; }
.jubi-countdown-klein .jubi-cd-trenner { font-size: 1rem; }
.jubi-countdown-klein .jubi-cd-label { font-size: 9px; }

/* ---- 2. Hero-Pille auf der Startseite ----------------------------------- */

[data-jubi-hero] { display: none; }
.jubi-gesperrt [data-jubi-hero] { display: block; margin: 0 0 34px; }

.jubi-hero-pille {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 30px 16px;
  color: var(--jubi-wald);
  background: var(--jubi-sand);
  border: 2px solid rgba(176, 137, 104, .34);
  border-radius: 26px;
  box-shadow: 0 4px 14px rgba(59, 53, 46, .08);
}
.jubi-hero-text {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

/* ---- 3. Gesperrter Knopf "Meine Geschichte entdecken" -------------------- */

.jubi-knopf-schloss { display: none; }

.jubi-gesperrt .btn-story {
  background-color: #93998f;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .10);
  cursor: not-allowed;
  animation: none;
  opacity: .82;
}
.jubi-gesperrt .btn-story:hover {
  background-color: #93998f;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .10);
  transform: none;
}
.jubi-gesperrt .btn-story svg { display: none; }
.jubi-gesperrt .jubi-knopf-schloss {
  display: inline-flex;
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
}

/* ---- 4. Sperrflaeche ueber der Spiel-Sektion ----------------------------- */

/* ⚠ DER WEICHZEICHNER IST BEZAHLBAR - ABER NUR, WEIL SICH DARUNTER NICHTS MEHR
   BEWEGT. Diese beiden Regeln gehoeren zusammen, eine ohne die andere geht schief.

   Am 15.08.2026 ruckelte das Scrollen ueber diesem Abschnitt spuerbar. Ursache
   war nicht der Weichzeichner allein, sondern die Kombination: die Flaeche ist
   rund 1265x804 = eine Million Pixel gross, und dahinter liefen dauerhaft fuenf
   CSS-Animationen (drei Pfoten, pulse-play, spiel-wiki-idle) sowie der
   requestAnimationFrame-Loop des Flocke-Canvas mit ~60 Bildern je Sekunde.
   Jedes dieser Bilder macht den Untergrund schmutzig und zwingt den Browser,
   die Million Pixel neu zu verwischen - auch im Stillstand, beim Scrollen dann
   zusaetzlich zum Scroll-Compositing.

   Steht der Untergrund still, wird der Weichzeichner einmal berechnet und
   danach nur noch mitgeschoben. Deshalb: Animationen bleiben unten abgeschaltet.
   Wer sie wieder anmacht, holt sich das Ruckeln zurueck.

   Ein flacher Farbschleier statt des Weichzeichners wurde versucht und
   verworfen: er dunkelt nur gleichmaessig ab. Karte (#FBF7F0) und Abschnitt
   (#EFE6D9) unterscheiden sich kaum, der Text ist dunkel - unter einem dunklen
   Schleier wird daraus eine tote Flaeche. Der Weichzeichner dagegen verschmiert
   Ueberschrift, Haekchenliste und Knoepfe zu einem erkennbaren Muster. Genau
   das macht sichtbar, dass da etwas liegt. */
.jubi-spiel-sperre { display: none; }
.jubi-gesperrt .jubi-spiel-sperre {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(53, 68, 55, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.jubi-gesperrt [data-jubi-spiel-inhalt] {
  /* Zusaetzlich zu inert - deckt auch Browser ohne inert-Unterstuetzung ab.
     KEIN opacity hier: das nimmt dem Weichzeichner genau den Kontrast, aus dem
     er sein Muster zieht. */
  pointer-events: none;
  user-select: none;
}

/* Nichts hinter der Sperre muss sich noch bewegen - man sieht es ohnehin kaum,
   es haelt aber den Browser dauerhaft beschaeftigt. Die Pfoten haengen direkt
   an <section id="spiel"> und nicht am Inhaltsblock, darum einzeln genannt.

   ⚠ Hier stehen NUR die dauerhaft laufenden Animationen, jede beim Namen. Ein
   pauschales "[data-jubi-spiel-inhalt] * { animation: none }" sieht kuerzer aus,
   ist aber falsch - und war am 15.08.2026 ein echter Fehler: style_main.css:10
   setzt jedes .reveal-Element auf opacity 0 und macht es erst per Animation
   (fadeInUp, Zeile 11) sichtbar. Der Pauschalstopp traf diese Animation mit, und
   damit blieben Jubilaeums-Abzeichen, Ueberschrift und die GESAMTE Hauptkarte
   unsichtbar (index.html:597, :601, :607 tragen .reveal). Der Weichzeichner
   verwischte danach eine leere Flaeche - heraus kam ein graues Nichts, das wie
   ein Gestaltungsfehler aussah. */
.jubi-gesperrt #spiel .paw-bg-1,
.jubi-gesperrt #spiel .paw-bg-2,
.jubi-gesperrt #spiel .paw-bg-3,
.jubi-gesperrt #spiel .btn-play-game,
.jubi-gesperrt #spiel .spiel-wiki {
  animation: none !important;
}

/* Unter der Sperre soll der Inhalt einfach DA sein - als Sicherheitsnetz, falls
   die Einblendung aus irgendeinem Grund nicht gelaufen ist. !important schlaegt
   im Kaskadenrang jede Animation, die Deckkraft steht also so oder so.

   ⚠ Bewusst OHNE "animation: none": das Wegnehmen und Wiedergeben eines
   Animationsnamens startet die Animation NEU, und fadeInUp beginnt bei
   opacity 0. Beim automatischen Freischalten am 01.10. um 06:00 (ohne
   Neuladen!) haenge die Sichtbarkeit des Abschnitts damit an einem
   Animations-Neustart. Laesst man sie dagegen laufen, ist sie 0,7 s nach dem
   Seitenaufbau fertig und haelt per "forwards" dauerhaft opacity 1
   (style_main.css:4-11) - der Name aendert sich beim Umschalten nie, es kann
   also gar kein Neustart ausgeloest werden. Fuer das Ruckeln ist sie
   bedeutungslos: sie laeuft einmalig, nicht endlos. */
.jubi-gesperrt [data-jubi-spiel-inhalt] .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Der animierte Flocke sitzt oben auf der Karte und wird von einem eigenen
   requestAnimationFrame-Loop gezeichnet (index.html). Ihn auszublenden stoppt
   den Loop von selbst: der IntersectionObserver dort meldet ein Element ohne
   Box als "nicht sichtbar" und ruft stopAnimation(). */
.jubi-gesperrt #flocke-character-wrap { display: none; }

.jubi-spiel-karte {
  width: min(100%, 460px);
  max-height: 100%;
  overflow-y: auto;
  padding: 26px 24px 24px;
  color: var(--jubi-rinde);
  text-align: center;
  background: var(--jubi-creme);
  border: 2px solid rgba(176, 137, 104, .40);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(15, 24, 17, .34);
}
.jubi-spiel-titel {
  margin: 0 0 8px;
  color: var(--jubi-wald);
  font-family: 'Quicksand', 'Nunito', system-ui, sans-serif;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.25;
}
.jubi-spiel-karte .jubi-countdown { color: var(--jubi-wald); }

/* ---- 5. Fenster (Countdown-Info, Code-Eingabe, Linkmenue) ---------------- */

.jubi-fenster-offen { overflow: hidden; }

.jubi-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(33, 45, 36, .74);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: jubiEin 170ms ease-out both;
}

@keyframes jubiEin { from { opacity: 0; } to { opacity: 1; } }

.jubi-fenster {
  position: relative;
  width: min(92vw, 560px);
  max-height: min(88dvh, 720px);
  overflow-y: auto;
  padding: 34px 30px 30px;
  color: var(--jubi-rinde);
  text-align: center;
  background: var(--jubi-creme);
  border: 2px solid rgba(176, 137, 104, .40);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(15, 24, 17, .46);
}
.jubi-fenster-schmal { width: min(92vw, 420px); }

.jubi-schliessen {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #fffaf0;
  background: #c8452f;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 3px 0 #8f2c1d;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}
.jubi-schliessen:hover,
.jubi-schliessen:focus-visible { filter: brightness(1.08); transform: scale(1.05); }
.jubi-schliessen:active { transform: translateY(2px); box-shadow: 0 1px 0 #8f2c1d; }

.jubi-schloss { font-size: 2.6rem; line-height: 1; }
.jubi-schloss-gross { font-size: 3rem; }
.jubi-schloss-offen { font-size: 2.4rem; }

.jubi-titel {
  margin: 10px 0 10px;
  color: var(--jubi-wald);
  font-family: 'Quicksand', 'Nunito', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.22;
}
.jubi-titel-klein { font-size: 1.22rem; }

.jubi-text {
  margin: 0 0 4px;
  color: rgba(59, 53, 46, .88);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}
.jubi-text-klein { font-size: .92rem; }

.jubi-fenster .jubi-countdown { color: var(--jubi-wald); }

.jubi-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 6px;
  padding: 12px 30px;
  color: var(--jubi-creme);
  background: var(--jubi-wald);
  border: 0;
  border-radius: 999px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: .98rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .18s ease, transform .12s ease;
}
.jubi-knopf:hover { background: var(--jubi-wald-h); }
.jubi-knopf:active { transform: scale(.97); }
.jubi-knopf:focus-visible { outline: 3px solid var(--jubi-lehm); outline-offset: 3px; }

.jubi-knopf-still {
  color: var(--jubi-wald);
  background: transparent;
  border: 2px solid rgba(74, 93, 78, .32);
}
.jubi-knopf-still:hover { color: var(--jubi-creme); background: var(--jubi-wald); }

/* ---- 6. Code-Eingabe ---------------------------------------------------- */

.jubi-label {
  display: block;
  margin: 8px 0 6px;
  color: rgba(59, 53, 46, .72);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.jubi-feld {
  width: 100%;
  margin-bottom: 10px;
  padding: 13px 16px;
  color: var(--jubi-rinde);
  background: #fff;
  border: 2px solid rgba(176, 137, 104, .40);
  border-radius: 14px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 1rem;
  text-align: center;
}
.jubi-feld:focus {
  outline: none;
  border-color: var(--jubi-wald);
  box-shadow: 0 0 0 3px rgba(74, 93, 78, .18);
}
.jubi-fehler {
  margin: 0 0 10px;
  color: #b23b26;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 700;
}

@keyframes jubiWackeln {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.jubi-wackeln { animation: jubiWackeln .34s ease; }

/* ---- 7. Linkmenue nach erfolgreicher Eingabe ---------------------------- */

.jubi-menue {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 14px;
}
.jubi-menue-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 18px;
  color: var(--jubi-wald);
  text-align: left;
  text-decoration: none;
  background: var(--jubi-sand);
  border: 2px solid rgba(176, 137, 104, .30);
  border-radius: 16px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  transition: background-color .18s ease, transform .12s ease;
}
.jubi-menue-link:hover {
  background: #e4d7c4;
  transform: translateX(3px);
}
.jubi-menue-link:focus-visible { outline: 3px solid var(--jubi-lehm); outline-offset: 2px; }

/* ---- 8. Hinweisstreifen "Vorschau aktiv" -------------------------------- */

#jubi-vorschau-band {
  position: fixed;
  top: 72px;                 /* unter dem 64px hohen, festen Kopfbereich */
  left: 12px;
  z-index: 60;               /* unter dem Cookie-Banner (100), ueber dem Inhalt */
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 8px 10px 8px 14px;
  color: var(--jubi-creme);
  background: rgba(74, 93, 78, .95);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(15, 24, 17, .28);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
}
.jubi-band-text { white-space: nowrap; }
#jubi-vorschau-band .jubi-band-aus {
  padding: 5px 12px;
  color: var(--jubi-wald);
  background: var(--jubi-creme);
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
#jubi-vorschau-band .jubi-band-aus:hover { background: #fff; }

/* ---- 9. Sperrseite ------------------------------------------------------ */

.jubi-sperrseite {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px;
  background:
    radial-gradient(ellipse at 20% 12%, rgba(163, 177, 138, .30), transparent 55%),
    radial-gradient(ellipse at 82% 86%, rgba(176, 137, 104, .24), transparent 52%),
    var(--jubi-creme);
}
.jubi-sperr-karte {
  width: min(94vw, 540px);
  padding: 40px 32px 34px;
  color: var(--jubi-rinde);
  text-align: center;
  background: var(--jubi-creme);
  border: 2px solid rgba(176, 137, 104, .40);
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(59, 53, 46, .16);
}
.jubi-sperr-karte .jubi-countdown { color: var(--jubi-wald); }
.jubi-sperr-fuss {
  margin: 18px 0 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 12px;
}
.jubi-sperr-fuss a {
  color: rgba(59, 53, 46, .42);
  text-decoration: none;
}
.jubi-sperr-fuss a:hover { color: var(--jubi-wald); text-decoration: underline; }

/* ---- 10. Kleine Bildschirme -------------------------------------------- */

@media (max-width: 600px) {
  .jubi-cd-feld { min-width: 52px; }
  .jubi-cd-zahl { font-size: 1.7rem; }
  .jubi-cd-trenner { font-size: 1.25rem; }
  .jubi-fenster { padding: 30px 20px 24px; border-radius: 22px; }
  .jubi-titel { font-size: 1.28rem; }
  .jubi-spiel-karte { padding: 22px 18px 20px; }
  .jubi-hero-pille { padding: 12px 20px 14px; }
  .jubi-sperr-karte { padding: 32px 20px 26px; }
  #jubi-vorschau-band { font-size: 11px; padding: 7px 8px 7px 12px; }
}

@media (max-width: 380px) {
  .jubi-cd-feld { min-width: 44px; }
  .jubi-cd-zahl { font-size: 1.45rem; }
  .jubi-cd-label { font-size: 8px; letter-spacing: .06em; }
}

/* ---- 11. Barrierefreiheit: Bewegung reduzieren -------------------------- */

@media (prefers-reduced-motion: reduce) {
  .jubi-overlay,
  .jubi-wackeln,
  .jubi-schliessen,
  .jubi-knopf,
  .jubi-menue-link {
    animation: none !important;
    transition: none !important;
  }
  .jubi-menue-link:hover { transform: none; }
}