<!-- 
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%@@**@@*+=+*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@+=---:=+=-.   ...:=@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*=-. ...  :--::::--=+%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*=:.       ..:..  .:=-:+@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*+=-.               .-:=-=@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@+==-::..     .     .:...:-*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%@%**###%%%#*+*%%%%%#*=:. .:=@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#-=*@#**#%%@@@@@@@@@@@@@#-..:*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%--+%@#***#%%%%%%@@@@@@@@%*-.:#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%=++%@****##%%@%%%@@@@@@@%#=::#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*+*@@+==--=*#@@%%@@@@@@@%#=--@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%*++++*++*%%#+===*%@@@%==*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#*********#@@%+=+#@%#%%=*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*=*@@@@#####****%@@@@%%@%%%@#*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%=+@@@#********#@@@@@@@@@@@@*%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%*@@@******+==+#*%@@@@@@@@%#%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*%@@#*********%%%@@@@@@@%@*%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#******#%%@@@@@@@@@%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#***++=---==**#@@@@%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#*****+++*#%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#*#***##%%@@@%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@###****#%@@@@%%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%***++===+**####%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%*****++++**#%%%%%@@#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%******#%%%%%%%%%%@@- -@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%*****+*####%%%%#@@@    :%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*+#********###%%#%@@@+       =***%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#==*****+*###**#@@@@@:           .:-==+*#%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%***%@@@@@@@@@@@@@***++#@@@@@@@                     .:-=#%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%*=:.-.=%@@@@@%*+*++*#*++#@@@@@@@@.                            ..=@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%#+:.      -#@@@@@%*****#@#%@@@@@@@@%                                 .@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%#*+=.          :#@@@@@%++***#@@@@@@@@@@*                                   .@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*=-:.             :+@@@#@%++++*%@@@@@@@@@=                                     +@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@:                      *@#++++*#@-:.=%@@#-                                     =@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@:                       #+=+++*#@@@@@@@@*                                       %@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#.                      #%+++++*%@%%*=-                                           #@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*                       =#*+--=+-. .-=*%@                                          @@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*                       ..:#@@@@@@@@@@@*                                           %@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*                       @@@@@@@*--:                                               -@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*                          *@@@#=**#%@@-                                           :@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*                       %%@@@@@%##+=-:                                               @@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@=                       :--@@@@=    .:                                               =@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%:                        :-@@@@%@@@@@#                                                *@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%.                       #@@@%@@.                                                         -%@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%.                          =-*##%%%@@-          *#=::.                                     :@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@:                       =@@@**==:..             ==#@%%#%##%%%+                               :@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@:                           =#:.:-==:           **+=++*****###*                                 -%@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-                        *%@*#+%#*+-           .=-=+*#######*##*.                                 .%@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@=                           -#                   :=-+*******####*:                                  @@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@+                        -+#=#+@@@@%              -=+**##########*.                                 @@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@+                        .:::%                    :=-:=++++**#####+                                 @@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-                         .:-%-**+*-                =+*#######%%%%*                                 @@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@=                        :#%=@:-::                        :=+*##%%*-                                %@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-                          .-%.....                         .=*###+-                                .@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#   -.  .           .::.  :+#=%+##*+                             .                                    #@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#.-: =:     :#@@@%#*+=--:    .#                                            :%-#%                      #@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#+.    .#@@@@%%#*+==-:    .-:*+**+-                                         .:                      +@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*     +#***+--===-=--:    -=:*                                                                    =@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#    =-. -%#=---::--=-.     .+..:.                                                             -%@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@.  -    :+==-=====-::     =-+--:                                          #@@@%#+==++*#%@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@% =      :=-:-::----:   :: .+                                             +@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%        .-----::..       .=-=-                                          :@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#..=    .--::-=-.    :==.=                                             .%@@@@@@@@@@@@@@@@@@@@@@@@@@@@
%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%+       ..            =                                              #@@@@@@@@@@@@@@@@@@@@@@@@@@%@
%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%=                   =                                              +@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%%#*+-::            -                                              -@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%%#%@@%*:            =                                               %@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%##%@@%+        :::: -                                               *@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%##%@@#-        :--- -                                               -@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@%%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%###@%+:        :--- -.                                               +@@@@@@@@@@@@@@@@@@@@@@@@@%
###%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%####%#--        ::--- :.                                               :@@@@@@@@@@@@@@@@@@@@@@@@@% -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Das Event des Jahres</title>
<link rel="icon" type="image/x-icon" href="./assets/burger-solid-full.svg">

<style>
/* ibm-plex-mono-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');
}

/* bebas-neue-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/bebas-neue-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/playfair-display-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  src: url('./assets/fonts/playfair-display-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  src: url('./assets/fonts/playfair-display-v40-latin-900.woff2') format('woff2'); Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+
}


  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #0a0a0a;
    --fg: #f0ece0;
    --accent: #c8a84b;
    --dim: #555;
    --red: #c0392b;
  }

  html { background: var(--bg); color: var(--fg); font-family: 'IBM Plex Mono', monospace; }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
  }

  /* ── HERO ── */
  .hero {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    position: relative;
  }

  .scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0,0,0,0.07) 3px,
      rgba(0,0,0,0.07) 4px
    );
    z-index: 1000;
  }

  .label-top {
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 3rem;
    border: 1px solid var(--dim);
    padding: 0.4rem 1.2rem;
    position: relative;
  }
  .label-top::before { content: '▶'; margin-right: 0.6em; color: var(--accent); }

  .main-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(2.8rem, 8vw, 7rem);
    line-height: 1.0;
    text-align: center;
    max-width: 900px;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
  }

  .main-title em {
    font-style: italic;
    color: var(--accent);
    display: block;
  }

  .subtitle-line {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1rem, 3vw, 1.8rem);
    letter-spacing: 0.25em;
    color: var(--dim);
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 3.5rem;
  }

  /* ── COUNTDOWN ── */
  .countdown-wrap {
    display: flex;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: flex-start;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }

  .cd-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.5rem, 10vw, 8rem);
    line-height: 1;
    color: var(--fg);
    min-width: 2ch;
    text-align: center;
    position: relative;
  }

  /* .cd-num.blink { animation: blink 1s step-end infinite; }
  @keyframes blink { 50% { opacity: 0.4; } } */

  .cd-label {
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--dim);
  }

  .cd-sep {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.5rem, 10vw, 8rem);
    line-height: 1;
    color: var(--dim);
    padding-top: 0;
    align-self: flex-start;
    opacity: 0.4;
  }

  /* ── DATE BADGE ── */
  .date-badge {
    border: 1px solid var(--accent);
    padding: 0.7rem 2rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--accent);
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
  }
  .date-badge::before, .date-badge::after {
    content: '✦';
    margin: 0 0.8rem;
    font-style: normal;
  }

  /* ── DIVIDER ── */
  .divider {
    width: 100%;
    max-width: 900px;
    border: none;
    border-top: 1px solid #222;
    margin: 0 auto 6rem;
  }

  /* ── FACTS SECTION ── */
  .section {
    width: 100%;
    max-width: 900px;
    padding: 0 2rem 8rem;
  }

  .section-label {
    font-size: 0.65rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #222;
  }

  .fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2px;
  }

  .fact-card {
    background: #111;
    padding: 2rem;
    position: relative;
  }
  .fact-card::before {
    content: attr(data-num);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem;
    color: #1a1a1a;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    line-height: 1;
    pointer-events: none;
  }

  .fact-card h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.05rem;
    margin-bottom: 0.7rem;
    color: var(--accent);
  }
  .fact-card p {
    font-size: 0.78rem;
    line-height: 1.75;
    color: #888;
  }

  /* ── QUOTE ── */
  .quote-wrap {
    border-left: 2px solid var(--accent);
    padding: 1.5rem 0 1.5rem 2.5rem;
    margin: 5rem 0;
  }
  .quote-text {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    line-height: 1.55;
    margin-bottom: 1rem;
  }
  .quote-attr {
    font-size: 0.65rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--dim);
  }

  /* ── WARNING ── */
  .warning-box {
    border: 1px solid var(--red);
    padding: 2rem;
    margin-top: 4rem;
    position: relative;
  }
  .warning-box .warn-label {
    font-size: 0.6rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--red);
    position: absolute;
    top: -0.5em;
    left: 1rem;
    background: var(--bg);
    padding: 0 0.5rem;
  }
  .warning-box p {
    font-size: 0.75rem;
    line-height: 1.8;
    color: #888;
  }
  .warning-box strong {
    color: var(--fg);
    font-weight: 400;
  }

  /* ── PROGRAM ── */
  .program-list {
    list-style: none;
    border-top: 1px solid #222;
  }
  .program-list li {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid #1a1a1a;
    font-size: 0.8rem;
  }
  .prog-time { color: var(--dim); }
  .prog-name { color: var(--fg); font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.95rem; }
  .prog-status {
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .prog-status.tbd { color: var(--dim); }

  /* ── HERO RING ── */
  .hero-ring {
    width: clamp(120px, 25vw, 200px);
    height: clamp(120px, 25vw, 200px);
    border: 1px solid #222;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
    position: relative;
    flex-shrink: 0;
  }
  .hero-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    opacity: 0.3;
  }
  .hero-ring-inner {
    width: 150px;
    line-height: 1;
    text-align: center;
  }

  /* ── FOOTER ── */
  footer {
    width: 100%;
    max-width: 900px;
    padding: 2rem;
    text-align: center;
    border-top: 1px solid #1a1a1a;
    margin-top: auto;
  }
  footer p {
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #333;
  }
  footer em { font-style: italic; color: #444; }

  /* ── REVEAL ANIMATION ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero > * {
    opacity: 0;
    animation: fadeUp 0.8s ease forwards;
  }
  .hero > *:nth-child(1) { animation-delay: 0.1s; }
  .hero > *:nth-child(2) { animation-delay: 0.3s; }
  .hero > *:nth-child(3) { animation-delay: 0.5s; }
  .hero > *:nth-child(4) { animation-delay: 0.7s; }
  .hero > *:nth-child(5) { animation-delay: 0.9s; }
  .hero > *:nth-child(6) { animation-delay: 1.0s; }
</style>
</head>
<body>
<div class="scanlines"></div>

<!-- HERO -->
<section class="hero">
  <div class="label-top">Ein kulinarisches Ereignis · September 2026</div>

  <div class="hero-ring">
    <img class="hero-ring-inner" src="./assets/dosen-burger.png"/>
  </div>

  <h1 class="main-title">
    Das Große<br>
    <em>Öffnen</em>
  </h1>

  <p class="subtitle-line">Der Dosen-Hamburger · Jahrgang 2018</p>

  <div class="countdown-wrap" id="countdown">
    <div class="cd-unit"><span class="cd-num" id="cd-d">--</span><span class="cd-label">Tage</span></div>
    <div class="cd-sep">:</div>
    <div class="cd-unit"><span class="cd-num" id="cd-h">--</span><span class="cd-label">Stunden</span></div>
    <div class="cd-sep">:</div>
    <div class="cd-unit"><span class="cd-num" id="cd-m">--</span><span class="cd-label">Minuten</span></div>
    <div class="cd-sep">:</div>
    <div class="cd-unit"><span class="cd-num blink" id="cd-s">--</span><span class="cd-label">Sekunden</span></div>
  </div>

  <div class="date-badge">September 2026 · Ort wird noch bekanntgegeben</div>
</section>

<hr class="divider">

<!-- FAKTEN -->
<section class="section">
  <p class="section-label">Über das Produkt</p>

  <div class="fact-grid">
    <div class="fact-card" data-num="01">
      <h3>Die Herkunft</h3>
      <p>Ein handelsüblicher Dosen-Hamburger — gefertigt für die Ewigkeit. Eingelegt. Konserviert. Geduldig wartend. Seit 2018.</p>
    </div>
    <div class="fact-card" data-num="02">
      <h3>Die Reifung</h3>
      <p>Über zwölf Monate im dunklen Regal gereift. Fernab von Sonnenlicht. Nah an der Vernunftsgrenze. Bereit für seinen großen Auftritt.</p>
    </div>
    <div class="fact-card" data-num="03">
      <h3>Das MHD</h3>
      <p>September 2026. Kein Zufall. Kein Drama. Nur eine Zahl auf einem Deckel — und ein Mensch mit einem Plan.</p>
    </div>
    <div class="fact-card" data-num="04">
      <h3>Der Pionier</h3>
      <p>Ein Kollege. Ein Mensch voller Visionen. Sein Name wird in den Annalen des Büros verewigt — zumindest für ein paar Wochen.</p>
    </div>
  </div>

  <div class="quote-wrap">
    <p class="quote-text">„Wenn nicht jetzt, wann dann? Das Ablaufdatum ist kein Ende. Es ist eine Einladung."</p>
    <p class="quote-attr">— Der Protagonist, vermutlich</p>
  </div>
</section>

<!-- ABLAUFPLAN -->
<section class="section" style="padding-bottom: 4rem;">
  <p class="section-label">Ablaufplan des Abends</p>

  <ul class="program-list">
    <li>
      <span class="prog-time">TBD</span>
      <span class="prog-name">Einlass & Sammeln der Zeugen</span>
      <span class="prog-status">Confirmed</span>
    </li>
    <li>
      <span class="prog-time">TBD + 5min</span>
      <span class="prog-name">Feierliche Präsentation der Dose</span>
      <span class="prog-status">Confirmed</span>
    </li>
    <li>
      <span class="prog-time">TBD + 12min</span>
      <span class="prog-name">Das Öffnen — live & unverstellt</span>
      <span class="prog-status">Confirmed</span>
    </li>
    <li>
      <span class="prog-time">TBD + 13min</span>
      <span class="prog-name">Erster visueller Kontakt mit dem Inhalt</span>
      <span class="prog-status tbd">TBD</span>
    </li>
    <li>
      <span class="prog-time">TBD + 15min</span>
      <span class="prog-name">Das Verkosten — sofern die Lage es zulässt</span>
      <span class="prog-status tbd">TBD</span>
    </li>
    <li>
      <span class="prog-time">TBD + irgendwann</span>
      <span class="prog-name">Gemeinsames Reflektieren über Entscheidungen im Leben</span>
      <span class="prog-status">Confirmed</span>
    </li>
  </ul>

  <div class="warning-box">
    <span class="warn-label">Medizinischer Hinweis</span>
    <p>
      Wir weisen darauf hin, dass <strong>das Verzehren eines abgelaufenen Dosenprodukts</strong> möglicherweise <strong>keine optimale Ernährungsstrategie</strong> darstellt. 
      Die Veranstalter übernehmen keinerlei Haftung für gastrointestinale Ereignisse, philosophische Krisen oder 
      <strong>plötzlich auftretende Lebensüberprüfungen</strong>. Wir empfehlen, einen Beutel dabei zu haben.
    </p>
  </div>
</section>

<!-- FOOTER -->
<footer>
  <p>© Das Große Öffnen · September 2026<br><em>Eine Veranstaltung mit zweifelhafter kulinarischer Grundlage</em></p>
</footer>

<script>
  const target = new Date('2026-09-01T18:00:00');

  function pad(n) { return String(n).padStart(2, '0'); }

  function tick() {
    const now = new Date();
    const diff = target - now;

    if (diff <= 0) {
      document.getElementById('cd-d').textContent = '00';
      document.getElementById('cd-h').textContent = '00';
      document.getElementById('cd-m').textContent = '00';
      document.getElementById('cd-s').textContent = '00';
      return;
    }

    const d = Math.floor(diff / 86400000);
    const h = Math.floor((diff % 86400000) / 3600000);
    const m = Math.floor((diff % 3600000) / 60000);
    const s = Math.floor((diff % 60000) / 1000);

    document.getElementById('cd-d').textContent = pad(d);
    document.getElementById('cd-h').textContent = pad(h);
    document.getElementById('cd-m').textContent = pad(m);
    document.getElementById('cd-s').textContent = pad(s);
  }

  tick();
  setInterval(tick, 1000);
</script>
</body>
</html>