Unzustellbarer Brief 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-mail {
        --accent: #d62828;
        --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-mail *,.n4-mail *::before,.n4-mail *::after {
        box-sizing: border-box;
      }
      
      .n4-mail .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-mail .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-mail .n4-sub {
        margin: 0;
        max-width: 34em;
        font-size: clamp(13px,2.4cqmin,18px);
        color: #a1a1a6;
        text-wrap: balance;
      }
      
      .n4-mail .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-mail .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-mail .n4-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px -10px var(--accent);
      }
      
      .n4-mail .n4-cta:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      
      .n4-mail .n4-stars,.n4-mail .n4-stars2 {
        position: absolute;
        inset: -4%;
        pointer-events: none;
      }
      
      .n4-mail .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-mail-tw calc(5s / var(--k)) ease-in-out infinite alternate;
      }
      
      .n4-mail .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-mail-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
      }
      
      .n4-mail [data-depth] {
        transition: transform .9s cubic-bezier(.2,.7,.2,1);
      }
      
      @keyframes n4-mail-tw {
        from {
          opacity: .3;
        }
      }
      
      @keyframes n4-mail-spin {
        to {
          transform: rotate(1turn);
        }
      }
      
      @keyframes n4-mail-fade {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
      }
      
      @media (prefers-reduced-motion:reduce) {
        .n4-mail *,.n4-mail *::before,.n4-mail *::after {
          animation: none!important;
          transition: none!important;
        }
      }
      
      .n4-mail {
        background: radial-gradient(70% 60% at 50% 30%,#fbf5ea,#e9d8bc 75%);
        color: #2b2118;
      }
      
      .n4-mail .n4-env {
        position: relative;
        display: block;
        width: 30em;
        height: 19em;
        font-size: min(1.9cqmin,13px);
        margin: 3em 0 1.8cqmin;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        cursor: pointer;
        perspective: 60em;
        transition: transform .3s cubic-bezier(.3,1.4,.5,1);
        animation: n4-mail-nudge calc(4s / var(--k)) ease-in-out 1.6s infinite;
      }
      
      .n4-mail .n4-env:hover {
        transform: translateY(-.3em) rotate(-1deg);
      }
      
      .n4-mail .n4-env:active {
        transform: scale(.98);
      }
      
      .n4-mail .n4-env:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: .5em;
        border-radius: .4em;
      }
      
      .n4-mail .n4-env[aria-expanded="true"] {
        animation: none;
      }
      
      .n4-mail .n4-back,.n4-mail .n4-front,.n4-mail .n4-flap {
        position: absolute;
        inset: 0;
        border-radius: .4em;
      }
      
      .n4-mail .n4-back {
        background: #b8925f;
        box-shadow: 0 1.4em 2em -1em rgba(60,40,15,.5);
      }
      
      .n4-mail .n4-env .n4-letter {
        position: absolute;
        z-index: 1;
        left: 1.4em;
        right: 1.4em;
        top: .9em;
        bottom: .8em;
        display: grid;
        align-content: start;
        gap: .5em;
        padding: 1.1em 1.3em;
        text-align: left;
        background: repeating-linear-gradient(#fffdf6 0 1.6em,#e9e2d0 1.6em calc(1.6em + 1px)),#fffdf6;
        color: #2b2118;
        font: 400 1.1em/1.45 "Segoe Print","Bradley Hand","Chalkboard SE","Comic Sans MS",cursive;
        box-shadow: 0 .2em .4em rgba(0,0,0,.15);
        transition: transform calc(.6s / var(--k)) cubic-bezier(.3,1.2,.5,1);
      }
      
      .n4-mail .n4-letter b {
        font-weight: 700;
      }
      
      .n4-mail .n4-letter em {
        justify-self: end;
        font-style: normal;
      }
      
      .n4-mail .n4-env[aria-expanded="true"] .n4-letter {
        transform: translateY(-62%);
        transition-delay: calc(.35s / var(--k));
      }
      
      .n4-mail .n4-front {
        z-index: 2;
        background: linear-gradient(160deg,#e4c899,#d3ae79);
        clip-path: polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);
        border: .5em solid transparent;
        border-image: repeating-linear-gradient(-45deg,#d62828 0 .9em,#fdfaf3 .9em 1.8em,#1d4e89 1.8em 2.7em,#fdfaf3 2.7em 3.6em) 12;
      }
      
      .n4-mail .n4-flap {
        z-index: 3;
        transform-origin: 50% 0;
        clip-path: polygon(0 0,100% 0,50% 58%);
        background: linear-gradient(#dcbd8f,#c9a676);
        transition: transform calc(.5s / var(--k)) cubic-bezier(.5,0,.3,1),z-index 0s calc(.25s / var(--k));
      }
      
      .n4-mail .n4-env[aria-expanded="true"] .n4-flap {
        transform: rotateX(180deg);
        z-index: 0;
      }
      
      .n4-mail .n4-seal {
        position: absolute;
        z-index: 4;
        left: 50%;
        top: 58%;
        display: grid;
        place-items: center;
        width: 3.6em;
        height: 3.6em;
        translate: -50% -50%;
        border-radius: 46% 54% 50% 50%/52% 48% 52% 48%;
        background: radial-gradient(circle at 38% 32%,#e05a5a,#a4161a 60%,#7a0f12);
        box-shadow: 0 .15em .3em rgba(0,0,0,.35),inset 0 0 0 .4em rgba(0,0,0,.12);
        color: rgba(255,215,215,.85);
        font: 800 .85em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        transition: transform .3s,opacity .3s;
      }
      
      .n4-mail .n4-env[aria-expanded="true"] .n4-seal {
        transform: scale(.3) rotate(40deg);
        opacity: 0;
      }
      
      .n4-mail .n4-stamp {
        position: absolute;
        z-index: 4;
        left: 5%;
        bottom: 24%;
        padding: .4em .7em;
        border: .24em double #c1121f;
        border-radius: .3em;
        color: #c1121f;
        font: 800 .85em/1.1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
        letter-spacing: .08em;
        text-transform: uppercase;
        rotate: -9deg;
        opacity: .85;
        mix-blend-mode: multiply;
        animation: n4-mail-thump calc(.5s / var(--k)) cubic-bezier(.3,1.6,.5,1) .5s both;
      }
      
      .n4-mail .n4-lbl {
        position: absolute;
        z-index: 4;
        right: 6%;
        bottom: 9%;
        padding: .45em .6em;
        background: #ffe066;
        color: #3d2c00;
        font: 700 .8em/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        rotate: 3deg;
        box-shadow: 0 .1em .2em rgba(0,0,0,.2);
      }
      
      .n4-mail .n4-tag {
        color: var(--accent);
      }
      
      .n4-mail .n4-title {
        font-size: clamp(20px,5cqmin,42px);
        font-weight: 700;
        letter-spacing: -.025em;
      }
      
      .n4-mail .n4-sub {
        color: #6b5a48;
      }
      
      .n4-mail .n4-cta {
        background: var(--accent);
        color: #fff;
      }
      
      @keyframes n4-mail-nudge {
        0%,88%,100% {
          rotate: 0deg;
        }
        91% {
          rotate: -2deg;
        }
        94% {
          rotate: 2deg;
        }
        97% {
          rotate: -1deg;
        }
      }
      
      @keyframes n4-mail-thump {
        from {
          transform: scale(2.4);
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <main class="n4-mail">
      <div class="n4-copy">
        <button class="n4-env" type="button" aria-expanded="false" aria-label="Umschlag öffnen">
          <span class="n4-back" aria-hidden="true"></span>
          <span class="n4-letter" aria-hidden="true"><b>Liebe Leserin, lieber Leser,</b><span>Wir sind die ganze Straße abgelaufen, und hier wohnt keine Seite 404.</span><em>Der Briefträger</em></span>
          <span class="n4-front" aria-hidden="true"></span>
          <span class="n4-flap" aria-hidden="true"></span>
          <span class="n4-seal" aria-hidden="true" translate="no">404</span>
          <span class="n4-stamp" aria-hidden="true">Zurück an den Absender</span>
          <span class="n4-lbl" aria-hidden="true">Empfänger unbekannt</span>
        </button>
        <span class="n4-tag">Einschreiben</span>
        <h1 class="n4-title">Diese Adresse gibt es nicht.</h1>
        <p class="n4-sub">Der Briefträger hat zweimal geklingelt, aber bei Seite 404 macht niemand auf. Prüf die Adresse oder geh zur Startseite.</p>
        <a class="n4-cta" href="/">Zur Startseite</a>
      </div>
    </main>
    <script>
      document.querySelectorAll(".n4-mail").forEach((el) => {
        const env = el.querySelector(".n4-env");
        env.addEventListener("click", () => env.setAttribute("aria-expanded", String(env.getAttribute("aria-expanded") !== "true")));
      });
    </script>
  </body>
</html>