/* ============================================================
   Villa 39 — Platzhalterseite ("Bald mehr zu sehen")
   ============================================================ */

:root {
    --paper: #F1ECDD;
    --ink: #1C1B18;
    --riso-red: #E7412D;
    --riso-blue: #1D4C8C;
    --riso-yellow: #F2C230;
}

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

body {
    font-family: "IBM Plex Mono", monospace;
}

h1 {
    font-family: "Archivo Black", sans-serif;
    text-transform: uppercase;
}

.hero {
    height: 100vh;
    background:
        linear-gradient(rgba(231, 65, 45, .32), rgba(28, 27, 24, .68)),
        url("images/hero.jpg");
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 15%;
    padding-right: 8%;
    color: var(--paper);
}

.hero-content {
    max-width: 620px;
    text-align: left;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: .8rem;
    margin-bottom: 10px;
    opacity: .85;
    color: var(--riso-yellow);
}

.hero h1 {
    font-size: clamp(3.2rem, 8vw, 4.9rem);
    line-height: 1;
    margin-bottom: 16px;
    color: var(--paper);
    text-shadow: 4px 4px 0 var(--riso-red), -2px -2px 0 var(--riso-blue);
}

.subtitle {
    font-size: 1.15rem;
    max-width: 480px;
    margin-bottom: 40px;
}

.placeholder-note {
    font-size: 1rem;
    opacity: .85;
}

@media (max-width: 800px) {

    .hero {
        padding-left: 8%;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

}