@import "tailwindcss";

/* Farben: Grün (Primär) + Weiß (Sekundär) */
@theme {
    --color-cream: #FFFFFF;
    --color-ink: #1F2B24;
    --color-muted: #4D5A52;
    --color-muted2: #64716A;
    --color-line: #DCE6DF;
    --color-line2: #CCDAD0;
    --color-tint: #EAF1EC;
    --color-sage: #5C7C66;
    --color-sage-dark: #4A6653;
    --color-sage-deep: #3F5646;
    --color-sage-light: #A9C4B1;
    --color-light: #E4EDE7;
    --color-quote: #2E3D33;

    --font-serif: "Newsreader", Georgia, serif;
    --font-sans: "Figtree", system-ui, sans-serif;
    --font-hand: "Caveat", cursive;
}

@layer base {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 80px;
    }

    body {
        margin: 0;
        -webkit-font-smoothing: antialiased;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    button {
        cursor: pointer;
    }
}

@keyframes hvBeat {
    0%, 100% { transform: scale(1) }
    15% { transform: scale(1.3) }
    30% { transform: scale(1) }
    45% { transform: scale(1.18) }
    60% { transform: scale(1) }
}

@keyframes hvRing {
    0% { transform: scale(1); opacity: .55 }
    100% { transform: scale(2.8); opacity: 0 }
}

@keyframes hvDraw {
    0% { stroke-dashoffset: 1; opacity: 1 }
    45% { stroke-dashoffset: 0; opacity: 1 }
    85% { stroke-dashoffset: 0; opacity: 1 }
    100% { stroke-dashoffset: 0; opacity: 0 }
}

@layer components {
    .a-ring { animation: hvRing 1.6s ease-out infinite }
    .a-beat { animation: hvBeat 1.6s ease-in-out infinite }
    .ecg { stroke-dasharray: 1; stroke-dashoffset: 0; animation: hvDraw 5s ease-in-out infinite }

    /* Flip-Cards (Team) */
    .bf { backface-visibility: hidden; -webkit-backface-visibility: hidden }
    .flip-back, .flipped { transform: rotateY(180deg) }

    .js-anim [data-reveal] {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
    }
}

.no-anim *, .no-anim *::before, .no-anim *::after {
    animation: none !important;
    transition: none !important;
}