/**
 * Base Styles - CORRECTED
 * Juliana y Fadi Tango Website
 * 
 * Grundlegendes Styling für HTML-Elemente
 * Wird auf ALLEN Seiten verwendet
 * 
 * WICHTIG: Enthält @font-face für Amsterdam Four!
 */

/* ==================== RESET & NORMALIZATION ==================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ==================== FONT FACE ==================== */
/* Schrift vom Logo */
@font-face {
    font-family: 'Playfair Display';
	src: url('../fonts/playfair-display-variable-font-wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Lokal gehostet statt über Google Fonts (Performance + Datenschutz/CSP -
   siehe Analyse: kein Cache-Vorteil mehr seit Browser-Cache-Partitionierung
   2020, spart zusätzlich zwei fremde Server-Verbindungen). Quelle: offizielles
   Google-Fonts-Repository github.com/googlefonts/dm-fonts (identische Datei). */
@font-face {
    font-family: 'DM Serif Display';
    src: url('../fonts/dm-serif-display-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==================== HTML & BODY ==================== */

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'DM Serif Display', serif;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    background: var(--color-gray-750);
    letter-spacing: var(--letter-spacing-wide); /* WICHTIG: Globaler letter-spacing! */
    /* Doppel-Deklaration bewusst: 100vh als Fallback für Browser ohne
       dvh-Unterstützung, 100dvh (dynamic viewport height) danach für
       moderne Browser - berücksichtigt die dynamische iOS-Safari-
       Adressleiste, die bei reinem vh sonst Inhalte am unteren Rand
       verdecken kann. Ältere Browser ignorieren die zweite Zeile
       automatisch und bleiben bei 100vh, kein Risiko. */
    min-height: 100vh;
    min-height: 100dvh;
}

/* ==================== TYPOGRAPHY ==================== */

h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Serif Display', serif;
    font-weight: normal;
    line-height: 1.2;
    color: var(--color-primary);
}

h1 {
    font-size: var(--font-size-6xl);
    letter-spacing: var(--letter-spacing-wider);
}

h2 {
    font-size: var(--font-size-6xl);
    letter-spacing: var(--letter-spacing-wider);
}

h3 {
    font-size: var(--font-size-5xl);
    letter-spacing: var(--letter-spacing-wide);
}

p {
    color: var(--color-text-secondary);
    line-height: 1.8;
    letter-spacing: var(--letter-spacing-normal);
    margin-bottom: var(--spacing-sm);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-white);
}

strong {
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* ==================== LISTS ==================== */

ul, ol {
    list-style: none;
}

/* ==================== IMAGES ==================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==================== LAYOUT CONTAINERS ==================== */

.container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    /* Fluid statt starrer Werte + hartem 768px-Sprung auf 0 (Kurzschreibweise
       "padding: 0 1rem" setzte padding-top/-bottom bisher abrupt auf 0 -
       siehe Fluid-Design-Audit Kategorie B1). clamp() nähert denselben
       Endzustand (0 auf sehr schmalen Screens) jetzt stufenlos an, statt
       an exakt 768px hart umzuschalten. Desktop-Maxima unverändert
       identisch zu den bisherigen Fixwerten. Grenzwerte referenzieren
       die Projekt-Spacing-Skala, wo passend. */
    padding-top: clamp(0px, 9vw - 2.7rem, var(--spacing-xl));
    padding-bottom: clamp(0px, 9vw - 2.7rem, var(--spacing-xl));
    padding-left: clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
    padding-right: clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
}

.content-narrow {
    max-width: 900px;
    margin: 0 auto;
}

/* ==================== SECTIONS ==================== */

section {
    margin: var(--spacing-2xl) 0;
}

/* Hinweis: .section-title liegt in utilities.css (inkl. --large-Modifier),
   nicht hier - vorher unterschiedliche Werte an beiden Stellen, jetzt
   eine einzige Quelle. */

/* ==================== ANIMATIONS ==================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: var(--animate-slide-up-offset);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation Utilities */
.animate-fade-in-up {
    animation: fadeInUp 1s ease-out;
}

.animate-fade-in {
    animation: fadeIn 1s ease-out;
}

/* Utility-Klassen (Farben, Spacing, Display, Accessibility) liegen
   zentral in utilities.css - keine Dopplung hier. */

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    h1 {
        font-size: var(--font-size-6xl);
    }
}