/* Zentrale CSS-Datei für die Hochzeitswebseite */

:root {
  --color-primary: #57776a;      /* Haupt-Grünton für Überschriften, Buttons, Icons */
  --color-primary-dark: #435d52; /* Dunklerer Ton für Hover-Effekte */
  --color-background: #fdfaf6;    /* Hintergrundfarbe der Seite */
}

/* Grundlegende Schriften und Hintergrund */
body {
    font-family: 'Lato', sans-serif;
    background-color: var(--color-background);
}

h1, h2, h3, h4, .font-serif {
    font-family: 'Playfair Display', serif;
}

/* Farb-Helferklassen, die auf allen Seiten verwendet werden */
.bg-cream { background-color: var(--color-background); }
.text-sage { color: var(--color-primary); }
.bg-sage { background-color: var(--color-primary); }
.border-sage { border-color: var(--color-primary); }

/* Spezielle Klassen für Interaktionen */
.hover\:bg-sage-dark:hover {
    background-color: var(--color-primary-dark);
}

.focus\:ring-sage:focus {
    --tw-ring-color: var(--color-primary);
}

.drag-over {
    border-color: var(--color-primary);
    background-color: #f0f3eb; /* Ein leicht getönter Hintergrund */
}

/* Allgemeine Stile */
html { scroll-behavior: smooth; }

.hero-bg {
     background-image: url('Bilder/Header.jpg');
     background-size: cover;
     background-position: center;
}