/* ═══════════════════════════════════════════════════
           FONT FACE
           ═══════════════════════════════════════════════════ */
        @font-face {
            font-family: 'TheGirlNextDoor';
            src: url('./TheGirlNextDoor-Regular.woff2') format('woff2'),
                 url('./TheGirlNextDoor-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        /* ═══════════════════════════════════════════════════
           CSS CUSTOM PROPERTIES
           ═══════════════════════════════════════════════════ */
        :root {
            /* Weinrot-Basis (Interior / dunkle Flächen) */
            --navy: #4A2430;
            --navy-deep: #2A1218;
            --navy-light: #6B3D48;
            --cream: #F7F0EE;
            --cream-dark: #E8DCD8;
            /* Akzente: dunkleres Rosé für WCAG-Kontrast mit weißem Text */
            --green: #8B4554;
            --green-hover: #733847;
            --green-dark: #5E2E3A;
            --olive: #B56B77;
            --gold: #C9A87A;
            --gold-light: #D4BC94;
            --white: #FFFFFF;
            --text-dark: #2A1418;
            --text-light: #F7F0EE;
            --text-muted: #C4B8BC;

            --font-display: 'TheGirlNextDoor', cursive;
            --font-heading: 'Playfair Display', Georgia, serif;
            --font-body: 'DM Sans', -apple-system, sans-serif;

            --space-xs: 0.5rem;
            --space-sm: 1rem;
            --space-md: 2rem;
            --space-lg: 4rem;
            --space-xl: 6rem;
            --space-2xl: 10rem;

            --nav-height: 72px;

            /* Hintergrund-Tiefe: feine diagonale Linien (wie Interior-Struktur, eigenständig zur Foto-Textur) */
            --depth-line-shadow: rgba(8, 2, 6, 0.14);
            --depth-line-hi: rgba(255, 250, 248, 0.055);
            --depth-shade-corner: rgba(0, 0, 0, 0.22);
            --depth-shade-floor: rgba(10, 4, 8, 0.45);
            --depth-shade-top: rgba(255, 248, 246, 0.07);
        }

        /* ═══════════════════════════════════════════════════
           RESET & BASE
           ═══════════════════════════════════════════════════ */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: var(--nav-height);
        }

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

        .skip-link {
            position: absolute;
            left: 1rem;
            top: -100px;
            z-index: 10000;
            padding: 0.75rem 1.25rem;
            background: var(--navy-deep);
            color: #FFFFFF;
            font-family: var(--font-body);
            font-weight: 600;
            text-decoration: none;
            border-radius: 4px;
        }

        .skip-link:focus {
            top: 1rem;
        }

        body {
            font-family: var(--font-body);
            color: var(--text-dark);
            background: var(--cream);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

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

        a {
            text-decoration: none;
            color: inherit;
        }

        /* ═══════════════════════════════════════════════════
           SCROLL ANIMATIONS
           ═══════════════════════════════════════════════════ */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-delay-1 { transition-delay: 0.15s; }
        .reveal-delay-2 { transition-delay: 0.3s; }
        .reveal-delay-3 { transition-delay: 0.45s; }
        .reveal-delay-4 { transition-delay: 0.6s; }

        /* ═══════════════════════════════════════════════════
           NAVIGATION
           ═══════════════════════════════════════════════════ */
        .nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--nav-height);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 clamp(1.5rem, 4vw, 3rem);
            transition: background 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease;
        }

        .nav.scrolled {
            background: rgba(74, 36, 48, 0.92);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 1px 0 rgba(255,255,255,0.06);
        }

        .nav__logo {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            color: var(--white);
            white-space: nowrap;
            transition: opacity 0.3s ease;
        }

        .nav__logo:hover {
            opacity: 0.85;
        }

        .nav__logo-img {
            height: 52px;
            width: auto;
            display: block;
        }

        .nav__links {
            display: flex;
            align-items: center;
            gap: clamp(1.2rem, 3vw, 2.5rem);
            list-style: none;
        }

        .nav__link {
            font-family: var(--font-body);
            font-size: 0.8rem;
            font-weight: 400;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--text-light);
            opacity: 0.7;
            transition: opacity 0.3s ease;
            position: relative;
        }

        .nav__link::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--green);
            transition: width 0.3s ease;
        }

        .nav__link:hover {
            opacity: 1;
        }

        .nav__link:hover::after {
            width: 100%;
        }

        .nav__cta {
            font-family: var(--font-body);
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--white);
            background: var(--green);
            padding: 0.6rem 1.4rem;
            border: none;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.2s ease;
        }

        .nav__cta:hover {
            background: var(--green-hover);
            transform: translateY(-1px);
        }

        /* Mobile nav toggle */
        .nav__toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 5px;
            z-index: 1001;
            background: transparent;
            border: none;
            appearance: none;
            -webkit-appearance: none;
        }

        .nav__toggle span {
            width: 24px;
            height: 1.5px;
            background: var(--white);
            transition: all 0.3s ease;
            display: block;
        }

        .nav__toggle[aria-expanded="true"] span:nth-child(1),
        .nav__toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(4px, 5px);
        }
        .nav__toggle[aria-expanded="true"] span:nth-child(2),
        .nav__toggle.active span:nth-child(2) {
            opacity: 0;
        }
        .nav__toggle[aria-expanded="true"] span:nth-child(3),
        .nav__toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(4px, -5px);
        }

        /* ═══════════════════════════════════════════════════
           HERO SECTION
           ═══════════════════════════════════════════════════ */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--navy);
            overflow: hidden;
        }

        .hero__pattern {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                repeating-linear-gradient(
                    106deg,
                    transparent 0,
                    transparent 17px,
                    var(--depth-line-shadow) 17px,
                    var(--depth-line-shadow) 18px
                ),
                repeating-linear-gradient(
                    -106deg,
                    transparent 0,
                    transparent 24px,
                    var(--depth-line-hi) 24px,
                    var(--depth-line-hi) 25px
                );
        }

        .hero__gradient {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(ellipse 88% 72% at 50% 118%, var(--depth-shade-floor) 0%, transparent 58%),
                radial-gradient(ellipse 58% 48% at 12% 10%, var(--depth-shade-corner) 0%, transparent 52%),
                radial-gradient(ellipse 52% 42% at 90% 6%, var(--depth-shade-corner) 0%, transparent 48%),
                radial-gradient(ellipse 75% 58% at 50% -8%, var(--depth-shade-top) 0%, transparent 48%),
                radial-gradient(ellipse at 50% 78%, rgba(74, 36, 48, 0) 0%, var(--navy) 74%);
        }

        .hero__host-wrap {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }

        .hero__host-wrap picture {
            display: contents;
        }

        .hero__host--solo {
            position: absolute;
            right: clamp(-48px, -2vw, 8px);
            bottom: -32px;
            width: min(560px, 44vw);
            height: auto;
            max-height: min(92vh, 820px);
            opacity: 0.98;
            filter: drop-shadow(0 28px 55px rgba(0,0,0,0.42));
            transform: translateY(10px);
            animation: hostFloat 6.5s ease-in-out infinite;
            transform-origin: 70% 85%;
        }

        @keyframes hostFloat {
            0%, 100% { transform: translateY(10px); }
            50% { transform: translateY(0px); }
        }

        .hero__content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: var(--space-lg) var(--space-md);
        }

        .hero__logo {
            width: clamp(280px, 35vw, 480px);
            aspect-ratio: 1 / 1;
            height: auto;
            filter: brightness(0) invert(1);
            opacity: 1;
            transform: none;
            animation: none;
        }

        .hero__logo--deli {
            filter: none;
            width: clamp(200px, 32vw, 320px);
            aspect-ratio: 1 / 1;
            height: auto;
            background: transparent;
            box-shadow: none;
        }

        .hero__illustration--hidden {
            display: none;
        }

        @keyframes heroLogoIn {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .hero__tagline {
            font-family: var(--font-body);
            font-size: 0.8rem;
            font-weight: 400;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-top: var(--space-md);
            opacity: 1;
            animation: none;
            min-height: 1.2em;
        }

        .hero__divider {
            width: 40px;
            height: 1px;
            background: var(--green);
            margin: var(--space-md) 0;
            opacity: 1;
            animation: none;
        }

        .hero__subtitle {
            font-family: var(--font-heading);
            font-size: clamp(1rem, 2vw, 1.25rem);
            font-weight: 400;
            font-style: italic;
            color: var(--cream);
            opacity: 1;
            max-width: 500px;
            line-height: 1.7;
            animation: none;
        }

        .hero__cta {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            margin-top: var(--space-lg);
            font-family: var(--font-body);
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #FFFFFF;
            background: var(--navy-deep);
            padding: 1rem 2.5rem;
            border: 1px solid rgba(255, 255, 255, 0.22);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            opacity: 1;
            animation: none;
        }

        .hero__cta:hover {
            background: var(--navy);
            transform: translateY(-2px);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
        }

        .hero__cta svg {
            width: 16px;
            height: 16px;
            transition: transform 0.3s ease;
        }

        .hero__cta:hover svg {
            transform: translateX(3px);
        }

        .hero__illustration {
            position: absolute;
            bottom: 0;
            right: clamp(2%, 8vw, 12%);
            width: clamp(220px, 28vw, 420px);
            z-index: 1;
            opacity: 0;
            transform: translateY(30px);
            animation: illustrationIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
            pointer-events: none;
        }

        @keyframes illustrationIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hero__scroll {
            position: absolute;
            bottom: 2rem;
            left: 0;
            right: 0;
            margin: 0 auto;
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            width: fit-content;
            opacity: 0;
            animation: fadeUp 1s ease 2.2s forwards;
        }

        .hero__scroll-text {
            font-family: var(--font-body);
            font-size: 0.65rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .hero__scroll-line {
            width: 1px;
            height: 30px;
            background: linear-gradient(to bottom, var(--text-muted), transparent);
            animation: scrollPulse 2s ease infinite;
        }

        @keyframes scrollPulse {
            0%, 100% { opacity: 0.4; transform: scaleY(1); }
            50% { opacity: 1; transform: scaleY(1.3); }
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ═══════════════════════════════════════════════════
           PATTERN DIVIDER
           ═══════════════════════════════════════════════════ */
        .pattern-divider {
            width: 100%;
            height: 60px;
            background:
                linear-gradient(
                    to bottom,
                    rgba(74, 36, 48, 0.07) 0%,
                    transparent 35%,
                    transparent 65%,
                    rgba(74, 36, 48, 0.07) 100%
                ),
                repeating-linear-gradient(
                    106deg,
                    transparent 0,
                    transparent 16px,
                    rgba(74, 36, 48, 0.045) 16px,
                    rgba(74, 36, 48, 0.045) 17px
                ),
                repeating-linear-gradient(
                    -106deg,
                    transparent 0,
                    transparent 22px,
                    rgba(74, 36, 48, 0.03) 22px,
                    rgba(74, 36, 48, 0.03) 23px
                ),
                var(--cream);
        }

        /* ═══════════════════════════════════════════════════
           SECTION: ÜBER UNS
           ═══════════════════════════════════════════════════ */
        .about {
            background: var(--cream);
            position: relative;
            overflow: hidden;
        }

        .about::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background:
                radial-gradient(ellipse 75% 55% at 8% 0%, rgba(74, 36, 48, 0.09) 0%, transparent 58%),
                radial-gradient(ellipse 65% 50% at 96% 88%, rgba(74, 36, 48, 0.07) 0%, transparent 52%),
                radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255, 255, 255, 0.45) 0%, transparent 72%),
                repeating-linear-gradient(
                    106deg,
                    transparent 0,
                    transparent 20px,
                    rgba(74, 36, 48, 0.035) 20px,
                    rgba(74, 36, 48, 0.035) 21px
                ),
                repeating-linear-gradient(
                    -106deg,
                    transparent 0,
                    transparent 28px,
                    rgba(74, 36, 48, 0.022) 28px,
                    rgba(74, 36, 48, 0.022) 29px
                );
        }

        .about__inner {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
            padding: var(--space-2xl) clamp(1.5rem, 4vw, 3rem);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(3rem, 6vw, 6rem);
            align-items: center;
        }

        .about__text {
            max-width: 520px;
        }

        .about__label {
            font-family: var(--font-body);
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--green-dark);
            margin-bottom: var(--space-sm);
        }

        .about__heading {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 400;
            color: var(--navy);
            line-height: 1.1;
            margin-bottom: var(--space-md);
        }

        .about__line {
            width: 50px;
            height: 2px;
            background: var(--green);
            margin-bottom: var(--space-md);
        }

        .about__body {
            font-family: var(--font-body);
            font-size: 1rem;
            line-height: 1.85;
            color: var(--navy-light);
            font-weight: 400;
        }

        .about__body p + p {
            margin-top: var(--space-sm);
        }

        .about__image-wrap {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .about__image-wrap--host {
            align-self: end;
            justify-content: flex-end;
            padding-top: 2rem;
        }

        .about__image-frame {
            position: relative;
            width: 380px;
            height: 480px;
        }

        .about__image-frame::before {
            content: '';
            position: absolute;
            inset: -12px;
            border: 1px solid var(--navy);
            opacity: 0.1;
        }

        .about__image-frame::after {
            content: '';
            position: absolute;
            top: 20px;
            left: 20px;
            right: -20px;
            bottom: -20px;
            z-index: 0;
            opacity: 1;
            background:
                radial-gradient(ellipse 80% 70% at 40% 40%, rgba(74, 36, 48, 0.06) 0%, transparent 65%),
                repeating-linear-gradient(
                    106deg,
                    transparent 0,
                    transparent 14px,
                    rgba(74, 36, 48, 0.05) 14px,
                    rgba(74, 36, 48, 0.05) 15px
                ),
                repeating-linear-gradient(
                    -106deg,
                    transparent 0,
                    transparent 19px,
                    rgba(74, 36, 48, 0.035) 19px,
                    rgba(74, 36, 48, 0.035) 20px
                );
        }

        .about__illustration {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: bottom;
        }

        /* Deli-Logo: nur der Kreis, ohne Rahmen/Muster/Fläche */
        .about__image-frame--logo {
            width: auto !important;
            height: auto !important;
            max-width: min(360px, 90vw);
        }

        .about__image-frame--logo::before,
        .about__image-frame--logo::after {
            display: none;
        }

        .about__illustration--logo {
            width: auto;
            max-width: min(360px, 90vw);
            height: auto;
            padding: 0;
            background: transparent !important;
            object-fit: contain;
            object-position: center;
        }

        /* Gastgeber-Illustration: kein Rahmen, kein Muster, nur PNG */
        .about__image-frame--host {
            width: auto !important;
            height: auto !important;
            max-width: min(520px, 94vw);
            background: none !important;
            box-shadow: none;
        }

        .about__image-frame--host picture {
            display: block;
            max-width: min(520px, 94vw);
        }

        .about__image-frame--host::before,
        .about__image-frame--host::after {
            display: none;
        }

        .about__illustration--host {
            width: auto;
            max-width: min(520px, 94vw);
            height: auto;
            padding: 0;
            margin: 0;
            background: transparent !important;
            object-fit: contain;
            object-position: bottom center;
            filter: drop-shadow(0 18px 40px rgba(42, 18, 24, 0.12));
        }

        /* ═══════════════════════════════════════════════════
           SECTION: SPEISEKARTE
           ═══════════════════════════════════════════════════ */
        .menu {
            background: var(--navy);
            position: relative;
            overflow: hidden;
        }

        .menu__pattern {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                radial-gradient(ellipse 85% 55% at 50% -5%, rgba(0, 0, 0, 0.28) 0%, transparent 50%),
                radial-gradient(ellipse 60% 50% at 100% 100%, rgba(0, 0, 0, 0.22) 0%, transparent 52%),
                radial-gradient(ellipse 55% 48% at 0% 95%, rgba(0, 0, 0, 0.16) 0%, transparent 48%),
                repeating-linear-gradient(
                    106deg,
                    transparent 0,
                    transparent 18px,
                    rgba(0, 0, 0, 0.08) 18px,
                    rgba(0, 0, 0, 0.08) 19px
                ),
                repeating-linear-gradient(
                    -106deg,
                    transparent 0,
                    transparent 26px,
                    rgba(255, 255, 255, 0.035) 26px,
                    rgba(255, 255, 255, 0.035) 27px
                );
        }

        .menu__inner {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
            padding: var(--space-2xl) clamp(1.5rem, 4vw, 3rem);
        }

        .menu__header {
            text-align: center;
            margin-bottom: var(--space-xl);
        }

        .menu__label {
            font-family: var(--font-body);
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--green);
            margin-bottom: var(--space-sm);
        }

        .menu__heading {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 400;
            color: var(--cream);
            line-height: 1.1;
        }

        .menu__line {
            width: 50px;
            height: 2px;
            background: var(--green);
            margin: var(--space-md) auto 0;
        }

        .menu__grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: clamp(2rem, 4vw, 3rem);
        }

        .menu__card {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            padding: clamp(2rem, 3vw, 2.5rem);
            transition: background 0.4s ease, border-color 0.4s ease;
        }

        .menu__card:hover {
            background: rgba(255,255,255,0.06);
            border-color: rgba(201, 168, 122, 0.35);
        }

        .menu__card-title {
            font-family: var(--font-heading);
            font-size: 1.15rem;
            font-weight: 500;
            color: var(--cream);
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            text-transform: uppercase;
            letter-spacing: 0.18em;
        }

        .menu__card--dolci .menu__card-title {
            display: none;
        }

        .menu__card-script {
            font-family: 'TheGirlNextDoor', var(--font-display), cursive;
            text-align: center;
            color: var(--cream);
            font-size: clamp(1.25rem, 3.5vw, 1.55rem);
            font-weight: 400;
            margin: 0 0 1.35rem;
            line-height: 1.3;
        }

        .menu__dolci-frame {
            border: 1px solid rgba(255,255,255,0.14);
            border-radius: 2px;
            overflow: hidden;
        }

        .menu__dolci-frame .menu__item {
            margin: 0;
            padding: 0.85rem 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }

        .menu__dolci-frame .menu__item:last-child {
            border-bottom: none;
        }

        .menu__item-badge {
            color: #E24B4B;
            font-family: var(--font-body);
            font-size: 0.68rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-left: 0.4rem;
            white-space: nowrap;
        }

        .menu__item {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 0.6rem 0;
        }

        .menu__item-name {
            font-family: var(--font-body);
            font-size: 0.88rem;
            font-weight: 500;
            color: var(--cream);
            font-style: normal;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            line-height: 1.35;
        }

        .menu__item-desc {
            font-family: var(--font-body);
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.35rem;
            font-weight: 400;
            line-height: 1.45;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .menu__item-price {
            font-family: var(--font-body);
            font-size: 0.9rem;
            color: var(--green);
            white-space: nowrap;
            margin-left: 1rem;
            font-weight: 400;
        }

        .menu__item-allergens {
            font-family: var(--font-body);
            font-size: 0.65rem;
            color: rgba(247, 240, 238, 0.35);
            margin-top: 0.15rem;
            font-weight: 400;
            letter-spacing: 0.03em;
        }

        .menu__item-dots {
            flex: 1;
            border-bottom: 1px dotted rgba(255,255,255,0.1);
            margin: 0 0.75rem;
            min-width: 30px;
            align-self: end;
            margin-bottom: 5px;
        }

        .menu__note {
            text-align: center;
            margin-top: var(--space-lg);
            font-family: var(--font-body);
            font-size: 0.8rem;
            color: var(--text-muted);
            font-style: italic;
            font-weight: 400;
        }

        .menu__cta-wrap {
            text-align: center;
            margin-top: var(--space-md);
        }

        .menu__cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-family: var(--font-body);
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--green);
            border: 1px solid var(--green);
            padding: 0.9rem 2rem;
            background: transparent;
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .menu__cta:hover {
            background: var(--green);
            color: var(--white);
        }

        /* ═══════════════════════════════════════════════════
           SECTION: ÖFFNUNGSZEITEN & KONTAKT
           ═══════════════════════════════════════════════════ */
        .contact {
            background: var(--cream);
            position: relative;
            overflow: hidden;
        }

        .contact::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background:
                radial-gradient(ellipse 65% 52% at 92% 8%, rgba(74, 36, 48, 0.065) 0%, transparent 54%),
                radial-gradient(ellipse 55% 45% at 5% 92%, rgba(74, 36, 48, 0.05) 0%, transparent 50%),
                repeating-linear-gradient(
                    106deg,
                    transparent 0,
                    transparent 23px,
                    rgba(74, 36, 48, 0.026) 23px,
                    rgba(74, 36, 48, 0.026) 24px
                ),
                repeating-linear-gradient(
                    -106deg,
                    transparent 0,
                    transparent 31px,
                    rgba(74, 36, 48, 0.018) 31px,
                    rgba(74, 36, 48, 0.018) 32px
                );
        }

        .contact__inner {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
            padding: var(--space-2xl) clamp(1.5rem, 4vw, 3rem);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(3rem, 6vw, 5rem);
        }

        .contact__hours {
            /* left side */
        }

        .contact__label {
            font-family: var(--font-body);
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--green-dark);
            margin-bottom: var(--space-sm);
        }

        .contact__heading {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 5vw, 3.5rem);
            font-weight: 400;
            color: var(--navy);
            line-height: 1.1;
            margin-bottom: var(--space-md);
        }

        .contact__line {
            width: 50px;
            height: 2px;
            background: var(--green);
            margin-bottom: var(--space-lg);
        }

        .hours-table {
            width: 100%;
            max-width: 400px;
        }

        .hours-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 0.8rem 0;
            border-bottom: 1px solid rgba(74, 36, 48, 0.12);
        }

        .hours-row:last-child {
            border-bottom: none;
        }

        .hours-day {
            font-family: var(--font-heading);
            font-size: 1rem;
            font-weight: 400;
            color: var(--navy);
        }

        .hours-time {
            font-family: var(--font-body);
            font-size: 0.9rem;
            color: var(--navy-light);
            text-align: right;
            line-height: 1.6;
            font-weight: 400;
        }

        .hours-closed {
            color: var(--navy-light);
            opacity: 0.85;
            font-style: italic;
        }

        .contact__info {
            /* right side */
        }

        .contact__info-heading {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 5vw, 3.5rem);
            font-weight: 400;
            color: var(--navy);
            line-height: 1.1;
            margin-bottom: var(--space-md);
        }

        .contact__info-line {
            width: 50px;
            height: 2px;
            background: var(--green);
            margin-bottom: var(--space-lg);
        }

        .contact__address {
            font-family: var(--font-heading);
            font-size: 1.2rem;
            font-weight: 400;
            font-style: italic;
            color: var(--navy);
            line-height: 1.7;
            margin-bottom: var(--space-md);
        }

        .contact__map {
            width: 100%;
            height: 220px;
            background: var(--navy);
            border: none;
            margin-bottom: var(--space-md);
            opacity: 0.9;
        }

        .contact__social {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: var(--space-md);
        }

        .contact__social-icon {
            width: 20px;
            height: 20px;
            color: var(--navy);
            opacity: 0.6;
        }

        .contact__social-link {
            font-family: var(--font-body);
            font-size: 0.9rem;
            color: var(--navy);
            font-weight: 400;
            transition: color 0.3s ease;
        }

        .contact__social-link:hover {
            color: var(--green-dark);
        }

        .contact__reserve-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            font-family: var(--font-body);
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--cream);
            background: var(--navy);
            padding: 1rem 2.5rem;
            border: none;
            cursor: pointer;
            transition: all 0.4s ease;
            margin-top: var(--space-sm);
        }

        .contact__reserve-btn:hover {
            background: var(--green);
            color: var(--white);
            transform: translateY(-2px);
        }

        .contact__reserve-btn svg {
            width: 14px;
            height: 14px;
        }


        /* ═══════════════════════════════════════════════════
           FOOTER
           ═══════════════════════════════════════════════════ */
        .footer {
            background: var(--navy-deep);
            position: relative;
            overflow: hidden;
        }

        .footer__pattern {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                radial-gradient(ellipse 92% 58% at 50% 125%, rgba(0, 0, 0, 0.42) 0%, transparent 55%),
                radial-gradient(ellipse 48% 38% at 8% 12%, rgba(0, 0, 0, 0.2) 0%, transparent 50%),
                repeating-linear-gradient(
                    106deg,
                    transparent 0,
                    transparent 21px,
                    rgba(0, 0, 0, 0.09) 21px,
                    rgba(0, 0, 0, 0.09) 22px
                ),
                repeating-linear-gradient(
                    -106deg,
                    transparent 0,
                    transparent 30px,
                    rgba(255, 255, 255, 0.028) 30px,
                    rgba(255, 255, 255, 0.028) 31px
                );
        }

        .footer__inner {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
            padding: var(--space-xl) clamp(1.5rem, 4vw, 3rem) var(--space-md);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .footer__logo {
            width: 192px;
            filter: brightness(0) invert(1);
            opacity: 0.8;
            margin-bottom: var(--space-md);
        }

        .footer__logo--deli {
            filter: none;
            opacity: 1;
            width: clamp(104px, 24vw, 168px);
            height: auto;
            background: transparent;
            margin-bottom: var(--space-md);
        }

        .footer__social {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: var(--space-lg);
        }

        .footer__social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            color: var(--cream);
            transition: color 0.3s ease;
        }

        .footer__social-link:hover {
            color: var(--green);
        }

        .footer__social-link svg {
            width: 18px;
            height: 18px;
        }

        .footer__links {
            display: flex;
            gap: 2rem;
            margin-bottom: 0.65rem;
        }

        .footer__link--faq {
            font-size: 0.65rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--text-muted);
            opacity: 0.55;
            margin-bottom: var(--space-lg);
            transition: color 0.3s ease, opacity 0.3s ease;
        }

        .footer__link--faq:hover {
            color: var(--cream);
            opacity: 0.9;
        }

        .footer__link {
            font-family: var(--font-body);
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--text-muted);
            transition: color 0.3s ease;
        }

        .footer__link:hover {
            color: var(--cream);
        }

        .footer__copy {
            font-family: var(--font-body);
            font-size: 0.7rem;
            color: var(--text-muted);
            opacity: 0.5;
            letter-spacing: 0.05em;
        }

        /* ═══════════════════════════════════════════════════
           MOBILE MENU OVERLAY
           ═══════════════════════════════════════════════════ */
        .mobile-menu {
            position: fixed;
            inset: 0;
            background: var(--navy-deep);
            z-index: 999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }

        .mobile-menu.active {
            opacity: 1;
            pointer-events: all;
        }

        .mobile-menu__link {
            font-family: var(--font-heading);
            font-size: 1.8rem;
            font-weight: 400;
            color: var(--cream);
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
        }

        .mobile-menu.active .mobile-menu__link {
            opacity: 1;
            transform: translateY(0);
        }

        .mobile-menu.active .mobile-menu__link:nth-child(1) { transition-delay: 0.1s; }
        .mobile-menu.active .mobile-menu__link:nth-child(2) { transition-delay: 0.2s; }
        .mobile-menu.active .mobile-menu__link:nth-child(3) { transition-delay: 0.3s; }
        .mobile-menu.active .mobile-menu__link:nth-child(4) { transition-delay: 0.4s; }
        .mobile-menu.active .mobile-menu__link:nth-child(5) { transition-delay: 0.5s; }
        .mobile-menu.active .mobile-menu__link:nth-child(6) { transition-delay: 0.6s; }

        .mobile-menu__link:hover {
            color: var(--green);
        }

        /* ═══════════════════════════════════════════════════
           RESPONSIVE
           ═══════════════════════════════════════════════════ */
        @media (max-width: 960px) {
            .nav__links {
                display: none;
            }

            .nav__toggle {
                display: flex;
            }

            .hero__illustration {
                width: clamp(180px, 40vw, 280px);
                right: -2%;
                opacity: 0;
                animation: illustrationIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
            }

            .about__inner {
                grid-template-columns: 1fr;
                gap: var(--space-lg);
                padding: var(--space-xl) clamp(1.5rem, 4vw, 3rem);
            }

            .about__image-wrap {
                order: -1;
            }

            .about__image-frame {
                width: 280px;
                height: 360px;
            }

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

            .menu__inner {
                padding: var(--space-xl) clamp(1.5rem, 4vw, 3rem);
            }

            .contact__inner {
                grid-template-columns: 1fr;
                gap: var(--space-xl);
                padding: var(--space-xl) clamp(1.5rem, 4vw, 3rem);
            }

            .hero__host--solo {
                width: min(440px, 46vw);
                bottom: -20px;
            }
        }

        @media (max-width: 600px) {
            :root {
                --nav-height: 60px;
            }

            .hero__illustration {
                position: absolute;
                right: auto;
                bottom: 130px;
                left: auto;
                transform: none;
                top: auto;
                width: 230px;
                z-index: 1;
                animation-delay: 1.8s;
            }

            .hero {
                flex-direction: column;
            }

            .hero__content {
                padding: var(--space-lg) var(--space-sm) 0;
                z-index: 2;
            }

            .hero__host-wrap {
                display: none;
            }

            .hero__cta {
                position: relative;
                z-index: 3;
                margin-top: 12rem;
            }

            .hero__scroll {
                position: relative;
                bottom: auto;
                left: auto;
                transform: none;
                z-index: 3;
                margin-top: var(--space-md);
                margin-bottom: var(--space-md);
            }

            .about__image-frame {
                width: 220px;
                height: 300px;
            }

            .contact__map {
                height: 180px;
            }

            .menu__item {
                flex-wrap: wrap;
            }

            .menu__item-dots {
                display: none;
            }

            .menu__item-price {
                margin-left: 0;
                margin-top: 0.2rem;
                width: 100%;
            }
        }

        /* Resmio Widget Panel (unten rechts, wie Luolou) */
        .resmio-panel {
            position: fixed;
            right: 18px;
            bottom: 76px;
            z-index: 2100;
            width: min(420px, calc(100vw - 36px));
            height: min(640px, calc(100vh - 120px));
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 18px;
            box-shadow: 0 26px 70px rgba(0, 0, 0, 0.32);
            overflow: hidden;
            transform: translateY(10px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
        }

        .resmio-panel.is-open {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
            transform: translateY(0);
        }

        .resmio-panel__topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.65rem 0.8rem;
            background: #ffffff;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }

        .resmio-panel__title {
            font-family: var(--font-body);
            font-size: 0.75rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(74, 36, 48, 0.75);
            font-weight: 700;
        }

        .resmio-panel__close {
            width: 2.1rem;
            height: 2.1rem;
            border-radius: 10px;
            border: 1px solid rgba(74, 36, 48, 0.18);
            background: rgba(255, 255, 255, 0.85);
            color: rgba(74, 36, 48, 0.9);
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
        }

        .resmio-panel__close:hover {
            background: rgba(74, 36, 48, 0.92);
            color: var(--cream);
            transform: translateY(-1px);
        }

        .resmio-panel__frame {
            width: 100%;
            height: calc(100% - 48px);
            border: 0;
            background: #fff;
        }

        /* Floating Resmio-Reservierung (unten rechts) */
        .reserve-fab {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 2100;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.4rem;
        }

        .reserve-fab__btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            padding: 0.85rem 1.05rem;
            border-radius: 999px;
            background: var(--navy-deep);
            color: #FFFFFF;
            border: 1px solid rgba(255, 255, 255, 0.22);
            box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32);
            font-family: var(--font-body);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.15s ease, background 0.2s ease;
        }

        .reserve-fab__btn:hover {
            background: var(--navy);
            transform: translateY(-1px);
        }

        .reserve-fab__btn:active {
            transform: translateY(0);
        }

        .reserve-fab__btn svg {
            width: 18px;
            height: 18px;
        }

        @media (max-width: 600px) {
            .reserve-fab {
                right: 14px;
                bottom: 14px;
            }
            .reserve-fab__btn {
                padding: 0.85rem 0.95rem;
            }
            .resmio-panel {
                right: 14px;
                bottom: 72px;
                height: min(640px, calc(100vh - 110px));
            }
        }

        .contact__notice {
            font-size: 0.9rem;
            color: var(--navy-light);
            margin-top: 1rem;
            line-height: 1.5;
        }

        .footer__locations {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem 1.25rem;
            justify-content: center;
            margin-bottom: var(--space-md);
        }

        .footer__locations a {
            font-size: 0.75rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-muted);
            transition: color 0.3s ease;
        }

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

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

        .nav__cta[href="#"] {
            cursor: pointer;
        }

/* ── SEO subpages: content blocks in landing look ── */
.seo-page-hero .hero__content { max-width: 52rem; }
.seo-page-hero .hero__logo--deli { margin-bottom: 0.5rem; }
.seo-page-hero h1.seo-page-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.8vw, 2.45rem);
  line-height: 1.25;
  color: var(--cream);
  margin: 1.25rem 0 1rem;
  text-wrap: balance;
}
.seo-page-hero .hero__subtitle { opacity: 1; max-width: 40rem; }
.seo-articles {
  background: var(--cream);
  padding: var(--space-xl) clamp(1.5rem, 5vw, 4rem);
}
.seo-articles__inner { max-width: 46rem; margin: 0 auto; }
.seo-articles article {
  margin-bottom: 2.25rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(74, 36, 48, 0.12);
}
.seo-articles article:last-of-type { border-bottom: none; }
.seo-articles h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.seo-articles p {
  color: rgba(42, 20, 24, 0.88);
  margin-bottom: 0.85rem;
  line-height: 1.7;
}
.seo-articles a { color: var(--green); text-underline-offset: 3px; }
.seo-articles a:hover { color: var(--navy); }
.seo-related-block {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: rgba(74, 36, 48, 0.04);
  border: 1px solid rgba(74, 36, 48, 0.1);
}
.seo-related-block h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: var(--navy);
}
.seo-related-block ul { list-style: none; display: grid; gap: 0.5rem; }
.seo-related-block a {
  color: var(--navy);
  text-decoration: none;
  font-family: var(--font-body);
}
.seo-related-block a:hover { color: var(--green); text-decoration: underline; }
.seo-cta-band {
  background: var(--navy);
  color: var(--cream);
  text-align: center;
  padding: var(--space-lg) clamp(1.5rem, 4vw, 3rem);
}
.seo-cta-band p {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  margin-bottom: 1.25rem;
}