/* ==========================================================
   TOROS – STANDORTAUSWAHL
   KOMPAKTE VOLLBILD-VERSION
   ========================================================== */


/* ==========================================================
   TEXTUR- UND DUNKELHEITS-REGLER – STARTSEITE
   ==========================================================

   Die letzte Zahl in rgba(..., X) ist die Deckkraft:
   0.00 = durchsichtig / Textur sehr deutlich
   0.50 = mittel
   0.80 = dunkel
   0.90 = sehr dunkel
   1.00 = vollständig deckend

   Höherer Wert = dunkler / weniger Textur sichtbar.
   Niedrigerer Wert = heller / mehr Textur sichtbar.
*/

:root {
    /* Gesamter Seitenhintergrund */
    --overview-bg-top: rgba(4, 4, 4, 0.56);
    --overview-bg-bottom: rgba(4, 4, 4, 0.84);

    /* Standortkarte Gelenau */
    --gelenau-card-overlay-top: rgba(28, 14, 5, 0.78);
    --gelenau-card-overlay-bottom: rgba(5, 3, 1, 0.90);

    /* Standortkarte Auerbach */
    --auerbach-card-overlay-top: rgba(5, 7, 8, 0.84);
    --auerbach-card-overlay-bottom: rgba(1, 2, 2, 0.93);

    /* Standortkarte Trattoria */
    --trattoria-card-overlay-top: rgba(8, 8, 8, 0.78);
    --trattoria-card-overlay-bottom: rgba(2, 2, 2, 0.91);
}


/* ==========================================================
   GRUNDLAGEN
   ========================================================== */

* {
    box-sizing: border-box;
}


html,
body {
    min-height: 100%;
}


body {
    margin: 0;

    min-height: 100vh;

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

    color: #d6c7a7;

    background:
        linear-gradient(
            var(--overview-bg-top),
            var(--overview-bg-bottom)
        ),
        url("/texture/background")
        center center / cover
        fixed;
}


a {
    color: inherit;
}


.page {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}



/* ==========================================================
   LOGOBEREICH
   ========================================================== */

.hero {
    text-align: center;

    padding:
        12px 20px
        7px;
}


.hero-logo {
    display: block;

    width:
        min(
            410px,
            80vw
        );

    height: auto;

    margin:
        0 auto
        5px;

    filter:
        drop-shadow(
            0 12px 32px
            rgba(0, 0, 0, 0.78)
        );
}

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

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

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


.hero-divider {
    width: 125px;
    height: 1px;

    margin:
        0 auto;

    position: relative;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                220,
                175,
                49,
                0.85
            ),
            transparent
        );
}


.hero-divider::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 7px;
    height: 7px;

    background: #d5a830;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(45deg);
}



/* ==========================================================
   STANDORTE
   ========================================================== */

.locations {
    width:
        min(
            1450px,
            calc(100% - 28px)
        );

    flex: 1;

    margin:
        7px auto
        12px;

    display: grid;

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

    align-items: stretch;

    gap: 22px;
}



/* ==========================================================
   STANDORTKARTEN
   ========================================================== */

.location-card {
    position: relative;

    cursor: pointer;

    min-height: 360px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            210,
            166,
            43,
            0.52
        );

    border-radius: 3px;

    background:
        linear-gradient(
            150deg,
            rgba(
                20,
                19,
                16,
                0.96
            ),
            rgba(
                5,
                5,
                5,
                0.97
            )
        );

    box-shadow:
        0 16px 40px
        rgba(
            0,
            0,
            0,
            0.40
        );

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}


.location-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(
            230,
            188,
            62,
            0.90
        );

    box-shadow:
        0 22px 48px
        rgba(
            0,
            0,
            0,
            0.55
        );
}


.location-card::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(
                218,
                176,
                52,
                0.065
            ),
            transparent 43%
        );
}



/* ==========================================================
   KARTENINHALT
   ========================================================== */

.location-content {
    position: relative;

    z-index: 1;

    height: 100%;

    padding:
        21px 28px
        20px;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}


.location-content h2 {
    margin:
        0 0
        7px;

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

    font-weight: normal;

    font-size:
        clamp(
            2rem,
            3vw,
            2.6rem
        );

    color: #e3bb4e;

    text-shadow:
        0 2px 12px
        rgba(
            0,
            0,
            0,
            0.8
        );
}


.gold-line {
    width: 82px;
    height: 1px;

    margin:
        0 auto
        15px;

    position: relative;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d9aa30,
            transparent
        );
}


.gold-line::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 6px;
    height: 6px;

    background: #d9aa30;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(45deg);
}



/* ==========================================================
   TELEFON / ADRESSE
   ========================================================== */

.location-info {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 7px;
}


.phone {
    display: inline-block;

    color: #e5c76e;

    text-decoration: none;

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

    font-size: 1.08rem;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.phone:hover {
    color: #ffe18c;

    transform:
        translateY(-1px);
}


.address {
    margin: 0;

    color: #d1c3a6;

    font-size: 0.88rem;

    line-height: 1.3;

    white-space: nowrap;
}



/* ==========================================================
   ÖFFNUNGSZEITEN
   ========================================================== */

.opening-times {
    width: 100%;

    max-width: 350px;

    margin:
        15px auto
        15px;

    padding:
        12px 0;

    border-top:
        1px solid
        rgba(
            209,
            170,
            57,
            0.20
        );

    border-bottom:
        1px solid
        rgba(
            209,
            170,
            57,
            0.20
        );
}


.opening-title {
    margin-bottom: 9px;

    color: #c3a653;

    font-size: 0.69rem;

    text-transform: uppercase;

    letter-spacing: 0.15em;
}


.opening-row {
    display: grid;

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

    align-items: center;

    gap: 18px;

    padding:
        3px 7px;

    font-size: 0.84rem;
}


.opening-day {
    color: #cabfa8;

    text-align: left;
}


.opening-time {
    color: #ddceab;

    text-align: right;

    white-space: nowrap;
}


.opening-closed {
    color: #b8a771;

    font-style: italic;
}



/* ==========================================================
   STATUSBUTTON
   ========================================================== */

.location-button {
    width: 100%;

    max-width: 355px;

    min-height: 38px;

    margin-top: auto;

    padding:
        6px 11px;

    display: grid;

    grid-template-columns:
        14px
        1fr
        20px;

    align-items: center;

    gap: 9px;

    border: 0;

    border-radius: 3px;

    color: #d9bb63;

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

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.button-status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    justify-self: center;

    background: #9f8c5c;

    box-shadow:
        0 0 7px
        rgba(
            159,
            140,
            92,
            0.55
        );
}


.button-label {
    text-align: center;

    font-size: 0.82rem;

    font-weight: 600;

    letter-spacing: 0.02em;
}


.button-arrow {
    justify-self: end;

    font-size: 1.15rem;

    transition:
        transform 0.2s ease;
}


.location-button:hover {
    color: #ffe496;

    border-color: #e2b641;

    background:
        rgba(
            210,
            168,
            46,
            0.08
        );

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(
            0,
            0,
            0,
            0.23
        );
}


.location-button:hover
.button-arrow {
    transform:
        translateX(4px);
}



/* ==========================================================
   GEÖFFNET
   ========================================================== */

.location-button.is-open {
    color: #cce89b;

    border-color:
        rgba(
            126,
            183,
            71,
            0.65
        );

    background:
        rgba(
            89,
            135,
            45,
            0.08
        );
}


.location-button.is-open
.button-status-dot {
    background: #86c447;

    box-shadow:
        0 0 10px
        rgba(
            134,
            196,
            71,
            0.82
        );
}


.location-button.is-open:hover {
    color: #e2ffc1;

    border-color: #92cf56;

    background:
        rgba(
            101,
            156,
            48,
            0.14
        );
}



/* ==========================================================
   GESCHLOSSEN
   ========================================================== */

.location-button.is-closed {
    color: #d5bd79;

    border-color:
        rgba(
            190,
            154,
            67,
            0.48
        );
}


.location-button.is-closed
.button-status-dot {
    background: #b28f45;

    box-shadow:
        0 0 8px
        rgba(
            178,
            143,
            69,
            0.62
        );
}



/* ==========================================================
   TRATTORIA
   ========================================================== */

.location-card-closed {
    background:
        linear-gradient(
            150deg,
            rgba(
                17,
                16,
                14,
                0.97
            ),
            rgba(
                4,
                4,
                4,
                0.98
            )
        );
}


.closed-badge {
    margin:
        14px auto
        8px;

    padding:
        6px 15px;

    border:
        1px solid
        rgba(
            221,
            174,
            45,
            0.48
        );

    border-radius: 20px;

    color: #ddb752;

    background:
        rgba(
            201,
            153,
            30,
            0.07
        );

    font-size: 0.72rem;

    font-weight: bold;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.reopening-text {
    margin:
        4px 0
        12px;

    color: #dec46f;

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

    font-size: 1.15rem;
}


.closed-description {
    max-width: 315px;

    margin:
        0 auto
        18px;

    color: #b8ae99;

    line-height: 1.5;

    font-size: 0.88rem;
}


.location-button-reopening {
    color: #d8b456;

    border-color:
        rgba(
            213,
            168,
            47,
            0.55
        );
}


.location-button-reopening
.button-status-dot {
    background: #d3a537;

    box-shadow:
        0 0 9px
        rgba(
            211,
            165,
            55,
            0.65
        );
}



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

footer {
    flex: 0 0 auto;

    padding:
        6px 20px
        8px;

    text-align: center;

    color: #766c59;

    font-size: 0.66rem;
}



/* ==========================================================
   KLEINERE DESKTOPS / TABLETS
   ========================================================== */

@media (
    max-width: 1099px
) {

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


    .location-card:last-child {
        grid-column:
            1 / -1;

        width:
            min(
                600px,
                100%
            );

        justify-self: center;
    }

}



/* ==========================================================
   TABLET / MITTLERE BILDSCHIRME
   Ein eigener, stabiler Layoutmodus für 481–1099 CSS-Pixel.
   Die Bildschirmhöhe ändert das Layout nicht.
   ========================================================== */

@media (min-width: 481px) and (max-width: 1099px) {

    body {
        background-attachment: scroll;
    }

    .hero {
        padding: 14px 18px 8px;
    }

    .hero-logo {
        width: 300px;
        max-width: 70vw;
        margin-bottom: 7px;
    }

    .locations {
        width: min(940px, calc(100% - 32px));
        gap: 16px;
        margin-top: 9px;
        margin-bottom: 14px;
    }

    .location-card {
        min-height: 350px;
    }

    .location-card:last-child {
        width: min(560px, 100%);
    }

    .location-content {
        padding: 20px 20px 18px;
    }

    .location-content h2 {
        font-size: 2rem;
    }
}


/* Statuszeile bewusst rahmenlos und kompakter auf allen Geräten. */
.location-button,
.location-button.is-open,
.location-button.is-closed,
.location-button-reopening,
.location-button:hover,
.location-button.is-open:hover {
    border: 0 !important;
}

.location-button {
    min-height: 38px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ==========================================================
   SMARTPHONE – EINHEITLICHER LAYOUTMODUS
   320–480 CSS-Pixel benutzen bewusst dieselben Größen.
   Nur die verfügbare Breite der Karte ändert sich; die Höhe des
   Gerätes bestimmt ausschließlich, wie weit gescrollt werden muss.
   ========================================================== */

@media (max-width: 480px) {

    body {
        background-attachment: scroll;
        background-position: center top;
    }

    .page {
        width: 100%;
        min-width: 0;
    }

    .hero {
        padding: 12px 12px 8px;
    }

    .hero-logo-link {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
    }

    .hero-logo {
        /* Auf Smartphones bewusst kompakter, damit die Standorttafeln
           weiter nach oben rücken und das Logo auf verschiedenen Geräten
           optisch ähnlich groß bleibt. */
        width: 196px;
        max-width: calc(100vw - 72px);
        margin: 0 auto 6px;
    }

    .hero-divider {
        width: 110px;
    }

    .locations {
        width: calc(100% - 24px);
        max-width: 390px;
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 10px auto 14px;
    }

    .location-card,
    .location-card:last-child {
        grid-column: auto;
        width: 100%;
        min-height: 0;
        justify-self: stretch;
    }

    .location-content {
        padding: 20px 16px 18px;
    }

    .location-content h2 {
        margin-bottom: 6px;
        font-size: 28px;
        line-height: 1.12;
    }

    .gold-line {
        width: 74px;
        margin-bottom: 13px;
    }

    .location-info {
        gap: 5px;
    }

    .phone {
        font-size: 15px;
    }

    .address {
        white-space: normal;
        font-size: 12px;
        line-height: 1.35;
    }

    .opening-times {
        max-width: 330px;
        margin: 14px auto;
        padding: 10px 0;
    }

    .opening-title {
        margin-bottom: 8px;
        font-size: 10.5px;
    }

    .opening-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 3px 4px;
        font-size: 13px;
    }

    .opening-day {
        min-width: 0;
        text-align: left;
    }

    .opening-time {
        text-align: right;
        font-size: 13px;
        white-space: nowrap;
    }

    .location-button {
        width: 100%;
        max-width: 330px;
        min-height: 36px;
        padding: 6px 10px;
        gap: 8px;
    }

    .button-label {
        font-size: 12.5px;
        line-height: 1.25;
    }

    .closed-badge {
        margin-top: 12px;
        padding: 5px 12px;
        font-size: 10.5px;
    }

    .reopening-text {
        margin-bottom: 10px;
        font-size: 17px;
    }

    .closed-description {
        max-width: 310px;
        margin-bottom: 15px;
        font-size: 12.5px;
        line-height: 1.45;
    }

    .overview-visitor-counter {
        gap: 5px;
        margin: 3px auto 2px;
        padding: 5px 10px;
        font-size: 11.5px;
    }

    footer {
        padding-bottom: 10px;
    }
}


/* Sehr schmale Geräte: nur Sicherheitskorrekturen, kein eigener
   optischer Layoutmodus. */
@media (max-width: 340px) {

    .hero-logo {
        width: 196px;
        max-width: calc(100vw - 72px);
    }

    .locations {
        width: calc(100% - 16px);
    }

    .location-content {
        padding-inline: 13px;
    }

    .location-content h2 {
        font-size: 26px;
    }

    .phone {
        font-size: 14px;
    }

    .address {
        font-size: 11.5px;
    }

    .opening-row,
    .opening-time {
        font-size: 12px;
    }
}


@media (max-width: 480px) and (hover: none) {
    .hero-logo-link:hover,
    .location-card:hover,
    .phone:hover,
    .location-button:hover {
        transform: none;
    }
}


/* ==========================================================
   NIEDRIGE DESKTOP-BILDSCHIRME
   ========================================================== */

@media (
    min-width: 1100px
)
and (
    max-height: 800px
) {

    .hero {
        padding-top: 4px;
    }


    .hero-logo {
        width:
            min(
                320px,
                70vw
            );
    }


    .locations {
        margin-top: 4px;
        margin-bottom: 6px;
    }


    .location-card {
        min-height: 330px;
    }


    .location-content {
        padding:
            17px 25px
            17px;
    }


    .location-content h2 {
        font-size: 2rem;
    }


    .gold-line {
        margin-bottom: 12px;
    }


    .opening-times {
        margin:
            11px auto;

        padding:
            9px 0;
    }


    .closed-badge {
        margin-top: 8px;
    }


    .closed-description {
        margin-bottom: 12px;
    }


    footer {
        padding:
            3px 20px
            5px;
    }

}
/* ==========================================================
   INDIVIDUELLE STANDORT-HINTERGRÜNDE
   ========================================================== */
.location-card-gelenau,
.location-card-auerbach,
.location-card-trattoria {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.location-card-gelenau {
    background-image:
        linear-gradient(150deg, var(--gelenau-card-overlay-top), var(--gelenau-card-overlay-bottom)),
        url("/texture/gelenau");
}

.location-card-auerbach {
    background-image:
        linear-gradient(150deg, var(--auerbach-card-overlay-top), var(--auerbach-card-overlay-bottom)),
        url("/texture/auerbach");
}

.location-card-trattoria,
.location-card-closed.location-card-trattoria {
    background-image:
        linear-gradient(150deg, var(--trattoria-card-overlay-top), var(--trattoria-card-overlay-bottom)),
        url("/texture/trattoria");
}


/* ==========================================================
   BESUCHERSTATISTIK DER ZENTRALEN STANDORTÜBERSICHT
   ========================================================== */

.overview-visitor-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px auto 2px;
    padding: 6px 14px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.overview-visitor-counter strong {
    color: #e9c875;
    font-weight: 700;
}

.overview-visitor-total-label {
    margin-left: 7px;
}

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

.location-button:focus-visible,
.phone:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

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

/* ==========================================================
   TOROS STARTANIMATION – AUFRUF ÜBER /?intro
   Entspricht dem flüssigen Logo-Anflug der Zagros-Seite.
   Die Startseite ist bereits unter dem Splash fertig gerendert.
   ========================================================== */

.toros-splash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.toros-splash-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #050504;
    opacity: 1;
    will-change: opacity;
}

.toros-splash-logo {
    /* Nicht über Grid zentrieren: Samsung/Chrome kann während einer stark
       skalierten GPU-Animation den visuellen Mittelpunkt sonst versetzen.
       Die tatsächliche Mitte der sichtbaren Viewport-Fläche wird zusätzlich
       in toros-splash.js über window.visualViewport nachgeführt. */
    position: fixed;
    left: var(--toros-splash-center-x, 50vw);
    top: var(--toros-splash-center-y, 50vh);
    width: clamp(210px, 28vw, 400px);
    height: auto;
    transform-origin: 50% 50%;
    transform: translate3d(-50%, -50%, 0) scale(0.035);
    opacity: 0;
    backface-visibility: hidden;
    will-change: transform, opacity;
    pointer-events: none;
    user-select: none;
}

body.toros-splash-active {
    overflow: hidden;
}

body.toros-splash-active .page,
.page {
    opacity: 1;
    transform: none;
}

body.toros-splash-running .toros-splash-logo {
    animation:
        torosLogoApproach 2.65s cubic-bezier(0.42, 0, 0.92, 0.46) forwards,
        torosLogoVisibility 2.65s linear forwards;
}

body.toros-splash-running .toros-splash-backdrop {
    animation: torosBackdropContinuousReveal 2.65s linear forwards;
}

@keyframes torosLogoApproach {
    from {
        transform: translate3d(-50%, -50%, 0) scale(0.035);
    }
    to {
        transform: translate3d(-50%, -50%, 0) scale(10);
    }
}

@keyframes torosLogoVisibility {
    0% { opacity: 0; }
    7% { opacity: 0.78; }
    16% { opacity: 1; }
    86% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes torosBackdropContinuousReveal {
    0% { opacity: 1; }
    72% { opacity: 1; }
    100% { opacity: 0; }
}

@media (max-width: 700px) {
    .toros-splash-logo {
        width: clamp(190px, 56vw, 310px);
    }
}

/* ?intro ist eine bewusste Vorschau-/Startanforderung und darf deshalb
   auch bei aktivierter Systemeinstellung "Bewegung reduzieren" laufen. */
@media (prefers-reduced-motion: reduce) {
    body.toros-splash-force-motion .toros-splash-logo {
        animation:
            torosLogoApproach 2.65s cubic-bezier(0.42, 0, 0.92, 0.46) forwards,
            torosLogoVisibility 2.65s linear forwards !important;
    }

    body.toros-splash-force-motion .toros-splash-backdrop {
        animation: torosBackdropContinuousReveal 2.65s linear forwards !important;
    }
}


/* ==========================================================
   STANDORTKARTEN – Sequenzsteuerung
   Die eigentliche Bewegung läuft bewusst per Web Animations API in
   standorte.js. Dadurch kollidiert sie nicht mit Hover-Transforms.
   ========================================================== */
body.toros-card-sequence-pending {
    overflow-x: hidden;
}

body.toros-card-sequence-pending .location-card {
    pointer-events: none;
}


/* ==========================================================
   STATUSZEILE – FINAL KOMPAKT / OHNE HINTERGRUNDFLAECHE
   ========================================================== */
.location-button,
.location-button.is-open,
.location-button.is-closed,
.location-button-reopening,
.location-button:hover,
.location-button.is-open:hover,
.location-button.is-closed:hover,
.location-button-reopening:hover {
    min-height: 26px !important;
    padding: 1px 7px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.location-button {
    gap: 6px !important;
}

.button-label {
    line-height: 1.08 !important;
}

.button-status-dot {
    width: 7px !important;
    height: 7px !important;
}

.button-arrow {
    line-height: 1 !important;
}

@media (max-width: 480px) {
    .location-button {
        min-height: 24px !important;
        padding: 0 6px !important;
        gap: 5px !important;
    }

    .button-label {
        font-size: 11.5px !important;
        line-height: 1.05 !important;
    }

    .button-status-dot {
        width: 6px !important;
        height: 6px !important;
    }
}

/* ==========================================================
   SMARTPHONE – NOCH KOMPAKTERER KOPF + STANDORTTAFELN
   ========================================================== */
@media (max-width: 480px) {
    .hero {
        padding-top: 8px;
        padding-bottom: 5px;
    }

    .hero-logo,
    .hero-logo-link .hero-logo {
        width: 176px !important;
        max-width: calc(100vw - 64px) !important;
        margin-bottom: 3px !important;
    }

    .hero-divider {
        width: 96px;
        margin-top: 1px;
        margin-bottom: 2px;
    }

    .locations {
        gap: 9px;
        margin-top: 6px;
        margin-bottom: 10px;
    }

    .location-content {
        padding: 14px 14px 12px !important;
    }

    .location-content h2 {
        margin-bottom: 3px !important;
        font-size: 26px;
        line-height: 1.06;
    }

    .gold-line {
        width: 64px;
        margin-bottom: 8px !important;
    }

    .location-info {
        gap: 2px !important;
    }

    .phone {
        font-size: 14px;
        line-height: 1.15;
    }

    .address {
        font-size: 11.5px;
        line-height: 1.25;
    }

    .opening-times {
        margin: 8px auto 7px !important;
        padding: 5px 0 !important;
    }

    .opening-title {
        margin-bottom: 4px !important;
        font-size: 10px;
        line-height: 1.1;
    }

    .opening-row {
        gap: 8px;
        padding: 1px 3px !important;
        font-size: 12px;
        line-height: 1.2;
    }

    .opening-time {
        font-size: 12px;
        line-height: 1.2;
    }

    .closed-badge {
        margin-top: 7px !important;
        padding: 3px 10px !important;
    }

    .reopening-text {
        margin-bottom: 6px !important;
        font-size: 15px;
        line-height: 1.15;
    }

    .closed-description {
        margin-bottom: 9px !important;
        font-size: 11.5px;
        line-height: 1.3;
    }

    .overview-visitor-counter {
        margin-top: 2px;
        padding-top: 3px;
        padding-bottom: 3px;
    }
}

@media (max-width: 340px) {
    .hero-logo,
    .hero-logo-link .hero-logo {
        width: 176px !important;
    }

    .location-content {
        padding: 12px 12px 10px !important;
    }

    .location-content h2 {
        font-size: 24px;
    }
}

/* ==========================================================
   SMARTPHONE – FINAL ULTRAKOMPAKT
   - Logo kleiner
   - Überschrift "Öffnungszeiten" ausblenden
   - Öffnungszeitenblock und Live-Status flacher
   ========================================================== */
@media (max-width: 480px) {
    .hero-logo,
    .hero-logo-link .hero-logo {
        width: 160px !important;
        max-width: calc(100vw - 72px) !important;
        margin-bottom: 1px !important;
    }

    .opening-title {
        display: none !important;
    }

    .opening-times {
        margin: 5px auto 4px !important;
        padding: 2px 0 !important;
    }

    .opening-row {
        padding: 0 3px !important;
        gap: 7px !important;
        font-size: 11.5px !important;
        line-height: 1.12 !important;
        min-height: 0 !important;
    }

    .opening-day,
    .opening-time {
        font-size: 11.5px !important;
        line-height: 1.12 !important;
    }

    .location-button,
    .location-button.is-open,
    .location-button.is-closed,
    .location-button-reopening,
    .location-button:hover,
    .location-button.is-open:hover,
    .location-button.is-closed:hover,
    .location-button-reopening:hover {
        min-height: 19px !important;
        height: auto !important;
        padding: 0 4px !important;
        gap: 4px !important;
        line-height: 1 !important;
    }

    .button-label {
        font-size: 10.5px !important;
        line-height: 1 !important;
    }

    .button-status-dot {
        width: 5px !important;
        height: 5px !important;
        flex: 0 0 5px !important;
    }

    .button-arrow {
        font-size: 12px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 340px) {
    .hero-logo,
    .hero-logo-link .hero-logo {
        width: 160px !important;
    }
}

/* ==========================================================
   SMARTPHONE – TRATTORIA KOMPAKTER
   Nur im einspaltigen Smartphone-Layout bis 480 px:
   Beschreibung und Wiedereröffnungs-Button ausblenden.
   ========================================================== */
@media (max-width: 480px) {
    .location-card-trattoria .closed-description,
    .location-card-trattoria .location-button-reopening {
        display: none !important;
    }

    .location-card-trattoria .reopening-text {
        margin: 3px 0 0 !important;
    }

    .location-card-trattoria .closed-badge {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
    }

    .location-card-trattoria .location-content {
        padding-bottom: 10px !important;
    }
}

/* ==========================================================
   FINAL VIEWPORT-MATRIX – 21.09.2026
   Grundlage: CSS-Viewport, NICHT physische Display-Pixel/DPR.

   Smartphones: 320–480 CSS px
   Kleine Tablets / Foldables: 481–767 CSS px
   Tablets: 768–1099 CSS px
   Desktop: ab 1100 CSS px

   Alle normalen Smartphone-Modelle der bereitgestellten Matrix
   (iPhone 11–17, Galaxy S24, Pixel 8, OnePlus 12, Xiaomi 14,
   Oppo Find X7 Pro, Xperia 1 VI, Edge 50 Pro usw.) landen damit
   im identischen Smartphone-Layout.
   ========================================================== */

/* Einheitlicher Smartphone-Modus: keine geräteabhängige Skalierung. */
@media (max-width: 480px) {
    .hero {
        padding: 7px 10px 4px !important;
    }

    .hero-logo,
    .hero-logo-link .hero-logo {
        width: 160px !important;
        max-width: 160px !important;
        height: auto !important;
        margin: 0 auto 1px !important;
    }

    .hero-divider {
        width: 92px !important;
        margin-top: 0 !important;
        margin-bottom: 1px !important;
    }

    .locations {
        width: calc(100% - 20px) !important;
        max-width: 400px !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 5px auto 10px !important;
    }

    .location-card,
    .location-card:last-child {
        grid-column: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        justify-self: stretch !important;
    }

    .location-content {
        padding: 12px 13px 9px !important;
    }

    .location-content h2 {
        font-size: 25px !important;
        line-height: 1.04 !important;
        margin-bottom: 2px !important;
    }

    .gold-line {
        width: 60px !important;
        margin-bottom: 6px !important;
    }

    .location-info {
        gap: 1px !important;
    }

    .phone {
        font-size: 13.5px !important;
        line-height: 1.12 !important;
    }

    .address {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    .opening-title {
        display: none !important;
    }

    .opening-times {
        margin: 4px auto 3px !important;
        padding: 1px 0 !important;
    }

    .opening-row {
        min-height: 0 !important;
        padding: 0 3px !important;
        gap: 6px !important;
        font-size: 11px !important;
        line-height: 1.08 !important;
    }

    .opening-day,
    .opening-time {
        font-size: 11px !important;
        line-height: 1.08 !important;
    }

    .location-button,
    .location-button.is-open,
    .location-button.is-closed,
    .location-button-reopening,
    .location-button:hover,
    .location-button.is-open:hover,
    .location-button.is-closed:hover,
    .location-button-reopening:hover {
        min-height: 18px !important;
        padding: 0 3px !important;
        gap: 3px !important;
    }

    .button-label {
        font-size: 10px !important;
        line-height: 1 !important;
    }

    .button-status-dot {
        width: 5px !important;
        height: 5px !important;
        flex: 0 0 5px !important;
    }

    .location-card-trattoria .closed-description,
    .location-card-trattoria .location-button-reopening {
        display: none !important;
    }

    .location-card-trattoria .reopening-text {
        margin: 2px 0 0 !important;
    }

    .location-card-trattoria .closed-badge {
        margin-top: 4px !important;
        margin-bottom: 0 !important;
    }

    .overview-visitor-counter {
        margin-top: 1px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
}

/* Foldables und kleine Tablets – stabiler Zwischenmodus. */
@media (min-width: 481px) and (max-width: 767px) {
    .hero {
        padding: 11px 14px 6px !important;
    }

    .hero-logo,
    .hero-logo-link .hero-logo {
        width: 245px !important;
        max-width: 245px !important;
    }

    .locations {
        width: calc(100% - 24px) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin-top: 7px !important;
    }

    .location-card {
        min-height: 320px !important;
    }

    .location-card:last-child {
        grid-column: 1 / -1 !important;
        width: min(470px, 100%) !important;
    }

    .location-content {
        padding: 17px 15px 14px !important;
    }
}

/* Klassische Tablets – zwei Tafeln oben, dritte mittig darunter. */
@media (min-width: 768px) and (max-width: 1099px) {
    .hero-logo,
    .hero-logo-link .hero-logo {
        width: 280px !important;
        max-width: 280px !important;
    }

    .locations {
        width: min(940px, calc(100% - 32px)) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .location-card:last-child {
        grid-column: 1 / -1 !important;
        width: min(560px, 100%) !important;
        justify-self: center !important;
    }
}

/* ==========================================================
   PAGESPEED – sichere Frontend-Optimierung
   Nur Transform wird animiert; keine serverseitige Bildverarbeitung.
   ========================================================== */
.location-button,
.location-button.is-open,
.location-button.is-closed,
.location-button-reopening {
    transition: transform 0.2s ease !important;
}


/* ==========================================================
   SMARTPHONE – Standorttafeln sequenziell seitlich einfahren
   Nur im Einspalten-Modus bis 480 CSS-px. standorte.js startet
   nach dem Logo-Intro eine feste Reihenfolge:
   Gelenau links -> Auerbach rechts -> Trattoria links.
   ========================================================== */
@media (max-width: 480px) {
    body.toros-mobile-card-animation-active {
        overflow-x: hidden;
    }
}


/* ==========================================================
   RESPONSIVE 2+1-MATRIX – 22.09.2026
   481–1099 CSS-px: Gelenau + Auerbach oben, Trattoria darunter.

   WICHTIG:
   - KEINE Skalierung der kompletten .page mehr.
   - Die Seite nutzt echte CSS-Größen und bleibt dadurch lesbar.
   - Bei niedriger Höhe werden nur Logo, Abstände und Karteninhalte
     gezielt kompakter.
   - Ab 1100 CSS-px beginnt die 3-Spalten-Desktopansicht.
   ========================================================== */
@media (min-width: 481px) and (max-width: 1099px) {
    html,
    body {
        min-height: 100%;
    }

    body {
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .page {
        width: 100%;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        transform: none !important;
        transform-origin: initial !important;
        display: flex;
        flex-direction: column;
    }

    .hero {
        flex: 0 0 auto;
        padding: clamp(7px, 1.1dvh, 14px) 16px clamp(5px, 0.75dvh, 9px) !important;
    }

    .hero-logo,
    .hero-logo-link .hero-logo {
        width: clamp(190px, 22dvh, 290px) !important;
        max-width: 58vw !important;
        height: auto !important;
        margin: 0 auto clamp(3px, 0.45dvh, 6px) !important;
    }

    .hero-divider {
        width: 112px !important;
    }

    .locations {
        flex: 0 0 auto !important;
        width: min(1000px, calc(100% - 28px)) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto !important;
        gap: clamp(8px, 1.1dvh, 16px) !important;
        margin: clamp(5px, 0.7dvh, 9px) auto clamp(6px, 0.8dvh, 10px) !important;
        align-items: stretch !important;
    }

    .location-card-gelenau,
    .location-card-auerbach {
        min-height: clamp(230px, 29dvh, 315px) !important;
    }

    .location-card-trattoria,
    .location-card:last-child {
        grid-column: 1 / -1 !important;
        width: min(620px, 100%) !important;
        min-height: clamp(145px, 18dvh, 205px) !important;
        justify-self: center !important;
    }

    .location-content {
        padding: clamp(10px, 1.35dvh, 17px) clamp(13px, 1.8vw, 20px) clamp(9px, 1.2dvh, 15px) !important;
    }

    .location-content h2 {
        margin-bottom: clamp(2px, 0.35dvh, 5px) !important;
        font-size: clamp(1.45rem, 2.65dvh, 1.95rem) !important;
        line-height: 1.06 !important;
    }

    .gold-line {
        width: 70px !important;
        margin-bottom: clamp(5px, 0.7dvh, 10px) !important;
    }

    .location-info {
        gap: clamp(2px, 0.3dvh, 5px) !important;
    }

    .phone {
        font-size: clamp(0.83rem, 1.42dvh, 1rem) !important;
        line-height: 1.18 !important;
    }

    .address {
        white-space: normal !important;
        font-size: clamp(0.70rem, 1.15dvh, 0.84rem) !important;
        line-height: 1.24 !important;
    }

    .opening-times {
        margin: clamp(6px, 0.8dvh, 11px) auto !important;
        padding: clamp(5px, 0.65dvh, 9px) 0 !important;
    }

    .opening-title {
        margin-bottom: clamp(3px, 0.45dvh, 6px) !important;
        font-size: clamp(0.58rem, 0.93dvh, 0.68rem) !important;
    }

    .opening-row {
        gap: 12px !important;
        padding: clamp(1px, 0.22dvh, 3px) 5px !important;
        font-size: clamp(0.70rem, 1.10dvh, 0.82rem) !important;
        line-height: 1.18 !important;
    }

    .opening-time {
        font-size: inherit !important;
    }

    .location-button,
    .location-button.is-open,
    .location-button.is-closed,
    .location-button-reopening {
        min-height: clamp(23px, 2.8dvh, 31px) !important;
        padding: 2px 6px !important;
    }

    .button-label {
        font-size: clamp(0.66rem, 1.02dvh, 0.79rem) !important;
    }

    .closed-badge {
        margin: clamp(4px, 0.55dvh, 8px) auto clamp(2px, 0.3dvh, 5px) !important;
        padding: 3px 11px !important;
        font-size: clamp(0.60rem, 0.95dvh, 0.70rem) !important;
    }

    .reopening-text {
        margin: 2px 0 clamp(3px, 0.45dvh, 6px) !important;
        font-size: clamp(0.88rem, 1.5dvh, 1.05rem) !important;
        line-height: 1.16 !important;
    }

    .closed-description {
        max-width: 460px !important;
        margin-bottom: clamp(4px, 0.55dvh, 8px) !important;
        font-size: clamp(0.68rem, 1.03dvh, 0.80rem) !important;
        line-height: 1.28 !important;
    }

    .overview-visitor-counter {
        flex: 0 0 auto !important;
        gap: 5px !important;
        margin: 0 auto !important;
        padding: clamp(2px, 0.32dvh, 5px) 10px !important;
        font-size: clamp(0.66rem, 0.94dvh, 0.78rem) !important;
        line-height: 1.15 !important;
    }
}

/* Mittlere Höhe, z. B. 1024×768: ohne Ganzseiten-Skalierung passend machen. */
@media (min-width: 481px) and (max-width: 1099px) and (max-height: 800px) and (min-height: 501px) {
    .hero {
        padding-top: 5px !important;
        padding-bottom: 4px !important;
    }

    .hero-logo,
    .hero-logo-link .hero-logo {
        width: clamp(160px, 20dvh, 205px) !important;
        margin-bottom: 2px !important;
    }

    .hero-divider {
        width: 96px !important;
    }

    .locations {
        gap: 8px !important;
        margin-top: 4px !important;
        margin-bottom: 5px !important;
    }

    .location-card-gelenau,
    .location-card-auerbach {
        min-height: clamp(215px, 28dvh, 245px) !important;
    }

    .location-card-trattoria,
    .location-card:last-child {
        min-height: clamp(130px, 17dvh, 155px) !important;
    }

    .location-content {
        padding-top: 9px !important;
        padding-bottom: 8px !important;
    }

    .location-content h2 {
        font-size: clamp(1.35rem, 2.5dvh, 1.65rem) !important;
    }

    .gold-line {
        margin-bottom: 5px !important;
    }

    .opening-times {
        margin: 5px auto !important;
        padding: 4px 0 !important;
    }

    .opening-title {
        margin-bottom: 3px !important;
    }

    .opening-row {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .location-button,
    .location-button.is-open,
    .location-button.is-closed,
    .location-button-reopening {
        min-height: 22px !important;
    }
}

/* Niedrige Querformat-Displays, z. B. 667×375, 800×360, 844×390.
   Hier wird gezielt verdichtet – niemals die gesamte Seite skaliert. */
@media (min-width: 481px) and (max-width: 1099px) and (max-height: 500px) {
    .page {
        min-height: 100dvh !important;
    }

    .hero {
        padding: 2px 10px 1px !important;
    }

    .hero-logo,
    .hero-logo-link .hero-logo {
        width: clamp(64px, 19dvh, 86px) !important;
        max-width: 20vw !important;
        margin: 0 auto 0 !important;
    }

    .hero-divider {
        width: 58px !important;
    }

    .hero-divider::after {
        width: 4px !important;
        height: 4px !important;
    }

    .locations {
        width: min(900px, calc(100% - 16px)) !important;
        gap: 4px 7px !important;
        margin: 2px auto 3px !important;
    }

    .location-card-gelenau,
    .location-card-auerbach {
        min-height: 112px !important;
    }

    .location-card-trattoria,
    .location-card:last-child {
        width: min(520px, 72%) !important;
        min-height: 70px !important;
    }

    .location-content {
        padding: 4px 8px 3px !important;
    }

    .location-content h2 {
        margin-bottom: 0 !important;
        font-size: clamp(0.96rem, 4.2dvh, 1.14rem) !important;
        line-height: 1 !important;
    }

    .gold-line {
        width: 44px !important;
        margin-bottom: 2px !important;
    }

    .gold-line::after {
        width: 4px !important;
        height: 4px !important;
    }

    .location-info {
        gap: 0 !important;
    }

    .phone {
        font-size: clamp(0.58rem, 2.45dvh, 0.68rem) !important;
        line-height: 1.05 !important;
    }

    .address {
        font-size: clamp(0.49rem, 2.0dvh, 0.58rem) !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .opening-times {
        margin: 2px auto 1px !important;
        padding: 1px 0 !important;
        max-width: 310px !important;
    }

    .opening-title {
        display: none !important;
    }

    .opening-row {
        gap: 5px !important;
        padding: 0 2px !important;
        font-size: clamp(0.48rem, 1.95dvh, 0.57rem) !important;
        line-height: 1.02 !important;
    }

    .opening-time {
        font-size: inherit !important;
    }

    .location-button,
    .location-button.is-open,
    .location-button.is-closed,
    .location-button-reopening {
        min-height: 12px !important;
        padding: 0 2px !important;
        gap: 2px !important;
    }

    .button-status-dot {
        width: 4px !important;
        height: 4px !important;
    }

    .button-label {
        font-size: clamp(0.46rem, 1.85dvh, 0.55rem) !important;
        line-height: 1 !important;
    }

    .button-arrow {
        font-size: 0.65rem !important;
    }

    .location-card-trattoria .closed-badge {
        margin: 1px auto 0 !important;
        padding: 1px 7px !important;
        font-size: clamp(0.45rem, 1.8dvh, 0.54rem) !important;
        line-height: 1 !important;
    }

    .location-card-trattoria .reopening-text {
        margin: 1px 0 0 !important;
        font-size: clamp(0.55rem, 2.15dvh, 0.64rem) !important;
        line-height: 1.02 !important;
    }

    .location-card-trattoria .closed-description {
        display: none !important;
    }

    .location-card-trattoria .location-button-reopening {
        min-height: 11px !important;
    }

    .overview-visitor-counter {
        gap: 3px !important;
        margin: 0 auto !important;
        padding: 1px 8px !important;
        font-size: clamp(0.48rem, 1.85dvh, 0.57rem) !important;
        line-height: 1 !important;
    }
}

/* Das Splash selbst entspricht exakt der dynamischen sichtbaren Viewport-Höhe. */
.toros-splash {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
}

/* ==========================================================
   RESPONSIVE FEINSCHLIFF – 22.09.2026
   Nachprüfung typischer Smartphone-, Tablet- und Desktop-
   Viewports. Diese Regeln stehen bewusst am Dateiende und
   überschreiben nur die problematischen Höhen-/Grenzfälle.
   ========================================================== */

/* 1) Die bisherige viewportbezogene Sonderregel 481–579 px wurde
      durch Container Queries am Dateiende ersetzt. Die Karte reagiert
      jetzt auf ihre tatsächliche Breite statt auf die Fensterbreite. */

/* 2) Zusätzliche Zwischenstufe für niedrige 2+1-Viewports
      zwischen 501 und 600 CSS-px Höhe, z. B. 720×540. */
@media (min-width: 481px) and (max-width: 1099px) and (min-height: 501px) and (max-height: 600px) {
    .hero {
        padding: 3px 10px 2px !important;
    }

    .hero-logo,
    .hero-logo-link .hero-logo {
        width: clamp(108px, 21dvh, 132px) !important;
        max-width: 30vw !important;
        margin: 0 auto 1px !important;
    }

    .hero-divider {
        width: 76px !important;
    }

    .locations {
        width: min(930px, calc(100% - 18px)) !important;
        gap: 6px 8px !important;
        margin: 3px auto 4px !important;
    }

    .location-card-gelenau,
    .location-card-auerbach {
        min-height: 168px !important;
    }

    .location-card-trattoria,
    .location-card:last-child {
        width: min(560px, 78%) !important;
        min-height: 92px !important;
    }

    .location-content {
        padding: 6px 10px 5px !important;
    }

    .location-content h2 {
        margin-bottom: 1px !important;
        font-size: 1.20rem !important;
        line-height: 1.02 !important;
    }

    .gold-line {
        width: 52px !important;
        margin-bottom: 3px !important;
    }

    .location-info {
        gap: 0 !important;
    }

    .phone {
        font-size: 0.70rem !important;
        line-height: 1.08 !important;
    }

    .address {
        font-size: 0.61rem !important;
        line-height: 1.08 !important;
    }

    .opening-times {
        margin: 3px auto 2px !important;
        padding: 2px 0 !important;
    }

    .opening-title {
        margin-bottom: 1px !important;
        font-size: 0.52rem !important;
    }

    .opening-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 7px !important;
        padding: 0 3px !important;
        font-size: 0.61rem !important;
        line-height: 1.06 !important;
    }

    .opening-day,
    .opening-time {
        white-space: nowrap !important;
    }

    .location-button,
    .location-button.is-open,
    .location-button.is-closed,
    .location-button-reopening {
        min-height: 17px !important;
        padding: 0 3px !important;
    }

    .button-label {
        font-size: 0.56rem !important;
        line-height: 1 !important;
    }

    .location-card-trattoria .closed-badge {
        margin: 2px auto 1px !important;
        padding: 2px 8px !important;
        font-size: 0.52rem !important;
    }

    .location-card-trattoria .reopening-text {
        margin: 1px 0 2px !important;
        font-size: 0.68rem !important;
        line-height: 1.04 !important;
    }

    .location-card-trattoria .closed-description {
        display: none !important;
    }

    .overview-visitor-counter {
        padding: 1px 8px !important;
        font-size: 0.58rem !important;
        line-height: 1.05 !important;
    }
}

/* 3) Extrem flaches Querformat: Lesbarkeit hat Vorrang.
      Adressen und Trattoria-Beschreibung werden ausgeblendet,
      statt die komplette Seite oder die Schrift mikroskopisch
      klein zu skalieren. */
@media (min-width: 481px) and (max-width: 1099px) and (max-height: 500px) {
    .hero-logo,
    .hero-logo-link .hero-logo {
        width: clamp(88px, 25dvh, 108px) !important;
        max-width: 22vw !important;
    }

    .locations {
        gap: 4px 8px !important;
    }

    .location-card-gelenau,
    .location-card-auerbach {
        min-height: 116px !important;
    }

    .location-card-trattoria,
    .location-card:last-child {
        width: min(520px, 74%) !important;
        min-height: 58px !important;
    }

    .location-content {
        padding: 4px 8px 3px !important;
    }

    .location-content h2 {
        font-size: clamp(1rem, 4.6dvh, 1.18rem) !important;
    }

    .phone {
        font-size: clamp(0.66rem, 2.85dvh, 0.76rem) !important;
        line-height: 1.05 !important;
    }

    .address {
        display: none !important;
    }

    .opening-times {
        margin: 2px auto 1px !important;
        padding: 1px 0 !important;
    }

    .opening-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px !important;
        padding: 0 2px !important;
        font-size: clamp(0.61rem, 2.55dvh, 0.70rem) !important;
        line-height: 1.04 !important;
    }

    .opening-day,
    .opening-time {
        white-space: nowrap !important;
    }

    .location-button,
    .location-button.is-open,
    .location-button.is-closed,
    .location-button-reopening {
        min-height: 15px !important;
        padding: 0 3px !important;
    }

    .button-label {
        font-size: clamp(0.56rem, 2.25dvh, 0.64rem) !important;
    }

    .location-card-trattoria .closed-badge {
        margin: 1px auto 0 !important;
        padding: 1px 7px !important;
        font-size: clamp(0.52rem, 2.1dvh, 0.60rem) !important;
    }

    .location-card-trattoria .reopening-text {
        margin: 1px 0 0 !important;
        font-size: clamp(0.62rem, 2.45dvh, 0.70rem) !important;
    }

    .location-card-trattoria .closed-description {
        display: none !important;
    }

    .overview-visitor-counter {
        font-size: clamp(0.56rem, 2.2dvh, 0.64rem) !important;
    }
}

/* 4 + 5) Desktop ab 1100 px: Höhenabhängige Größen statt eines
           harten Sprungs auf 410-px-Logo / riesige Karten.
           Gleichzeitig werden Karten auf großen Displays auf
           maximal 500 px Höhe begrenzt. */
@media (min-width: 1100px) {
    body {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .page {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .locations {
        flex: 0 0 auto !important;
        align-items: stretch !important;
    }

    .location-card {
        height: auto !important;
        max-height: 500px !important;
    }
}

/* Häufige Laptops / niedrige Desktop-Höhen. */
@media (min-width: 1100px) and (max-height: 950px) {
    .hero {
        padding: 6px 18px 4px !important;
    }

    .hero-logo,
    .hero-logo-link .hero-logo {
        width: clamp(180px, 24dvh, 250px) !important;
        max-width: 32vw !important;
        margin-bottom: 2px !important;
    }

    .hero-divider {
        width: 104px !important;
    }

    .locations {
        width: min(1450px, calc(100% - 28px)) !important;
        gap: clamp(12px, 1.7vw, 20px) !important;
        margin: 5px auto 7px !important;
    }

    .location-card {
        min-height: clamp(270px, 42dvh, 340px) !important;
        max-height: 340px !important;
    }

    .location-content {
        padding: clamp(12px, 1.6dvh, 16px) 18px clamp(10px, 1.4dvh, 14px) !important;
    }

    .location-content h2 {
        font-size: clamp(1.65rem, 3.1dvh, 2rem) !important;
        margin-bottom: 3px !important;
    }

    .gold-line {
        margin-bottom: 6px !important;
    }

    .location-info {
        gap: 2px !important;
    }

    .phone {
        font-size: clamp(0.84rem, 1.55dvh, 0.98rem) !important;
    }

    .address {
        font-size: clamp(0.70rem, 1.25dvh, 0.82rem) !important;
    }

    .opening-times {
        margin: 7px auto !important;
        padding: 5px 0 !important;
    }

    .opening-row {
        padding: 1px 5px !important;
        font-size: clamp(0.72rem, 1.25dvh, 0.82rem) !important;
        line-height: 1.12 !important;
    }

    .location-button,
    .location-button.is-open,
    .location-button.is-closed,
    .location-button-reopening {
        min-height: 25px !important;
    }

    .overview-visitor-counter {
        padding: 2px 10px !important;
        font-size: clamp(0.68rem, 1.1dvh, 0.78rem) !important;
    }
}

/* Normale und hohe Desktops: harmonische Größen mit Obergrenze. */
@media (min-width: 1100px) and (min-height: 951px) {
    .hero-logo,
    .hero-logo-link .hero-logo {
        width: clamp(260px, 28dvh, 360px) !important;
        max-width: 34vw !important;
    }

    .location-card {
        min-height: clamp(360px, 43dvh, 500px) !important;
        max-height: 500px !important;
    }
}

/* 6) Hohe 2+1-Tablets: vorhandene Höhe etwas besser nutzen,
      ohne die Karten unnatürlich aufzublasen. */
@media (min-width: 481px) and (max-width: 1099px) and (min-height: 1000px) {
    .hero {
        padding-top: clamp(12px, 1.4dvh, 19px) !important;
        padding-bottom: clamp(7px, 0.8dvh, 11px) !important;
    }

    .hero-logo,
    .hero-logo-link .hero-logo {
        width: clamp(270px, 24dvh, 325px) !important;
        max-width: 58vw !important;
    }

    .locations {
        gap: clamp(14px, 1.35dvh, 20px) !important;
        margin-top: clamp(10px, 1.0dvh, 14px) !important;
        margin-bottom: clamp(12px, 1.1dvh, 16px) !important;
    }

    .location-card-gelenau,
    .location-card-auerbach {
        min-height: clamp(325px, 28dvh, 375px) !important;
    }

    .location-card-trattoria,
    .location-card:last-child {
        min-height: clamp(205px, 17dvh, 235px) !important;
    }

    .location-content {
        padding-top: clamp(15px, 1.45dvh, 20px) !important;
        padding-bottom: clamp(13px, 1.3dvh, 18px) !important;
    }
}

/* ==========================================================
   CONTAINER QUERIES – STANDORTTAFELN
   22.09.2026

   Die globale Seitenstruktur bleibt weiterhin viewportbasiert:
     <= 480 px       = 1 Spalte
     481–1099 px     = 2+1
     >= 1100 px      = 3 Spalten

   Innerhalb jeder Standorttafel richtet sich der Inhalt dagegen
   nach der tatsächlich verfügbaren Kartenbreite. So funktionieren
   dieselben Tafeln auch in zukünftigen Grid-/Foldable-Layouts, ohne
   für jede Viewportbreite neue Sonderregeln zu benötigen.
   ========================================================== */

.location-card {
    container-type: inline-size;
    container-name: toros-location-card;
}

/* Sehr schmale Tafel – typischerweise der linke/rechte Teil direkt
   oberhalb des 480-px-Breakpoints. */
@container toros-location-card (max-width: 275px) {
    .location-content {
        padding-inline: 10px;
    }

    .location-content h2 {
        font-size: clamp(1.42rem, 11cqi, 1.75rem);
    }

    .gold-line {
        width: 62px;
    }

    .location-info {
        gap: 3px;
    }

    .phone {
        font-size: clamp(0.76rem, 5.8cqi, 0.90rem);
    }

    .address {
        font-size: clamp(0.64rem, 4.8cqi, 0.76rem);
        line-height: 1.2;
        white-space: normal;
        text-wrap: balance;
    }

    .opening-times {
        max-width: none;
    }

    .opening-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        padding-inline: 2px;
        font-size: clamp(0.66rem, 5.1cqi, 0.78rem);
    }

    .opening-day,
    .opening-time {
        white-space: nowrap;
    }

    .location-button {
        gap: 5px;
        padding-inline: 6px;
    }

    .button-label {
        font-size: clamp(0.66rem, 4.9cqi, 0.76rem);
    }
}

/* Mittlere Tafel – Foldables, kleine Tablets und viele 2+1-Ansichten. */
@container toros-location-card (min-width: 276px) and (max-width: 380px) {
    .location-content {
        padding-inline: clamp(12px, 5cqi, 18px);
    }

    .location-content h2 {
        font-size: clamp(1.65rem, 8cqi, 2rem);
    }

    .phone {
        font-size: clamp(0.86rem, 4.3cqi, 1rem);
    }

    .address {
        font-size: clamp(0.70rem, 3.6cqi, 0.82rem);
        white-space: normal;
        text-wrap: balance;
    }

    .opening-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: clamp(7px, 2.8cqi, 12px);
        font-size: clamp(0.72rem, 3.7cqi, 0.82rem);
    }

    .opening-day,
    .opening-time {
        white-space: nowrap;
    }
}

/* Breite Tafel – normale Tablets, Desktop und die breite Trattoria-
   Karte im 2+1-Layout. Nur sanfte, fließende Skalierung; die globalen
   Höhenregeln behalten weiterhin Vorrang, wenn der Viewport niedrig ist. */
@container toros-location-card (min-width: 381px) {
    .location-content h2 {
        font-size: clamp(1.9rem, 6.5cqi, 2.6rem);
    }

    .phone {
        font-size: clamp(0.94rem, 2.8cqi, 1.08rem);
    }

    .address {
        font-size: clamp(0.78rem, 2.2cqi, 0.88rem);
    }

    .opening-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: clamp(12px, 3cqi, 20px);
    }
}

/* Fallback bleibt automatisch erhalten: Browser ohne Container-Query-
   Unterstützung ignorieren nur diesen Abschnitt und verwenden die
   vorhandenen Media-Query-Regeln darüber. */


/* Fallback nur für ältere Browser ohne Container Queries. Moderne Browser
   verwenden ausschließlich die kartenbreitenabhängigen Regeln oben. */
@supports not (container-type: inline-size) {
    @media (min-width: 481px) and (max-width: 579px) {
        .opening-row {
            grid-template-columns: minmax(0, 1fr) auto !important;
            gap: 6px !important;
        }

        .opening-day,
        .opening-time {
            white-space: nowrap !important;
        }
    }
}

/* ==========================================================
   FLEXBOX + DYNAMISCHE VIEWPORT-EINHEITEN – 22.09.2026

   Aufgabenverteilung:
   - Grid bestimmt weiterhin 1 / 2+1 / 3 Spalten.
   - Container Queries passen den Inhalt jeder Standorttafel an.
   - Flexbox hält den Footer bei kurzen Seiten am unteren Rand.
   - dvh/clamp() steuern Logo, Abstände und Kartenhöhen fließend.
   ========================================================== */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
}

.page {
    width: 100%;
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
}

.hero,
.locations,
.overview-visitor-counter {
    flex: 0 0 auto !important;
}

/* Smartphones: vorhandene Einspalten-Darstellung beibehalten,
   nur die vertikalen Maße fließend an die sichtbare Höhe koppeln. */
@media (max-width: 480px) {
    .hero {
        padding-top: clamp(8px, 1.5dvh, 12px) !important;
        padding-bottom: clamp(5px, 0.9dvh, 8px) !important;
    }

    .hero-logo,
    .hero-logo-link .hero-logo {
        width: clamp(176px, 24dvh, 196px) !important;
        max-width: calc(100vw - 72px) !important;
        margin-bottom: clamp(4px, 0.75dvh, 6px) !important;
    }

    .locations {
        flex: 0 0 auto !important;
        gap: clamp(9px, 1.45dvh, 12px) !important;
        margin-top: clamp(7px, 1.15dvh, 10px) !important;
        margin-bottom: clamp(10px, 1.7dvh, 14px) !important;
    }
}

/* 2+1: Breite bleibt viewportbasiert, die vertikale Ausprägung wird
   dagegen ohne harte Höhenstufen fließend aus der sichtbaren Höhe abgeleitet. */
@media (min-width: 481px) and (max-width: 1099px) {
    .hero {
        padding-top: clamp(3px, 1.05dvh, 15px) !important;
        padding-bottom: clamp(2px, 0.65dvh, 9px) !important;
    }

    .hero-logo,
    .hero-logo-link .hero-logo {
        width: clamp(96px, 23dvh, 320px) !important;
        max-width: 58vw !important;
        margin-bottom: clamp(1px, 0.45dvh, 6px) !important;
    }

    .hero-divider {
        width: clamp(72px, 13dvh, 116px) !important;
    }

    .locations {
        flex: 0 0 auto !important;
        row-gap: clamp(5px, 1.15dvh, 18px) !important;
        column-gap: clamp(8px, 1.35vw, 16px) !important;
        margin-top: clamp(3px, 0.75dvh, 10px) !important;
        margin-bottom: clamp(4px, 0.9dvh, 12px) !important;
    }

    .location-card-gelenau,
    .location-card-auerbach {
        min-height: clamp(116px, 29dvh, 360px) !important;
    }

    .location-card-trattoria,
    .location-card:last-child {
        min-height: clamp(58px, 18dvh, 230px) !important;
    }

    .location-content {
        padding-top: clamp(4px, 1.25dvh, 18px) !important;
        padding-bottom: clamp(3px, 1.05dvh, 16px) !important;
    }

    .overview-visitor-counter {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: clamp(1px, 0.35dvh, 5px) !important;
        padding-bottom: clamp(1px, 0.35dvh, 5px) !important;
    }
}

/* Desktop: harte Sprünge bei 720/768/900/950 px Höhe vermeiden.
   Karten bleiben auf großen Displays begrenzt, wachsen auf niedrigen
   Laptops aber nicht über den verfügbaren Platz hinaus. */
@media (min-width: 1100px) {
    .hero {
        padding-top: clamp(4px, 1.0dvh, 14px) !important;
        padding-bottom: clamp(3px, 0.6dvh, 8px) !important;
    }

    .hero-logo,
    .hero-logo-link .hero-logo {
        width: clamp(180px, 25dvh, 360px) !important;
        max-width: 34vw !important;
        margin-bottom: clamp(1px, 0.4dvh, 5px) !important;
    }

    .locations {
        flex: 0 0 auto !important;
        gap: clamp(12px, 1.45vw, 22px) !important;
        margin-top: clamp(4px, 0.6dvh, 8px) !important;
        margin-bottom: clamp(5px, 0.8dvh, 10px) !important;
    }

    .location-card {
        min-height: clamp(270px, 40dvh, 500px) !important;
        max-height: 500px !important;
    }

    .location-content {
        padding-top: clamp(11px, 1.45dvh, 20px) !important;
        padding-bottom: clamp(10px, 1.25dvh, 18px) !important;
    }

    .overview-visitor-counter {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: clamp(2px, 0.35dvh, 6px) !important;
        padding-bottom: clamp(2px, 0.35dvh, 6px) !important;
    }
}