/* Coming soon "Fall 02" (14.10.2026), oeffentlich unter /bald. Baut auf rangliste.css auf.
   Nur CSS-Animationen, kein Skript (CSP). */
body { background: #0b0b0d; }
  .fz-kopfzeile { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: #ff8c2f; }

  /* Aktendeckel */
  .fz-akte { position: relative; margin: 6px auto 0; width: min(100%, 520px); aspect-ratio: 4 / 3;
             background: linear-gradient(#2a2117, #1d1711); border: 1px solid #4a3a26; border-radius: 4px 14px 4px 4px;
             box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 0 6px rgba(0,0,0,.18); padding: 26px 26px 22px; overflow: hidden; }
  .fz-akte::before { content: ''; position: absolute; top: -1px; left: 26px; width: 130px; height: 22px; background: #2a2117;
                     border: 1px solid #4a3a26; border-bottom: 0; border-radius: 8px 8px 0 0; transform: translateY(-100%); }
  .fz-reiter { font-family: 'Special Elite', monospace; color: #c9b48f; font-size: 13px; letter-spacing: .14em; }
  .fz-titel { font-family: 'Special Elite', monospace; color: #f2e6cf; font-size: clamp(44px, 12vw, 76px); line-height: .95; margin: 18px 0 6px; }
  .fz-unter { font-family: 'Special Elite', monospace; color: #b7a585; font-size: 15px; }
  .fz-stempel { position: absolute; right: 18px; bottom: 26px; transform: rotate(-12deg); border: 3px solid #d64a3a; color: #d64a3a;
                font: 700 15px 'IBM Plex Mono', monospace; letter-spacing: .22em; padding: 8px 12px; border-radius: 4px; opacity: 0;
                animation: stempel .45s cubic-bezier(.2,1.6,.4,1) 1.4s forwards; mix-blend-mode: screen; }
  @keyframes stempel { from { opacity: 0; transform: rotate(-12deg) scale(2.2); } to { opacity: .9; transform: rotate(-12deg) scale(1); } }
  .fz-hase { position: absolute; left: 22px; bottom: 18px; width: 54px; opacity: .55; }

  /* Geschwaerzte Zeilen */
  .fz-akt { border: 1px solid #2c2c31; background: #101012; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
  .fz-zeile { font-family: 'Special Elite', monospace; color: #e6dfd2; font-size: 16px; line-height: 1.7; }
  .fz-schwarz { display: inline-block; background: #e6dfd2; color: transparent; border-radius: 2px; padding: 0 4px; user-select: none;
                animation: frei 1.2s steps(1) forwards; }
  .fz-schwarz.bleibt { animation: none; }
  .fz-schwarz.d1 { animation-delay: 2.2s; } .fz-schwarz.d2 { animation-delay: 3.4s; } .fz-schwarz.d3 { animation-delay: 4.6s; }
  @keyframes frei { 0% { background: #e6dfd2; color: transparent; } 40% { background: #ff8c2f; color: transparent; } 100% { background: transparent; color: #ff8c2f; } }
  .fz-datum { font-family: 'IBM Plex Mono', monospace; color: #8a857c; font-size: 13px; }
  .fz-datum b { background: #e6dfd2; color: transparent; border-radius: 2px; padding: 0 3px; }

  /* Umfrage + Wuensche */
  .fz-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
  .fz-zahl { border: 1px solid #26262a; background: #101012; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
  .fz-zahl b { font-family: 'Special Elite', monospace; font-weight: 400; font-size: 38px; color: #ff8c2f; line-height: 1; }
  .fz-zahl span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #8a857c; }
  .fz-zahl em { font-style: normal; font-size: 12px; color: #b0aca4; line-height: 1.5; }
  .fz-wunsch { border-left: 3px solid #ff8c2f; background: #101012; padding: 10px 14px; color: #e6dfd2; font-size: 14px; line-height: 1.55; }
  .fz-wunsch small { display: block; color: #8a857c; font-size: 11px; margin-top: 4px; letter-spacing: .06em; }
  .fz-funk { border: 1px solid #5a3a12; background: #16110a; color: #f5dcc4; padding: 14px 16px; line-height: 1.6; font-size: 14px; display: flex; gap: 12px; align-items: center; }
  .fz-funk .punkt { width: 9px; height: 9px; border-radius: 50%; background: #ff8c2f; flex: none; animation: puls 1.6s ease-in-out infinite; }
  @keyframes puls { 0%,100% { box-shadow: 0 0 0 0 rgba(255,140,47,.6); } 50% { box-shadow: 0 0 0 8px rgba(255,140,47,0); } }
  .fz-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
  .fz-knopf { font: 600 13px 'IBM Plex Mono', monospace; color: #ff8c2f; border: 1px solid #ff8c2f; padding: 10px 14px; text-decoration: none; }

  @media (prefers-reduced-motion: reduce) { .fz-stempel { animation: none; opacity: .9; } .fz-schwarz { animation: none; background: transparent; color: #ff8c2f; } .fz-funk .punkt, .fz-karte { animation: none; } }
/* Hinweis auf Fall 02 (14.10.2026), pulsiert wie "Weiter". */
.zh-fall02 { display: flex; gap: 14px; align-items: center; border: 1px solid #ff8c2f; background: #16110a; padding: 14px 16px;
             text-decoration: none; animation: fall02puls 1.6s ease-in-out infinite; }
.zh-fall02 b { font-family: 'Special Elite', monospace; color: #f2e6cf; font-size: 20px; font-weight: 400; }
.zh-fall02 span { color: #f5dcc4; font-size: 13px; line-height: 1.4; }
.zh-fall02 i { margin-left: auto; color: #ff8c2f; font-style: normal; font-size: 22px; }
@keyframes fall02puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,140,47,0); } 50% { box-shadow: 0 0 22px 4px rgba(255,140,47,.45); } }
@media (prefers-reduced-motion: reduce) { .zh-fall02 { animation: none; } }

/* Handybreite (14.10.2026): width:min(100%,520px) plus Innenabstand lief bei
   390 px 44 px ueber - Innenabstand in die Breite einrechnen. */
.fz-akte { box-sizing: border-box; }

/* Abschnittsueberschriften gross (Sascha, 14.10.2026: "muessen groesser sein,
   das kann generell immer so sein") und uebersehbare Knoepfe pulsieren. */
.fz-kopfzeile { font-family: 'Special Elite', 'IBM Plex Mono', monospace; font-size: clamp(24px, 6.5vw, 30px);
                letter-spacing: .01em; text-transform: none; color: #f2efe9; line-height: 1.15;
                margin-top: 10px; padding-bottom: 8px; border-bottom: 2px solid #ff8c2f; }
.fz-knopf { animation: knopfpuls 1.6s ease-in-out infinite; }
@keyframes knopfpuls {
  0%, 100% { background: #4a2a0c; color: #ffb36b; box-shadow: 0 0 0 0 rgba(255,140,47,0); }
  50%      { background: #ffb36b; color: #1a1006; box-shadow: 0 0 24px 6px rgba(255,140,47,.7); }
}
@media (prefers-reduced-motion: reduce) { .fz-knopf { animation: none; background: #ff8c2f; color: #1a1006; } }

/* Saschas Akte als Deckel (14.10.2026). Beschriftung, Aktenzeichen und Hase
   sind im Bild; Titel und Stempel liegen auf der freien Flaeche links bzw.
   unten rechts. Der Deckel fuellt das Bild nicht ganz (dunkler Rand). */
.fz-akte { width: min(100%, 640px); aspect-ratio: 1400 / 955; padding: 0; border: 0; border-radius: 6px;
           background: url('/statisch/bilder/akte-fall02.jpg') center / cover no-repeat, #1a120c;
           box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.fz-akte::before { display: none; }
.fz-akte .fz-titel { position: absolute; left: 9%; top: 30%; margin: 0; font-size: clamp(36px, 10vw, 72px);
                     text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.fz-akte .fz-unter { position: absolute; left: 9.5%; top: calc(30% + clamp(40px, 11vw, 80px)); color: #d8c7a3; font-size: clamp(12px, 3.4vw, 16px);
                     text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.fz-akte .fz-stempel { right: 7%; bottom: 13%; font-size: clamp(11px, 2.8vw, 15px); background: rgba(20,8,6,.35); }