/* ========================================
   SPATZENNEST
   KOMPLETTES DESIGN
======================================== */


/* ---------- FARBEN ---------- */

:root {

    --creme: #f2e6cf;

    --creme-hell: #f8f0df;

    --creme-dunkel: #e5d3b5;

    --braun: #542d18;

    --braun-mittel: #765038;

    --braun-hell: #a88768;

    --oliv: #77745a;

    --text: #3d2a1d;

}


/* ---------- GRUNDEINSTELLUNGEN ---------- */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    color: var(--text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;


    /*
       HINTERGRUND / PAPIERSTRUKTUR
    */

    background-color: var(--creme);


    background-image:

        radial-gradient(
            circle at 10% 20%,
            rgba(84, 45, 24, 0.035),
            transparent 25%
        ),

        radial-gradient(
            circle at 85% 40%,
            rgba(119, 116, 90, 0.04),
            transparent 22%
        ),

        repeating-linear-gradient(
            0deg,
            rgba(84, 45, 24, 0.015) 0px,
            rgba(84, 45, 24, 0.015) 1px,
            transparent 1px,
            transparent 4px
        );

}


/* ---------- HEADER ---------- */

header {

    position: relative;

    text-align: center;

    padding:

        28px
        30px
        18px;


    background:

        rgba(
            248,
            240,
            223,
            0.95
        );


    border-bottom:

        1px solid
        rgba(
            84,
            45,
            24,
            0.20
        );

}


/* ---------- LOGO PLATZHALTER ---------- */

.logo {

    display: flex;

    flex-direction: column;

    align-items: center;

    color: var(--braun);

}


/* ========================================
   ECHTES SPATZENNEST-LOGO
======================================== */

.logo-bereich {
    display: block;
    width: fit-content;
    margin: 0 auto;
    text-decoration: none;
}

.echtes-logo {
    display: block;

    width: 420px;
    max-width: 75vw;
    height: auto;

    margin: 0 auto;

    /* wichtig: kein Rahmen / kein Hintergrund */
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}


/* Logo auf dem Handy kleiner */

@media (max-width: 550px) {

    .echtes-logo {
        width: 280px;
        max-width: 85vw;
    }

}


/* ---------- NAVIGATION ---------- */

nav {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 22px;

}


nav a {

    color: var(--text);

    text-decoration: none;

    font-size: 15px;

    padding:

        6px
        0;

    transition: 0.2s;

}


nav a:hover {

    color: var(--braun);

}


.nav-button {

    background: var(--braun);

    color: var(--creme-hell);

    padding:

        11px
        19px;

    border-radius: 30px;

}


.nav-button:hover {

    color: white;

    background: var(--braun-mittel);

}


/* ========================================
   STARTSEITE
======================================== */

.hero {

    position: relative;

    min-height: 670px;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    padding:

        80px
        25px;


    background:

        radial-gradient(
            circle at 0% 0%,
            rgba(119, 116, 90, 0.13),
            transparent 30%
        ),

        radial-gradient(
            circle at 100% 100%,
            rgba(84, 45, 24, 0.10),
            transparent 30%
        );

}


/* Blätter / Zweige */

.zweig {

    position: absolute;

    color:

        rgba(
            119,
            116,
            90,
            0.35
        );

    font-size: 140px;

    user-select: none;

}


.zweig-links {

    top: 40px;

    left: -20px;

    transform:

        rotate(
            -25deg
        );

}


.zweig-rechts {

    right: -20px;

    bottom: 30px;

    transform:

        rotate(
            150deg
        );

}


/* Hero Inhalt */

.hero-inhalt {

    position: relative;

    z-index: 2;

    max-width: 900px;

    text-align: center;

}


.kleine-ueberschrift {

    margin-bottom: 18px;

    color: var(--oliv);

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 5px;

}


h1 {

    margin:

        10px
        0
        25px;

    color: var(--braun);

    font-size:

        clamp(
            55px,
            8vw,
            105px
        );

    font-weight: normal;

    line-height: 0.95;

}


.trennlinie {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 13px;

    margin:

        20px
        auto;

}


.trennlinie span {

    width: 90px;

    height: 1px;

    background:

        rgba(
            84,
            45,
            24,
            0.45
        );

}


.trennlinie b {

    color: var(--braun);

}


.hero-text {

    margin-top: 35px;

    margin-bottom: 10px;

    font-size: 28px;

    font-style: italic;

    color: var(--braun);

}


.hero-beschreibung {

    max-width: 600px;

    margin:

        0
        auto;

    font-size: 19px;

    line-height: 1.6;

}


.hero-buttons {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 32px;

}


/* ---------- BUTTONS ---------- */

.button {

    display: inline-block;

    padding:

        14px
        25px;

    border:

        1px solid
        var(--braun);

    border-radius: 30px;

    background: var(--braun);

    color: var(--creme-hell);

    text-decoration: none;

    transition: 0.2s;

}


.button:hover {

    transform:

        translateY(
            -2px
        );

    background:

        var(--braun-mittel);

}


.button-hell {

    background: transparent;

    color: var(--braun);

}


.button-hell:hover {

    color: white;

}


/* ========================================
   HIGHLIGHTS
======================================== */

.highlights {

    padding:

        95px
        8%;

    text-align: center;

    background:

        rgba(
            248,
            240,
            223,
            0.65
        );

}


h2 {

    margin:

        5px
        0
        30px;

    color: var(--braun);

    font-size:

        clamp(
            42px,
            5vw,
            65px
        );

    font-weight: normal;

}


.karten {

    display: grid;

    grid-template-columns:

        repeat(
            3,
            1fr
        );

    max-width: 1100px;

    margin:

        55px
        auto
        0;

}


.karte {

    padding:

        25px
        45px;

    border-right:

        1px solid
        rgba(
            84,
            45,
            24,
            0.20
        );

}


.karte:last-child {

    border-right: none;

}


.symbol {

    margin-bottom: 20px;

    color: var(--braun);

    font-size: 35px;

}


.karte h3 {

    margin-bottom: 15px;

    color: var(--braun);

    font-size: 27px;

    font-weight: normal;

}


.karte p {

    min-height: 90px;

    line-height: 1.6;

}


.karte a {

    color: var(--braun);

    text-decoration: none;

    border-bottom:

        1px solid
        rgba(
            84,
            45,
            24,
            0.40
        );

}


/* ========================================
   ALLGEMEINE BEREICHE
======================================== */

.bereich {

    padding:

        105px
        10%;

    text-align: center;

}


.papier-dunkel {

    background:

        rgba(
            229,
            211,
            181,
            0.60
        );

}


.bereich > p {

    max-width: 760px;

    margin:

        15px
        auto;

    font-size: 18px;

    line-height: 1.7;

}


.grosser-text {

    color: var(--braun);

    font-size:

        23px !important;

}


.handschrift {

    margin-top:

        35px !important;

    color: var(--braun-mittel);

    font-size:

        30px !important;

    font-style: italic;

}


/* ========================================
   ÖFFNUNGSZEITEN
======================================== */

.zeiten {

    max-width: 720px;

    margin:

        45px
        auto;

    padding:

        20px
        35px;

    border-top:

        1px solid
        rgba(
            84,
            45,
            24,
            0.30
        );

    border-bottom:

        1px solid
        rgba(
            84,
            45,
            24,
            0.30
        );

}


.zeit {

    display: flex;

    justify-content: space-between;

    gap: 30px;

    padding:

        18px
        0;

    border-bottom:

        1px dashed
        rgba(
            84,
            45,
            24,
            0.20
        );

    text-align: left;

}


.zeit:last-child {

    border-bottom: none;

}


.zeit strong {

    text-align: right;

}


.hinweis {

    color: #6c5c50;

    font-size:

        14px !important;

}


/* ========================================
   EVENTS
======================================== */

.event-box {

    max-width: 600px;

    margin:

        40px
        auto;

    padding:

        25px
        35px;

    text-align: left;

    border-top:

        1px solid
        rgba(
            84,
            45,
            24,
            0.25
        );

    border-bottom:

        1px solid
        rgba(
            84,
            45,
            24,
            0.25
        );

}


.event-box p {

    margin:

        14px
        0;

    font-size: 18px;

}


/* ========================================
   RESERVIERUNG
======================================== */

.reservieren {

    padding:

        90px
        20px;

    text-align: center;

    color: var(--creme-hell);

    background: var(--braun);

}


.reservieren h2 {

    color: var(--creme-hell);

}


.reservieren p {

    max-width: 650px;

    margin:

        15px
        auto;

    font-size: 18px;

    line-height: 1.6;

}


.hell {

    color: var(--creme-dunkel);

}


.button-beige {

    margin-top: 25px;

    color: var(--braun);

    background: var(--creme);

    border-color: var(--creme);

}


.button-beige:hover {

    color: var(--braun);

    background: var(--creme-hell);

}


/* ========================================
   KONTAKT
======================================== */

.kontakt a {

    color: var(--braun);

    font-weight: bold;

}


/* ========================================
   FOOTER
======================================== */

footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    padding:

        45px
        7%;

    color: var(--text);

    background: var(--creme-hell);

    border-top:

        1px solid
        rgba(
            84,
            45,
            24,
            0.20
        );

}


footer a {

    color: var(--braun);

}


/* ========================================
   HANDY / TABLET
======================================== */

@media (max-width: 850px) {


    nav {

        gap: 14px;

    }


    .hero {

        min-height: 600px;

    }


    .zweig {

        font-size: 90px;

    }


    .karten {

        grid-template-columns: 1fr;

    }


    .karte {

        max-width: 550px;

        margin: auto;

        border-right: none;

        border-bottom:

            1px solid
            rgba(
                84,
                45,
                24,
                0.20
            );

        padding:

            40px
            20px;

    }


    .karte:last-child {

        border-bottom: none;

    }


    .karte p {

        min-height: auto;

    }


    footer {

        flex-direction: column;

        text-align: center;

    }

}


/* ========================================
   KLEINE HANDYS
======================================== */

@media (max-width: 550px) {


    header {

        padding:

            22px
            15px;

    }


    .logo-gross {

        font-size: 39px;

    }


    nav {

        gap:

            10px
            16px;

    }


    nav a {

        font-size: 13px;

    }


    .hero {

        padding:

            65px
            20px;

    }


    .kleine-ueberschrift {

        letter-spacing: 3px;

    }


    .hero-text {

        font-size: 23px;

    }


    .zeit {

        flex-direction: column;

        gap: 8px;

    }


    .zeit strong {

        text-align: left;

    }


    .bereich {

        padding:

            80px
            25px;

    }

}