/* ============================================================ */
/* base.css */
/* ============================================================ */

:root {
    --background: #f3f4f6;
    --surface: #ffffff;
    --surface-secondary: #f8f9fa;

    --text: #222222;
    --text-muted: #666666;

    --border: #dddddd;

    --primary: #2f6f4e;
    --primary-dark: #24583e;
    --primary-text: #ffffff;

    --success-background: #edf8f1;
    --success-border: #9bc9aa;

    --error-background: #fff1f1;
    --error-border: #d9a0a0;

    --sidebar-width: 240px;
}


* {
    box-sizing: border-box;
}


html {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-text-size-adjust: 100%;
}


body {
    margin: 0;

    min-width: 320px;

    background: var(--background);

    color: var(--text);
}


a {
    color: var(--primary);
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    touch-action: manipulation;
}


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


.app {
    min-height: 100vh;
}

/* ============================================================ */
/* layout.css */
/* ============================================================ */

/*
 * ============================================================
 * Kopfbereich
 * ============================================================
 */

.topbar {
    min-height: 72px;

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

    gap: 20px;

    padding: 12px 24px;

    background: var(--surface);

    border-bottom:
        1px solid
        var(--border);
}


.topbar__brand {
    min-width: 0;
}


.topbar__restaurant {
    font-size: 1.3rem;
    font-weight: bold;

    overflow-wrap: anywhere;
}


.topbar__slogan {
    margin-top: 4px;

    font-size: 0.9rem;

    color: var(--text-muted);

    overflow-wrap: anywhere;
}


/*
 * ============================================================
 * Hauptlayout
 * ============================================================
 */

.layout {
    display: grid;

    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr);

    min-height:
        calc(100vh - 72px);
}


.content {
    width: 100%;

    min-width: 0;

    padding: 28px;
}


/*
 * ============================================================
 * Tablet
 * ============================================================
 */

@media (
    max-width: 900px
) {

    .content {
        padding: 24px 20px;
    }

}


/*
 * ============================================================
 * Smartphone / kleine Tablets
 * ============================================================
 */

@media (
    max-width: 700px
) {

    .topbar {
        min-height: 64px;

        padding:
            10px
            16px;
    }


    .layout {
        display: block;

        min-height:
            calc(100vh - 64px);
    }


    .content {
        padding:
            20px
            16px;
    }

}


/*
 * ============================================================
 * Sehr kleine Smartphones
 * ============================================================
 */

@media (
    max-width: 400px
) {

    .topbar__restaurant {
        font-size: 1.1rem;
    }


    .topbar__slogan {
        font-size: 0.8rem;
    }

}

/* ============================================================ */
/* navigation.css */
/* ============================================================ */

/*
 * ============================================================
 * Desktop-Navigation
 * ============================================================
 */

.sidebar {
    padding:
        20px
        12px;

    background: var(--surface);

    border-right:
        1px solid
        var(--border);
}


.sidebar__link {
    display: block;

    padding:
        12px
        14px;

    margin-bottom: 4px;

    color: var(--text);

    text-decoration: none;

    border-radius: 6px;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}


.sidebar__link:hover {
    background:
        var(--surface-secondary);
}


.sidebar__link:focus-visible {
    outline:
        2px solid
        var(--primary);

    outline-offset: 2px;
}


.sidebar__link--active {
    background: var(--primary);

    color: var(--primary-text);
}


/*
 * ============================================================
 * Menü-Button
 * ============================================================
 */

.menu-toggle {
    display: none;

    flex-shrink: 0;

    min-width: 44px;
    min-height: 44px;

    padding:
        8px
        12px;

    font-size: 1.35rem;

    background: var(--surface);

    color: var(--text);

    border:
        1px solid
        var(--border);

    border-radius: 7px;

    cursor: pointer;
}


.menu-toggle:hover {
    background:
        var(--surface-secondary);
}


.menu-toggle:focus-visible {
    outline:
        2px solid
        var(--primary);

    outline-offset: 2px;
}


/*
 * ============================================================
 * Smartphone / kleine Tablets
 * ============================================================
 */

@media (
    max-width: 700px
) {

    .menu-toggle {
        display: block;
    }


    .sidebar {
        display: none;

        padding:
            12px
            16px;

        border-right: 0;

        border-bottom:
            1px solid
            var(--border);
    }


    .sidebar.sidebar--open {
        display: block;
    }


    .sidebar__link {
        min-height: 44px;

        display: flex;
        align-items: center;

        margin-bottom: 3px;
    }

}

/* ============================================================ */
/* components.css */
/* ============================================================ */

/*
 * ============================================================
 * Seitenüberschrift
 * ============================================================
 */

.page-heading {
    margin-bottom: 24px;
}


.page-heading h1 {
    margin-top: 0;
    margin-bottom: 8px;
}


.page-heading p {
    margin-top: 0;
    margin-bottom: 0;

    color: var(--text-muted);

    line-height: 1.5;
}


/*
 * ============================================================
 * Allgemeine Karten
 * ============================================================
 */

.card {
    padding: 20px;

    background: var(--surface);

    border:
        1px solid
        var(--border);

    border-radius: 10px;
}


.card h2,
.card h3 {
    margin-top: 0;
}


.card p:last-child {
    margin-bottom: 0;
}


/*
 * ============================================================
 * Kartenraster
 * ============================================================
 */

.card-grid {
    display: grid;

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

    gap: 20px;
}


/*
 * ============================================================
 * Buttons
 * ============================================================
 */

.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        10px
        18px;

    border: 0;

    border-radius: 7px;

    font-weight: bold;

    text-decoration: none;

    cursor: pointer;

    touch-action: manipulation;
}


.button--primary {
    background: var(--primary);

    color: var(--primary-text);
}


.button--primary:hover {
    background:
        var(--primary-dark);
}


/*
 * ============================================================
 * Tablet
 * ============================================================
 */

@media (
    max-width: 1000px
) {

    .card-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/*
 * ============================================================
 * Smartphone
 * ============================================================
 */

@media (
    max-width: 700px
) {

    .card-grid {
        grid-template-columns:
            1fr;
    }


    .card {
        padding: 18px;
    }

}


/*
 * ============================================================
 * Kleine Smartphones
 * ============================================================
 */

@media (
    max-width: 500px
) {

    .button {
        width: 100%;
    }

}

/* ============================================================ */
/* forms.css */
/* ============================================================ */

/*
 * ============================================================
 * Restaurant Manager
 * Gemeinsame Formulare
 * ============================================================
 */


/*
 * ------------------------------------------------------------
 * Formular
 * ------------------------------------------------------------
 */

.form {
    width: 100%;
}


.form__section {
    margin-bottom: 28px;
}


.form__section:last-child {
    margin-bottom: 0;
}


.form__section-title {
    margin-top: 0;
    margin-bottom: 16px;
}


/*
 * ------------------------------------------------------------
 * Formularfelder
 * ------------------------------------------------------------
 */

.form-group {
    margin-bottom: 18px;
}


.form-group:last-child {
    margin-bottom: 0;
}


.form-label {
    display: block;

    margin-bottom: 7px;

    font-weight: bold;
}


.form-hint {
    display: block;

    margin-top: 6px;

    font-size: 0.875rem;

    line-height: 1.4;

    color: var(--text-muted);
}


/*
 * ------------------------------------------------------------
 * Eingabefelder
 * ------------------------------------------------------------
 */

.form-input,
.form-select,
.form-textarea {
    display: block;

    width: 100%;

    min-height: 44px;

    padding:
        10px
        12px;

    background:
        var(--surface);

    color:
        var(--text);

    border:
        1px solid
        var(--border);

    border-radius: 7px;

    outline: none;
}


.form-textarea {
    min-height: 140px;

    resize: vertical;

    line-height: 1.5;
}


.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color:
        var(--primary);

    box-shadow:
        0 0 0 2px
        rgba(
            47,
            111,
            78,
            0.15
        );
}


/*
 * ------------------------------------------------------------
 * Deaktivierte Felder
 * ------------------------------------------------------------
 */

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    cursor: not-allowed;

    opacity: 0.65;

    background:
        var(--surface-secondary);
}


/*
 * ------------------------------------------------------------
 * Checkboxen und Radio-Buttons
 * ------------------------------------------------------------
 */

.form-check {
    display: flex;

    align-items: flex-start;

    gap: 10px;
}


.form-check input {
    flex-shrink: 0;

    width: 18px;
    height: 18px;

    margin-top: 2px;
}


.form-check label {
    line-height: 1.4;

    cursor: pointer;
}


/*
 * ------------------------------------------------------------
 * Mehrere Felder nebeneinander
 *
 * Beispiel:
 *
 * Vorname | Nachname
 *
 * oder:
 *
 * E-Mail-Adresse | Telefonnummer
 * ------------------------------------------------------------
 */

.form-row {
    display: grid;

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

    gap:
        18px
        20px;

    margin-bottom: 18px;
}


.form-row .form-group {
    margin-bottom: 0;
}


/*
 * ------------------------------------------------------------
 * Drei Felder nebeneinander
 * ------------------------------------------------------------
 */

.form-row--three {
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );
}


/*
 * ------------------------------------------------------------
 * Formularaktionen
 * ------------------------------------------------------------
 */

.form-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 24px;
}


/*
 * ------------------------------------------------------------
 * Pflichtfeld-Markierung
 * ------------------------------------------------------------
 */

.form-required {
    font-weight: normal;
}


/*
 * ------------------------------------------------------------
 * Statusmeldungen
 * ------------------------------------------------------------
 */

.form-message {
    margin-bottom: 20px;

    padding:
        14px
        16px;

    border:
        1px solid
        var(--border);

    border-radius: 7px;

    line-height: 1.5;
}


.form-message--success {
    background:
        var(--success-background);

    border-color:
        var(--success-border);
}


.form-message--error {
    background:
        var(--error-background);

    border-color:
        var(--error-border);
}


/*
 * ------------------------------------------------------------
 * Fehler an einzelnen Formularfeldern
 * ------------------------------------------------------------
 */

.form-error {
    display: block;

    margin-top: 6px;

    font-size: 0.875rem;

    line-height: 1.4;
}


.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
    border-color:
        var(--error-border);
}


/*
 * ============================================================
 * Smartphone / kleine Tablets
 * ============================================================
 */

@media (
    max-width: 700px
) {

    /*
     * Doppel- und Dreifachblöcke werden auf kleinen
     * Bildschirmen automatisch untereinander dargestellt.
     */

    .form-row,
    .form-row--three {
        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .form-actions {
        align-items: stretch;

        flex-direction: column;
    }


    .form-actions .button {
        width: 100%;
    }

}

/* ============================================================ */
/* Modul: Menu */
/* ============================================================ */

/*
 * ============================================================
 * Menu-Modul
 * Öffentliche Speisekarte
 * ============================================================
 */


/*
 * ------------------------------------------------------------
 * Kategorie-Navigation
 * ------------------------------------------------------------
 */

.menu-category-tabs {
    display: flex;

    gap: 8px;

    margin-bottom: 24px;

    overflow-x: auto;

    padding-bottom: 6px;

    scrollbar-width: thin;
}


.menu-category-tab {
    flex-shrink: 0;

    min-height: 44px;

    padding:
        10px
        16px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        var(--surface);

    color:
        var(--text);

    font-weight:
        bold;

    cursor:
        pointer;

    touch-action:
        manipulation;
}


.menu-category-tab:hover {
    background:
        var(--surface-secondary);
}


.menu-category-tab:focus-visible {
    outline:
        2px solid
        var(--primary);

    outline-offset:
        2px;
}


.menu-category-tab--active {
    background:
        var(--primary);

    color:
        var(--primary-text);

    border-color:
        var(--primary);
}


/*
 * ------------------------------------------------------------
 * Kategorie-Seiten
 * ------------------------------------------------------------
 */

.menu-category-page {
    display: none;
}


.menu-category-page--active {
    display: block;
}


/*
 * ------------------------------------------------------------
 * Kategorie
 * ------------------------------------------------------------
 */

.menu-category {
    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    overflow:
        hidden;
}


.menu-category__header {
    padding:
        20px;

    background:
        var(--surface-secondary);

    border-bottom:
        1px solid
        var(--border);
}


.menu-category__header h2 {
    margin:
        0;
}


.menu-category__header p {
    margin:
        8px
        0
        0;

    color:
        var(--text-muted);
}


/*
 * ------------------------------------------------------------
 * Speisekartenpositionen
 * ------------------------------------------------------------
 */

.menu-list {
    display:
        grid;
}


.menu-item {
    padding:
        18px
        20px;

    border-bottom:
        1px solid
        var(--border);
}


.menu-item:last-child {
    border-bottom:
        0;
}


.menu-item__header {
    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;
}


.menu-item__name {
    flex-shrink:
        0;

    margin:
        0;

    font-size:
        1.05rem;
}


.menu-item__dots {
    flex:
        1;

    min-width:
        20px;

    border-bottom:
        2px dotted
        var(--text-muted);

    transform:
        translateY(-3px);
}


.menu-item__price {
    flex-shrink:
        0;

    min-width:
        75px;

    font-weight:
        bold;

    text-align:
        right;

    white-space:
        nowrap;
}


.menu-item__description {
    margin:
        6px
        0
        0;

    color:
        var(--text-muted);

    line-height:
        1.5;
}


/*
 * ------------------------------------------------------------
 * Beilagen
 * ------------------------------------------------------------
 */

.menu-item__side-dishes {
    margin-top:
        14px;

    padding-top:
        12px;

    border-top:
        1px dashed
        var(--border);
}


.menu-item__side-dishes-title {
    margin-bottom:
        8px;

    font-size:
        0.9rem;

    font-weight:
        bold;

    color:
        var(--text-muted);
}


.side-dish-list {
    display:
        grid;

    gap:
        6px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.side-dish-list__item {
    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

    font-size:
        0.92rem;
}


.side-dish-list__name {
    flex-shrink:
        0;
}


.side-dish-list__dots {
    flex:
        1;

    min-width:
        20px;

    border-bottom:
        1px dotted
        var(--text-muted);

    transform:
        translateY(-2px);
}


.side-dish-list__meta {
    flex-shrink:
        0;

    min-width:
        75px;

    text-align:
        right;

    white-space:
        nowrap;
}


.side-dish-badge {
    display:
        inline-block;

    margin-left:
        6px;

    padding:
        2px
        6px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        var(--surface-secondary);

    color:
        var(--text-muted);

    font-size:
        0.75rem;

    font-weight:
        normal;
}


/*
 * ============================================================
 * Smartphone
 * ============================================================
 */

@media (
    max-width: 500px
) {

    .menu-category-tabs {
        margin-right:
            -16px;

        margin-left:
            -16px;

        padding-right:
            16px;

        padding-left:
            16px;
    }


    .menu-category-tab {
        padding:
            9px
            14px;
    }


    .menu-category__header {
        padding:
            16px;
    }


    .menu-item {
        padding:
            16px;
    }


    .menu-item__header {
        gap:
            6px;
    }


    .menu-item__name {
        font-size:
            1rem;
    }


    .menu-item__price {
        min-width:
            65px;
    }


    .side-dish-list__item {
        font-size:
            0.88rem;
    }


    .side-dish-list__meta {
        min-width:
            65px;
    }

}

/* ============================================================ */
/* Modul: News */
/* ============================================================ */

/*
 * ============================================================
 * News-Modul
 * Öffentliche News
 * ============================================================
 */


.news-list {
    display:
        grid;

    gap:
        20px;

    max-width:
        1000px;
}


.news-post {
    padding:
        20px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        10px;
}


.news-post__header {
    margin-bottom:
        14px;

    line-height:
        1.5;
}


.news-post__teaser {
    margin:
        0
        0
        14px;

    color:
        var(--text-muted);

    font-weight:
        bold;

    line-height:
        1.5;
}


.news-post__content {
    line-height:
        1.6;
}


/*
 * ============================================================
 * Smartphone
 * ============================================================
 */

@media (
    max-width: 500px
) {

    .news-post {
        padding:
            16px;
    }

}

/* ============================================================ */
/* Modul: OpeningHours */
/* ============================================================ */

/*
 * ============================================================
 * OpeningHours-Modul
 * Öffentliche Öffnungszeiten
 * ============================================================
 */


.opening-hours {
    max-width:
        650px;

    background:
        var(--surface);

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    overflow:
        hidden;
}


.opening-hours__header {
    padding:
        20px;

    background:
        var(--surface-secondary);

    border-bottom:
        1px solid
        var(--border);
}


.opening-hours__header h2 {
    margin:
        0;
}


.opening-hours__list {
    display:
        grid;
}


.opening-hours__row {
    display:
        grid;

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

    gap:
        20px;

    padding:
        16px
        20px;

    border-bottom:
        1px solid
        var(--border);
}


.opening-hours__row:last-child {
    border-bottom:
        0;
}


.opening-hours__day {
    font-weight:
        bold;
}


.opening-hours__times {
    display:
        grid;

    gap:
        5px;
}


.opening-hours__time {
    white-space:
        nowrap;
}


.opening-hours__closed {
    color:
        var(--text-muted);
}


/*
 * ============================================================
 * Smartphone
 * ============================================================
 */

@media (
    max-width: 500px
) {

    .opening-hours__header {
        padding:
            16px;
    }


    .opening-hours__row {
        grid-template-columns:
            110px
            minmax(
                0,
                1fr
            );

        gap:
            12px;

        padding:
            14px
            16px;
    }

}


/*
 * ============================================================
 * Sehr kleine Smartphones
 * ============================================================
 */

@media (
    max-width: 400px
) {

    .opening-hours__row {
        grid-template-columns:
            100px
            minmax(
                0,
                1fr
            );

        gap:
            10px;
    }

}

/* ============================================================ */
/* Modul: Reviews */
/* ============================================================ */

/*
 * ============================================================
 * Reviews-Modul
 * Öffentliche Gästebewertung
 * ============================================================
 */


.review-form {
    max-width:
        900px;
}


.review-score-grid {
    display:
        grid;

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

    gap:
        18px
        20px;
}


.review-score-grid .form-group {
    margin-bottom:
        0;
}


/*
 * Honeypot gegen einfache Bots.
 *
 * Das Feld bleibt technisch im Formular,
 * ist für normale Benutzer jedoch unsichtbar.
 */

.form-honeypot {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

    clip-path:
        inset(
            50%
        );

    white-space:
        nowrap;
}


/*
 * ============================================================
 * Smartphone
 * ============================================================
 */

@media (
    max-width: 700px
) {

    .review-score-grid {
        grid-template-columns:
            1fr;
    }

}