/* ========================================
   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;

    }

}
/* ========================================
   YOGA ZEITEN
======================================== */

.yoga-zeiten {
    max-width: 520px;
    margin: 40px auto;
    padding: 20px 30px;

    border-top: 1px solid rgba(84, 45, 24, 0.30);
    border-bottom: 1px solid rgba(84, 45, 24, 0.30);
}

.yoga-zeit {
    display: flex;
    justify-content: space-between;
    gap: 30px;

    padding: 16px 0;

    border-bottom: 1px dashed rgba(84, 45, 24, 0.20);

    font-size: 18px;
}

.yoga-zeit:last-child {
    border-bottom: none;
}

.yoga-zeit strong {
    color: var(--braun);
}

/* ========================================
   SPEISEKARTE – EINHEITLICHE PREISE
======================================== */

.menu-liste {
    max-width: 760px;
    margin: 35px auto 50px;
}

.menu-zeile {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 30px;

    padding: 14px 0;

    border-bottom:
        1px dashed
        rgba(84, 45, 24, 0.18);

    font-size: 18px;
}

.menu-zeile span:first-child {
    text-align: left;
}

.menu-zeile span:last-child {
    text-align: right;
    white-space: nowrap;

    min-width: 90px;

    font-weight: bold;
    color: var(--braun);
}

.menu-untertitel {
    max-width: 760px;
    margin: 45px auto 5px;

    text-align: left;

    color: var(--braun);
    font-size: 26px;
    font-weight: normal;
}

.menu-info {
    max-width: 760px;
    margin: 0 auto 15px;

    text-align: left;
    font-size: 15px;
    font-style: italic;

    color: #6c5c50;
}


/* auf kleinen Handys */

@media (max-width: 550px) {

    .menu-zeile {
        gap: 15px;
        font-size: 16px;
    }

    .menu-zeile span:last-child {
        min-width: 72px;
    }

}
.gruppen-titel {
    margin-top: 20px;
    padding-bottom: 6px;

    border-bottom: none;

    font-size: 20px;
    font-weight: bold;

    color: var(--braun);
}

.gruppen-titel span:first-child {
    text-align: left;
}

.unterpunkt {
    padding-left: 18px;
}

.unterpunkt span:first-child {
    color: #6c5c50;
}
.gruppen-titel {
    margin-top: 20px;
    padding-bottom: 6px;

    border-bottom: none;

    font-size: 20px;
    font-weight: bold;

    color: var(--braun);
}

.gruppen-titel span:first-child {
    text-align: left;
}

.unterpunkt {
    padding-left: 18px;
}

/* Unterpunkte wieder normal dunkel */
.unterpunkt span:first-child {
    color: var(--text);
}

/* Beschreibung bei normalen Waffeln */
.menu-zeile small {
    display: inline-block;
    margin-top: 4px;

    font-size: 14px;
    line-height: 1.5;

    color: #6c5c50;
}

/* ========================================
   WAFFELKARTE
======================================== */

.waffel-gruppe {
    max-width: 760px;
    margin: 55px auto 0;
}

.waffel-ueberschrift {
    margin: 0 0 18px;

    text-align: left;

    color: var(--braun);

    font-size: 28px;
    font-weight: normal;
}

.waffel-liste {
    width: 100%;
}

.waffel-zeile {
    display: grid;

    grid-template-columns: minmax(0, 1fr) 100px;

    align-items: start;

    gap: 30px;

    width: 100%;

    padding: 16px 0;

    border-bottom:
        1px dashed
        rgba(84, 45, 24, 0.18);
}

.waffel-info {
    text-align: left;

    color: var(--text);

    font-size: 18px;
    line-height: 1.5;
}

.waffel-info strong {
    display: block;

    color: var(--braun);

    font-size: 19px;
    font-weight: normal;
}

.waffel-info small {
    display: block;

    margin-top: 4px;

    color: #6c5c50;

    font-size: 14px;
    line-height: 1.5;
}

.waffel-preis {
    text-align: right;

    white-space: nowrap;

    color: var(--braun);

    font-size: 18px;
    font-weight: bold;
}


/* Lieblingswaffel */

.waffel-untergruppe {
    margin: 18px 0;
}

.waffel-untergruppe-titel {
    padding: 12px 0 6px;

    text-align: left;

    color: var(--braun);

    font-size: 20px;
    font-weight: bold;
}

.waffel-variante {
    padding-left: 18px;
}

.waffel-variante .waffel-info {
    color: var(--text);
}


/* Handy */

@media (max-width: 550px) {

    .waffel-zeile {
        grid-template-columns: minmax(0, 1fr) 75px;

        gap: 15px;

        padding: 14px 0;
    }

    .waffel-info {
        font-size: 16px;
    }

    .waffel-info strong {
        font-size: 17px;
    }

    .waffel-info small {
        font-size: 13px;
    }

    .waffel-preis {
        font-size: 16px;
    }

    .waffel-variante {
        padding-left: 12px;
    }

}

/* ========================================
   EIERKARTE
======================================== */

.eier-liste {
    width: 100%;
    max-width: 760px;
    margin: 35px auto 0;
}

.eier-zeile {
    display: grid;

    grid-template-columns: minmax(0, 1fr) 100px;

    align-items: start;

    gap: 30px;

    width: 100%;

    padding: 16px 0;

    border-bottom:
        1px dashed
        rgba(84, 45, 24, 0.18);
}

.eier-info {
    text-align: left;

    color: var(--text);

    font-size: 18px;
    line-height: 1.5;
}

.eier-info strong {
    display: block;

    color: var(--braun);

    font-size: 19px;
    font-weight: normal;
}

.eier-info small {
    display: block;

    margin-top: 4px;

    color: #6c5c50;

    font-size: 14px;
    line-height: 1.5;
}

.eier-preis {
    text-align: right;

    white-space: nowrap;

    color: var(--braun);

    font-size: 18px;
    font-weight: bold;
}

.eier-hinweis {
    max-width: 760px;

    margin: 20px auto 35px;

    color: #6c5c50;

    font-size: 16px;
    line-height: 1.7;
    font-style: italic;
}


/* Handy */

@media (max-width: 550px) {

    .eier-zeile {
        grid-template-columns: minmax(0, 1fr) 75px;

        gap: 15px;
    }

    .eier-info {
        font-size: 16px;
    }

    .eier-info strong {
        font-size: 17px;
    }

    .eier-preis {
        font-size: 16px;
    }

}

/* ========================================
   GETRÄNKEKARTE
   gleicher Stil wie Waffeln & Eier
======================================== */

.getraenke-liste {
    width: 100%;
    max-width: 760px;

    margin: 35px auto 50px;
}


/* einzelne Getränkereihe */

.getraenke-zeile {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 100px;

    align-items: start;

    gap: 30px;

    width: 100%;

    padding: 16px 0;

    border-bottom:
        1px dashed
        rgba(84, 45, 24, 0.18);
}


/* Getränkename */

.getraenke-info {
    text-align: left;

    color: var(--text);

    font-size: 18px;
    line-height: 1.5;
}


.getraenke-info strong {
    display: block;

    color: var(--braun);

    font-size: 19px;

    /* genauso wie Waffel- und Eierkarte */
    font-weight: normal;
}


/* z.B. 0,25 l */

.getraenke-info small {
    display: block;

    margin-top: 3px;

    color: #6c5c50;

    font-size: 14px;
    line-height: 1.5;
}


/* Preise */

.getraenke-preis {
    text-align: right;

    white-space: nowrap;

    color: var(--braun);

    font-size: 18px;

    font-weight: bold;
}


/* Unterbereiche Bier / Wein usw. */

.getraenke-gruppe {
    width: 100%;
    max-width: 760px;

    margin: 55px auto 0;
}


.getraenke-gruppe .getraenke-liste {
    margin-top: 20px;
}


.getraenke-ueberschrift {
    margin: 0 0 5px;

    text-align: left;

    color: var(--braun);

    font-size: 28px;

    font-weight: normal;
}


.getraenke-hinweis {
    margin: 0 0 15px;

    text-align: left;

    color: #6c5c50;

    font-size: 14px;

    font-style: italic;
}


/* ========================================
   GETRÄNKE AUF DEM HANDY
======================================== */

@media (max-width: 550px) {

    .getraenke-zeile {
        grid-template-columns:
            minmax(0, 1fr) 75px;

        gap: 15px;

        padding: 14px 0;
    }


    .getraenke-info {
        font-size: 16px;
    }


    .getraenke-info strong {
        font-size: 17px;
    }


    .getraenke-info small {
        font-size: 13px;
    }


    .getraenke-preis {
        font-size: 16px;
    }


    .getraenke-ueberschrift {
        font-size: 24px;
    }

}

/* ========================================
   FRÜHSTÜCK & BRUNCH
======================================== */

.fruehstueck-info {
    width: 100%;
    max-width: 760px;

    margin: 40px auto 0;
}

.fruehstueck-zeile {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: start;

    gap: 30px;

    padding: 18px 0;

    border-bottom:
        1px dashed
        rgba(84, 45, 24, 0.18);

    text-align: left;
}

.fruehstueck-zeile strong {
    display: block;

    color: var(--braun);

    font-size: 19px;
    font-weight: normal;
}

.fruehstueck-zeile small {
    display: block;

    margin-top: 5px;

    color: #6c5c50;

    font-size: 14px;
    line-height: 1.6;
}

.fruehstueck-preis {
    text-align: right;

    white-space: nowrap;

    color: var(--braun);

    font-size: 18px;
    font-weight: bold;
}

@media (max-width: 550px) {

    .fruehstueck-zeile {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .fruehstueck-preis {
        text-align: left;
    }

}

/* ========================================
   TO-GO KARTE
======================================== */

.togo-liste {
    width: 100%;
    max-width: 760px;

    margin: 40px auto 0;
}

.togo-zeile {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 100px;

    align-items: start;

    gap: 30px;

    width: 100%;

    padding: 16px 0;

    border-bottom:
        1px dashed
        rgba(84, 45, 24, 0.18);
}

.togo-info {
    text-align: left;

    color: var(--text);

    font-size: 18px;
    line-height: 1.5;
}

.togo-info strong {
    display: block;

    color: var(--braun);

    font-size: 19px;
    font-weight: normal;
}

.togo-preis {
    text-align: right;

    white-space: nowrap;

    color: var(--braun);

    font-size: 18px;
    font-weight: bold;
}

@media (max-width: 550px) {

    .togo-zeile {
        grid-template-columns:
            minmax(0, 1fr) 75px;

        gap: 15px;

        padding: 14px 0;
    }

    .togo-info {
        font-size: 16px;
    }

    .togo-info strong {
        font-size: 17px;
    }

    .togo-preis {
        font-size: 16px;
    }
}

/* ========================================
   ABWECHSELNDE HINTERGRUNDFARBEN
======================================== */

.bereich {
    background-color: var(--creme);
}

.bereich.papier-dunkel {
    background-color: var(--creme-dunkel);
}

/* ========================================
   SEITENRÄNDER ENTFERNEN
======================================== */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

main {
    width: 100%;
    margin: 0;
    padding: 0;
}

section {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

.bereich {
    width: 100%;
    max-width: none;
}

/* ========================================
   SEITENRÄNDER ENTFERNEN
======================================== */

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

main {
    width: 100%;
    margin: 0;
    padding: 0;
}

section {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

.bereich {
    width: 100%;
    max-width: none;
}

/* ========================================
   HINTERGRÜNDE IMMER ÜBER DIE GANZE BREITE
======================================== */

body {
    margin: 0 !important;
    padding: 0 !important;
}

main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bereich,
.hero,
.highlights,
.reservieren,
footer {
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    box-sizing: border-box;
}

.bereich {
    background-color: var(--creme) !important;
}

.bereich.papier-dunkel {
    background-color: var(--creme-dunkel) !important;
}

/* ========================================
   TO-GO AUSRICHTUNG FIX
======================================== */

.togo-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px;
    align-items: start;

    gap: 20px;

    width: 100%;
}

.togo-info {
    text-align: left;
    min-width: 0;
}

.togo-info strong {
    display: block;
    width: 100%;
}

.togo-preis {
    text-align: right;
    white-space: nowrap;

    width: 90px;
}

/* ========================================
   TO-GO KARTE - SAUBERE AUSRICHTUNG
======================================== */

.togo-liste {
    width: 100%;
    max-width: 760px;
    margin: 40px auto 0;
}

.togo-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    align-items: start;

    gap: 30px;
    width: 100%;

    padding: 16px 0;

    border-bottom:
        1px dashed
        rgba(84, 45, 24, 0.18);
}

.togo-info {
    min-width: 0;

    text-align: left;

    color: var(--text);

    font-size: 18px;
    line-height: 1.5;
}

.togo-info strong {
    display: block;

    color: var(--braun);

    font-size: 19px;
    font-weight: normal;
}

.togo-preis {
    width: 100px;

    text-align: right;

    white-space: nowrap;

    color: var(--braun);

    font-size: 18px;
    font-weight: bold;
}


/* Handy */

@media (max-width: 550px) {

    .togo-zeile {
        grid-template-columns: minmax(0, 1fr) 75px;

        gap: 15px;

        padding: 14px 0;
    }

    .togo-info {
        font-size: 16px;
    }

    .togo-info strong {
        font-size: 17px;
    }

    .togo-preis {
        width: 75px;

        font-size: 16px;
    }

}

/* ========================================
   IMPRESSUM
======================================== */

.impressum-text {
    width: 100%;
    max-width: 760px;

    margin: 45px auto 0;

    text-align: left;
}

.impressum-text h3 {
    margin-top: 35px;
    margin-bottom: 10px;

    color: var(--braun);

    font-size: 22px;
    font-weight: normal;
}

.impressum-text p {
    font-size: 17px;
    line-height: 1.7;
}

.impressum-text a {
    color: var(--braun);
}

.waffel-zeit {
    margin: -10px auto 25px;

    color: var(--braun-mittel);

    font-size: 16px;
    line-height: 1.6;
    font-style: italic;

    text-align: center;
}

/* ========================================
   SPATZENNEST-FRÜHSTÜCK
======================================== */

.fruehstueck-angebot {
    width: 100%;
    max-width: 760px;

    margin: 40px auto 0;
}

.fruehstueck-kopf {
    padding: 18px 0;

    text-align: left;

    border-bottom:
        1px dashed
        rgba(84, 45, 24, 0.18);
}

.fruehstueck-kopf strong {
    display: block;

    color: var(--braun);

    font-size: 21px;
    font-weight: normal;
}

.fruehstueck-kopf small {
    display: block;

    margin-top: 6px;

    color: #6c5c50;

    font-size: 14px;
    line-height: 1.6;
}

.fruehstueck-preiszeile,
.fruehstueck-extra {
    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    gap: 30px;

    padding: 14px 0;

    border-bottom:
        1px dashed
        rgba(84, 45, 24, 0.18);

    font-size: 18px;
}

.fruehstueck-preiszeile span,
.fruehstueck-extra span {
    text-align: left;
}

.fruehstueck-preiszeile strong,
.fruehstueck-extra strong {
    text-align: right;

    white-space: nowrap;

    color: var(--braun);
}

.fruehstueck-extra {
    margin-top: 8px;

    font-size: 16px;
}

@media (max-width: 550px) {

    .fruehstueck-preiszeile,
    .fruehstueck-extra {
        grid-template-columns: 1fr;

        gap: 5px;
    }

    .fruehstueck-preiszeile strong,
    .fruehstueck-extra strong {
        text-align: left;
    }

}

/* ========================================
   HOTDOGS
======================================== */

.hotdog-liste {
    width: 100%;
    max-width: 760px;

    margin: 40px auto 0;
}

.hotdog-zeile {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 100px;

    align-items: start;

    gap: 30px;

    width: 100%;

    padding: 16px 0;

    border-bottom:
        1px dashed
        rgba(84, 45, 24, 0.18);
}

.hotdog-info {
    text-align: left;

    color: var(--text);

    font-size: 18px;
    line-height: 1.5;
}

.hotdog-info strong {
    display: block;

    color: var(--braun);

    font-size: 19px;
    font-weight: normal;
}

.hotdog-info small {
    display: block;

    margin-top: 4px;

    color: #6c5c50;

    font-size: 14px;
    line-height: 1.5;
}

.hotdog-preis {
    text-align: right;

    white-space: nowrap;

    color: var(--braun);

    font-size: 18px;
    font-weight: bold;
}


/* Handy */

@media (max-width: 550px) {

    .hotdog-zeile {
        grid-template-columns:
            minmax(0, 1fr) 75px;

        gap: 15px;
    }

    .hotdog-info {
        font-size: 16px;
    }

    .hotdog-info strong {
        font-size: 17px;
    }

    .hotdog-preis {
        font-size: 16px;
    }

}

/* ========================================
   PARTNER
======================================== */

.partner-einleitung {
    max-width: 760px;
    margin: 25px auto 0;

    font-size: 18px;
    line-height: 1.8;

    color: var(--text);
}

.partner-liste {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 30px;
}

.partner-karte {
    padding: 30px;

    background:
        rgba(255, 255, 255, 0.25);

    border:
        1px solid
        rgba(84, 45, 24, 0.15);

    text-align: center;

    box-sizing: border-box;
}

.partner-karte h3 {
    margin-top: 0;
    margin-bottom: 15px;

    color: var(--braun);

    font-size: 24px;
    font-weight: normal;
}

.partner-karte p {
    margin-bottom: 25px;

    color: var(--text);

    font-size: 16px;
    line-height: 1.7;
}


/* Handy */

@media (max-width: 550px) {

    .partner-liste {
        grid-template-columns: 1fr;
    }

    .partner-karte {
        padding: 24px 20px;
    }

}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 30px;

    padding: 30px 50px;

    box-sizing: border-box;
}

.footer-linksbereich {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    align-items: center;
}

.footer-linksbereich a {
    text-decoration: none;
}

.footer-adresse {
    text-align: right;
    line-height: 1.6;
}


/* Handy */

@media (max-width: 700px) {

    footer {
        flex-direction: column;
        align-items: center;

        padding: 25px 20px;

        text-align: center;
    }

    .footer-linksbereich {
        justify-content: center;
    }

    .footer-adresse {
        text-align: center;
    }

}