/* Hi5-Eis — Brand Stylesheet
 * Warme Beerentöne + Pistazie + Vanille, mit einer Prise Karamell.
 * Tailwind übernimmt den Großteil; hier liegen Sachen, die Utility-Klassen
 * schlecht abbilden: Fonts, Custom-Gradients, Animations, Tokens.
 */

:root {
    --cream-50:  #fff9f2;
    --cream-100: #fff1e0;
    --cream-200: #fde4c5;
    --berry-50:  #fff1f4;
    --berry-100: #ffe1e7;
    --berry-300: #fda4b8;
    --berry-500: #e11d48;
    --berry-600: #be123c;
    --berry-700: #9f1239;
    --pistache-300: #cfe2b0;
    --pistache-500: #95b873;
    --pistache-700: #5e7a3f;
    --vanilla-200: #fef3c7;
    --vanilla-400: #fbd16d;
    --cocoa-700:  #57433a;
    --cocoa-900:  #2a1f1a;

    --shadow-soft:  0 10px 30px -12px rgba(190, 18, 60, 0.18),
                    0 4px 10px -4px rgba(42, 31, 26, 0.08);
    --shadow-card:  0 4px 16px -4px rgba(42, 31, 26, 0.12);
    --shadow-glow:  0 0 40px -8px rgba(225, 29, 72, 0.35);
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--cocoa-900);
    background: var(--cream-50);
}

/* Warmer Hintergrund mit weichen Farbflecken (Aurora-Effekt) */
.bg-hero-aurora {
    background:
        radial-gradient(60% 50% at 15% 10%,  rgba(253, 164, 184, 0.55) 0%, transparent 60%),
        radial-gradient(50% 45% at 90% 20%,  rgba(207, 226, 176, 0.55) 0%, transparent 60%),
        radial-gradient(55% 50% at 50% 100%, rgba(254, 211, 109, 0.45) 0%, transparent 60%),
        var(--cream-50);
}

.bg-soft-cream {
    background: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
}

/* Schrift-Hierarchie */
.font-display {
    font-family: 'Fraunces', ui-serif, Georgia, "Times New Roman", serif;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 60, "WONK" 0;
    letter-spacing: -0.01em;
}

.font-script {
    font-family: 'Caveat', cursive;
}

/* Buttons mit subtilem Glow */
.btn-primary {
    background: linear-gradient(135deg, var(--berry-500) 0%, var(--berry-700) 100%);
    color: white;
    padding: 0.95rem 1.75rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.05rem;
    box-shadow: var(--shadow-soft);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft), var(--shadow-glow);
    filter: brightness(1.05);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
    background: white;
    color: var(--berry-600);
    padding: 0.95rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    box-shadow: var(--shadow-card);
    transition: transform 180ms ease, box-shadow 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -6px rgba(42, 31, 26, 0.18);
}

/* Karten-Stil */
.card-soft {
    background: white;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: transform 220ms ease, box-shadow 220ms ease;
}
.card-soft:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px -8px rgba(42, 31, 26, 0.18);
}

/* Sorten-Kärtchen */
.sorte-card {
    background: white;
    border-radius: 1.25rem;
    padding: 1rem;
    box-shadow: var(--shadow-card);
    transition: transform 200ms ease, box-shadow 200ms ease;
    position: relative;
    overflow: hidden;
}
.sorte-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--swatch, var(--berry-100)) 0%, transparent 65%);
    opacity: 0.5;
    pointer-events: none;
}
.sorte-card > * { position: relative; }
.sorte-card:hover {
    transform: translateY(-4px) rotate(-0.4deg);
    box-shadow: 0 16px 36px -10px rgba(42, 31, 26, 0.2);
}

.scoop-dot {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: var(--swatch, var(--berry-300));
    box-shadow:
        inset -2px -3px 6px rgba(0,0,0,0.12),
        inset 2px 2px 4px rgba(255,255,255,0.6);
}

/* Animations */
@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.animate-float {
    animation: float-y 6s ease-in-out infinite;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fade-up 600ms ease-out both; }
.delay-1 { animation-delay: 80ms; }
.delay-2 { animation-delay: 160ms; }
.delay-3 { animation-delay: 240ms; }

/* Pille / Badge */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background: white;
    box-shadow: 0 2px 6px -2px rgba(42, 31, 26, 0.12);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cocoa-700);
}

/* Footer-Links */
.footer-link {
    color: var(--cocoa-700);
    transition: color 160ms ease;
}
.footer-link:hover { color: var(--berry-600); }

/* Form-Elemente konsistent */
.input-soft {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.85rem;
    background: white;
    border: 1px solid var(--cream-200);
    transition: border-color 160ms, box-shadow 160ms;
    font-family: inherit;
}
.input-soft:focus {
    outline: none;
    border-color: var(--berry-300);
    box-shadow: 0 0 0 4px rgba(253, 164, 184, 0.25);
}

/* Mengen-Counter (Kugeln + Addons): native Number-Spinner ausblenden,
   Steuerung erfolgt nur per +/- Buttons */
.qty-input,
.scoop-input {
    -moz-appearance: textfield;
    appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button,
.scoop-input::-webkit-outer-spin-button,
.scoop-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Rechtstexte / Prosa */
.legal-prose { color: var(--cocoa-700); line-height: 1.65; }
.legal-prose h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--cocoa-900);
    margin: 1.6rem 0 0.6rem;
}
.legal-prose h3 {
    font-weight: 600;
    color: var(--cocoa-900);
    margin: 1.1rem 0 0.4rem;
}
.legal-prose p { margin: 0.6rem 0; }
.legal-prose ul { list-style: disc; padding-left: 1.4rem; margin: 0.6rem 0; }
.legal-prose li { margin: 0.25rem 0; }
.legal-prose a { color: var(--berry-600); text-decoration: underline; }
.legal-prose strong { color: var(--cocoa-900); }
.legal-prose .todo {
    background: #fff1e0;
    border: 1px dashed var(--berry-300);
    color: var(--berry-700);
    border-radius: 0.5rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.85em;
}

/* Decoration */
.divider-wave {
    height: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 36' preserveAspectRatio='none'><path d='M0 24 Q 150 0 300 18 T 600 24 T 900 18 T 1200 24 V36 H0 Z' fill='%23fff1e0'/></svg>");
    background-size: cover;
}