/* Farbcode Deklaration */
:root {
    /* Primärfarben — Creme */
    --color-primary: #FFFDD0;
    /* var(--color-primary) */
    --color-primary-dark: #EAE6A8;
    /* var(--color-primary-dark) */

    --color-primary-alpha: #FFFDD0ad;
    /* var(--color-primary-alpha) */
    --color-primary-dark-alpha: #EAE6A8ad;
    /* var(--color-primary-dark-alpha) */

    --text-on-primary: #3A3020;
    /* var(--text-on-primary) — dunkles Warmbraun, lesbar auf Creme */


    /* Akzent — Antiquegold */
    --color-primary-accent: #BFA77A;
    /* var(--color-primary-accent) */
    --color-primary-dark-accent: #A08B5C;
    /* var(--color-primary-dark-accent) */

    --color-primary-accent-alpha: #BFA77Aad;
    /* var(--color-primary-accent-alpha) */
    --color-primary-dark-accent-alpha: #A08B5Cad;
    /* var(--color-primary-dark-accent-alpha) */

    --text-on-primary-accent: #FDFBF8;
    /* var(--text-on-primary-accent) */


    /* Sekundärfarben — Warmgrau / Tiefbraun */
    --color-secondary: #6B635A;
    /* var(--color-secondary) */
    --color-secondary-dark: #2A231A;
    /* var(--color-secondary-dark) */

    --color-secondary-alpha: #6B635Aad;
    /* var(--color-secondary-alpha) */
    --color-secondary-dark-alpha: #2A231Aad;
    /* var(--color-secondary-dark-alpha) */

    --text-on-secondary: #FDFBF8;
    /* var(--text-on-secondary) */

    /* Konfetti-Farben */
    --confetti-color-1: #FFFDD0;
    --confetti-color-2: #BFA77A;
    --confetti-color-3: #FFFFFF;
    --confetti-color-4: #F5EED7;
    --confetti-color-5: #D4C4A0;
    --confetti-color-6: #EAE6A8;

}

/*  Standard-Font überschreiben
    benötigt neuen Ordner public/fonts - bestenfalls WOFF2-Format und hier ersetzen


@font-face {
    font-family: 'Acme';
    src: url('../fonts/acme-v26-latin-regular.woff2') format('woff2');
}

html,
body {
    font-family: 'Acme', system-ui, sans-serif;
}

*/

/*----------------------------------------------------------------*/

/* Hintergrundfarbe Primär */
.bg-primary {
    background-color: var(--color-primary);
}

.bg-primary-alpha {
    background-color: var(--color-primary-alpha);
}

.hover\:bg-primary:hover {
    background-color: var(--color-primary);
}

.checked\:bg-primary:checked {
    background-color: var(--color-primary);
}

/*----------------------------------------------------------------*/

/* Akzentfarbe für Primärfarbe */
.bg-primary-accent {
    background-color: var(--color-primary-accent);
}

.bg-primary-accent-alpha {
    background-color: var(--color-primary-accent-alpha);
}

.hover\:bg-primary-accent:hover {
    background-color: var(--color-primary-accent);
}

.checked\:bg-primary-accent:checked {
    background-color: var(--color-primary-accent);
}

/*----------------------------------------------------------------*/

/* Akzentfarbe für Primärfarbe dunkel*/
.bg-primary-dark-accent {
    background-color: var(--color-primary-dark-accent);
}

.bg-primary-dark-accent-alpha {
    background-color: var(--color-primary-dark-accent-alpha);
}

.hover\:bg-primary-dark-accent:hover {
    background-color: var(--color-primary-accent);
}

.checked\:bg-primary-dark-accent:checked {
    background-color: var(--color-primary-accent);
}

/*----------------------------------------------------------------*/

/* Hintergrundfarbe Primär dunkel */
.bg-primary-dark {
    background-color: var(--color-primary-dark);
}

.bg-primary-dark-alpha {
    background-color: var(--color-primary-dark-alpha);
}

.hover\:bg-primary-dark:hover {
    background-color: var(--color-primary-dark);
}

.checked\:bg-primary-dark:checked {
    background-color: var(--color-primary-dark);
}

/*----------------------------------------------------------------*/

/* Hintergrundfarbe Sekundär */
.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-secondary-alpha {
    background-color: var(--color-secondary-alpha);
}

.hover\:bg-secondary:hover {
    background-color: var(--color-secondary);
}

.checked\:bg-secondary:checked {
    background-color: var(--color-secondary);
}

/*----------------------------------------------------------------*/

/* Hintergrundfarbe Sekundär dunkel */
.bg-secondary-dark {
    background-color: var(--color-secondary-dark);
}

.bg-secondary-dark-alpha {
    background-color: var(--color-secondary-dark-alpha);
}

.hover\:bg-secondary-dark:hover {
    background-color: var(--color-secondary-dark);
}

.checked\:bg-secondary-dark:checked {
    background-color: var(--color-secondary-dark);
}

/*----------------------------------------------------------------*/

/* Text auf Primärfarbe */
.text-on-primary {
    color: var(--text-on-primary);
}

/* Text auf Primär-Akzentfarbe */
.text-on-primary-accent {
    color: var(--text-on-primary-accent);
}

/* Text auf Sekundärfarbe */
.text-on-secondary {
    color: var(--text-on-secondary);
}

/*----------------------------------------------------------------*/

/* Text in Primärfarbe */
.text-primary {
    color: var(--color-primary);
}

.hover\:text-primary:hover {
    color: var(--color-primary);
}

/* Text in dunkler Primärfarbe */
.text-primary-dark {
    color: var(--color-primary-dark);
}

.hover\:text-primary-dark:hover {
    color: var(--color-primary-dark);
}

/* Text in Akzentfarbe für Primär */
.text-primary-accent {
    color: var(--color-primary-accent);
}

.hover\:.text-primary-accent:hover {
    color: var(--color-primary-accent);
}

/* Text in Sekundärfarbe */
.text-secondary {
    color: var(--color-secondary);
}

.hover\:text-secondary:hover {
    color: var(--color-secondary);
}

/* Text in dunkler Sekundärfarbe */
.text-secondary-dark {
    color: var(--color-secondary-dark);
}

.hover\:text-secondary-dark:hover {
    color: var(--color-secondary-dark);
}

/*----------------------------------------------------------------*/

/* Outlining für Inputs */
.outline-primary {
    outline-color: var(--color-primary);
}

.outline-primary-dark {
    outline-color: var(--color-primary-dark);
}

.outline-secondary {
    outline-color: var(--color-secondary);
}

.outline-secondary-dark {
    outline-color: var(--color-secondary-dark);
}

/*----------------------------------------------------------------*/

/* Fokus-Outlining für Inputs */
.focus\:outline-primary:focus {
    outline-color: var(--color-primary);
}

.focus\:outline-primary-dark:focus {
    outline-color: var(--color-primary-dark);
}

.focus\:outline-secondary:focus {
    outline-color: var(--color-secondary);
}

.focus\:outline-secondary-dark:focus {
    outline-color: var(--color-secondary-dark);
}

/*----------------------------------------------------------------*/


/* Generischer blurry-outline style für fokus-state von allen möglichen Elementen */
.focus\:custom-outline:focus {
    outline: none;
    box-shadow: 0 0 3px 2px var(--color-primary-alpha);
}

/* Outline-Style für Buttons in Sekundärfarbe */
.focus\:button-outline:focus {
    outline: 2px solid;
    outline-offset: 1px;
    outline-color: var(--color-primary);
}

/*-------------------------------------------------------------*/

/* Hover-Wiggle Animation */
.hover-wiggle:hover {
    animation: wiggle 0.35s ease-in-out;
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-1deg);
    }

    40% {
        transform: rotate(1deg);
    }

    60% {
        transform: rotate(-0.5deg);
    }

    80% {
        transform: rotate(0.5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Dropdown Animation (für fliegende Dropdowns) */
.dropdown-animation {
    transform-origin: top right;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* weichere easing */
    will-change: transform, opacity;
}

.dropdown-animation.show {
    animation: dropdown-animation-show 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.dropdown-animation.hide {
    animation: dropdown-animation-hide 0.35s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes dropdown-animation-show {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    60% {
        opacity: 1;
        transform: translateY(2px) scale(1.02);
        /* kleiner bounce */
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dropdown-animation-hide {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

/*-------------------------------------------------------------*/

/* File-Input Überschreiben für hübschere Darstellung */
/* Input selbst */
input[type="file"] {
    height: 2.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 0.375rem;
    overflow: hidden;
    padding-left: 0.5rem;
}

input[type="file"]::file-selector-button {
    height: 100%;
    margin: 0;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-on-primary);
    background: var(--color-primary);
    border: none;
    border-right: 1px solid #e5e7eb;
    cursor: pointer;
    transform: translateX(-0.5rem);
}

/* Hover */
input[type="file"]::file-selector-button:hover {
    background: var(--color-primary-dark);
}

/*----------------------------------------------------------------*/

/* Seitenanimationen */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes tableNumberPop {
    0%   { transform: scale(0.5);  opacity: 0; }
    70%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

.table-number-pop {
    animation: tableNumberPop 0.6s 0.3s cubic-bezier(0.16,1,0.3,1) both;
}

/*----------------------------------------------------------------*/

/* Glassmorphism Card */
.glass-card {
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.glass-card-hover:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

/*----------------------------------------------------------------*/

/* Safari-Fallback */
input[type="file"]::-webkit-file-upload-button {
    height: 100%;
    margin: 0;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-on-primary);
    background: var(--color-primary);
    border: none;
    border-right: 1px solid #e5e7eb;
    cursor: pointer;
    transform: translateX(-0.5rem);
}