Kino-Countdown-404

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <title>404 · Seite nicht gefunden</title>
    <style>
      body { margin: 0; background: #000; }
      .n4-cinema {
        --accent: #ef4444;
        --k: 1;
        position: fixed;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        container-type: size;
        display: grid;
        place-items: center;
        background: #000;
        color: #f5f5f7;
        font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
        -webkit-font-smoothing: antialiased;
        text-align: center;
        line-height: 1.4;
      }
      
      .n4-cinema *,.n4-cinema *::before,.n4-cinema *::after {
        box-sizing: border-box;
      }
      
      .n4-cinema .n4-copy {
        position: relative;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.6cqmin;
        width: 100%;
        max-width: 680px;
        padding: 0 6cqw;
      }
      
      .n4-cinema .n4-title {
        margin: 0;
        font-size: clamp(17px,4.2cqmin,36px);
        font-weight: 600;
        letter-spacing: -.02em;
        line-height: 1.15;
        text-wrap: balance;
      }
      
      .n4-cinema .n4-sub {
        margin: 0;
        max-width: 34em;
        font-size: clamp(13px,2.4cqmin,18px);
        color: #a1a1a6;
        text-wrap: balance;
      }
      
      .n4-cinema .n4-tag {
        font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--accent);
      }
      
      .n4-cinema .n4-cta {
        margin-top: 1.8cqmin;
        display: inline-flex;
        align-items: center;
        gap: .5em;
        padding: .85em 1.5em;
        border-radius: 999px;
        background: #f5f5f7;
        color: #000;
        font-size: clamp(13px,2.2cqmin,16px);
        font-weight: 600;
        text-decoration: none;
        transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
      }
      
      .n4-cinema .n4-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px -10px var(--accent);
      }
      
      .n4-cinema .n4-cta:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      
      .n4-cinema .n4-stars,.n4-cinema .n4-stars2 {
        position: absolute;
        inset: -4%;
        pointer-events: none;
      }
      
      .n4-cinema .n4-stars {
        background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
        opacity: .75;
        animation: n4-cinema-tw calc(5s / var(--k)) ease-in-out infinite alternate;
      }
      
      .n4-cinema .n4-stars2 {
        background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
        opacity: .55;
        animation: n4-cinema-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
      }
      
      .n4-cinema [data-depth] {
        transition: transform .9s cubic-bezier(.2,.7,.2,1);
      }
      
      @keyframes n4-cinema-tw {
        from {
          opacity: .3;
        }
      }
      
      @keyframes n4-cinema-spin {
        to {
          transform: rotate(1turn);
        }
      }
      
      @keyframes n4-cinema-fade {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
      }
      
      @media (prefers-reduced-motion:reduce) {
        .n4-cinema *,.n4-cinema *::before,.n4-cinema *::after {
          animation: none!important;
          transition: none!important;
        }
      }
      
      .n4-cinema {
        background: radial-gradient(70% 50% at 50% 28%,#3b0d12,#0c0405 75%);
        color: #fff5f5;
      }
      
      .n4-cinema .n4-hall {
        position: relative;
        width: min(84cqmin,600px);
        aspect-ratio: 16/9;
        margin-bottom: 1cqmin;
        overflow: hidden;
        border-radius: 1cqmin;
      }
      
      .n4-cinema .n4-screen {
        position: absolute;
        left: 12%;
        right: 12%;
        top: 8%;
        height: 66%;
        display: grid;
        place-items: center;
        overflow: hidden;
        background: radial-gradient(circle,#d6d3d1,#78716c);
        box-shadow: 0 0 4cqmin rgba(255,255,255,.25);
        filter: sepia(.5);
      }
      
      .n4-cinema .n4-sweep {
        position: absolute;
        width: 80%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: conic-gradient(rgba(0,0,0,.35) var(--a,0deg),transparent 0);
        animation: n4-cinema-sweep calc(1s / var(--k)) linear infinite;
      }
      
      .n4-cinema .n4-cross {
        position: absolute;
        inset: 0;
        background: linear-gradient(#1c1917,#1c1917) center/100% 1.5px no-repeat,linear-gradient(#1c1917,#1c1917) center/1.5px 100% no-repeat,radial-gradient(circle,transparent 27%,#1c1917 27.5% 28.5%,transparent 29% 35%,#1c1917 35.5% 36.5%,transparent 37%);
      }
      
      .n4-cinema .n4-n {
        position: absolute;
        font: 800 clamp(30px,13cqmin,96px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        color: #1c1917;
        opacity: 0;
        animation: n4-cinema-count calc(4s / var(--k)) linear infinite;
        animation-delay: calc(var(--i) * 1s / var(--k));
      }
      
      .n4-cinema .n4-end {
        color: var(--accent);
        font-size: clamp(26px,10cqmin,76px);
      }
      
      .n4-cinema .n4-curtain {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 52%;
        background: repeating-linear-gradient(90deg,#7f1d1d 0 3%,#b91c1c 5%,#7f1d1d 8%),#7f1d1d;
        box-shadow: inset 0 -3cqmin 3cqmin rgba(0,0,0,.5);
      }
      
      .n4-cinema .n4-cl {
        left: 0;
        transform-origin: 0 0;
        animation: n4-cinema-openl calc(1.6s / var(--k)) .3s cubic-bezier(.6,0,.3,1) forwards;
      }
      
      .n4-cinema .n4-cr {
        right: 0;
        transform-origin: 100% 0;
        animation: n4-cinema-openr calc(1.6s / var(--k)) .3s cubic-bezier(.6,0,.3,1) forwards;
      }
      
      .n4-cinema .n4-seats {
        position: absolute;
        left: -2%;
        right: -2%;
        bottom: -4%;
        height: 22%;
        background: radial-gradient(circle at 50% 100%,#000 55%,transparent 57%) 0 0/6.4% 100%,radial-gradient(circle at 50% 100%,#120607 55%,transparent 57%) 3.2% 40%/6.4% 100%;
      }
      
      .n4-cinema .n4-title {
        font-size: clamp(20px,5cqmin,42px);
        font-weight: 700;
        letter-spacing: -.02em;
      }
      
      .n4-cinema .n4-sub {
        color: #d6b4b4;
      }
      
      .n4-cinema .n4-cta {
        background: var(--accent);
        color: #fff;
      }
      
      @property --a {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
      }
      
      @keyframes n4-cinema-sweep {
        to {
          --a: 360deg;
        }
      }
      
      @keyframes n4-cinema-count {
        0%,24.9% {
          opacity: 1;
        }
        25%,100% {
          opacity: 0;
        }
      }
      
      @keyframes n4-cinema-openl {
        to {
          transform: scaleX(.2);
        }
      }
      
      @keyframes n4-cinema-openr {
        to {
          transform: scaleX(.2);
        }
      }
      
      @media (prefers-reduced-motion:reduce) {
        .n4-cinema .n4-curtain {
          display: none;
        }
        .n4-cinema .n4-end {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <main class="n4-cinema">
      <div class="n4-copy">
        <div class="n4-hall" aria-hidden="true">
          <div class="n4-screen"><i class="n4-sweep"></i><i class="n4-cross"></i><b class="n4-n" style="--i:0">3</b><b class="n4-n" style="--i:1">2</b><b class="n4-n" style="--i:2">1</b><b class="n4-n n4-end" style="--i:3">404</b></div>
          <i class="n4-curtain n4-cl"></i><i class="n4-curtain n4-cr"></i>
          <i class="n4-seats"></i>
        </div>
        <span class="n4-tag">Saal 4, Reihe 04</span>
        <h1 class="n4-title">Diese Vorstellung läuft nicht.</h1>
        <p class="n4-sub">Der gesuchte Film läuft in diesem Saal nicht mehr. Schau ins Programm, was heute läuft.</p>
        <a class="n4-cta" href="/">Programm ansehen</a>
      </div>
    </main>
  </body>
</html>