/* ============================================================
   Kochzwerg Max – eigene Styles
   (aus index.html ausgelagert für mehr Übersichtlichkeit)
   ============================================================ */

/* Nunito – selbst gehostet, KEIN Google-Fonts-Aufruf (DSGVO-konform).
   Die .woff2-Dateien liegen im Ordner  fonts/  (siehe Anleitung). */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/nunito-900.woff2') format('woff2');
}

        html { -webkit-text-size-adjust: 100%; }
        body { font-family: 'Nunito', sans-serif; background-color: #f3f4f6; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
        button, a, [onclick], img { touch-action: manipulation; -webkit-user-drag: none; }
        .app-container { max-width: 480px; margin: 0 auto; background: white; min-height: 100vh; position: relative; overflow-x: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.05); }

        .fade-in-nav { animation: fadeInNav 0.4s ease-out forwards; }
        @keyframes fadeInNav { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

        ::-webkit-scrollbar { width: 0px; background: transparent; display: none; }
        * { -ms-overflow-style: none; scrollbar-width: none; }
        .no-scrollbar::-webkit-scrollbar { display: none; }

        body.no-scroll { overflow: hidden; position: fixed; width: 100%; height: 100%; overscroll-behavior: none; }

        .pulse-play { animation: pulsePlay 2s infinite; }
        @keyframes pulsePlay {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
        }
        .speaking-glow { animation: speakGlow 1.2s infinite; }
        @keyframes speakGlow {
            0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.5); }
            50% { box-shadow: 0 0 0 10px rgba(59,130,246,0); }
        }

        .timer-fly-animation { position: absolute; z-index: 9999; animation: flyToTopRight 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
        @keyframes flyToTopRight {
            0% { top: calc(100% - 100px); left: 50%; transform: translateX(-50%) scale(1); opacity: 1; }
            20% { top: calc(100% - 120px); left: 50%; transform: translateX(-50%) scale(1.1); opacity: 1; }
            100% { top: 20px; left: calc(100% - 80px); transform: translateX(-50%) scale(0.2); opacity: 0; }
        }

/* Scroll-Hinweis im Kochmodus: Finger wischt langsam nach oben (ruhig, mit Pause) */
.finger-swipe { animation: fingerSwipe 3s ease-in-out infinite; }
@keyframes fingerSwipe {
    0%        { transform: translateY(9px);  opacity: 0; }
    20%       { opacity: 0.9; }
    64%       { transform: translateY(-9px); opacity: 0.9; }
    88%, 100% { transform: translateY(-9px); opacity: 0; }
}

/* ---------- Wasserzeichen-Beschnitt (Konzept 08) ----------
   Die Gemini-Prompts halten rechts ~15% der Bildbreite frei (dort landet
   das Gemini-Wasserzeichen unten rechts). Diese Klasse schneidet den
   Streifen aus der Anzeige: das Medium ist 117% statt 100% breit und wird
   nach links gerückt (object-position: left) - der rechte Rand (inkl.
   Wasserzeichen) liegt dann außerhalb des sichtbaren Rahmens. Der
   Eltern-Container braucht "overflow:hidden" + "position:relative"
   (bei allen Einsatzstellen bereits vorhanden). Gilt für Intro-Bilder,
   Schritt-Bilder UND Videos (eine Klasse, überall wiederverwendet). */
.kz-crop {
    width: 117%;
    max-width: 117%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

/* ---------- Video-Text-Overlay (Konzept 08) ----------
   Unten links auf Schritt-Videos, nur solange das Vorschaubild zu sehen ist
   (blendet beim Abspielen mit dem Play-Button zusammen aus). Wunsch Matthias
   2026-07-13: Variante C aus 4 gezeigten Vorschlägen gewählt - OHNE
   Hintergrund-Pille, direkt auf dem Video wie im "Bubble-Letter"-Stil, den
   Gemini teils direkt in ältere Videos einbrennt (Referenz:
   schinken-wuerfeln.mp4): kräftige Kontur statt Hintergrundfläche, dazu
   größere Schrift und Zeilenumbruch bei längerem Text (statt Abschneiden
   mit "…") - siehe auch videoBoxHtml() in app.js (Klasse "truncate" entfernt).
   WICHTIG: das ist NICHT dieselbe Schriftart wie im Referenzbild - eine
   1:1-Übernahme würde eine neue, selbst gehostete Font-Datei brauchen
   (DSGVO: keine Google-Fonts-CDN-Einbindung erlaubt), die in dieser Sandbox
   nicht heruntergeladen werden konnte (kein Zugriff auf fonts.gstatic.com).
   Genutzt wird die bereits im Projekt vorhandene Nunito Black. Falls
   Matthias die exakte Schrift als .woff2 nachliefert, ist der Umbau
   schnell nachgezogen. */
.kz-video-overlay {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #fdf6e3;
    -webkit-text-stroke: 1.2px #4a3418;
    paint-order: stroke fill;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}

/* ---------- Fertig-Seite: Konfetti im Jubel-Kopf ---------- */
@keyframes kz-confetti-fall {
    0%   { transform: translateY(-12px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(200px) rotate(340deg); opacity: 0; }
}
.kz-confetti {
    position: absolute;
    top: -12px;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    pointer-events: none;
    animation: kz-confetti-fall 2.6s linear infinite;
}