:root {
    --gold: #AA9458;
    --braun: #6D644B;
    --bgr: #F0EFEB;
    --bgr2: #E0DED7;
}

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
    font-family: 'Inter', normal;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bgr2);
}

.playfair {
    font-family: 'Playfair Display', italic;
}

article {
    width: 100%;
    min-height: 100vh;
    padding: 50px 20px;
}

/* ARTICLES: alle Inhalte einfliegen (direkte Kinder) */
article > * {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: var(--delay, 0ms);
}

article.visible > * {
  opacity: 1;
  transform: translateX(0);
}

section {
    width: 100%;
    padding: 50px 20px 0 20px;
    /* margin-bottom: -80px; */
}

.article-inner {
    width: 100%;
}


article h2 {
    font-size: 40px;
    font-weight: 200;
    font-style: italic;
    text-align: center;
    color: var(--braun);
    margin: 80px 0 40px 0;
}

p {
    font-size: 14px;
    color: var(--braun);
    font-weight: 300;
}

@media screen and (min-width: 400px) {
    article h2 {
        font-size: 44px;
    }
}

@media screen and (min-width: 768px) {
    article {
        padding: 50px;
    }

    section {
        padding: 50px 50px 0 50px;
    }
}

@media screen and (min-width: 1024px) {
    article {
        padding: 50px 100px;
    }

    section {
        padding: 50px 100px 0 100px;
    }
}

@media screen and (min-width: 1200px) {
    article {
        padding: 50px calc((100% - 1100px) / 2);
    }

    section {
        padding: 50px calc((100% - 1100px) / 2) 0 calc((100% - 1100px) / 2);
    }
}