@import url('https://fonts.googleapis.com/css2?family=family=Open+Sans:wght@400;700&display=swap');

.bold { font-weight: 700; }
.not-bold { font-weight: 300; }
.uc { text-transform: uppercase; }
.block { display: block; width: 100%; }
.sml { font-size: 1.1rem; }
.smlr { font-size: 1rem; }
.la { text-align: left; }
.f-box {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

/* FOOTER */
footer * { margin: 0; padding: 0; border: 0; }
footer {
    width: 100%;
    height: 32rem;
    color: #fff;
    background-color: #050505;
    position: relative;
    margin-top: 5rem;
}
footer h2, footer h3 {
    text-align: center;
    color: #fff;
}
footer h2 { font-size: 1.5rem; color: #e95610; }
footer h3 { font-size: 1.1rem; }
footer p, footer a { font-size: 0.8rem; color: #fff; }
footer div.header {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem 0 2rem 0;
}
footer div.header img {
    width: 2rem;
    height: auto;
    display: block;
    margin-right: 1rem;
}
div.footer-content-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 1rem 0 1rem;
}

div.footer-content-wrapper section { width: 12rem; padding-right: 1rem; }
div.footer-content-wrapper section:last-of-type { padding-right: 0; }

footer section h3, footer section p { text-align: left; }
footer section h3 { padding-bottom: 1.5rem; }
footer section p { font-size: 1rem; }

footer div.legal-notice {
    width: 100%;
    height: 3.75rem;
    padding-top: 1rem;
    position: absolute;
    bottom: 0;
    background-color: #000000;
}

footer div.legal-notice p, footer div.legal-notice p a {
    text-align: center;
    font-size: .85rem;
    padding-bottom: .5rem;
    color: #fff;
}

footer div.legal-notice p a:after {
    content: " | ";
}
footer div.legal-notice p a:last-of-type:after {
    content: "";
}

/* SPECIAL SECTIONS */
/* SHORT DESCRIPTION */
main section#short-description h2 {
    margin-bottom: 2rem;
}
main section#social-media div.social-media {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
main section#social-media div.social-media span { 
    width: 100%; 
    display: block; 
    text-align: center;
    margin-bottom: .5rem;
}
main section#social-media div.social-media a { font-size: 1.75rem; }
/* main section#social-media div.social-media a:first-of-type::after {
    content: "|";
    margin: 0 .75rem;
} */
main section#social-media div.social-media a:first-of-type::after:hover > span {
    color: #e95610;
}
/* MENU */
main section#menu .meal-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12rem;
    margin-bottom: 2rem;
}
main section#menu .meal-container img {
    width: 10rem;
    height: auto;
    border-radius: 50%;
    display: inline-block;
    margin-right: 2rem;
}
main section#menu .meal-container p {
    width: 70%;
}
main section#menu button.cta {
    margin-top: 4rem;
}
main section#menu a.menu-link {
    min-width: 30%;
    display: inline-block;
    color: #e95610;
    margin-top: 2rem;
    padding: .5rem 2rem .5rem 2rem;
    border: 3px solid rgba(1, 1, 1, 0);
    border-right: 2px solid #e95610;
}
main section#menu a.menu-link:last-of-type {
    border-right: none;
}
main section#menu a.menu-link:hover {
    text-decoration: underline;
}
main section#menu button a {
    color: white;
}
/* QUOTES */
main section#quotes p.quote {
    text-align: left;
    margin-bottom: 3rem;
}
main section#quotes p.quote span.content::before {
    content: "«";
    margin-right: .5rem;
}
main section#quotes p.quote span.content::after {
    content: "»";
    margin-left: .5rem;
}
/* KONTAKT */
main section#kontakt a {
    cursor: pointer;
    margin-right: 2rem;
    padding-bottom: 2rem;
    width: 7rem;
    height: 7rem;
}
main section#kontakt a:last-of-type {
    margin: 0;
}
main section#kontakt .f-box {
    max-width: 100%;
}
main section#kontakt .icon-container {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background-color: #111;
    margin-bottom: .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
main section#kontakt .icon-container svg {
    width: 3rem;
    height: auto;
}
main section#kontakt a:hover > span {
    border-bottom: 2px solid #111;
}
main section#kontakt p.bilder-note {
    margin-top: 5rem;
    
}