/* css/base.css
   Fundament der Seite: Farbpalette, fluid Maße, Reset und Basistypografie.
   Alle weiteren Cluster bauen auf diese Variablen auf – hier stehen
   bewusst keine Cluster-Stile.

   Die Werte sind aus der Vorlage entnommen (_old_/test.html,
   _old_/dist/main.css). */

:root {
    /* Farben der Vorlage */
    --color-page: #a29d87;             /* Seitenhintergrund */
    --color-music: #67202d;            /* Sektion Musik */
    --color-concerts: #465e73;         /* Sektion Konzerte */
    --color-contact: #8c633f;          /* Sektion Kontakt */
    --color-live: #3f6b61;             /* Sektion Live */
    --color-accent: orange;            /* Player, Button-Füllungen */
    --color-accent-dark: darkorange;   /* Button-Schrift, Schieb-Schatten */
    --color-footer: #444444;
    --color-ticket: #f7f5ea;           /* Ticket-Papier */
    --color-ticket-text: #444444;
    --color-text: #ffffff;             /* Text auf dunklen Sektionen */

    /* Schriftfamilien (alle kommen vom Google-Fonts-Link im <head>) */
    --font-display: 'Contrail One', Pacifico, sans-serif;
    --font-body: 'Open Sans Condensed', sans-serif;
    --font-mono: 'Cutive Mono', 'Courier New', Courier, monospace;

    /*
        Fluid-Typografie mit clamp(): Die Vorlage nahm fix 20px, das ist
        auf dem iPhone zu groß. Deshalb: ~16px auf dem Smartphone, 20px
        ab ca. 1300px Bildschirmbreite (Wie: 1rem + vw-Anteil, begrenzt).
    */
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);

    /* Überschriften relativ zur Basis, ebenfalls fluid
       (Vorlage: h1 3em = 60px auf dem Desktop) */
    --text-h1: clamp(2.4em, 2em + 2vw, 3em);
    --text-h2: clamp(1.35em, 1.2em + 0.75vw, 1.6em);

    /* Raster/Abstände fluid (Vorlage nutzte fix 80px/30px/450px) */
    --space-1: clamp(0.5em, 0.4em + 0.5vw, 1em);
    --space-2: clamp(1em, 0.8em + 1vw, 2em);
    --space-3: clamp(2em, 1.4em + 3vw, 4em);
}

/* ---- Reset ---------------------------------------------------------- */

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

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%; /* iOS soll die Schrift nicht hochrechnen */
}

body {
    margin: 0;
    min-height: 100vh; /* stabile große Viewport-Höhe: dvh würde beim
                           Ein-/Ausblenden der mobilen Browserleiste
                           mitwandern und die Seite neu layouten */
    background-color: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-base);
    line-height: 1.5;
}

img,
svg {
    max-width: 100%;
    display: block;
}

h1 {
    font-weight: normal; /* Contrail One kennt kein fettes Gewicht */
    font-size: var(--text-h1);
    margin: 0;
}

h2 {
    font-weight: normal;
    font-size: var(--text-h2);
    margin: 0 0 var(--space-2);
}

a {
    color: var(--color-text);
}

/* prefers-reduced-motion: Wer Bewegung im System deaktiviert hat, bekommt
   die Seite ohne. Ein einziger globaler Schalter hier, der alle
   Transitionen/Animationen aller Cluster sofort neutralisiert.
   Cluster, die statt „schnell“ lieber „aus“ wollen, ergänzen darüber
   eigene Regeln (z. B. der Scroll-Indikator in layout.css). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}