.blauer-hintergrund {
    display: flex;
    background-color: #0dbd56;
    align-items: center;
}

.blauer-hintergrund a {
    padding: 0;
    margin: 0;
    line-height: 0;
}

.blauer-hintergrund h1 {
    flex-grow: 1;
    text-align: center;
    color: white;
}

h1 {
    font-size: 2.0em;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

h2 {
    font-size: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
}

p, ul {
    font-size: 1.2em;
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify
}

footer {
    font-size: 0.9em;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #0dbd56;
    text-align: justify;
    padding: 10px;
}

footer p {
    margin: 0;
    margin-top: 1em;
}

footer a {
    color: black;
    text-decoration: none;
}

body {
    background-color: #ded9d9;
}

.größe {
    font-size: 3.0em;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center
}

.liste table {
    width: 100%;
}

.liste table .menge select {
    width: 5em;
}

.liste table tbody tr:nth-child(odd) {
    background-color: #e7e6e6;
}


@media (min-width: 30em) {
    .liste {
        width: 60em;
        margin-top: 1.5em;
        margin-bottom: 1.5em
    }

    #lacher {
        display: grid;
        grid-template-columns: 40% 60%;
    }

    #lacher h2 {
        grid-column: 1 / -1;
    }
}

@media (min-width: 30em) {
    #weiner {
        display: grid;
        grid-template-columns: 70% 30%;
        margin-bottom: 4.5em;
    }

    #weiner h2 {
        grid-column: 1 / -1;
    }

    .liste table, table.preise {
        width: 75% !important;
    }
}


nav {
    margin-top: 1em;
    background-color: #0dbd56;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: block;
    width: 100%;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
}

@media (max-width: 425px) {
    nav ul li + li {
        border-left: 0;
        border-top: 3px solid #fff;
    }
}

nav ul li a {
    display: block;
    text-align: center;
    padding: .5em 1em;
    text-decoration: none;
    color: white;
}

nav ul li a.active,
nav ul li a:hover,
nav ul li a:active {
    background-color: #025902;
    color: white;
}

#angebot {
    margin-left: 2em;
}

#angebot .inner-angebot {
    background-color: #ff0000;
    padding: 1em;
    width: 10em;
    text-align: center;
}

#angebot .inner-angebot h3 {
    font-size: 2em;
    font-variant: small-caps;
    color: white;
}

#angebot .inner-angebot p {
    color: white;
    text-align: center;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: white;
}

.inner {
    padding-left: 20px;
    padding-right: 20px;
}

.rechts {
    color: black;
    font-size: 1.1em;
    text-align: right;
    font-family: sans-serif;
}

.liste table,
table.preise {
    border-spacing: 0;
    width: 100%;
}

.liste table thead tr th,
table.preise thead tr th {
    text-align: left;
}

.liste table tbody tr th,
.liste table tbody tr td,
table.preise tbody tr th,
table.preise tbody tr td {
    text-align: left;
}

.liste table thead tr th,
.liste table tbody tr th,
.liste table tbody tr td,
.liste table tfoot tr td,
table.preise thead tr th,
table.preise tbody tr th,
table.preise tbody tr td,
table.preise tfoot tr td {
    border: 1px solid #bbb9b9;
    padding: 5px;
    font-size: 1.1em;
}

.liste table thead tr th.rechts,
.liste table tbody tr td.rechts,
table.preise thead tr th.rechts,
table.preise tbody tr td.rechts {
    text-align: right;
}

@media (min-width: 30em) {
    #einsteigen {
        display: grid;
        grid-template-columns: 1fr 320px;
        margin-bottom: 2.5em;
    }

    #einsteigen h2 {
        grid-column: 1 / -1;
    }
}

#einsteiger {
    margin-left: 4.5em;
    padding: 10px;
    background-color: #83DEA0;
}

#einsteiger h3 {
    font-size: 2em;
    font-variant: small-caps;
    color: #004100;
    text-align: center;
}

#einsteiger p {
    color: #004100;
    text-align: center;
}

@media (min-width: 30em) {
    #teilen {
        display: grid;
        grid-template-columns: 1fr 260px;
        margin-bottom: 4.5em;
    }

    #teilen h2 {
        grid-column: 1 / -1;
    }
}

#teilnahme {
    padding: 10px;
    background-color: #83DEA0;
}

#teilnahme h3 {
    font-size: 2em;
    font-variant: small-caps;
    color: #004100;
    text-align: center;
}

#teilnahme p {
    color: #004100;
    text-align: center;
}


@media (max-width: 425px) {
    nav ul {
        display: block;
        padding: 0 1em;
    }

    img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .blauer-hintergrund {
        display: block;
        text-align: center;
    }

    .blauer-hintergrund > a img {
        margin: 0 auto;
    }

    .blauer-hintergrund > a:last-child {
        display: none;
    }
}

@media (max-width: 835px) {
    #einsteiger {
        display: none;
    }

    #einsteigen {
        display: block;
    }
}

button, .button {
    display: inline-block;
    margin: 1em auto;
    padding: .25em 0.5em;
    border: 2px solid white;
    border-radius: 0.5em;;
    font-size: 1.2em;
    transition: width 0.5s ease-in-out;
    color: black;
    background-color: #ffcc00;
    text-align: center;
    text-decoration: none;
}


@media (min-width: 30em) {
    button, .button {
        width: 20em;
    }
}

blockquote {
    font-style: italic;
    font-size: 1.5rem;
    text-align: center;
    background-color: #83DEA0;
    color: #004100;
    padding: 1em 1em;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}

blockquote span:before {
    content: '„';
}

blockquote span:after {
    content: '“';
}

blockquote span:before,
blockquote span:after {
    font-size: 2rem;
    font-weight: bold;
}