/* ============================================================ */
/* 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: Auth */
/* ============================================================ */

/*
 * ============================================================
 * Auth-Modul
 * Mitarbeiter-Login
 * ============================================================
 */


.auth-form {
    max-width:
        560px;
}


.auth-status {
    max-width:
        620px;
}


.auth-status h2 {
    margin-top:
        0;
}


/*
 * ------------------------------------------------------------
 * Anmeldedaten
 * ------------------------------------------------------------
 */

.auth-status__details {
    display:
        grid;

    gap:
        0;

    margin:
        20px
        0;
}


.auth-status__details > div {
    display:
        grid;

    grid-template-columns:
        minmax(
            120px,
            160px
        )
        1fr;

    gap:
        12px;

    padding:
        10px
        0;

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


.auth-status__details > div:first-child {
    border-top:
        1px solid
        var(--border);
}


.auth-status__details dt {
    font-weight:
        bold;

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


.auth-status__details dd {
    margin:
        0;

    font-weight:
        bold;
}


/*
 * ------------------------------------------------------------
 * Hinweis
 * ------------------------------------------------------------
 */

.auth-status__notice {
    margin:
        20px
        0;

    padding:
        12px
        14px;

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

    border-radius:
        8px;

    background:
        var(--surface-secondary);

    color:
        var(--text-muted);

    line-height:
        1.55;
}


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

@media (
    max-width: 500px
) {

    .auth-status__details > div {
        grid-template-columns:
            1fr;

        gap:
            4px;
    }

}

/* ============================================================ */
/* Modul: Contact */
/* ============================================================ */

/*
 * ============================================================
 * Contact-Modul
 * Öffentliches Kontaktformular
 * ============================================================
 */


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


/*
 * Freiwillige Felder
 */

.form-optional {
    margin-left:
        6px;

    font-size:
        0.875rem;

    font-weight:
        400;

    opacity:
        0.7;
}


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

/* ============================================================ */
/* Modul: Imprint */
/* ============================================================ */

/*
 * ============================================================
 * Imprint-Modul
 * Öffentliches Impressum
 * ============================================================
 */


.imprint-grid {
    display:
        grid;

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

    gap:
        22px;
}


.imprint-card {
    padding:
        22px;
}


.imprint-card--wide {
    grid-column:
        1
        /
        -1;
}


.imprint-card__title {
    margin:
        0
        0
        18px;
}


.imprint-card__content {
    display:
        grid;

    gap:
        10px;
}


.imprint-card__content p {
    margin:
        0;

    overflow-wrap:
        anywhere;

    line-height:
        1.6;
}


.imprint-card__label {
    font-weight:
        600;
}


.imprint-address {
    gap:
        4px;
}


.imprint-card a {
    overflow-wrap:
        anywhere;
}


.imprint-empty {
    max-width:
        900px;

    padding:
        22px;
}


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

@media (
    max-width: 700px
) {

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


    .imprint-card--wide {
        grid-column:
            auto;
    }

}

/* ============================================================ */
/* Modul: Jobs */
/* ============================================================ */

/*
 * ============================================================
 * Jobs-Modul
 * Stellenangebote und Bewerbungen
 * ============================================================
 */


.jobs-list {
    display:
        grid;

    gap:
        24px;
}


.job-posting {
    overflow:
        hidden;
}


.job-posting__header {
    padding:
        20px;

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );
}


.job-posting__title {
    margin:
        0;
}


.job-posting__employment-type {
    margin:
        8px
        0
        0;

    opacity:
        0.75;
}


.job-posting__content {
    padding:
        20px;
}


.job-posting__content h3 {
    margin-top:
        24px;

    margin-bottom:
        8px;
}


.job-posting__text {
    line-height:
        1.65;
}


.jobs-empty {
    max-width:
        900px;
}


.job-application-summary {
    max-width:
        900px;

    margin-bottom:
        24px;
}


.job-application-form {
    max-width:
        900px;
}


.job-form-grid {
    display:
        grid;

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

    gap:
        18px
        20px;
}


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


.form-optional {
    margin-left:
        6px;

    font-size:
        0.875rem;

    font-weight:
        400;

    opacity:
        0.7;
}


/*
 * Honeypot gegen einfache Bots
 */

.form-honeypot {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

    clip-path:
        inset(
            50%
        );

    white-space:
        nowrap;
}


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

@media (
    max-width: 700px
) {

    .job-form-grid {
        grid-template-columns:
            1fr;
    }

}

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


/*
 * ------------------------------------------------------------
 * Kennzeichnungs-Badges
 * ------------------------------------------------------------
 */

.menu-badge-group {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        10px;
}


.menu-badge-group--small {
    gap:
        5px;

    margin-top:
        5px;
}


.menu-badge {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        29px;

    max-width:
        100%;

    padding:
        4px
        10px;

    border:
        1px solid
        rgb(0 0 0 / 12%);

    border-radius:
        999px;

    background:
        var(
            --badge-background,
            var(--surface-secondary)
        );

    color:
        var(
            --badge-text,
            var(--text)
        );

    font:
        inherit;

    font-size:
        0.82rem;

    font-weight:
        700;

    line-height:
        1.35;

    overflow-wrap:
        anywhere;
}


.menu-badge--interactive {
    cursor:
        pointer;

    touch-action:
        manipulation;

    transition:
        transform
        120ms
        ease,
        box-shadow
        120ms
        ease,
        filter
        120ms
        ease;
}


.menu-badge--interactive:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0
        3px
        8px
        rgb(0 0 0 / 12%);

    filter:
        brightness(0.97);
}


.menu-badge--interactive:active {
    transform:
        translateY(0);

    box-shadow:
        none;
}


.menu-badge--interactive:focus-visible {
    outline:
        3px solid
        rgb(25 118 210 / 35%);

    outline-offset:
        2px;
}


.menu-badge--small {
    min-height:
        24px;

    padding:
        2px
        7px;

    font-size:
        0.74rem;
}


.menu-badge--dietary {
    box-shadow:
        0
        1px
        2px
        rgb(0 0 0 / 12%);
}


.menu-badge--allergen {
    border-color:
        rgb(132 32 41 / 22%);
}


.menu-badge--possible-allergen {
    border-color:
        rgb(102 77 3 / 22%);
}


.menu-badge--additive,
.menu-badge--substance {
    border-color:
        rgb(52 58 64 / 18%);
}


/*
 * ------------------------------------------------------------
 * Allergene, Zusatzstoffe und Warnhinweise
 * ------------------------------------------------------------
 */

.menu-item__product-information {
    display:
        grid;

    gap:
        13px;

    margin-top:
        12px;

    padding:
        12px;

    border-left:
        3px solid
        var(--border);

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


.menu-information-group {
    display:
        grid;

    gap:
        6px;
}


.menu-information-group .menu-badge-group {
    margin-top:
        0;
}


.menu-information-group__title {
    font-size:
        0.86rem;

    font-weight:
        bold;

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


/*
 * ------------------------------------------------------------
 * 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:
        12px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.side-dish-list__item {
    display:
        grid;

    gap:
        6px;

    font-size:
        0.92rem;
}


.side-dish-list__main {
    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;
}


.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;
}


.side-dish-information {
    display:
        grid;

    gap:
        2px;

    color:
        var(--text-muted);

    font-size:
        0.8rem;

    line-height:
        1.45;
}


.side-dish-information .menu-badge-group {
    margin-top:
        4px;
}


/*
 * ------------------------------------------------------------
 * Allgemeiner Hinweis
 * ------------------------------------------------------------
 */

.menu-information-note {
    margin-top:
        24px;

    padding:
        18px
        20px;

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

    border-radius:
        10px;

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


.menu-information-note h2 {
    margin:
        0
        0
        8px;

    font-size:
        1rem;
}


.menu-information-note p {
    margin:
        0;

    color:
        var(--text-muted);

    line-height:
        1.6;
}


/*
 * ============================================================
 * Informationsdialog
 * ============================================================
 */

.menu-information-dialog {
    width:
        min(
            540px,
            calc(100% - 32px)
        );

    max-height:
        calc(100dvh - 32px);

    padding:
        0;

    border:
        0;

    border-radius:
        14px;

    background:
        var(--surface);

    color:
        var(--text);

    box-shadow:
        0
        24px
        70px
        rgb(0 0 0 / 30%);

    overflow:
        hidden;
}


.menu-information-dialog::backdrop {
    background:
        rgb(0 0 0 / 55%);

    backdrop-filter:
        blur(2px);
}


.menu-information-dialog__header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        20px
        20px
        14px;

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


.menu-information-dialog__heading {
    display:
        grid;

    gap:
        5px;
}


.menu-information-dialog__category {
    color:
        var(--text-muted);

    font-size:
        0.76rem;

    font-weight:
        bold;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}


.menu-information-dialog__title {
    margin:
        0;

    font-size:
        1.25rem;

    line-height:
        1.3;
}


.menu-information-dialog__close {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    width:
        40px;

    height:
        40px;

    padding:
        0;

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

    border-radius:
        999px;

    background:
        var(--surface-secondary);

    color:
        var(--text);

    font:
        inherit;

    font-size:
        1.35rem;

    line-height:
        1;

    cursor:
        pointer;

    touch-action:
        manipulation;
}


.menu-information-dialog__close:hover {
    filter:
        brightness(0.96);
}


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

    outline-offset:
        2px;
}


.menu-information-dialog__body {
    display:
        grid;

    gap:
        15px;

    max-height:
        calc(100dvh - 190px);

    padding:
        20px;

    overflow-y:
        auto;
}


.menu-information-dialog__description {
    margin:
        0;

    line-height:
        1.65;
}


.menu-information-dialog__detail {
    padding:
        12px
        14px;

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

    border-radius:
        9px;

    background:
        var(--surface-secondary);

    color:
        var(--text-muted);

    line-height:
        1.55;
}


.menu-information-dialog__warning {
    padding:
        12px
        14px;

    border-radius:
        9px;

    background:
        #fff3cd;

    color:
        #664d03;

    font-weight:
        bold;

    line-height:
        1.55;
}


.menu-information-dialog__footer {
    display:
        flex;

    justify-content:
        flex-end;

    padding:
        0
        20px
        20px;
}


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


    .menu-badge {
        min-height:
            30px;

        padding:
            5px
            9px;

        font-size:
            0.78rem;
    }


    .menu-item__product-information {
        padding:
            10px;
    }


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


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


    /*
     * Dialog auf kleinen Displays
     */

    .menu-information-dialog {
        width:
            calc(100% - 20px);

        max-height:
            calc(100dvh - 20px);

        border-radius:
            12px;
    }


    .menu-information-dialog__header {
        padding:
            17px
            17px
            13px;
    }


    .menu-information-dialog__title {
        font-size:
            1.15rem;
    }


    .menu-information-dialog__body {
        max-height:
            calc(100dvh - 175px);

        padding:
            17px;
    }


    .menu-information-dialog__footer {
        padding:
            0
            17px
            17px;
    }


    .menu-information-dialog__footer .button {
        width:
            100%;
    }

}

/* ============================================================ */
/* 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: Privacy */
/* ============================================================ */

/*
 * ============================================================
 * Privacy-Modul
 * Öffentliche Datenschutzerklärung
 * ============================================================
 */


.privacy-sections {
    display:
        grid;

    gap:
        24px;

    max-width:
        1000px;
}


.privacy-section {
    padding:
        22px;
}


.privacy-section__title {
    margin:
        0
        0
        18px;
}


.privacy-section__content {
    display:
        grid;

    gap:
        14px;
}


.privacy-section__content p {
    margin:
        0;

    line-height:
        1.7;

    overflow-wrap:
        anywhere;
}


.privacy-section__content ul {
    margin:
        0;

    padding-left:
        24px;
}


.privacy-section__content li {
    margin-bottom:
        7px;

    line-height:
        1.6;
}


.privacy-section__content li:last-child {
    margin-bottom:
        0;
}


.privacy-section__content a {
    overflow-wrap:
        anywhere;
}

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

}

/* ============================================================ */
/* Modul: System */
/* ============================================================ */

/*
 * ============================================================
 * System-Modul
 * Ereignisse und administrative Systembereiche
 * ============================================================
 */


/*
 * ------------------------------------------------------------
 * Staff-Navigationsgruppe
 * ------------------------------------------------------------
 */

.staff-sidebar__group-title {
    padding:
        8px
        14px
        5px;

    color:
        var(--text-muted);

    font-size:
        0.75rem;

    font-weight:
        bold;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/*
 * ------------------------------------------------------------
 * Seitenkennzeichnung
 * ------------------------------------------------------------
 */

.system-page-category {
    margin-bottom:
        5px;

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    font-weight:
        bold;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/*
 * ============================================================
 * Ereignisbereich
 * ============================================================
 */

.system-events {
    padding:
        0;

    overflow:
        hidden;
}


.system-events__header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px
        20px;

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


.system-events__header h2 {
    margin:
        0;
}


.system-events__header p {
    margin:
        6px
        0
        0;

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


.system-events__limit {
    flex-shrink:
        0;

    color:
        var(--text-muted);

    font-size:
        0.82rem;
}


.system-events__empty {
    padding:
        20px;
}


.system-events__empty p {
    margin:
        0;
}


/*
 * ------------------------------------------------------------
 * Ereignistabelle
 * ------------------------------------------------------------
 */

.system-events__table-wrapper {
    overflow-x:
        auto;
}


.system-events__table {
    width:
        100%;

    border-collapse:
        collapse;
}


.system-events__table th,
.system-events__table td {
    padding:
        12px
        14px;

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

    text-align:
        left;

    vertical-align:
        top;
}


.system-events__table th {
    background:
        var(--surface-secondary);

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    font-weight:
        bold;

    white-space:
        nowrap;
}


.system-events__table tbody tr:last-child td {
    border-bottom:
        0;
}


.system-events__table tbody tr:hover {
    background:
        var(--surface-secondary);
}


.system-events__time {
    white-space:
        nowrap;
}


.system-events__username {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--text-muted);

    font-size:
        0.78rem;
}


/*
 * ============================================================
 * Berechtigungsmatrix
 * ============================================================
 */

.system-permissions {
    padding:
        0;

    overflow:
        hidden;
}


.system-permissions__header {
    padding:
        18px
        20px;

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


.system-permissions__header h2 {
    margin:
        0;
}


.system-permissions__header p {
    margin:
        6px
        0
        0;

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


/*
 * ------------------------------------------------------------
 * Legende
 * ------------------------------------------------------------
 */

.system-permissions__legend {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px
        18px;

    padding:
        12px
        20px;

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

    background:
        var(--surface-secondary);

    color:
        var(--text-muted);

    font-size:
        0.82rem;
}


.system-permissions__legend-item {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;
}


/*
 * ------------------------------------------------------------
 * Tabellenbereich
 * ------------------------------------------------------------
 */

.system-permissions__table-wrapper {
    width:
        100%;

    overflow-x:
        auto;
}


.system-permissions__table {
    width:
        100%;

    min-width:
        1050px;

    border-collapse:
        collapse;
}


.system-permissions__table th,
.system-permissions__table td {
    padding:
        12px
        14px;

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

    vertical-align:
        middle;
}


.system-permissions__table thead th {
    position:
        sticky;

    top:
        0;

    z-index:
        2;

    background:
        var(--surface-secondary);

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    font-weight:
        bold;

    text-align:
        center;

    white-space:
        nowrap;
}


.system-permissions__table thead th:first-child {
    left:
        0;

    z-index:
        3;

    min-width:
        310px;

    text-align:
        left;
}


/*
 * ------------------------------------------------------------
 * Modulüberschriften
 * ------------------------------------------------------------
 */

.system-permissions__group th {
    padding:
        14px;

    background:
        var(--surface-secondary);

    color:
        var(--text);

    font-size:
        0.82rem;

    font-weight:
        bold;

    letter-spacing:
        0.04em;

    text-align:
        left;
}


/*
 * ------------------------------------------------------------
 * Berechtigungsbezeichnung
 * ------------------------------------------------------------
 */

.system-permissions__permission {
    min-width:
        310px;

    text-align:
        left;

    vertical-align:
        top;
}


.system-permissions__permission-name {
    display:
        block;

    margin-bottom:
        3px;
}


.system-permissions__permission-key {
    display:
        block;

    color:
        var(--text-muted);

    font-family:
        monospace;

    font-size:
        0.78rem;
}


.system-permissions__permission-description {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    line-height:
        1.4;

    white-space:
        normal;
}


/*
 * ------------------------------------------------------------
 * Rollenwerte
 * ------------------------------------------------------------
 */

.system-permissions__role {
    min-width:
        120px;

    text-align:
        center;

    white-space:
        nowrap;
}


.system-permissions__status {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        28px;

    min-height:
        28px;

    padding:
        3px
        8px;

    border-radius:
        6px;

    font-weight:
        bold;
}


.system-permissions__status--granted {
    background:
        var(--surface-secondary);
}


.system-permissions__status--denied {
    color:
        var(--text-muted);
}


.system-permissions__status--automatic {
    background:
        var(--surface-secondary);

    font-size:
        0.76rem;
}


.system-permissions__table tbody tr:not(
    .system-permissions__group
):hover {
    background:
        var(--surface-secondary);
}


/*
 * ------------------------------------------------------------
 * Leerer Zustand
 * ------------------------------------------------------------
 */

.system-permissions__empty {
    padding:
        20px;
}


.system-permissions__empty p {
    margin:
        0;
}


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

@media (
    max-width: 760px
) {

    /*
     * --------------------------------------------------------
     * Ereignisse
     * --------------------------------------------------------
     */

    .system-events__header {
        display:
            grid;

        gap:
            8px;
    }


    .system-events__limit {
        flex-shrink:
            1;
    }


    .system-events__table-wrapper {
        overflow:
            visible;
    }


    .system-events__table,
    .system-events__table tbody,
    .system-events__table tr,
    .system-events__table td {
        display:
            block;

        width:
            100%;
    }


    .system-events__table thead {
        display:
            none;
    }


    .system-events__table tr {
        padding:
            12px
            14px;

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


    .system-events__table tbody tr:last-child {
        border-bottom:
            0;
    }


    .system-events__table td {
        display:
            grid;

        grid-template-columns:
            minmax(
                90px,
                115px
            )
            1fr;

        gap:
            10px;

        padding:
            5px
            0;

        border:
            0;
    }


    .system-events__table td::before {
        content:
            attr(
                data-label
            );

        color:
            var(--text-muted);

        font-size:
            0.78rem;

        font-weight:
            bold;
    }


    .system-events__time {
        white-space:
            normal;
    }


    /*
     * --------------------------------------------------------
     * Berechtigungsmatrix
     *
     * Die Matrix bleibt bewusst eine Matrix.
     * Auf kleinen Displays wird horizontal gescrollt.
     * --------------------------------------------------------
     */

    .system-permissions__header {
        padding:
            16px;
    }


    .system-permissions__legend {
        padding:
            10px
            16px;
    }


    .system-permissions__table {
        min-width:
            1000px;
    }


    .system-permissions__table th,
    .system-permissions__table td {
        padding:
            10px;
    }


    .system-permissions__permission,
    .system-permissions__table thead th:first-child {
        min-width:
            270px;
    }

}