/* ========================================
   SCHRIFTARTEN IMPORTIEREN
======================================== */

@import url("./fonts.css");

/* ========================================
   GLOBALE BODY-EINSTELLUNGEN
======================================== */

body {
    min-height: 100vh;

    /* ---------- Farben ---------- */

    background-color: var(--color-cream);
    color: var(--color-ink);

    /* ---------- Schrift ---------- */

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

/* ========================================
   GLOBALE FARBVARIABLEN
======================================== */

:root {
    /* ---------- Markenfarben ---------- */

    --color-wood: #74543f;
    --color-brown: #815e41;
    --color-copper: #b8894f;
    --color-copper-hover: #a37740;

    /* ---------- Neutrale Farben ---------- */

    --color-ink: #191919;
    --color-cream: #f5f2ec;
    --color-stone: #e9e7e2;
    --color-white: #ffffff;
}

/* ========================================
   GLOBALER CSS-RESET
======================================== */

/* ---------- Einheitliches Box-Modell ---------- */

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

/* ---------- Standardabstände entfernen ---------- */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

/* ---------- Responsive Medien ---------- */

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

img {
    height: auto;
}

/* ---------- Einheitliche Formularschrift ---------- */

button,
input,
textarea,
select {
    font: inherit;
}

/* ========================================
   GLOBALE TYPOGRAFIE
======================================== */

/* ---------- Überschriften allgemein ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

/* ---------- Hauptüberschrift ---------- */

h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.1;
}

/* ---------- Abschnittsüberschriften ---------- */

h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
}

/* ---------- Kleinere Überschriften ---------- */

h3 {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
}

/* ---------- Weitere Überschriften ---------- */

h4,
h5,
h6 {
    font-size: 1rem;
}

/* ---------- Fließtexte ---------- */

p {
    font-size: 1rem;
    line-height: 1.6;
}

/* ========================================
   GLOBALES LAYOUT
======================================== */

/* ---------- Inhaltscontainer ---------- */

.container {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
}

/* ---------- Allgemeine Abschnittsabstände ---------- */

.section {
    padding-block: clamp(4rem, 7vw, 7rem);
}

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

/* ---------- Tablet und Desktop ---------- */

@media (min-width: 768px) {

    .container {
        width: min(100% - 4rem, 1200px);
    }

}