/* Kueche: Bausteine nach Techniken aus dqnamo.com/kitchen (angesehen 30.10.2026). Eigener Code, kein fremder Code und keine
   fremden Bilder (die Seite nennt keine Lizenz). Reines CSS + kueche.js, ohne Pakete, laeuft per Doppelklick.
   Farben ueber Variablen; ohne eigene Werte gelten die Marken-Variablen --accent, --fg, --bg (Skill markenstil).
   Bewegung reduzieren: alles aus (ganz unten). Beschreibung je Baustein: effekte-kitchen.md. */

:root {
    --kc-kurve: cubic-bezier(0.23, 1, 0.32, 1);   /* gemessen an den Kitchen-Knoepfen: 150 ms, diese Kurve */
    --kc-feder: cubic-bezier(0.34, 1.45, 0.64, 1);
}

/* 1. Tastbarer Knopf: geformte Flaeche, feste Kante, drueckt sich beim Tippen ein */
.kc-taktil {
    --kc-flaeche: var(--accent, #3EE08F); --kc-kante: color-mix(in srgb, var(--kc-flaeche) 55%, #000); --kc-tiefe: 5px;
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer;
    background-color: var(--kc-flaeche);   /* Grundfarbe: Rueckfall und fuer Kontrast-Pruefer, die Verlaeufe nicht lesen */
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--kc-flaeche) 82%, #fff), var(--kc-flaeche) 55%, color-mix(in srgb, var(--kc-flaeche) 90%, #000));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 var(--kc-tiefe) 0 var(--kc-kante), 0 calc(var(--kc-tiefe) + 4px) 16px rgba(0, 0, 0, 0.35);
    transform: translateY(0); transition: transform 150ms var(--kc-kurve), box-shadow 150ms var(--kc-kurve);
}
.kc-taktil:active, .kc-taktil.ist-gedrueckt {
    transform: translateY(calc(var(--kc-tiefe) - 1px));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 var(--kc-kante), 0 3px 8px rgba(0, 0, 0, 0.3);
    transition-duration: 70ms;
}

/* 2. Druckknopf klein: Lichtkante oben, Schattenkante unten, gedrueckt nach innen */
.kc-druckknopf {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 150ms var(--kc-kurve), box-shadow 150ms var(--kc-kurve), background-color 150ms var(--kc-kurve);
}
.kc-druckknopf:active { transform: scale(0.97); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45); transition-duration: 70ms; }

/* 3. Knopf mit Zustandswechsel: Beschriftung blendet weich ueber, Breite folgt (kueche.js kc.zustand) */
.kc-dyn { position: relative; display: inline-grid; overflow: hidden; vertical-align: middle; transition: width 320ms var(--kc-kurve); }
.kc-dyn > [data-kc-zustand] { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
    transition: opacity 220ms var(--kc-kurve), transform 320ms var(--kc-feder), filter 220ms var(--kc-kurve); }
.kc-dyn > [data-kc-zustand]:not(.ist-an) { opacity: 0; transform: translateY(60%); filter: blur(4px); pointer-events: none; }
.kc-dyn > [data-kc-zustand].war-an { transform: translateY(-60%); }

/* 4. Ticket: Abriss mit Perforation, neigt sich mit Zeiger bzw. beim Scrollen; Folie schillert (kueche.js kc.ticket) */
.kc-ticket {
    --kc-abriss: 74%; --kc-loch: 10px; --kc-rx: 0deg; --kc-ry: 0deg; --kc-fx: 50%; --kc-fy: 50%; --kc-w: 0deg;
    position: relative; display: grid; grid-template-columns: var(--kc-abriss) 1fr; border-radius: 16px; overflow: hidden; isolation: isolate;
    transform: perspective(900px) rotateX(var(--kc-rx)) rotateY(var(--kc-ry)); transition: transform 500ms var(--kc-kurve);
    -webkit-mask: radial-gradient(circle var(--kc-loch) at var(--kc-abriss) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle var(--kc-loch) at var(--kc-abriss) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle var(--kc-loch) at var(--kc-abriss) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle var(--kc-loch) at var(--kc-abriss) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.kc-ticket.folgt { transition: transform 90ms linear; }
.kc-ticket::after {   /* Perforation: gestrichelte Linie zwischen Haupt- und Abrissteil */
    content: ""; position: absolute; top: calc(var(--kc-loch) + 4px); bottom: calc(var(--kc-loch) + 4px); left: var(--kc-abriss); width: 0;
    border-left: 2px dashed rgba(0, 0, 0, 0.28); z-index: 2; }
.kc-folie { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.75;
    background:
        radial-gradient(circle at var(--kc-fx) var(--kc-fy), rgba(255, 255, 255, 0.55), transparent 42%),
        conic-gradient(from var(--kc-w) at 50% 50%, #8ff5c4, #7fd8ff, #c9b8ff, #ffe39a, #8ff5c4);
    background-blend-mode: screen; }
.kc-ticket > :not(.kc-folie) { position: relative; z-index: 2; }

/* 5. Liste mit weichen Raendern: zeigt, dass es seitlich (oder oben/unten) weitergeht (kueche.js kc.schiene) */
.kc-schiene { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    --kc-rand: 28px;
    -webkit-mask-image: linear-gradient(90deg, var(--kc-l, #000), #000 var(--kc-rand), #000 calc(100% - var(--kc-rand)), var(--kc-r, transparent));
            mask-image: linear-gradient(90deg, var(--kc-l, #000), #000 var(--kc-rand), #000 calc(100% - var(--kc-rand)), var(--kc-r, transparent)); }
.kc-schiene::-webkit-scrollbar { display: none; }
.kc-schiene > * { scroll-snap-align: start; flex: none; }
.kc-schiene[data-kc-rand~="links"] { --kc-l: transparent; }
.kc-schiene[data-kc-rand~="ende"] { --kc-r: #000; }

/* 6. Schwung: eine Linie zeichnet sich selbst (wie eine Unterschrift; nie eine echte Unterschrift erfinden) */
.kc-schwung path { fill: none; stroke: var(--accent, currentColor); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.kc-schwung.is-an path { transition: stroke-dashoffset var(--kc-schwung-dauer, 1100ms) cubic-bezier(0.65, 0, 0.35, 1) var(--kc-schwung-verz, 0ms); stroke-dashoffset: 0; }

/* 7. Dock unten: dunkle Leiste, die mit geschwungenen Schultern aus der Unterkante waechst */
.kc-dock { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; pointer-events: none;
    --kc-dock: #111415; --kc-dock-hoch: 60px; --kc-schulter: 34px; filter: drop-shadow(0 -2px 12px rgba(0, 0, 0, 0.35)); }
.kc-dock-form { position: relative; display: flex; pointer-events: auto; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--kc-dock);
    border-radius: 0; margin: 0 var(--kc-schulter); }
.kc-dock-form > svg { position: absolute; bottom: 0; width: var(--kc-schulter); height: 100%; color: var(--kc-dock); }   /* Schultern so hoch wie das Dock */
.kc-dock-form > svg.links { right: 100%; }
.kc-dock-form > svg.rechts { left: 100%; transform: scaleX(-1); }
.kc-dock-unten { position: fixed; left: 0; right: 0; bottom: 0; height: env(safe-area-inset-bottom, 0px); background: var(--kc-dock); z-index: 49; }

/* Dock: Symbol huepft beim Tippen kurz hoch (Rueckmeldung wie eine Taste) */
.kc-dock a .i { transition: transform 420ms var(--kc-feder); }
.kc-dock a:active .i { transform: translateY(-3px) scale(1.08); transition-duration: 90ms; }

/* ---------- Runde 6 (30.10.2026): weitere Bausteine ---------- */

/* 9. Funken: kleine Teilchen fliegen beim Erfolg aus dem Knopf (kueche.js kc.funken; dazu kurze Vibration, wo das Handy sie kann) */
.kc-funke { position: fixed; z-index: 90; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 2px; pointer-events: none; background: var(--kc-funke, var(--accent, #3EE08F)); }

/* 10. Glanzwischer: ein schraeger Lichtstreifen zieht in Abstaenden ueber eine Flaeche (Hauptknopf) */
.kc-glanz { position: relative; overflow: hidden; isolation: isolate; }
.kc-glanz::after { content: ""; position: absolute; inset: -20% auto -20% -40%; width: 35%; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: translateX(0) skewX(-18deg);
    animation: kc-glanz var(--kc-glanz-takt, 5.5s) var(--kc-kurve) var(--kc-glanz-verz, 1.6s) infinite; }
.kc-glanz > * { position: relative; z-index: 2; }
@keyframes kc-glanz { 0% { transform: translateX(0) skewX(-18deg); } 22%, 100% { transform: translateX(520%) skewX(-18deg); } }

/* 11. Worte: ein Satz erscheint Wort fuer Wort aus der Unschaerfe (kueche.js zerlegt [data-kc-worte]) */
.kc-wort { display: inline-block; opacity: 0; transform: translateY(0.35em); filter: blur(6px);
    animation: kc-wort 560ms var(--kc-kurve) both; animation-delay: calc(var(--kc-worte-start, 0ms) + var(--kc-i, 0) * var(--kc-worte-takt, 38ms)); }
@keyframes kc-wort { to { opacity: 1; transform: none; filter: none; } }

/* 12. Blende: ein Bild oeffnet sich beim Laden von der Mitte aus (Foto-Auftritt) */
.kc-blende { animation: kc-blende 1100ms cubic-bezier(0.65, 0, 0.35, 1) var(--kc-blende-verz, 120ms) both; }
@keyframes kc-blende { from { clip-path: inset(42% 42% 42% 42% round 40px); transform: scale(1.12); } to { clip-path: inset(0 0 0 0 round 0); transform: none; } }

/* 13. Scan-Linie: ein Lichtbalken faehrt ueber einen QR-Code, wenn er ins Bild kommt (bekommt is-an) */
.kc-scan { position: relative; overflow: hidden; }
.kc-scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent, #3EE08F) 45%, transparent) 70%, var(--accent, #3EE08F)); }
.kc-scan.is-an::after { animation: kc-scan 1600ms cubic-bezier(0.45, 0, 0.55, 1) 200ms 2; }
@keyframes kc-scan { 0% { transform: translateY(-100%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(460%); opacity: 0; } }

/* 14. Fortschritt beim Scrollen: eine Linie fuellt sich, waehrend man durch einen Abschnitt scrollt (kueche.js setzt --kc-p 0..1) */
.kc-fortschritt { position: relative; }
.kc-fortschritt::before, .kc-fortschritt::after { content: ""; position: absolute; left: var(--kc-linie-x, 30px); top: var(--kc-linie-oben, 28px);
    bottom: var(--kc-linie-unten, 28px); width: 2px; border-radius: 1px; }
.kc-fortschritt::before { background: rgba(255, 255, 255, 0.10); }
.kc-fortschritt::after { background: var(--accent, #3EE08F); transform-origin: top; transform: scaleY(var(--kc-p, 0)); }

/* ---------- Runde 7 (30.10.2026) ---------- */

/* 15. Blatt von unten als natives <dialog> (Rueckfall-Stufe von kc.teilen, aber auch allgemein): Esc und Fokus macht der Browser */
dialog.kc-blatt { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 520px; max-height: 90dvh; overflow: auto; border: 0;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--kc-blatt-bg, #15191a); color: inherit; }
dialog.kc-blatt[open] { animation: kc-blatt-rein 520ms var(--kc-feder) both; }
dialog.kc-blatt::backdrop { background: rgba(0, 0, 0, 0.55); }
.kc-blatt-griff { width: 36px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); }
@keyframes kc-blatt-rein { from { transform: translateY(100%); } to { transform: none; } }

/* 16. Reiter: zwei Bereiche in einer Seite, Pille gleitet zum gewaehlten (kueche.js kc.reiter). Ohne JS: Anker-Links, alles sichtbar */
.kc-reiter { --kc-n: 2; --kc-i: 0; position: relative; display: grid; grid-template-columns: repeat(var(--kc-n), 1fr); padding: 4px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06); isolation: isolate; }
.kc-reiter::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--kc-n)); border-radius: 999px;
    background: var(--kc-reiter-an, var(--accent, #3EE08F)); transform: translateX(calc(var(--kc-i) * 100%)); transition: transform 460ms var(--kc-feder); }
.kc-reiter a { display: grid; place-items: center; min-height: 48px; padding: 0 10px; border-radius: 999px; text-align: center; font-weight: 650;
    color: var(--kc-reiter-text, rgba(255, 255, 255, 0.78)); transition: color 240ms var(--kc-kurve); }
.kc-reiter a[aria-current] { color: var(--kc-reiter-text-an, #06110b); }
.kc-aus { display: none !important; }   /* kc.reiter blendet nicht gewaehlte Bereiche so aus */

/* ---------- Runde 8 (30.10.2026) ---------- */

/* 18. Druck: ein Beleg/Gutschein schiebt sich beim Hereinscrollen aus einem Schlitz (Technik nach "Receipt Printer", eigener Code).
   Der Schlitz ist ein dunkler Balken darueber (.kc-druck-schlitz), das Element faehrt von oben heraus. Bekommt is-an im Blick. */
.kc-druck-schlitz { height: 10px; margin: 0 6px -5px; border-radius: 6px; background: #050707; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.8); position: relative; z-index: 2; }
.kc-druck { overflow: hidden; }
.kc-druck > * { transform: translateY(-101%); }
.kc-druck.is-an > * { transform: none; transition: transform 1300ms steps(14, end); }   /* ruckweise wie ein Drucker */
.kc-druck.is-an.fertig > * { transition: none; }

/* 19. Stempel: drueckt sich mit einem kleinen Ruck ein (Danke, Bezahlt, Neu). Bekommt is-an im Blick. */
.kc-stempel { display: inline-grid; place-items: center; padding: 6px 10px; border: 2px solid currentColor; border-radius: 10px; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase; transform: rotate(-12deg); opacity: 0; }
.kc-stempel.is-an { animation: kc-stempel 520ms cubic-bezier(0.2, 1.6, 0.4, 1) var(--kc-stempel-verz, 900ms) both; }
@keyframes kc-stempel { from { opacity: 0; transform: rotate(-12deg) scale(1.8); } 60% { opacity: 1; } to { opacity: 0.92; transform: rotate(-12deg) scale(1); } }

@media (prefers-reduced-motion: reduce) {
    dialog.kc-blatt[open], .kc-reiter::before { animation: none !important; transition: none !important; }
    .kc-druck > * { transform: none !important; transition: none !important; }
    .kc-stempel { animation: none !important; opacity: 0.92 !important; }
    .kc-taktil, .kc-druckknopf, .kc-dyn, .kc-dyn > [data-kc-zustand], .kc-ticket, .kc-dock a .i { transition: none !important; }
    .kc-ticket { transform: none !important; }
    .kc-schwung path { stroke-dashoffset: 0 !important; transition: none !important; }
    .kc-glanz::after, .kc-scan::after { animation: none !important; opacity: 0; }
    .kc-wort, .kc-blende { animation: none !important; opacity: 1; transform: none; filter: none; clip-path: none; }
    .kc-fortschritt::after { transform: scaleY(1); }
    .kc-funke { display: none; }
}