Verwaltungs-Code-Seite: verspieltes Logo-Design für VanVans tägliche Code-Eingabe

Auf ausdrücklichen Wunsch NUR diese eine Zugangsseite (öffentliche Startseite und die
eingeloggte Verwaltung selbst bleiben unangetastet): zwei groß und gegenläufig rotierende,
warm golden bzw. violett eingefärbte Van's-Logo-Wasserzeichen im gesamten Fensterhintergrund,
plus das echte Logo als sich drehendes "Siegel" im Kästchen mit pulsierendem Glanz-Kreis und
drei zeitversetzt aufblitzenden Funkel-Emojis. Ziel: die tägliche Pflicht-Eingabe soll Freude
machen statt trockene Sicherheitsabfrage zu sein. Alle Animationen respektieren weiterhin
prefers-reduced-motion. Reine Design-Änderung, Formular-/Auth-Logik unverändert.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

public/verwaltung-code.html

@@ -49,6 +49,45 @@
     font-family: "Inter", "Manrope", system-ui, sans-serif;
     line-height: 1.6;
   }
+
+  /* Auf ausdrücklichen Wunsch VIEL verspielter als die normale Zugangsseite (gate.html): gleich
+     ZWEI große, farbig eingefärbte Van's-Logo-Wasserzeichen im gesamten Fensterhintergrund, die
+     gegenläufig und unterschiedlich schnell rotieren ("wie zwei sich drehende Zahnräder/Münzen")
+     — invert()+mix-blend-mode:screen lässt wie bei gate.html nur die (jetzt weißen) Linien des
+     Logos leuchten, sepia()+saturate()+hue-rotate() färbt diese Linien danach warm-golden bzw.
+     violett ein, statt neutral-weiß zu bleiben. Soll beim täglichen Code-Eingeben Freude machen,
+     nicht nur eine trockene Sicherheitsabfrage sein. */
+  .vw-logo-bg-1, .vw-logo-bg-2 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background: url("/logo.png") center / contain no-repeat;
+    mix-blend-mode: screen;
+    pointer-events: none;
+  }
+  .vw-logo-bg-1 {
+    width: min(1500px, 220vw);
+    height: min(1500px, 220vw);
+    filter: invert(1) sepia(1) saturate(6) hue-rotate(358deg) brightness(1.35);
+    opacity: 0.14;
+    animation: vw-bg-spin-1 100s linear infinite;
+  }
+  .vw-logo-bg-2 {
+    width: min(950px, 150vw);
+    height: min(950px, 150vw);
+    filter: invert(1) sepia(1) saturate(7) hue-rotate(233deg) brightness(1.15);
+    opacity: 0.12;
+    animation: vw-bg-spin-2 70s linear infinite;
+  }
+  @keyframes vw-bg-spin-1 {
+    from { transform: translate(-50%, -50%) rotate(0deg); }
+    to { transform: translate(-50%, -50%) rotate(360deg); }
+  }
+  @keyframes vw-bg-spin-2 {
+    from { transform: translate(-50%, -50%) rotate(360deg); }
+    to { transform: translate(-50%, -50%) rotate(0deg); }
+  }
+
   .gate-box {
     position: relative;
     max-width: 430px;
@@ -68,8 +107,74 @@
     0%, 100% { background-position: 0 0, 0% 50%; }
     50% { background-position: 0 0, 100% 50%; }
   }
-  @media (prefers-reduced-motion: reduce) { .gate-box { animation: none; } }
   .gate-box > * { position: relative; z-index: 1; }
+
+  /* Das eigentliche Logo IM Kästchen: dreht sich wie eine Münze/ein Siegel (passt gut, weil der
+     Schriftzug ohnehim rund um den Kreis herum angeordnet ist), dahinter ein weich pulsierender
+     Glanz-Kreis, drumherum drei zeitversetzt aufblitzende Funkel-Emojis. */
+  .vw-logo-wrap {
+    position: relative;
+    width: 92px;
+    height: 92px;
+    margin: 0 auto 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .vw-logo-glow {
+    position: absolute;
+    inset: -14px;
+    border-radius: 50%;
+    background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 65%, transparent), transparent 72%);
+    filter: blur(9px);
+    opacity: 0.7;
+    animation: vw-glow-pulse 3.2s ease-in-out infinite;
+  }
+  @keyframes vw-glow-pulse {
+    0%, 100% { opacity: 0.55; transform: scale(1); }
+    50% { opacity: 0.95; transform: scale(1.18); }
+  }
+  .vw-logo-wrap img {
+    position: relative;
+    width: 84px;
+    height: 84px;
+    border-radius: 50%;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 45%, transparent), 0 10px 26px -10px rgba(0, 0, 0, 0.7);
+    animation: vw-logo-spin 16s linear infinite;
+  }
+  @keyframes vw-logo-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+  .vw-sparkle {
+    position: absolute;
+    font-size: 1.05rem;
+    opacity: 0.85;
+    line-height: 1;
+    animation: vw-twinkle 2.6s ease-in-out infinite;
+  }
+  .vw-sparkle-1 { top: -8px; right: -12px; animation-delay: 0s; }
+  .vw-sparkle-2 { bottom: -6px; left: -16px; font-size: 0.92rem; animation-delay: 0.85s; }
+  .vw-sparkle-3 { top: 12%; left: -20px; font-size: 0.8rem; animation-delay: 1.7s; }
+  @keyframes vw-twinkle {
+    0%, 100% { opacity: 0; transform: scale(0.55) rotate(0deg); }
+    50% { opacity: 1; transform: scale(1.2) rotate(14deg); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .gate-box,
+    .vw-logo-bg-1, .vw-logo-bg-2,
+    .vw-logo-glow, .vw-logo-wrap img, .vw-sparkle {
+      animation: none !important;
+    }
+  }
+
+  .vw-welcome {
+    margin: 0 0 0.3rem !important;
+    color: var(--c-accent) !important;
+    font-weight: 700;
+    font-size: 0.98rem !important;
+  }
   .gate-eyebrow {
     display: inline-block;
     font-size: 0.78rem;
@@ -138,15 +243,25 @@
 </style>
 </head>
 <body>
+<div class="vw-logo-bg-1" aria-hidden="true"></div>
+<div class="vw-logo-bg-2" aria-hidden="true"></div>
 <div class="gate-box">
+  <div class="vw-logo-wrap" aria-hidden="true">
+    <span class="vw-logo-glow"></span>
+    <img src="/logo.png" alt="" />
+    <span class="vw-sparkle vw-sparkle-1">✨</span>
+    <span class="vw-sparkle vw-sparkle-2">💛</span>
+    <span class="vw-sparkle vw-sparkle-3">🧶</span>
+  </div>
   <span class="gate-eyebrow">🔒 Zusätzlicher Code</span>
   <h1>Bestellverwaltung</h1>
+  <p class="vw-welcome">🌟 Schön, dass du da bist!</p>
   <p>Diese Seite ist zusätzlich mit einem eigenen, festen Code geschützt, den nur ihr beide
      kennt. Der Code bleibt immer gleich — ihr müsst ihn aber einmal pro Tag neu eingeben.</p>
   <form id="vw-form">
     <label class="sr-only" for="vw-code">Verwaltungs-Code</label>
     <input type="text" id="vw-code" placeholder="Verwaltungs-Code" autocomplete="off" autocapitalize="off" spellcheck="false" autofocus />
-    <button type="submit">Weiter</button>
+    <button type="submit">✨ Los geht's</button>
   </form>
   <p class="gate-fehler" id="vw-fehler" role="alert" aria-live="assertive"></p>
   <p class="gate-zurueck"><a href="/">← Zurück zur Startseite</a></p>