/* =====================================
   Layout
===================================== */

:root {
    /* Container */
    --container-width: 1300px;
    --container-padding: 30px;

    /* Header */
    --header-height: 100px;

    /* Abstände */
    --section-spacing: 120px;
    --gap: 30px;

    /* Rundungen */
    --radius: 18px;

    /* Farben */
    --color-white: #ffffff;
    --color-black: #111111;
    --color-text: #2b2b2b;
    --color-accent: #b58b45;

    /* Hintergrund */
    --background-overlay: rgba(0, 0, 0, 0.35);

    /* Schatten */
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

html,
body {
    min-height: 100%;
}

body {
    background-color: #07130b;
    background-image: url("../images/hintergrund-yvette-gruen-gold.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: var(--color-white);
}


/* Hauptcontainer */

.container {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );

    margin-inline: auto;
}


/* Hauptbereich */

.site-main {
    width: 100%;
}


/* Alle Bereiche */

section {
    position: relative;
    width: 100%;
    padding-block: var(--section-spacing);
}