@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;600&display=swap');

:root {
    --paper-color: #fdfcf5;
    --sky-dark: #0c4a6e;
    --amber-gold: #b45309;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f4f1ea;
    /* Dezentes Punktmuster wie bei hochwertigem Briefpapier */
    background-image: radial-gradient(#d1d5db 1px, transparent 1px);
    background-size: 30px 30px;
    color: #1c1917;
}

/* Postcard Flip Animation */
.postcard-container {
    perspective: 2000px;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 1.618 / 1;
}

.postcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}

.postcard-container.is-flipped .postcard-inner {
    transform: rotateY(180deg) rotateZ(0.5deg);
}

.postcard-front, .postcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 4px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.postcard-back {
    transform: rotateY(180deg);
    background-color: var(--paper-color);
    background-image: url('https://www.transparenttextures.com/patterns/felt.png'); /* Papier-Struktur */
}

/* Glassmorphism Classes */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

.animate-float {
    animation: float 5s ease-in-out infinite;
}

.btn-travel {
    @apply transition-all duration-300 transform active:scale-95 shadow-lg hover:shadow-sky-200;
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
}

/* Container für die Karte - bestimmt die Perspektive */
.postcard-container {
    perspective: 1500px;
    width: 100%;
    max-width: 800px;
    height: 500px;
}

/* Der innere Wrapper, der sich dreht */
.postcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* Zustand wenn die Klasse .is-flipped aktiv ist */
.postcard-container.is-flipped .postcard-inner {
    transform: rotateY(180deg);
}

/* Gemeinsame Stile für Vorder- und Rückseite */
.postcard-front, .postcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 4px;
    -webkit-backface-visibility: hidden; /* Für Safari */
}

/* Briefmarken-Zackung Detail */
.stamp-border {
    background-color: white;
    padding: 8px;
    position: relative;
    z-index: 10; /* Sicherstellen, dass sie oben liegt */
    filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.15));
    border: 1px dashed #d1d5db;
    
    /* Der Zacken-Effekt mittels Maskierung */
    background: white;
    background-image: radial-gradient(circle at center, white 100%, transparent 100%);
    
    /* Wichtig: Falls die Rückseite overflow:hidden hat, darf die Marke nicht zu weit rotieren */
    transform-origin: center;
}

/* Fix für die Rückseite, damit Kind-Elemente (Marke) sichtbar bleiben */
.postcard-back {
    transform: rotateY(180deg);
    overflow: visible !important; /* Erlaubt der Marke, "aus dem Rahmen" zu ragen */
    display: flex;
    z-index: 2;
}