/* =========================================================
   TOROS GELENAU
   Dark / Gold / Stone
   Kategorien + Produkte als Accordion
   Partyservice + Facebook + Anfahrt
   ========================================================= */


:root {

    --gold: #c9a23a;
    --gold-light: #e6c96f;
    --gold-bright: #f1daa0;
    --gold-dark: #80651c;

    --text: #d9d0bd;
    --text-title: #e5dcc8;
    --text-soft: #bdb39e;
    --text-muted: #958b78;

    --border:
        rgba(201, 162, 58, 0.38);

    --border-strong:
        rgba(201, 162, 58, 0.68);

}


/* =========================================================
   BASIS
   ========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);

    background-color: #080808;

    background-image:

        linear-gradient(
            rgba(0, 0, 0, 0.13),
            rgba(0, 0, 0, 0.13)
        ),

        url("/texture/background");

    background-repeat:
        repeat,
        repeat;

    background-position:
        center top,
        center top;

    background-size:
        auto,
        1920px auto;

    background-attachment:
        fixed,
        fixed;

    overflow-x: hidden;

}


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


a {

    color: var(--gold-light);

    text-decoration: none;

}


a:hover {
    color: var(--gold-bright);
}


.page-shell {
    min-height: 100vh;
}



/* =========================================================
   HEADER
   ========================================================= */

.header {

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

    background:

        linear-gradient(
            180deg,
            rgba(2, 2, 2, 0.80),
            rgba(4, 4, 4, 0.54)
        );

}


.header-top {

    max-width: 1650px;

    margin: 0 auto;

    padding:
        8px 26px 12px;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 28px;

}


.header-info {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.header-info-right {

    align-items: flex-end;

    text-align: right;

}


.info-label {

    color: var(--gold);

    font-size: 0.82rem;

    text-transform: uppercase;

    letter-spacing: 0.18em;

}


.info-text {

    color: var(--text-soft);

    font-size: 0.92rem;

}



/* =========================================================
   LOGO
   ========================================================= */

.logo-wrap {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 175px;

}

.logo-link,
.placeholder-logo-link {
    display: inline-block;
    border-radius: 50%;
    line-height: 0;
    cursor: pointer;
    transition: transform 220ms ease, filter 220ms ease;
}

.logo-link:hover,
.placeholder-logo-link:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 8px 14px rgba(227, 199, 103, 0.24));
}

.logo-link:focus-visible,
.placeholder-logo-link:focus-visible {
    outline: 3px solid #e3c767;
    outline-offset: 5px;
}


.logo {

    display: block;

    width: auto;

    height: auto;

    max-width: 540px;

    max-height: 230px;

    object-fit: contain;

    filter:

        drop-shadow(
            0 10px 18px
            rgba(0, 0, 0, 0.75)
        )

        drop-shadow(
            0 0 18px
            rgba(201, 162, 58, 0.16)
        );

}



/* =========================================================
   HAUPTBEREICH
   ========================================================= */

.main-content {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding:
        25px 20px 48px;

}


.loading {

    padding:
        45px 20px;

    text-align: center;

    color: var(--text-soft);

}


/* =========================================================
   ALLERGENE / ZUSATZSTOFFE – BUTTON ÜBER SPEISEKARTE
   ========================================================= */

.menu-legend-toolbar {

    display: flex;

    justify-content: flex-end;

    margin-bottom: 12px;

}


.menu-legend-button {

    min-height: 42px;

    padding: 9px 14px;

    border:
        1px solid
        rgba(201, 162, 58, 0.52);

    border-radius: 8px;

    color: var(--gold-light);

    background:
        linear-gradient(
            180deg,
            rgba(35, 28, 14, 0.92),
            rgba(12, 10, 7, 0.92)
        );

    cursor: pointer;

    font-weight: 600;

    letter-spacing: 0.015em;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;

}


.menu-legend-button:hover {

    border-color:
        rgba(230, 201, 111, 0.82);

    color: var(--gold-bright);

    background:
        linear-gradient(
            180deg,
            rgba(48, 38, 18, 0.96),
            rgba(15, 12, 8, 0.96)
        );

}


.menu-legend-button:focus-visible {

    outline:
        2px solid
        var(--gold-light);

    outline-offset: 2px;

}



/* =========================================================
   KATEGORIE
   ========================================================= */

.menu-category {

    margin-bottom: 8px;

    border:
        1px solid
        rgba(201, 162, 58, 0.32);

    border-radius: 10px;

    overflow: hidden;

    background:
        rgba(5, 5, 5, 0.77);

}


.menu-category.category-open {

    border-color:
        rgba(201, 162, 58, 0.65);

}



/* =========================================================
   KATEGORIE-BUTTON
   ========================================================= */

.category-toggle {

    width: 100%;

    min-height: 58px;

    padding:
        9px 16px;

    display: grid;

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

    align-items: center;

    gap: 15px;

    border: 0;

    background:

        linear-gradient(
            90deg,
            rgba(16, 14, 9, 0.96),
            rgba(6, 6, 6, 0.94)
        );

    color: var(--text-title);

    cursor: pointer;

    text-align: left;

}


.category-toggle:hover {

    background:

        linear-gradient(
            90deg,
            rgba(32, 27, 14, 0.96),
            rgba(8, 8, 8, 0.96)
        );

}


.category-toggle:focus-visible {

    outline:
        2px solid
        var(--gold-light);

    outline-offset:
        -2px;

}


.category-toggle-title {

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.35rem;

    font-weight: 600;

}


.category-count {

    color: var(--text-muted);

    font-size: 0.77rem;

    white-space: nowrap;

}


.category-arrow {

    width: 30px;

    height: 30px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    color: var(--gold);

    font-size: 1.4rem;

    transition:
        transform 0.22s ease;

}


.category-open .category-arrow {

    transform:
        rotate(180deg);

}


.category-content {

    padding: 9px;

    border-top:
        1px solid
        rgba(201, 162, 58, 0.22);

}


.category-content[hidden] {
    display: none;
}



/* =========================================================
   PRODUKT-GRID
   ========================================================= */

.product-grid {

    display: grid;

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

    gap: 7px;

    align-items: start;

}


.product {

    min-width: 0;

    border:
        1px solid
        rgba(201, 162, 58, 0.25);

    border-radius: 7px;

    overflow: hidden;

    background:
        rgba(7, 7, 7, 0.90);

}


.product.product-open {

    border-color:
        rgba(201, 162, 58, 0.68);

    background:
        rgba(11, 10, 7, 0.96);

}



/* =========================================================
   PRODUKT KURZANSICHT
   ========================================================= */

.product-summary {

    width: 100%;

    min-width: 0;

    min-height: 46px;

    padding:
        6px 7px;

    display: grid;

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

    align-items: center;

    gap: 7px;

    border: 0;

    background: transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;

}


.product-summary:hover {

    background:
        rgba(201, 162, 58, 0.045);

}


.product-summary:focus-visible {

    outline:
        2px solid
        var(--gold-light);

    outline-offset:
        -2px;

}


.menu-number {

    min-width: 29px;

    height: 29px;

    padding:
        0 5px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(201, 162, 58, 0.60);

    border-radius: 5px;

    color: var(--gold-light);

    background:
        rgba(201, 162, 58, 0.05);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.9rem;

    font-weight: 600;

}


.menu-number-empty {
    visibility: hidden;
}


.product-name {

    min-width: 0;

    color: #d7cdb7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.98rem;

    font-weight: 600;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.summary-price {

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.92rem;

    font-weight: 700;

    white-space: nowrap;

}


.product-arrow {

    width: 20px;

    height: 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--gold);

    transition:
        transform 0.20s ease;

}


.product-open .product-arrow {

    transform:
        rotate(180deg);

}



/* =========================================================
   PRODUKTDETAILS
   ========================================================= */

.product-details {

    border-top:
        1px solid
        rgba(201, 162, 58, 0.20);

}


.product-details[hidden] {
    display: none;
}


.product-details-inner {

    padding:
        11px 12px 12px;

    display: grid;

    gap: 10px;

}


.description {

    color: #b9af9b;

    font-size: 0.84rem;

    line-height: 1.45;

    margin: 0;

}


.product-details-body {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(118px, 0.95fr);

    gap: 10px;

    align-items: stretch;

    min-width: 0;

}


.product-image-slot {

    min-width: 0;

    min-height: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

}


.product-image-slot-empty {

    pointer-events: none;

}


.product-image-button {

    width: 100%;

    max-width: 165px;

    padding: 0;

    border: 1px solid
        rgba(201, 162, 58, 0.26);

    border-radius: 5px;

    overflow: hidden;

    background: #0d0a06;

    cursor: zoom-in;

    line-height: 0;

    touch-action: manipulation;

}


.product-image-button:focus-visible {

    outline: 2px solid
        var(--gold-light);

    outline-offset: 2px;

}


.product-image {

    display: block;

    width: 100%;

    height: auto;

    /* Ganzes Gericht anzeigen: kein erzwungenes Seitenverhaeltnis und kein Zuschneiden. */
    aspect-ratio: auto;

    object-fit: contain;

    object-position: center;

}


.product-details-info {

    min-width: 0;

    display: flex;

    flex-direction: column;

}


.variant-list {

    min-width: 0;

}


.variant {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 8px;

    min-height: 28px;

    padding:
        4px 0;

    border-bottom:
        1px dotted
        rgba(255, 255, 255, 0.10);

}


.variant:last-child {
    border-bottom: 0;
}


.variant-name {

    min-width: 0;

    color: #bcb29e;

    font-size: 0.78rem;

    line-height: 1.3;

}


.price {

    margin-left: auto;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.93rem;

    font-weight: 700;

    white-space: nowrap;

}


.allergens {

    margin-top: 8px;

    padding-top: 7px;

    border-top:
        1px solid
        rgba(201, 162, 58, 0.18);

    color: #ac9560;

    font-size: 0.68rem;

    line-height: 1.35;

    overflow-wrap: anywhere;

}


.legend-code-trigger {

    width: 100%;

    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;

    border-right: 0;
    border-bottom: 0;
    border-left: 0;

    background: transparent;

    text-align: left;

    cursor: pointer;

    appearance: none;

    transition:
        color 0.18s ease,
        border-color 0.18s ease;

}


.legend-code-trigger:hover {

    color: var(--gold-light);

    border-top-color:
        rgba(201, 162, 58, 0.42);

}


.legend-code-trigger:focus-visible {

    outline:
        2px solid
        rgba(230, 201, 111, 0.72);

    outline-offset: 3px;

    border-radius: 3px;

}


/* =========================================================
   ALLERGENE / ZUSATZSTOFFE – EINBLENDUNG
   ========================================================= */

body.legend-modal-open {
    overflow: hidden;
}


.legend-overlay {

    position: fixed;

    inset: 0;

    z-index: 1600;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: clamp(12px, 3vw, 28px);

    background:
        rgba(0, 0, 0, 0.76);

    backdrop-filter: blur(3px);

}


.legend-overlay[hidden] {
    display: none;
}


.legend-modal {

    width:
        min(720px, 100%);

    max-height:
        min(82vh, 760px);

    overflow: auto;

    border:
        1px solid
        rgba(201, 162, 58, 0.60);

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(24, 20, 13, 0.99),
            rgba(8, 8, 8, 0.99)
        );

    box-shadow:
        0 22px 60px
        rgba(0, 0, 0, 0.62);

}


.legend-modal-header {

    position: sticky;

    top: 0;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 18px;

    padding: 16px 18px 13px;

    border-bottom:
        1px solid
        rgba(201, 162, 58, 0.25);

    background:
        rgba(14, 12, 8, 0.98);

}


.legend-modal-heading-wrap {
    min-width: 0;
}


.legend-modal-kicker {

    margin-bottom: 4px;

    color: #a89462;

    font-size: 0.72rem;

    line-height: 1.3;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    overflow-wrap: anywhere;

}


.legend-modal-title {

    margin: 0;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.2rem, 3.2vw, 1.65rem);

    line-height: 1.2;

}


.legend-modal-close {

    flex: 0 0 auto;

    width: 42px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(201, 162, 58, 0.38);

    border-radius: 8px;

    color: var(--text-title);

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

    cursor: pointer;

    font-size: 1.6rem;

    line-height: 1;

}


.legend-modal-close:hover {

    color: var(--gold-bright);

    border-color:
        rgba(230, 201, 111, 0.72);

}


.legend-modal-close:focus-visible {

    outline:
        2px solid
        var(--gold-light);

    outline-offset: 2px;

}


.legend-modal-tabs {

    display: flex;

    gap: 8px;

    padding: 14px 18px 0;

}


.legend-modal-tabs[hidden] {
    display: none;
}


.legend-modal-tab {

    flex: 1 1 0;

    min-height: 42px;

    padding: 8px 12px;

    border:
        1px solid
        rgba(201, 162, 58, 0.30);

    border-radius: 7px;

    color: #b9af9b;

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

    cursor: pointer;

}


.legend-modal-tab.is-active {

    color: #18130a;

    border-color:
        rgba(230, 201, 111, 0.90);

    background:
        linear-gradient(
            180deg,
            var(--gold-light),
            var(--gold)
        );

    font-weight: 700;

}


.legend-modal-tab:focus-visible {

    outline:
        2px solid
        var(--gold-light);

    outline-offset: 2px;

}


.legend-modal-content {

    padding: 16px 18px 19px;

    color: var(--text);

}


.legend-entry-list {

    display: grid;

    gap: 7px;

}


.legend-entry {

    display: grid;

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

    gap: 11px;

    align-items: start;

    padding: 9px 10px;

    border:
        1px solid
        rgba(201, 162, 58, 0.15);

    border-radius: 7px;

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

}


.legend-entry-code {

    min-width: 34px;

    color: var(--gold-light);

    font-size: 0.92rem;

    line-height: 1.4;

}


.legend-entry-description {

    min-width: 0;

    color: #c9c0ad;

    font-size: 0.88rem;

    line-height: 1.45;

    overflow-wrap: anywhere;

}


.legend-empty {

    margin: 0;

    color: var(--text-soft);

    font-size: 0.9rem;

    line-height: 1.5;

}


.dish-hover-preview {

    position: fixed;

    z-index: 1200;

    width: min(420px, calc(100vw - 24px));

    max-height: calc(100vh - 24px);

    padding: 5px;

    border: 1px solid
        rgba(201, 162, 58, 0.60);

    border-radius: 8px;

    background: rgba(10, 7, 3, 0.98);

    box-shadow:
        0 12px 34px
        rgba(0, 0, 0, 0.52);

    pointer-events: none;

}


.dish-hover-preview[hidden] {
    display: none;
}


.dish-hover-preview img {

    display: block;

    width: 100%;

    max-height: calc(100vh - 36px);

    object-fit: contain;

    border-radius: 4px;

}


.dish-image-lightbox {

    position: fixed;

    inset: 0;

    z-index: 1300;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 18px;

    background:
        rgba(0, 0, 0, 0.82);

    backdrop-filter: blur(3px);

}


.dish-image-lightbox-frame {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: min(92vw, 820px);

    max-height: 88vh;

    padding: 7px;

    border: 1px solid
        rgba(201, 162, 58, 0.62);

    border-radius: 10px;

    background: #0d0a06;

    box-shadow:
        0 16px 50px
        rgba(0, 0, 0, 0.62);

}


.dish-image-lightbox-image {

    display: block;

    max-width: 100%;

    max-height: calc(88vh - 14px);

    object-fit: contain;

    border-radius: 5px;

    cursor: zoom-out;

}


.dish-image-lightbox-close {

    position: absolute;

    top: 10px;

    right: 10px;

    z-index: 2;

    width: 42px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 1px solid
        rgba(201, 162, 58, 0.72);

    border-radius: 50%;

    background: rgba(12, 8, 3, 0.88);

    color: var(--gold-light);

    font-size: 1.7rem;

    line-height: 1;

    cursor: pointer;

}


.dish-image-lightbox-close:focus-visible {

    outline: 2px solid
        var(--gold-light);

    outline-offset: 3px;

}


@media (max-width: 390px) {

    .product-details-inner {

        padding:
            10px 10px 11px;

        gap: 9px;

    }


    .product-details-body {

        grid-template-columns:
            minmax(92px, 1.05fr)
            minmax(112px, 0.95fr);

        gap: 8px;

    }


    .product-image-button {
        max-width: 150px;
    }


    .variant {
        gap: 6px;
    }


    .variant-name {
        font-size: 0.74rem;
    }


    .price {
        font-size: 0.88rem;
    }


    .allergens {
        font-size: 0.64rem;
    }

}


@media (hover: none), (pointer: coarse) {

    .dish-hover-preview {
        display: none !important;
    }

}



/* =========================================================
   ALLGEMEINE ÜBERSCHRIFT
   ========================================================= */

.section-heading {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 16px;

    margin-bottom: 25px;

}


.section-heading h2 {

    margin: 0;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.65rem;

    font-weight: 500;

    letter-spacing: 0.05em;

    text-align: center;

}


.section-heading > span {

    width: 105px;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

}



/* =========================================================
   TOROS INFO
   ========================================================= */

.toros-info-section {

    padding:
        40px 22px;

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

    background:
        rgba(3, 3, 3, 0.78);

}


.toros-info-inner {

    max-width: 1300px;

    margin: 0 auto;

}


.toros-info-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 14px;

}


.info-card {

    padding:
        19px 16px;

    text-align: center;

    border:
        1px solid
        rgba(201, 162, 58, 0.28);

    border-radius: 10px;

    background:
        rgba(7, 7, 7, 0.82);

}


.info-card-highlight {

    border-color:
        rgba(232, 203, 114, 0.55);

}


.info-card-symbol {

    width: 37px;

    height: 37px;

    margin:
        0 auto 10px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: var(--gold-light);

}


.info-card h3 {

    margin:
        0 0 7px;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.1rem;

}


.info-card p {

    margin: 0;

    color: var(--text-soft);

    font-size: 0.84rem;

    line-height: 1.5;

}


.info-card strong {
    color: var(--text-title);
}



/* =========================================================
   SERVICE
   ========================================================= */

.service-section {

    padding:
        37px 22px;

    background:
        rgba(5, 5, 5, 0.84);

    border-top:
        1px solid
        rgba(201, 162, 58, 0.18);

}


.service-inner {

    max-width: 1300px;

    margin: 0 auto;

}


.service-grid {

    display: grid;

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

    gap: 10px;

}


.service-item {

    padding:
        14px 16px;

    display: flex;

    flex-direction: column;

    gap: 3px;

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

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

}


.service-item strong {
    color: var(--gold-light);
}


.service-item span {

    color: var(--text-soft);

    font-size: 0.8rem;

}



/* =========================================================
   PARTYSERVICE
   ========================================================= */

.party-section {

    padding:
        44px 22px;

    border-top:
        1px solid
        rgba(201, 162, 58, 0.24);

    background:

        linear-gradient(
            180deg,
            rgba(9, 8, 5, 0.91),
            rgba(4, 4, 4, 0.93)
        );

}


.party-inner {

    max-width: 1300px;

    margin: 0 auto;

}


.party-intro {

    max-width: 850px;

    margin:
        0 auto 28px;

    text-align: center;

    color: var(--text-soft);

    font-size: 0.95rem;

    line-height: 1.6;

}


.party-intro p {

    margin:
        0 0 7px;

}


.party-grid {

    display: grid;

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

    gap: 13px;

}


.party-card {

    padding:
        18px 17px;

    border:
        1px solid
        rgba(201, 162, 58, 0.27);

    border-radius: 10px;

    background:
        rgba(6, 6, 6, 0.78);

}


.party-card h3 {

    margin:
        0 0 13px;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.05rem;

    font-weight: 600;

}


.party-card ul {

    margin: 0;

    padding-left: 20px;

    color: var(--text-soft);

}


.party-card li {

    margin-bottom: 8px;

    line-height: 1.4;

    font-size: 0.84rem;

}


.party-card li::marker {
    color: var(--gold);
}


.party-card li span {

    color: var(--gold);

    font-size: 0.75rem;

}


.party-contact {

    margin-top: 22px;

    padding:
        18px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    border:
        1px solid
        rgba(201, 162, 58, 0.34);

    border-radius: 10px;

    background:
        rgba(201, 162, 58, 0.045);

}


.party-contact-text {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.party-contact-text strong {

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.05rem;

}


.party-contact-text span {

    color: var(--text-soft);

    font-size: 0.84rem;

}


.party-contact-buttons {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}


.party-button {

    min-height: 42px;

    padding:
        9px 15px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 7px;

    background:

        linear-gradient(
            135deg,
            #9a7521,
            #dec262
        );

    color: #171208;

    font-weight: 700;

}


.party-button:hover {

    color: #090704;

    background:

        linear-gradient(
            135deg,
            #b4892a,
            #f0d77e
        );

}


.party-button-secondary {

    color: var(--gold-light);

    background:
        rgba(0, 0, 0, 0.45);

}


.party-button-secondary:hover {

    color: var(--gold-bright);

    background:
        rgba(201, 162, 58, 0.08);

}



/* =========================================================
   FACEBOOK
   ========================================================= */

.social-section {

    padding:
        25px 22px;

    border-top:
        1px solid
        rgba(201, 162, 58, 0.16);

    background:
        rgba(4, 4, 4, 0.88);

}


.social-inner {

    max-width: 1300px;

    margin: 0 auto;

}


.social-card {

    display: grid;

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

    align-items: center;

    gap: 18px;

    padding:
        18px 20px;

    border:
        1px solid
        rgba(201, 162, 58, 0.27);

    border-radius: 10px;

    background:
        rgba(6, 6, 6, 0.74);

}


.social-icon {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: var(--gold-light);

    font-family: Arial, sans-serif;

    font-size: 1.5rem;

    font-weight: 700;

}


.social-text h2 {

    margin:
        0 0 4px;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.2rem;

}


.social-text p {

    margin: 0;

    color: var(--text-soft);

    font-size: 0.84rem;

    line-height: 1.5;

}


.facebook-button {

    min-height: 42px;

    padding:
        9px 16px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 7px;

    color: var(--gold-light);

    background:
        rgba(201, 162, 58, 0.05);

    font-weight: 600;

    white-space: nowrap;

}


.facebook-button:hover {

    color: var(--gold-bright);

    background:
        rgba(201, 162, 58, 0.10);

}



/* =========================================================
   KONTAKT
   ========================================================= */

.contact-section {

    padding:
        40px 22px;

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

    background:
        rgba(4, 4, 4, 0.88);

}


.contact-inner {

    max-width: 1300px;

    margin: 0 auto;

    display: grid;

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

    gap: 25px;

}


.contact-box {

    padding: 22px;

    border:
        1px solid
        rgba(201, 162, 58, 0.32);

    border-radius: 11px;

    background:
        rgba(5, 5, 5, 0.72);

}


.contact-box h2 {

    margin:
        0 0 18px;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.45rem;

    font-weight: 500;

}


.contact-line {

    display: grid;

    grid-template-columns:
        90px 1fr;

    gap: 12px;

    margin-bottom: 14px;

    color: var(--text-soft);

    line-height: 1.55;

}


.contact-label {

    color: var(--gold);

    font-weight: 600;

}


.opening-row {

    padding:
        9px 0;

    display: flex;

    justify-content: space-between;

    gap: 15px;

    border-bottom:
        1px dotted
        rgba(255, 255, 255, 0.11);

    color: var(--text-soft);

}


.opening-row strong {

    color: var(--gold-light);

    white-space: nowrap;

}



/* =========================================================
   FEIERTAGE
   ========================================================= */

.special-hours {

    margin-top: 17px;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(201, 162, 58, 0.25);

    border-radius: 8px;

}


.special-hours-title {

    margin-bottom: 7px;

    color: var(--gold);

    font-size: 0.76rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.1em;

}


.special-hours-row {

    padding:
        4px 0;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: var(--text-soft);

    font-size: 0.84rem;

}


.special-hours-row strong {
    color: var(--gold-light);
}



/* =========================================================
   ANFAHRT
   ========================================================= */

.route-section {

    padding:
        38px 22px;

    border-top:
        1px solid
        rgba(201, 162, 58, 0.22);

    background:
        rgba(3, 3, 3, 0.90);

}


.route-inner {

    max-width: 1300px;

    margin: 0 auto;

}


.route-card {

    display: grid;

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

    align-items: center;

    gap: 20px;

    padding: 23px;

    border:
        1px solid
        rgba(201, 162, 58, 0.37);

    border-radius: 11px;

    background:

        linear-gradient(
            110deg,
            rgba(201, 162, 58, 0.055),
            rgba(5, 5, 5, 0.86)
        );

}


.route-icon {

    width: 48px;

    height: 48px;

    display: flex;

    justify-content: center;

    align-items: center;

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

    border-radius: 50%;

    color: var(--gold-light);

    font-size: 1.25rem;

}


.route-content h3 {

    margin:
        0 0 7px;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.2rem;

}


.route-content p {

    margin: 0;

    color: var(--text-soft);

    line-height: 1.5;

}


.route-note {

    margin-top:
        5px !important;

    font-size: 0.82rem;

    color:
        var(--text-muted) !important;

}


.route-button {

    display: inline-flex;

    min-height: 44px;

    padding:
        10px 17px;

    align-items: center;

    justify-content: center;

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

    border-radius: 8px;

    color: #171208;

    background:

        linear-gradient(
            135deg,
            #9a7521,
            #dec262
        );

    font-weight: 700;

    white-space: nowrap;

}


.route-button:hover {

    color: #090704;

    background:

        linear-gradient(
            135deg,
            #b4892a,
            #f0d77e
        );

}



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

.impressum-section {

    padding:
        40px 22px;

    background:
        rgba(0, 0, 0, 0.94);

}


.impressum-inner {

    max-width: 1300px;

    margin: 0 auto;

}


.impressum-heading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-bottom: 25px;

}


.impressum-heading h2 {

    margin: 0;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.55rem;

    font-weight: 500;

}


.impressum-line {

    width: 110px;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

}


.impressum-grid {

    display: grid;

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

    gap: 18px;

}


.impressum-block {

    padding: 18px;

    border:
        1px solid
        rgba(201, 162, 58, 0.18);

    border-radius: 9px;

}


.impressum-block h3 {

    margin:
        0 0 9px;

    color: var(--gold);

    font-size: 0.93rem;

}


.impressum-block p {

    margin: 0;

    color: var(--text-soft);

    font-size: 0.84rem;

    line-height: 1.6;

}



/* =========================================================
   FOOTER
   ========================================================= */

.footer {

    padding:
        21px 20px 26px;

    text-align: center;

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

    background: #000;

    color: var(--gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    letter-spacing: 0.08em;

}


.footer-small {

    margin-top: 5px;

    color: var(--text-muted);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.75rem;

    letter-spacing: 0;

}



/* =========================================================
   KLEINER DESKTOP
   ========================================================= */

@media (max-width: 1250px) {

    .product-grid {

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

    }


    .toros-info-grid {

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

    }


    .party-grid {

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

    }

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .product-grid {

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

    }


    .service-grid {

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

    }


    .contact-inner,
    .impressum-grid {

        grid-template-columns:
            1fr;

    }


    .route-card {

        grid-template-columns:
            auto 1fr;

    }


    .route-action {

        grid-column:
            1 / -1;

    }


    .route-button {

        width: 100%;

    }


    .logo {

        max-width: 440px;

        max-height: 205px;

    }


    .social-card {

        grid-template-columns:
            auto 1fr;

    }


    .facebook-button {

        grid-column:
            1 / -1;

        width: 100%;

    }


    .party-contact {

        flex-direction: column;

        align-items: flex-start;

    }

}



/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 650px) {

    body {

        background-attachment:
            scroll,
            scroll;

        background-size:
            auto,
            auto 100vh;

    }


    .header-top {

        grid-template-columns:
            1fr;

        gap: 3px;

        padding:
            7px 12px 12px;

        text-align: center;

    }


    .header-info,
    .header-info-right {

        align-items: center;

        text-align: center;

    }


    .logo-wrap {

        min-height: 140px;

        order: -1;

    }


    .logo {

        max-width: 350px;

        max-height: 175px;

    }


    .main-content {

        padding:
            16px 8px 32px;

    }


    .menu-category {

        margin-bottom: 6px;

    }


    .category-toggle {

        min-height: 54px;

        padding:
            8px 11px;

    }


    .category-toggle-title {

        font-size: 1.16rem;

    }


    .category-count {

        display: none;

    }


    .category-content {

        padding: 6px;

    }


    .product-grid {

        grid-template-columns:
            1fr;

        gap: 5px;

    }


    .product-summary {

        min-height: 46px;

        padding:
            7px 5px;

        gap: 5px;

    }


    .menu-number {

        min-width: 27px;

        height: 27px;

        padding:
            0 4px;

        font-size: 0.84rem;

    }


    .product-name {

        font-size: 0.88rem;

        line-height: 1.18;

        white-space: normal;

        overflow: visible;

        text-overflow: clip;

        overflow-wrap: anywhere;

    }


    .summary-price {

        font-size: 0.82rem;

    }


    .product-arrow {

        width: 16px;

        height: 18px;

    }


    .toros-info-section,
    .service-section,
    .party-section,
    .social-section,
    .contact-section,
    .route-section,
    .impressum-section {

        padding:
            28px 12px;

    }


    .toros-info-grid,
    .service-grid,
    .party-grid {

        grid-template-columns:
            1fr;

    }


    .section-heading > span {

        width: 42px;

    }


    .section-heading h2 {

        font-size: 1.35rem;

    }


    .party-intro {

        text-align: left;

    }


    .party-contact-buttons {

        width: 100%;

    }


    .party-button {

        width: 100%;

    }


    .social-card {

        grid-template-columns:
            1fr;

        text-align: center;

    }


    .social-icon {

        margin: 0 auto;

    }


    .contact-line {

        grid-template-columns:
            1fr;

        gap: 2px;

    }


    .opening-row {

        flex-direction: column;

        gap: 2px;

    }


    .special-hours-row {

        flex-direction: column;

        gap: 1px;

    }


    .route-card {

        grid-template-columns:
            1fr;

        text-align: center;

    }


    .route-icon {

        margin: 0 auto;

    }


    .route-action {

        grid-column: auto;

    }


    .impressum-line {

        width: 45px;

    }

}



/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 400px) {

    .logo {

        max-width: 300px;

    }


    .main-content {

        padding-left: 5px;

        padding-right: 5px;

    }


    .product-summary {

        gap: 4px;

        padding:
            7px 4px;

    }


    .menu-number {

        min-width: 27px;

        height: 27px;

    }


    .product-name {

        font-size: 0.84rem;

    }


    .summary-price {

        font-size: 0.78rem;

    }

}



/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    .category-arrow,
    .product-arrow {
        transition: none;
    }

}
/* =========================================================
   TOROS LIVE STATUS
   ========================================================= */

.status-bar {

    max-width: 1500px;

    margin:
        0 auto 12px;

    padding:
        10px 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    border-top:
        1px solid
        rgba(201, 162, 58, 0.16);

    border-bottom:
        1px solid
        rgba(201, 162, 58, 0.30);

    background:

        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.86),
            rgba(21, 18, 10, 0.92),
            rgba(5, 5, 5, 0.86)
        );

    color:
        #cfc4ae;

    font-size:
        0.84rem;

}


.status-item {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

}


.status-main {

    color:
        #dbcfae;

    font-weight:
        600;

}


.status-dot {

    width:
        9px;

    height:
        9px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        #777;

    box-shadow:
        0 0 8px
        rgba(255, 255, 255, 0.15);

}


.status-dot.open {

    background:
        #79b45d;

    box-shadow:
        0 0 8px
        rgba(121, 180, 93, 0.75);

}


.status-dot.closed {

    background:
        #a75e50;

    box-shadow:
        0 0 8px
        rgba(167, 94, 80, 0.55);

}


.status-symbol {

    color:
        var(--gold);

}


.status-divider {

    width:
        1px;

    height:
        20px;

    background:
        rgba(201, 162, 58, 0.25);

}


#visitorToday,
#visitorTotal {

    color:
        var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

}


.visitor-total-label {

    margin-left:
        5px;

    color:
        var(--text-muted);

}



/* =========================================================
   MOBILE STATUS
   ========================================================= */


@media (max-width: 700px) {

    .menu-legend-toolbar {
        justify-content: stretch;
    }

    .menu-legend-button {
        width: 100%;
        min-height: 44px;
    }

    .legend-overlay {
        align-items: flex-end;
        padding: 10px;
    }

    .legend-modal {
        width: 100%;
        max-height: 86vh;
        border-radius: 12px 12px 8px 8px;
    }

    .legend-modal-header {
        padding: 14px 14px 11px;
    }

    .legend-modal-tabs {
        padding: 12px 14px 0;
    }

    .legend-modal-content {
        padding: 14px;
    }

    .legend-entry {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 8px;
        padding: 9px;
    }

}


@media (max-width: 700px) {

    .status-bar {

        margin-bottom:
            7px;

        padding:
            9px 10px;

        flex-direction:
            column;

        gap:
            6px;

        font-size:
            0.79rem;

    }


    .status-divider {

        width:
            65%;

        height:
            1px;

    }


    .status-item {

        justify-content:
            center;

        text-align:
            center;

    }

}
/* ==========================================================
   PLATZHALTER STANDORT
   ========================================================== */

.placeholder-location-page {
    margin: 0;

    min-height: 100vh;

    background:
        linear-gradient(
            rgba(5, 5, 5, 0.80),
            rgba(5, 5, 5, 0.92)
        ),
        url("/texture/background")
        center / cover fixed;

    color: #d8ccb6;
}


.placeholder-location-shell {
    min-height: 100vh;
}


.placeholder-header {
    max-width: 1300px;

    margin: auto;

    padding:
        20px 25px;

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    box-sizing:
        border-box;
}


.placeholder-back {
    color: #b8a676;

    text-decoration: none;

    font-size: 0.85rem;
}


.placeholder-logo {
    width: 130px;

    height: auto;
}


.placeholder-main {
    width:
        min(
            900px,
            calc(100% - 40px)
        );

    margin:
        70px auto;

    padding:
        45px;

    box-sizing:
        border-box;

    text-align:
        center;

    border:
        1px solid
        rgba(
            202,
            166,
            74,
            0.32
        );

    background:
        rgba(
            7,
            7,
            7,
            0.93
        );
}


.placeholder-label {
    color: #a69672;

    letter-spacing:
        0.3em;

    text-transform:
        uppercase;

    font-size:
        0.72rem;
}


.placeholder-main h1 {
    margin:
        5px 0
        15px;

    color: #d8b65a;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            2.4rem,
            7vw,
            4rem
        );

    font-weight:
        normal;
}


.placeholder-main p {
    color: #b9ad98;

    line-height: 1.7;
}


.placeholder-nav {
    margin:
        35px 0;

    display: grid;

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

    gap: 10px;
}


.placeholder-nav div {
    padding:
        13px 8px;

    border:
        1px solid
        rgba(
            202,
            166,
            74,
            0.18
        );

    color: #9f947e;

    background:
        rgba(
            255,
            255,
            255,
            0.02
        );
}


.placeholder-button {
    display:
        inline-block;

    padding:
        12px 25px;

    color: #17130b;

    background:
        #c9a53f;

    text-decoration: none;

    font-weight: 700;
}



/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (
    max-width: 900px
) {

    .placeholder-nav {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }

}


@media (
    max-width: 550px
) {

    .placeholder-header {
        padding: 15px;
    }


    .placeholder-logo {
        width: 95px;
    }


    .placeholder-main {
        width:
            calc(
                100% - 24px
            );

        margin:
            30px auto;

        padding:
            28px 16px;
    }


    .placeholder-nav {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   TELEFON IM STANDORT-HEADER
   ========================================================= */

.header-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--gold);
    text-decoration: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.08rem, 1.55vw, 1.42rem);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    padding: 4px 0;
    transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.header-phone:hover,
.header-phone:focus-visible {
    color: #ffe39a;
    transform: translateY(-1px);
    text-shadow: 0 0 14px rgba(218, 176, 52, 0.32);
    outline: none;
}

.header-phone-note {
    color: var(--text-soft);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    opacity: 0.78;
}

.placeholder-brand {
    display: flex;
    align-items: center;
    gap: 24px;
}

.placeholder-phone {
    color: #d7b553;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.placeholder-phone:hover,
.placeholder-phone:focus-visible {
    color: #ffe39a;
    outline: none;
}

@media (max-width: 700px) {
    .header-phone {
        font-size: 1.05rem;
    }

    .header-phone-note {
        font-size: 0.66rem;
    }

    .placeholder-brand {
        flex-direction: column;
        gap: 8px;
    }
}


/* =========================================================
   STANDORTNAME LINKS IM HEADER
   ========================================================= */

.header-location {
    align-items: flex-start;
    text-align: left;
}

.header-location-name,
.placeholder-location-name {
    color: var(--gold, #d7b553);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.04em;
}

.header-location-back {
    margin-top: 4px;
    color: var(--text-soft, #a99d84);
    text-decoration: none;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    opacity: 0.78;
}

.header-location-back:hover,
.header-location-back:focus-visible,
.placeholder-back:hover,
.placeholder-back:focus-visible {
    color: var(--gold, #d7b553);
    opacity: 1;
    outline: none;
}

.placeholder-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 28px;
}

.placeholder-header-location {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.placeholder-brand {
    justify-self: center;
}

.placeholder-header-phone {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.placeholder-phone-label {
    color: #b99c50;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

@media (max-width: 700px) {
    .header-top {
        grid-template-columns: 1fr auto 1fr;
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .header-location-name {
        font-size: 1.05rem;
    }

    .header-location-back,
    .header-phone-note {
        display: none;
    }

    .placeholder-header {
        grid-template-columns: 1fr auto 1fr;
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .placeholder-location-name {
        font-size: 1.05rem;
    }

    .placeholder-phone-label,
    .placeholder-back {
        display: none;
    }

    .placeholder-brand {
        flex-direction: row;
    }
}

/* ==========================================================
   MEDIEN-BUTTONS DIREKT UNTER DEM LOGO
   Optik angelehnt an die goldenen Nummern der Gerichte
   ========================================================== */

.header-media-buttons {
    width: min(900px, calc(100% - 32px));
    margin: 12px auto 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.header-media-button {
    min-width: 168px;
    min-height: 48px;
    padding: 7px 11px 7px 8px;
    display: inline-grid;
    grid-template-columns: 34px 1fr 20px;
    align-items: center;
    column-gap: 10px;
    border: 1px solid rgba(201, 162, 58, 0.58);
    border-radius: 7px;
    color: #e8cf77;
    background:
        linear-gradient(
            180deg,
            rgba(31, 27, 18, 0.84) 0%,
            rgba(10, 10, 10, 0.90) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 226, 139, 0.06),
        0 3px 12px rgba(0, 0, 0, 0.22);
    text-decoration: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
}

.header-media-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(201, 162, 58, 0.68);
    border-radius: 5px;
    color: var(--gold-light);
    background: rgba(201, 162, 58, 0.07);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1;
    box-shadow: inset 0 0 10px rgba(201, 162, 58, 0.025);
}

.header-media-label {
    min-width: 0;
    text-align: left;
    white-space: nowrap;
}

.header-media-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(232, 207, 119, 0.72);
    font-family: Arial, sans-serif;
    font-size: 1.45rem;
    font-weight: 300;
    line-height: 1;
    transition: transform 160ms ease, color 160ms ease;
}

.header-media-button:hover {
    color: #ffe49a;
    border-color: rgba(235, 194, 72, 0.95);
    background:
        linear-gradient(
            180deg,
            rgba(53, 42, 18, 0.92) 0%,
            rgba(18, 15, 10, 0.96) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 226, 139, 0.10),
        0 5px 16px rgba(0, 0, 0, 0.30);
    transform: translateY(-2px);
}

.header-media-button:hover .header-media-icon {
    border-color: rgba(244, 206, 91, 0.96);
    background: rgba(201, 162, 58, 0.13);
}

.header-media-button:hover .header-media-arrow {
    color: #ffe49a;
    transform: translateX(2px);
}

.header-media-button:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
}

.header-media-button:active {
    transform: translateY(0);
}

@media (max-width: 700px) {
    .header-media-buttons {
        width: calc(100% - 20px);
        margin: 8px auto 16px;
        gap: 8px;
    }

    .header-media-button {
        min-width: 0;
        min-height: 46px;
        flex: 1 1 calc(50% - 8px);
        grid-template-columns: 31px 1fr 16px;
        column-gap: 8px;
        padding: 6px 8px 6px 7px;
        font-size: 0.86rem;
    }

    .header-media-icon {
        width: 29px;
        height: 29px;
        font-size: 0.9rem;
    }
}

@media (max-width: 390px) {
    /* Auch auf sehr schmalen Smartphones (z. B. Galaxy S20 FE)
       bleiben die vier Medienbuttons als kompaktes 2x2-Raster stehen. */
    .header-media-buttons {
        width: calc(100% - 16px);
        gap: 7px;
    }

    .header-media-button {
        min-width: 0;
        min-height: 44px;
        flex: 1 1 calc(50% - 4px);
        grid-template-columns: 27px minmax(0, 1fr) 13px;
        column-gap: 5px;
        padding: 5px 6px;
        font-size: 0.78rem;
        letter-spacing: 0.01em;
    }

    .header-media-icon {
        width: 27px;
        height: 27px;
        font-size: 0.82rem;
    }

    .header-media-label {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-media-arrow {
        font-size: 1.15rem;
    }
}

/* =========================================================
   BARRIEREFREIHEIT
   ========================================================= */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   ALLERGENE / ZUSATZSTOFFE – KOMPAKTE SMARTPHONE-ANSICHT
   ========================================================= */
@media (max-width: 700px) {

    .legend-overlay {
        /* Auf Smartphones das Dialogfenster unabhängig von anderen Flex-Regeln
           exakt horizontal und vertikal in der sichtbaren Fläche zentrieren. */
        display: grid;
        place-items: center;
        width: 100%;
        height: 100dvh;
        box-sizing: border-box;
        padding: 10px 16px;
        overflow: hidden;
    }

    .legend-modal {
        /* Beim Galaxy S20 FE bewusst schmaler als der Viewport und exakt mittig. */
        width: min(88vw, 330px);
        max-width: 100%;
        max-height: calc(100dvh - 20px);
        margin: 0;
        justify-self: center;
        align-self: center;
        box-sizing: border-box;
        border-radius: 9px;
    }

    .legend-modal-header {
        gap: 8px;
        padding: 8px 9px 7px;
    }

    .legend-modal-kicker {
        margin-bottom: 1px;
        font-size: 0.58rem;
        line-height: 1.15;
        letter-spacing: 0.06em;
    }

    .legend-modal-title {
        font-size: 1.05rem;
        line-height: 1.12;
    }

    .legend-modal-close {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        font-size: 1.25rem;
    }

    .legend-modal-tabs {
        gap: 5px;
        padding: 7px 9px 0;
    }

    .legend-modal-tab {
        min-height: 32px;
        padding: 5px 7px;
        font-size: 0.72rem;
    }

    .legend-modal-content {
        padding: 8px 9px 9px;
    }

    .legend-entry-list {
        gap: 4px;
    }

    .legend-entry {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 5px;
        padding: 5px 6px;
        border-radius: 5px;
        align-items: start;
    }

    .legend-entry-code {
        min-width: 0;
        font-size: 0.78rem;
        line-height: 1.25;
    }

    .legend-entry-description {
        min-width: 0;
        max-width: 100%;
        font-size: 0.74rem;
        line-height: 1.28;
        white-space: normal;
        overflow: visible;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .legend-empty {
        font-size: 0.75rem;
        line-height: 1.35;
    }
}

@media (max-width: 400px) {

    .legend-modal-header {
        padding: 7px 8px 6px;
    }

    .legend-modal-title {
        font-size: 1rem;
    }

    .legend-modal-content {
        padding: 7px 8px 8px;
    }

    .legend-entry {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 4px;
        padding: 4px 5px;
    }

    .legend-entry-code {
        font-size: 0.74rem;
    }

    .legend-entry-description {
        font-size: 0.70rem;
        line-height: 1.25;
    }
}

/* =========================================================
   S20 FE / KLEINE SMARTPHONES – KOMPAKTER STANDORT-HEADER
   ========================================================= */
@media (max-width: 700px) {
    /* Standort, Logo und vollständige Telefonnummer bleiben in einer Zeile. */
    .header-top {
        grid-template-columns: minmax(58px, 0.72fr) minmax(120px, 150px) minmax(115px, 1.28fr);
        gap: 6px;
        padding: 6px 8px 8px;
        text-align: initial;
    }

    .logo-wrap {
        min-height: 100px;
        order: 0;
    }

    .logo {
        max-width: 150px;
        max-height: 105px;
    }

    .header-location {
        min-width: 0;
        align-items: flex-start;
        text-align: left;
    }

    .header-location-name {
        font-size: 0.90rem;
        line-height: 1.05;
        letter-spacing: 0.015em;
        white-space: nowrap;
    }

    .header-info-right {
        min-width: 0;
        align-items: flex-end;
        text-align: right;
        overflow: visible;
    }

    /* "Telefon" und Hilfstext kosten auf kleinen Displays nur Platz. */
    .header-info-right .info-label,
    .header-location-back,
    .header-phone-note {
        display: none;
    }

    .header-phone {
        gap: 3px;
        padding: 2px 0;
        font-size: 0.78rem;
        line-height: 1.1;
        letter-spacing: 0;
        white-space: nowrap;
    }
}

@media (max-width: 390px) {
    .header-top {
        grid-template-columns: minmax(50px, 0.65fr) minmax(108px, 132px) minmax(108px, 1.35fr);
        gap: 5px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .logo-wrap {
        min-height: 88px;
    }

    .logo {
        max-width: 132px;
        max-height: 92px;
    }

    .header-location-name {
        font-size: 0.82rem;
    }

    .header-phone {
        font-size: 0.72rem;
    }
}


/* =========================================================
   STANDORTWECHSLER IM HEADER
   Reihenfolge: Auerbach, Gelenau, Trattoria, Zurück
   ========================================================= */

.location-switcher {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.08;
}

.location-switcher-link,
.location-switcher-back {
    display: inline-block;
    text-decoration: none;
    transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.location-switcher-link {
    color: var(--gold, #d7b553);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.035em;
    opacity: 0.86;
}

.location-switcher-link.is-current {
    margin: 1px 0 2px;
    color: #e8cf77;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 1;
    text-shadow: 0 0 12px rgba(232, 207, 119, 0.10);
}

.location-switcher-back {
    margin-top: 4px;
    color: var(--text-soft, #a99d84);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    opacity: 0.78;
}

.location-switcher-link:hover,
.location-switcher-link:focus-visible,
.location-switcher-back:hover,
.location-switcher-back:focus-visible {
    color: #ffe49a;
    opacity: 1;
    outline: none;
    transform: translateX(2px);
}

.location-switcher-link:focus-visible,
.location-switcher-back:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 700px) {
    .location-switcher {
        gap: 2px;
    }

    .location-switcher-link {
        font-size: 0.72rem;
        letter-spacing: 0.015em;
    }

    .location-switcher-link.is-current {
        margin: 0 0 1px;
        font-size: 0.94rem;
        letter-spacing: 0.015em;
    }

    .location-switcher-back {
        display: inline-block;
        margin-top: 2px;
        font-size: 0.67rem;
    }

    .header-top {
        grid-template-columns: minmax(82px, 0.82fr) minmax(112px, 145px) minmax(110px, 1.18fr);
    }

    .placeholder-header {
        grid-template-columns: minmax(82px, 0.82fr) minmax(105px, 135px) minmax(110px, 1.18fr);
    }
}

@media (max-width: 390px) {
    .location-switcher-link {
        font-size: 0.67rem;
    }

    .location-switcher-link.is-current {
        font-size: 0.86rem;
    }

    .location-switcher-back {
        font-size: 0.62rem;
    }

    .header-top {
        grid-template-columns: minmax(76px, 0.82fr) minmax(102px, 124px) minmax(103px, 1.18fr);
    }
}

/* =========================================================
   STANDORTWECHSLER – MEHR ABSTAND + TELEFON AM AKTIVEN STANDORT
   ========================================================= */

.location-switcher {
    gap: 9px;
}

.location-switcher-link.is-current {
    margin: 0;
}

.location-switcher-call {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 10px;
    max-width: 100%;
    white-space: nowrap;
}

.location-switcher-name {
    flex: 0 0 auto;
}

.location-switcher-phone {
    display: inline-block;
    flex: 0 0 auto;
    color: #ffe49a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.56em;
    font-weight: 700;
    letter-spacing: 0.02em;
    transform-origin: center;
    animation: toros-phone-pulse 1.8s ease-in-out infinite;
}

@keyframes toros-phone-pulse {
    0%, 100% {
        opacity: 0.72;
        text-shadow: 0 0 0 rgba(255, 228, 154, 0);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 13px rgba(255, 228, 154, 0.62);
    }
}

.header-balance {
    min-width: 0;
}

/* Galaxy S20 FE und ähnlich schmale Smartphones:
   Standortnavigation bleibt links neben dem Logo, die frühere rechte
   Telefonspalte entfällt und kann den Header nicht mehr zusammendrücken. */
@media (max-width: 700px) {
    .header-top,
    .placeholder-header {
        grid-template-columns: minmax(0, 1fr) minmax(116px, 142px);
        gap: 8px;
        padding: 7px 9px 9px;
    }

    .header-balance,
    .header-info-right.header-balance,
    .placeholder-header-phone.header-balance {
        display: none;
    }

    .logo-wrap,
    .placeholder-brand {
        justify-self: end;
    }

    .logo-wrap {
        min-height: 96px;
    }

    .logo {
        max-width: 142px;
        max-height: 100px;
    }

    .placeholder-logo {
        width: min(142px, 38vw);
        height: auto;
    }

    .location-switcher {
        width: 100%;
        min-width: 0;
        gap: 7px;
    }

    .location-switcher-link {
        font-size: 0.76rem;
    }

    .location-switcher-link.is-current {
        font-size: 0.98rem;
    }

    .location-switcher-call {
        gap: 7px;
    }

    .location-switcher-phone {
        font-size: 0.59em;
        letter-spacing: 0;
    }

    .location-switcher-back {
        margin-top: 1px;
        font-size: 0.68rem;
    }
}

@media (max-width: 390px) {
    .header-top,
    .placeholder-header {
        grid-template-columns: minmax(0, 1fr) minmax(108px, 128px);
        gap: 6px;
        padding-left: 7px;
        padding-right: 7px;
    }

    .logo-wrap {
        min-height: 86px;
    }

    .logo {
        max-width: 128px;
        max-height: 90px;
    }

    .placeholder-logo {
        width: min(128px, 36vw);
    }

    .location-switcher {
        gap: 6px;
    }

    .location-switcher-link {
        font-size: 0.70rem;
    }

    .location-switcher-link.is-current {
        font-size: 0.98rem;
    }

    .location-switcher-call {
        gap: 6px;
    }

    .location-switcher-phone {
        font-size: 0.58em;
    }

    .location-switcher-back {
        font-size: 0.63rem;
    }
}

/* =========================================================
   STANDORT-AKTIONSLEISTE – LINKS MEDIEN / RECHTS ALLERGENE
   ========================================================= */

.header-action-row {
    width: min(1500px, calc(100% - 32px));
    margin: 12px auto 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-action-row .header-media-buttons {
    width: auto;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.header-action-row .header-media-button {
    min-width: 140px;
    min-height: 42px;
    padding: 5px 10px 5px 7px;
    grid-template-columns: 30px 1fr 18px;
    column-gap: 8px;
}

.header-action-row .header-media-icon {
    width: 29px;
    height: 29px;
}

.header-allergen-button {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 42px;
    white-space: nowrap;
}

/* Die Telefonnummer der aktiven Standortseite wird hier skaliert.
   Diesen Wert ändern, wenn sie später größer/kleiner werden soll. */
.location-switcher-phone {
    font-size: 0.78em;
}

@media (max-width: 700px) {
    .header-action-row {
        width: calc(100% - 20px);
        margin: 8px auto 16px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    /* Auf schmalen Displays werden die Navigationslinks Teil des 2-Spalten-Rasters. */
    .header-action-row .header-media-buttons {
        display: contents;
    }

    .header-action-row .header-media-button,
    .header-action-row .header-allergen-button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        margin: 0;
    }

    .header-action-row .header-media-button {
        grid-template-columns: 29px minmax(0, 1fr) 15px;
        column-gap: 7px;
        padding: 6px 7px;
        font-size: 0.82rem;
    }

    .header-action-row .header-media-icon {
        width: 28px;
        height: 28px;
        font-size: 0.88rem;
    }

    .header-action-row .header-allergen-button {
        padding: 7px 8px;
        font-size: 0.80rem;
        text-align: center;
        white-space: normal;
        line-height: 1.15;
    }

    .location-switcher-phone {
        font-size: 0.76em;
    }
}

@media (max-width: 390px) {
    .header-action-row {
        width: calc(100% - 16px);
        gap: 7px;
    }

    .header-action-row .header-media-button {
        min-height: 42px;
        grid-template-columns: 27px minmax(0, 1fr) 13px;
        column-gap: 5px;
        padding: 5px 6px;
        font-size: 0.76rem;
        letter-spacing: 0.005em;
    }

    .header-action-row .header-media-icon {
        width: 27px;
        height: 27px;
        font-size: 0.82rem;
    }

    .header-action-row .header-allergen-button {
        min-height: 42px;
        padding: 6px 5px;
        font-size: 0.73rem;
    }

    .location-switcher-phone {
        font-size: 0.73em;
    }
}

/* =========================================================
   DESKTOP-AUSRICHTUNG HEADER / AKTIONSLEISTE / STATUS
   ---------------------------------------------------------
   Auf Desktop werden Standortnavigation, Medienbuttons,
   Allergene-Button und Statusleiste exakt an der inneren
   Kante der Speisekarte ausgerichtet.

   WICHTIG:
   Die Smartphone-Darstellung wird absichtlich NICHT geändert.
   ========================================================= */
@media (min-width: 701px) {

    /*
     * .main-content ist maximal 1500 px breit und hat links/rechts
     * je 20 px Innenabstand. Die sichtbare Speisekarte ist dadurch
     * maximal 1460 px breit. Genau diese Kante verwenden wir auch
     * für den Header.
     */
    .header-top {
        width: min(1460px, calc(100% - 40px));
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .header-action-row {
        width: min(1460px, calc(100% - 40px));
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .status-bar {
        width: min(1460px, calc(100% - 40px));
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    /*
     * Standortwechsler bleibt linksbündig an derselben Kante.
     * Logo bleibt durch das 1fr / auto / 1fr-Raster mittig.
     */
    .header-location,
    .location-switcher {
        justify-self: start;
        align-items: flex-start;
        text-align: left;
    }

    /*
     * Medienbuttons links und Allergene/Zusatzstoffe rechts,
     * ebenfalls an den Speisekartenkanten.
     */
    .header-action-row .header-media-buttons {
        justify-content: flex-start;
    }

    .header-action-row .header-allergen-button {
        margin-left: auto;
    }

}

/* =========================================================
   GERICHTSNAMEN AUF PC/TABLET VOLLSTÄNDIG ANZEIGEN
   ---------------------------------------------------------
   Die Grundregel kürzt Produktnamen mit "..." ab.
   Ab 651 px dürfen die Namen deshalb auf mehrere Zeilen
   umbrechen. Die Smartphone-Regeln bis 650 px bleiben
   vollständig unverändert.
   ========================================================= */
@media (min-width: 651px) {

    .product-name {
        line-height: 1.20;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .product-summary {
        height: auto;
        min-height: 46px;
        align-items: center;
    }

}