* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            /* Die Neutralen haben einen leichten warmen Stich. Sie stehen
               direkt neben Foodfotos; ein exakt neutrales Grau wirkt daneben
               kalt und blaustichig. */
            --black: #0b0908;
            --dark-gray: #1a1613;
            --medium-gray: #2a2521;
            --light-gray: #3e3833;
            --border-gray: #423b35;
            --text-gray: #bcb4ac;
            --white: #ffffff;

            /* Markenfarbe, aus dem Logo. Vorher war --accent schlicht Weiss -
               die Seite hatte damit gar keine eigene Farbe, und das einzige
               Bunte war die Fehlerfarbe am Warenkorb.

               Regel: --brand markiert alles, was die Bestellung voranbringt
               (Composer, Ajouter au panier, Payer) und alles, was einen
               gewaehlten Zustand anzeigt (aktive Kategorie, gewaehlte
               Abholzeit, Anzahl im Warenkorb). Weiss bleibt fuer neutrale
               Flaechen (Panier, Itineraire, Retour).

               Kontrast: weisse Schrift auf --brand ist 5.2:1, besteht AA auch
               fuer kleine Schrift. Als Schriftfarbe auf dunklem Grund kaeme
               --brand nur auf 3.8:1 - dafuer gibt es --brand-text. */
            --brand: #c43d18;
            --brand-hover: #d94e27;
            --brand-text: #f2703f;
            --brand-soft: rgba(196, 61, 24, 0.16);

            --hover-gray: #38322d;
            --success: #22c55e;
            --danger: #ef4444;
            --focus-color: #60a5fa;
            --placeholder-bg: #221e1a;
        }

        /* Inter wird von fonts.css geladen (selbst gehostet).
           Frueher stand hier ein @import - der war hinter anderen Regeln
           ungueltig und wurde von jedem Browser ignoriert. */

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--black);
            color: var(--white);
            overflow-x: hidden;
            line-height: 1.6;
            font-size: 1rem;
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: transparent;
        }

        .skip-link {
            position: absolute;
            top: -40px;
            left: 6px;
            background: var(--white);
            color: var(--black);
            padding: 0.4rem 0.8rem;
            text-decoration: none;
            border-radius: 0.25rem;
            z-index: 10000;
            font-weight: 600;
            font-size: 0.85rem;
        }

        .skip-link:focus {
            top: 6px;
        }

        /* :focus-visible, nicht :focus - sonst traegt jeder mit der Maus gedrueckte Knopf und
           jeder angetippte Link den blauen Ring, bis der Finger woanders hinfaehrt. Der Browser
           entscheidet: Tastatur bekommt den Ring, Maus und Finger nicht. Textfelder bekommen ihn
           weiterhin in jedem Fall, das ist in der Regel selbst so festgelegt.

           Jedes Bedienelement, das den Ring mit "outline: none" abschaltet, hat weiter unten seine
           eigene :focus-visible-Regel - nachgezaehlt am 16.09.2026, dreizehn von dreizehn. */
        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        textarea:focus-visible,
        .time-slot:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 1px;
        }

        ::-webkit-scrollbar {
            width: 0.5rem;
        }

        ::-webkit-scrollbar-track {
            background: var(--dark-gray);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--light-gray);
            border-radius: 0.25rem;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-gray);
        }

        header {
            background: rgba(10, 10, 10, 0.98);
            backdrop-filter: blur(15px);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid var(--border-gray);
            height: 60px;
        }

        nav {
            max-width: 87.5rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 1.5rem;
            height: 100%;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            color: inherit;
            font-family: var(--carte-display);
            font-size: 1.15rem;
            font-weight: 800;
            letter-spacing: 0;
            text-decoration: none;
        }

        .logo-image {
            height: 2.8rem;
            width: auto;
            margin-right: 0.3rem;
            border-radius: 0.4rem;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 1.5rem;
        }

        .nav-menu a {
            color: var(--text-gray);
            text-decoration: none;
            font-weight: 500;
            /* Nur die Farbe, nicht "all": mit "all" uebertraegt der Browser am Handy auch die
               geerbte visibility des offenen Menues als Uebergang auf den Link - und solange die
               laeuft, nimmt der Link keinen Fokus an. */
            transition: color 0.3s;
            position: relative;
            font-family: var(--carte-display);
            font-size: 1.05rem;
            letter-spacing: 0;
        }

        .nav-menu a:hover,
        .nav-menu a:focus {
            color: var(--white);
        }

        .nav-menu a::after {
            content: '';
            position: absolute;
            bottom: -0.2rem;
            left: 0;
            width: 0;
            height: 1.5px;
            background: var(--white);
            transition: width 0.3s;
        }

        .nav-menu a:hover::after,
        .nav-menu a:focus::after {
            width: 100%;
        }

        .nav-menu a[aria-current="page"] {
            color: var(--white);
        }

        .nav-menu a[aria-current="page"]::after {
            width: 100%;
            height: 2px;
            background: var(--brand);
        }

        .nav-actions {
            display: flex;
            gap: 0.6rem;
            align-items: center;
        }

        .social-icons {
            display: flex;
            gap: 0.6rem;
            align-items: center;
        }

        .social-icon {
            width: 1.8rem;
            height: 1.8rem;
            background: transparent;
            border: 1px solid var(--border-gray);
            border-radius: 0.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-gray);
            text-decoration: none;
            transition: background-color 0.2s, color 0.2s, border-color 0.2s;
        }

        .social-icon:hover,
        .social-icon:focus-visible {
            background: var(--white);
            color: var(--black);
            border-color: var(--white);
        }

        .social-icon svg {
            width: 0.9rem;
            height: 0.9rem;
        }

        /* Der Bestellknopf im Kopf der Seiten ohne Warenkorb - Rechtsseiten und 404. Er stand
           bis zum 16.09.2026 in legal.css und fehlte damit ueberall sonst: auf 404.html erschien
           an seiner Stelle ein blauer Standardlink. */
        .nav-order {
            display: inline-flex;
            align-items: center;
            min-height: 2.25rem;
            padding: 0.4rem 1rem;
            border-radius: 0.4rem;
            background: var(--brand);
            color: var(--white);
            text-decoration: none;
            font-family: var(--carte-display);
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: 0;
            white-space: nowrap;
            transition: background-color 0.2s;
        }

        .nav-order:hover,
        .nav-order:focus-visible {
            background: var(--brand-hover);
        }

        .cart-btn {
            position: relative;
            padding: 0.4rem 1rem;
            border: none;
            border-radius: 0.4rem;
            background: var(--white);
            color: var(--black);
            font-family: var(--carte-display);
            font-size: 1.15rem;
            font-weight: 700;
            letter-spacing: 0;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .cart-btn:hover {
            background: var(--text-gray);
        }

        .cart-count {
            position: absolute;
            top: -0.3rem;
            right: -0.3rem;
            background: var(--brand);
            color: var(--white);
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
        }

        /* Mobile Menu Button */
        .mobile-menu-btn {
            display: none;
            background: transparent;
            border: none;
            color: var(--white);
            font-size: 1.2rem;
            cursor: pointer;
            padding: 0.3rem;
            border-radius: 0.25rem;
            /* Ueber Schattenflaeche (1001) und Menue (1002): der Knopf bleibt sichtbar und
               tippbar, waehrend der Rest der Kopfleiste mit abdunkelt. */
            z-index: 1003;
        }

        .mobile-menu-btn:hover {
            background: var(--medium-gray);
        }

        .mobile-menu-btn:focus { outline: none; }

        .mobile-menu-btn:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 2px;
        }

        /* Das Symbol haengt am Zustand des Knopfes, nicht an innerHTML (frueher baute app.js bei
           jedem Klick ein neues SVG ein). */
        .mobile-menu-btn .nav-icon-close,
        .mobile-menu-btn[aria-expanded="true"] .nav-icon-open {
            display: none;
        }

        .mobile-menu-btn[aria-expanded="true"] .nav-icon-close {
            display: block;
        }

        /* Die Schattenflaeche neben dem offenen Menue: ein Tipp darauf schliesst es (nav.js). */
        .nav-overlay {
            position: fixed;
            inset: 0;
            z-index: 1001;   /* ueber der Kopfleiste (1000), unter dem Menue (1002) */
            background: rgba(11, 9, 8, 0.6);
        }

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

        html.nav-open {
            overflow: hidden;
        }

        /* "À propos": Angaben und Erzaehlung auf demselben Mass. Ohne Grenze liefe die Liste ueber
           die ganze Seitenbreite, waehrend der Text daneben in einer Spalte steht. */
        .apropos-facts {
            max-width: 46rem;
        }

        .apropos-prose {
            max-width: 36rem;
            margin-top: 2.25rem;
        }

        .apropos-prose p {
            font-size: 1.0625rem;
            line-height: 1.75;
            color: var(--text-gray);
        }

        .apropos-prose p + p {
            margin-top: 1.1rem;
        }

        .apropos-cta {
            margin-top: 2.25rem;
        }

        /* Unterseiten ohne Hero brauchen Abstand zur festen Kopfleiste (60px). */
        .page-main { margin-top: 60px; }

        /* Gemeinsame Bild-Primitive fuer Startseite und Karte. */
        .media-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .media-img.is-missing { display: none; }

        .media-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4a423b;
            background: var(--placeholder-bg);
        }

        .media-placeholder svg { width: 34%; max-width: 46px; height: auto; }

        /* ============================================================
           Artikelzeile - dieselbe auf der Karte und auf der Startseite

           Name ..... Preis auf einer Zeile, durch eine Punktlinie verbunden, darunter die
           Zusammensetzung und die Aktion. Die ganze Zeile ist die Schaltflaeche (auf der Karte
           ein <button>, auf der Startseite ein Link); darin nur <span>, denn ein Button darf nur
           Phrasierungsinhalt tragen. Bis zum Umbau der Startseite stand das in menu-page.css.
           ============================================================ */
        :root {
            /* feste Bildrahmen - Fotos werden mit object-fit: cover eingepasst, nie verzerrt */
            --ratio-food: 800 / 491;
            --ratio-square: 1 / 1;

            /* Die Schrift der Tafel fuer Titel, Namen, Preise und Knoepfe (fonts.css). Die Borne
               setzt ihre in Bahnschrift SemiCondensed; wo die installiert ist (Windows),
               ueberbrueckt sie die Zeit, bis Barlow geladen ist. */
            --carte-display: 'Barlow Semi Condensed', 'Bahnschrift SemiCondensed', 'Arial Narrow', sans-serif;

            --carte-max: 87.5rem;       /* wie die Kopfleiste: Inhalte stehen buendig unter dem Logo */
            --carte-gutter: 1.5rem;
            --carte-leader: #5a5149;    /* die Punktlinie verbindet nur, sie soll nicht auffallen */
            --tap-min: 48px;
        }

        .product-grid {
            list-style: none;
            display: grid;
        }

        .product-grid.is-food {
            grid-template-columns: minmax(0, 1fr);
            gap: 2rem;
        }

        /* Zwei Spalten erst, wenn neben dem Foto Platz fuer "Name ..... Preis" bleibt. Ab 64rem
           stand der Name in einer 14rem schmalen Spalte, brach nach "Kebab de" um, und von der
           Punktlinie blieben drei Punkte. */
        @media (min-width: 78rem) {
            .product-grid.is-food {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                column-gap: 3.5rem;
            }
        }

        .product-card {
            display: grid;
            grid-template-columns: 13.5rem minmax(0, 1fr);
            column-gap: 1.35rem;
            align-items: start;
            width: 100%;
            padding: 0;
            border: 0;
            border-radius: 0.6rem;
            background: none;
            color: inherit;
            font: inherit;
            text-align: left;
            cursor: pointer;
        }

        .product-card:focus { outline: none; }

        .product-card:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 6px;
        }

        .product-media {
            display: block;
            position: relative;
            aspect-ratio: var(--ratio-food);
            border-radius: 0.6rem;
            overflow: hidden;
            background: var(--placeholder-bg);
        }

        /* max-width: in einer Spalte auf dem Tablet liefe die Punktlinie sonst ueber 60rem. */
        .product-body {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
            min-width: 0;
            max-width: 44rem;
        }

        /* Name ..... Preis. Ein langer Name bricht um; Punktlinie und Preis stehen dann auf der
           Grundlinie seiner ersten Zeile. */
        .product-line {
            display: flex;
            align-items: baseline;
            gap: 0.6rem;
            width: 100%;
        }

        .product-name,
        .product-price {
            font-family: var(--carte-display);
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.1;
            color: var(--white);
        }

        .product-name { min-width: 0; }

        .product-leader {
            flex: 1 1 1.25rem;
            min-width: 1.25rem;
            border-bottom: 2px dotted var(--carte-leader);
            transform: translateY(-0.3em);
        }

        .product-price {
            flex: 0 0 auto;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .product-compo {
            font-size: 0.9375rem;
            line-height: 1.5;
            color: var(--text-gray);
        }

        .product-action {
            display: inline-flex;
            align-items: center;
            min-height: 2.5rem;
            margin-top: 0.25rem;
            padding: 0 1.15rem;
            border-radius: 0.45rem;
            background: var(--brand);
            color: var(--white);
            font-family: var(--carte-display);
            font-size: 1.15rem;
            font-weight: 700;
            line-height: 1;
            transition: background-color 0.15s;
        }

        .product-card:hover .product-action,
        .product-card:focus-visible .product-action,
        .product-card:active .product-action {
            background: var(--brand-hover);
        }

        /* Handy: das Foto als Quadrat links, Name und Preis daneben. Die Zusammensetzung darf
           drei Zeilen lang sein; vollstaendig steht sie im Detail-Blatt, wo die Entscheidung
           faellt. Die ganze Zeile nimmt den Tipp an, deshalb darf der Knopf kleiner sein als die
           Tippflaeche. */
        @media (max-width: 39.99rem) {
            :root {
                --carte-gutter: 1rem;
            }

            .product-grid.is-food { gap: 1.5rem; }

            .is-food .product-card {
                grid-template-columns: 6.5rem minmax(0, 1fr);
                column-gap: 0.9rem;
            }

            .is-food .product-media { aspect-ratio: var(--ratio-square); }

            .product-body { gap: 0.35rem; }

            .product-name,
            .product-price { font-size: 1.25rem; }

            .product-leader {
                flex-basis: 0.75rem;
                min-width: 0.75rem;
            }

            .product-compo {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                font-size: 0.8125rem;
                line-height: 1.45;
            }

            .product-action {
                min-height: 2.125rem;
                padding: 0 0.85rem;
                font-size: 1rem;
            }
        }

        /* ============================================================
           Startseite

           Dieselbe Sprache wie die Karte: die Schrift der Tafel, alles linksbuendig unter dem
           Logo, und genau ein lautes Element - der Satz des Ladens im Kopf. Vorher war alles
           zentriert, jeder Abschnitt trug einen grauen Untertitel, die Zahlen standen in Kacheln,
           und mit letter-spacing: -0.1rem liefen die Woerter der Titel ineinander
           ("Unaperçu de la carte").
           ============================================================ */
        .home-hero {
            position: relative;
            display: flex;
            align-items: flex-end;
            margin-top: 60px;
            min-height: 36rem;
            min-height: min(46rem, calc(100svh - 60px));
            background-color: var(--black);
            /* hero.webp ist eine eigene Aufnahme (Berlin Crousty auf dunklem Holz). Der Verlauf
               dunkelt links ab, wo der Text steht, und laesst rechts das Essen hell. */
            background-image:
                linear-gradient(90deg,
                    rgba(11, 9, 8, 0.94) 0%,
                    rgba(11, 9, 8, 0.78) 34%,
                    rgba(11, 9, 8, 0.2) 72%,
                    rgba(11, 9, 8, 0.05) 100%),
                linear-gradient(0deg,
                    rgba(11, 9, 8, 0.85) 0%,
                    rgba(11, 9, 8, 0) 40%),
                url('images/hero.webp');
            background-size: cover;
            background-position: center;
        }

        .home-hero-inner {
            width: 100%;
            max-width: var(--carte-max);
            margin-inline: auto;
            padding-inline: var(--carte-gutter);
            padding-block: 5rem 4rem;
        }

        .home-hero-title {
            max-width: 7em;
            font-family: var(--carte-display);
            font-size: clamp(3.5rem, 1.6rem + 7.4vw, 8.5rem);
            font-weight: 800;
            line-height: 0.86;
            color: var(--white);
            text-wrap: balance;
        }

        .home-hero-lede {
            max-width: 34rem;
            margin-top: 1.4rem;
            font-size: 1.125rem;
            line-height: 1.55;
            color: #e4ded8;
        }

        .home-hero-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 1rem 1.75rem;
            margin-top: 2rem;
        }

        .home-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 3.25rem;
            padding: 0 1.6rem;
            border-radius: 0.5rem;
            background: var(--brand);
            color: var(--white);
            font-family: var(--carte-display);
            font-size: 1.5rem;
            font-weight: 700;
            text-decoration: none;
            transition: background-color 0.15s;
        }

        .home-cta:hover,
        .home-cta:focus-visible {
            background: var(--brand-hover);
        }

        .home-hero-where {
            font-size: 0.9375rem;
            line-height: 1.5;
            color: var(--text-gray);
        }

        .home-hero-hours {
            display: block;
        }

        .home-block {
            padding-block: 4.5rem;
            scroll-margin-top: 60px;
        }

        .home-block--raised {
            background: var(--dark-gray);
        }

        .home-wrap {
            max-width: var(--carte-max);
            margin-inline: auto;
            padding-inline: var(--carte-gutter);
        }

        .home-block-head {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: space-between;
            gap: 0.75rem 2rem;
            margin-bottom: 2.25rem;
        }

        .home-block-title {
            font-family: var(--carte-display);
            font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
            font-weight: 800;
            line-height: 1;
            color: var(--white);
            text-wrap: balance;
        }

        .home-link {
            font-family: var(--carte-display);
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--white);
            text-decoration: underline;
            text-decoration-color: var(--brand);
            text-decoration-thickness: 2px;
            text-underline-offset: 6px;
        }

        .home-link:hover,
        .home-link:focus-visible {
            color: var(--brand-text);
        }

        /* Kartenauszug: dieselbe Artikelzeile wie auf der Karte. Ab 64rem stehen die drei
           nebeneinander, das Foto oben; darunter wie auf der Karte. */
        a.product-card {
            text-decoration: none;
        }

        @media (min-width: 64rem) {
            .product-grid.is-feature {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 2.5rem;
            }

            /* Die Knoepfe stehen auf einer Linie, auch wenn ein Artikel keine Zutatenliste
               hat (Berlin Crousty). */
            .is-feature .product-item {
                display: flex;
            }

            .is-feature .product-card {
                grid-template-columns: minmax(0, 1fr);
                grid-template-rows: auto 1fr;
                align-items: stretch;
                row-gap: 1.1rem;
            }

            .is-feature .product-body {
                max-width: none;
            }

            .is-feature .product-compo {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }

            .is-feature .product-action {
                margin-top: auto;
            }
        }

        /* Die Nummern stehen fuer eine echte Reihenfolge, deshalb <ol>. */
        .home-steps {
            list-style: none;
            display: grid;
            gap: 2rem;
            margin-top: 2.25rem;
        }

        /* Drei Spalten erst ab 64rem - bei 768px stand jeder Schritt in fuenf kurzen Zeilen. */
        @media (min-width: 64rem) {
            .home-steps {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 3rem;
            }
        }

        .home-step {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            column-gap: 1rem;
            align-items: baseline;
        }

        .home-step-num {
            grid-row: 1 / span 2;
            font-family: var(--carte-display);
            font-size: 3.25rem;
            font-weight: 800;
            line-height: 0.85;
            color: var(--brand-text);
            font-variant-numeric: tabular-nums;
        }

        .home-step-title {
            font-family: var(--carte-display);
            font-size: 1.65rem;
            font-weight: 700;
            line-height: 1.1;
            color: var(--white);
        }

        .home-step p {
            max-width: 26rem;
            margin-top: 0.45rem;
            font-size: 0.9375rem;
            line-height: 1.6;
            color: var(--text-gray);
        }

        /* Fait maison: links der Text, rechts die Zahlen gesetzt wie auf der Karte. Zwei
           Spalten erst ab 75rem - bei 1024px brach der Titel sonst in drei Stuecke. */
        .home-maison {
            display: grid;
            gap: 2.5rem;
        }

        @media (min-width: 75rem) {
            .home-maison {
                grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
                align-items: center;
                column-gap: 5rem;
            }
        }

        .home-lede {
            max-width: 36rem;
            margin-top: 1.15rem;
            margin-bottom: 1.4rem;
            font-size: 1.0625rem;
            line-height: 1.7;
            color: var(--text-gray);
        }

        .home-facts {
            list-style: none;
            display: grid;
            gap: 1rem;
            max-width: 36rem;
        }

        .home-fact {
            display: flex;
            align-items: baseline;
            gap: 0.75rem;
            font-family: var(--carte-display);
            font-size: 1.65rem;
            font-weight: 700;
            line-height: 1.15;
            color: var(--white);
        }

        .home-fact-leader {
            flex: 1 1 1.5rem;
            min-width: 1.5rem;
            border-bottom: 2px dotted var(--carte-leader);
            transform: translateY(-0.2em);
        }

        .home-fact-value {
            flex: 0 0 auto;
            font-size: 2.35rem;
            font-weight: 800;
            line-height: 1;
            color: var(--brand-text);
            font-variant-numeric: tabular-nums;
        }

        /* Où nous trouver: die Angaben als Liste wie auf der AGB-Seite, daneben der Stadtplan. */
        .home-visit {
            display: grid;
            gap: 2.5rem;
        }

        @media (min-width: 60rem) {
            .home-visit {
                grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
                column-gap: 4rem;
            }
        }

        .home-visit-list {
            margin-top: 1.75rem;
            border-top: 1px solid var(--border-gray);
        }

        .home-visit-list > div {
            display: grid;
            grid-template-columns: 7rem minmax(0, 1fr);
            gap: 1rem;
            padding-block: 0.8rem;
            border-bottom: 1px solid var(--border-gray);
        }

        .home-visit-list dt {
            font-size: 0.9375rem;
            line-height: 1.5;
            color: var(--text-gray);
        }

        .home-visit-list dd {
            font-size: 0.9375rem;
            line-height: 1.5;
            color: var(--white);
        }

        .home-visit-list a {
            color: var(--white);
            text-decoration-color: var(--brand);
            text-underline-offset: 3px;
        }

        .home-button {
            display: inline-flex;
            align-items: center;
            min-height: var(--tap-min);
            margin-top: 1.5rem;
            padding: 0 1.3rem;
            border: 1px solid var(--border-gray);
            border-radius: 0.5rem;
            color: var(--white);
            font-family: var(--carte-display);
            font-size: 1.3rem;
            font-weight: 700;
            text-decoration: none;
            transition: border-color 0.15s, background-color 0.15s;
        }

        .home-button:hover,
        .home-button:focus-visible {
            border-color: var(--white);
            background: var(--medium-gray);
        }

        /* Der Plan fuellt seinen Rahmen absolut, wie die Fotos (.media-img). Vorher hing die Hoehe
           des iframes an height: 100% eines Rahmens, der selbst keine feste Hoehe hat - das loest
           nicht jeder Browser gleich auf. top/left statt inset: der Plan soll auch in alten
           In-App-Browsern stehen. */
        .map-container {
            position: relative;
            display: flex;
            min-height: 20rem;
            border: 1px solid var(--border-gray);
            border-radius: 0.8rem;
            overflow: hidden;
            background: var(--medium-gray);
        }

        .map-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* Vor dem Klick steht im Rahmen nur das Angebot, den Plan zu laden: Googles iframe bekommt
           die IP-Adresse und darf Cookies setzen, dafuer verlangt die CNIL eine vorherige
           Zustimmung - der Klick ist sie (home.js tauscht den Inhalt gegen das iframe). Im Fluss
           statt absolut: am Handy ist der Text hoeher als die 15rem des Rahmens, dann waechst er. */
        .map-consent {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            padding: 1.5rem;
        }

        .map-consent-title {
            font-family: var(--carte-display);
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.15;
            color: var(--white);
        }

        .map-consent-text {
            max-width: 32rem;
            margin-top: 0.5rem;
            font-size: 0.9375rem;
            line-height: 1.5;
            color: var(--text-gray);
        }

        .map-consent-text a {
            color: var(--white);
            text-decoration-color: var(--brand);
            text-underline-offset: 3px;
        }

        /* .home-button ist sonst ein Link; als button braucht es den Grund und den Zeiger selbst,
           und der Hover-Grund des Links waere hier derselbe wie der des Rahmens. */
        .map-consent-button {
            margin-top: 1.1rem;
            background: transparent;
            cursor: pointer;
        }

        .map-consent-button:hover,
        .map-consent-button:focus-visible {
            background: var(--black);
        }

        @media (max-width: 39.99rem) {
            .home-hero {
                min-height: 34rem;
                min-height: calc(100svh - 60px - 3rem);
                background-image:
                    linear-gradient(0deg,
                        rgba(11, 9, 8, 0.96) 0%,
                        rgba(11, 9, 8, 0.8) 42%,
                        rgba(11, 9, 8, 0.25) 100%),
                    url('images/hero.webp');
            }

            .home-hero-inner {
                padding-block: 3rem 2.25rem;
            }

            .home-hero-lede {
                font-size: 1rem;
            }

            .home-hero-actions {
                gap: 1rem;
            }

            .home-cta {
                width: 100%;
            }

            .home-block {
                padding-block: 3.25rem;
            }

            .home-fact {
                font-size: 1.4rem;
            }

            .home-fact-value {
                font-size: 2rem;
            }

            .home-visit-list > div {
                grid-template-columns: 6rem minmax(0, 1fr);
            }

            .map-container {
                min-height: 15rem;
            }
        }

        /* ============================================================
           Getraenkevorschlag

           Erscheint einmal pro Bestellung, wenn beim Oeffnen des Warenkorbs
           kein Getraenk drin ist. Der Banner oben ist das Kategoriebild der
           Getraenke - ein helles Foto bunter Dosen auf Holz, deshalb liegt
           ein kraeftiger Verlauf darunter, damit die weisse Schrift steht.
           ============================================================ */
        /* Ueber dem Toast (z-index 10000): sonst deckt eine noch sichtbare
           Meldung vom vorherigen Hinzufuegen auf dem Handy genau den
           Weiter-Knopf ab. */
        .modal.drink-prompt {
            /* Zwei Klassen, damit die Regel .modal { z-index: 9999 } schlaegt -
               die steht weiter unten in dieser Datei und gewaenne sonst bei
               gleicher Spezifitaet. */
            z-index: 10001;
        }

        .drink-prompt .drink-panel {
            background: var(--dark-gray);
            border: 1px solid var(--border-gray);
            width: 92%;
            max-width: 42rem;
            margin: 2.5rem auto;
            border-radius: 1rem;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: slideUp 0.3s;
        }

        .drink-banner {
            position: relative;
            aspect-ratio: 16 / 7;
            flex: none;
            background: var(--medium-gray);
            overflow: hidden;
        }

        /* Das Kategoriebild ist hochkant; der Ausschnitt nimmt die Bildmitte,
           dort stehen die Dosen. */
        .drink-banner-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 34%;
            display: block;
        }

        .drink-banner::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to top,
                rgba(11, 9, 8, 0.96) 0%,
                rgba(11, 9, 8, 0.78) 32%,
                rgba(11, 9, 8, 0.22) 68%,
                rgba(11, 9, 8, 0.08) 100%);
        }

        .drink-banner-text {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 1.1rem 1.4rem 1.2rem;
            z-index: 1;
        }

        .drink-title {
            margin: 0;
            font-family: var(--carte-display);
            font-size: clamp(1.9rem, 1.4rem + 2vw, 2.5rem);
            font-weight: 800;
            line-height: 1;
            color: var(--white);
            text-wrap: balance;
        }

        /* Der Titel wird beim Oeffnen fokussiert, damit Vorleseprogramme dort einsteigen. Er ist
           keine Schaltflaeche - deshalb kein Rahmen. Vorher stand er in einem blauen Kasten. */
        .drink-title:focus,
        .drink-title:focus-visible {
            outline: none;
        }

        .drink-body {
            position: relative;
            padding: 1.1rem 1.2rem 1.3rem;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;

            /* Weicher Auslauf am unteren Rand: zeigt, dass unter der
               Fussleiste noch Getraenke stehen. Der Verlauf scrollt mit dem
               Rahmen, nicht mit dem Inhalt. */
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 2.2rem), transparent 100%);
        }

        /* Ist alles sichtbar, braucht es keinen Auslauf. */
        .drink-body.is-complete {
            -webkit-mask-image: none;
            mask-image: none;
        }

        .drink-hint {
            margin: 0 0 1rem;
            font-size: 0.9375rem;
            color: var(--text-gray);
        }

        .drink-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.7rem;
        }

        @media (min-width: 30rem) {
            .drink-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        }

        @media (min-width: 42rem) {
            .drink-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        }

        /* Wie die Getraenke auf der Karte: Name und Preis in der Schrift der Tafel, linksbuendig.
           Der Preis steht unten, damit er in einer Reihe auf einer Hoehe bleibt, auch wenn ein
           Name zwei Zeilen braucht ("Oasis Pomme Cassis Framboise"). */
        .drink-card {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            padding: 0 0 0.6rem;
            background: var(--medium-gray);
            border: 2px solid transparent;
            border-radius: 0.7rem;
            overflow: hidden;
            color: var(--white);
            font: inherit;
            text-align: left;
            cursor: pointer;
            transition: border-color 0.15s;
        }

        .drink-card:hover {
            border-color: var(--brand);
        }

        .drink-card:focus { outline: none; }

        .drink-card:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 2px;
        }

        .drink-card.is-added {
            border-color: var(--brand);
            background: var(--brand-soft);
        }

        .drink-media {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            margin-bottom: 0.45rem;
            background: var(--placeholder-bg);
            display: block;
        }

        /* Zaehlt mit, wie oft das Getraenk schon im Korb liegt. */
        .drink-badge {
            position: absolute;
            top: 0.3rem;
            right: 0.3rem;
            min-width: 1.5rem;
            height: 1.5rem;
            padding: 0 0.35rem;
            border-radius: 999px;
            background: var(--brand);
            color: var(--white);
            font-family: var(--carte-display);
            font-size: 1rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
        }

        .drink-badge[hidden] { display: none; }

        .drink-name {
            padding: 0 0.55rem;
            font-family: var(--carte-display);
            font-size: 1.05rem;
            font-weight: 700;
            line-height: 1.1;
        }

        .drink-price {
            margin-top: auto;
            padding: 0.1rem 0.55rem 0;
            font-family: var(--carte-display);
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-gray);
            font-variant-numeric: tabular-nums;
        }

        .drink-foot {
            flex: none;
            padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom, 0px));
            border-top: 1px solid var(--border-gray);
            background: var(--dark-gray);
        }

        /* Solange nichts gewaehlt ist, ist "Non merci" ein ruhiger Knopf.
           Sobald ein Getraenk drin liegt, wird daraus die Hauptaktion. */
        .drink-skip {
            width: 100%;
            min-height: 3rem;
            background: transparent;
            color: var(--white);
            border: 1px solid var(--border-gray);
            border-radius: 0.5rem;
            font-family: var(--carte-display);
            font-size: 1.3rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s, border-color 0.2s, color 0.2s;
        }

        .drink-skip:hover,
        .drink-skip:focus-visible {
            background: var(--medium-gray);
            border-color: var(--white);
        }

        .drink-skip.is-filled {
            background: var(--brand);
            border-color: var(--brand);
            color: var(--white);
        }

        .drink-skip.is-filled:hover,
        .drink-skip.is-filled:focus-visible {
            background: var(--brand-hover);
            border-color: var(--brand-hover);
        }

        @media (max-width: 30rem) {
            .drink-prompt .drink-panel {
                width: 100%;
                max-width: none;
                margin: 0;
                min-height: 100%;
                border: none;
                border-radius: 0;
            }

            .drink-banner { aspect-ratio: 16 / 7; }
        }

        @media (prefers-reduced-motion: reduce) {
            .drink-card { transition: none; }
        }

        .modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.9);
            backdrop-filter: blur(10px);
            z-index: 9999;
            animation: fadeIn 0.3s;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from {
                transform: translateY(2.5rem);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* ============================================================
           Warenkorb ("Votre panier")

           Gesetzt wie der Bon: jede Zeile Name ..... Summe, darunter die gewaehlten Optionen
           untereinander, dann die Menge; darunter "Total ..... Betrag" gross. Kopf mit dem
           Schliessen-Knopf und Fuss mit "Payer <Betrag>" stehen fest, nur die Mitte rollt. Vorher
           lief alles in einem Stueck: am Handy stand "Payer" erst nach 1300 px, die Mengenknoepfe
           waren 21 px gross, und die Optionen liefen als eine Wortschlange neben ihnen her.
           Am Handy fuellt der Warenkorb den Bildschirm.
           ============================================================ */
        .modal-content {
            position: relative;
            display: flex;
            flex-direction: column;
            width: min(34rem, calc(100% - 2rem));
            max-height: 90vh;
            max-height: calc(100dvh - 5rem);
            margin: 2.5rem auto;
            overflow: hidden;
            background: var(--dark-gray);
            border: 1px solid var(--border-gray);
            border-radius: 1rem;
            animation: slideUp 0.3s;
        }

        .cart-head {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.9rem 0.75rem 0.9rem 1.5rem;
            border-bottom: 1px solid var(--border-gray);
        }

        .modal-title {
            font-family: var(--carte-display);
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
            color: var(--white);
        }

        /* Der Titel bekommt beim Oeffnen den Fokus, damit Vorleseprogramme dort einsteigen - er
           ist keine Schaltflaeche und braucht keinen Rahmen. */
        .modal-title:focus,
        .modal-title:focus-visible {
            outline: none;
        }

        .cart-close {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: var(--tap-min);
            height: var(--tap-min);
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text-gray);
            font-size: 2rem;
            line-height: 1;
            cursor: pointer;
        }

        .cart-close:hover {
            background: var(--medium-gray);
            color: var(--white);
        }

        .cart-close:focus { outline: none; }

        .cart-close:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: -2px;
        }

        /* position: relative macht die Mitte zum Bezugsrahmen der unsichtbaren Fehlertexte im
           Formular (.sr-only, absolut positioniert). Ohne das hingen sie am ganzen Fenster, gaben
           ihm Ueberlauf, und ein Fokus auf ein Feld schob Kopf und Fuss aus dem Bild. */
        .cart-body {
            position: relative;
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 0.25rem 1.5rem 1.75rem;
            -webkit-overflow-scrolling: touch;
        }

        .cart-item {
            padding-block: 1.1rem;
            border-bottom: 1px solid var(--border-gray);
        }

        /* Name ..... Summe. Die Punktlinie ist ein Pseudo-Element; order setzt sie zwischen
           Name und Betrag. */
        .cart-item-head {
            display: flex;
            align-items: baseline;
            gap: 0.6rem;
        }

        .cart-item-head::after {
            content: '';
            order: 1;
            flex: 1 1 1rem;
            min-width: 1rem;
            border-bottom: 2px dotted var(--carte-leader);
            transform: translateY(-0.3em);
        }

        .cart-item-name,
        .cart-item-total {
            font-family: var(--carte-display);
            font-size: 1.35rem;
            font-weight: 700;
            line-height: 1.15;
            color: var(--white);
        }

        .cart-item-name {
            order: 0;
            min-width: 0;
        }

        .cart-item-total {
            order: 2;
            flex: 0 0 auto;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .cart-item-options {
            list-style: none;
            margin-top: 0.3rem;
            font-size: 0.875rem;
            line-height: 1.45;
            color: var(--text-gray);
        }

        .cart-item-foot {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 0.9rem;
            margin-top: 0.75rem;
        }

        .cart-item-quantity {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--border-gray);
            border-radius: 0.5rem;
            overflow: hidden;
        }

        .quantity-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.75rem;
            height: 2.75rem;
            border: 0;
            background: var(--medium-gray);
            color: var(--white);
            font-size: 1.35rem;
            font-weight: 600;
            line-height: 1;
            cursor: pointer;
            transition: background-color 0.15s;
        }

        .quantity-btn:hover {
            background: var(--hover-gray);
        }

        .quantity-btn:focus { outline: none; }

        .quantity-btn:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: -3px;
        }

        .quantity-display {
            min-width: 2.4rem;
            text-align: center;
            font-family: var(--carte-display);
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--white);
            font-variant-numeric: tabular-nums;
        }

        .cart-item-unit {
            font-size: 0.8125rem;
            color: var(--text-gray);
            font-variant-numeric: tabular-nums;
        }

        .remove-item {
            margin-left: auto;
            min-height: 2.75rem;
            padding: 0 0.25rem;
            border: 0;
            background: none;
            color: var(--text-gray);
            font: inherit;
            font-size: 0.9375rem;
            text-decoration: underline;
            text-underline-offset: 3px;
            cursor: pointer;
        }

        .remove-item:hover {
            color: var(--white);
        }

        .remove-item:focus { outline: none; }

        .remove-item:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 2px;
        }

        .cart-summary {
            display: flex;
            align-items: baseline;
            gap: 0.75rem;
            margin-top: 1.25rem;
            font-family: var(--carte-display);
            font-size: 1.75rem;
            font-weight: 800;
            line-height: 1.1;
            color: var(--white);
        }

        .cart-summary::after {
            content: '';
            order: 1;
            flex: 1 1 1rem;
            min-width: 1rem;
            border-bottom: 2px dotted var(--carte-leader);
            transform: translateY(-0.3em);
        }

        .cart-summary #total {
            order: 2;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .checkout-section {
            display: grid;
            gap: 1.25rem;
            margin-top: 2rem;
        }

        .form-group {
            min-width: 0;
            border: 0;
        }

        .form-group label,
        .form-group legend {
            display: block;
            margin-bottom: 0.45rem;
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--white);
        }

        .form-optional {
            font-weight: 400;
            color: var(--text-gray);
        }

        /* 16px in den Feldern: darunter zoomt Safari auf dem iPhone beim Antippen hinein. */
        .form-group input,
        .form-group textarea {
            width: 100%;
            min-height: var(--tap-min);
            padding: 0.7rem 0.85rem;
            background: var(--black);
            border: 1px solid var(--border-gray);
            border-radius: 0.5rem;
            color: var(--white);
            font: inherit;
            font-size: 1rem;
            line-height: 1.4;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

        .form-group textarea {
            min-height: 4.75rem;
            resize: vertical;
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: #857b72;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--focus-color);
            box-shadow: 0 0 0 1px var(--focus-color);
        }

        .form-hint {
            margin-top: 0.35rem;
            font-size: 0.8125rem;
            line-height: 1.4;
            color: var(--text-gray);
        }

        /* Am Ende des Formulars: wofuer die Angaben dienen, und der Weg zur Politique de
           confidentialite. Im Formular, nicht im Fuss des Warenkorbs - der muss "Payer" am Handy
           sichtbar lassen. So leise wie die Hinweise unter den Feldern. */
        .form-legal {
            font-size: 0.8125rem;
            line-height: 1.5;
            color: var(--text-gray);
        }

        .form-legal a {
            color: var(--white);
            text-decoration-color: var(--brand);
            text-underline-offset: 3px;
        }

        .pickup-time {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
            gap: 0.5rem;
        }

        .time-slot {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 2.75rem;
            padding: 0 0.5rem;
            background: var(--black);
            border: 1px solid var(--border-gray);
            border-radius: 0.5rem;
            color: var(--white);
            font-family: var(--carte-display);
            font-size: 1.2rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            cursor: pointer;
            transition: background-color 0.15s, border-color 0.15s;
        }

        .time-slot:hover {
            border-color: var(--text-gray);
        }

        .time-slot:focus { outline: none; }

        .time-slot:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 2px;
        }

        .time-slot.selected {
            background: var(--brand);
            border-color: var(--brand);
            color: var(--white);
        }

        /* Nach Ladenschluss steht hier ein Satz statt der Zeiten. Er braucht
           die ganze Breite - das Raster wuerde ihn sonst in eine der
           Spalten quetschen und der Kunde liest eine Zeichenkolonne. */
        .pickup-time__closed {
            grid-column: 1 / -1;
            padding: 0.8rem 1rem;
            border: 1px dashed var(--border-gray);
            border-radius: 0.5rem;
            font-size: 0.9375rem;
            line-height: 1.5;
            color: var(--text-gray);
        }

        .cart-foot {
            flex: 0 0 auto;
            padding: 0.85rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
            border-top: 1px solid var(--border-gray);
            background: var(--dark-gray);
        }

        .cart-secure {
            margin-bottom: 0.65rem;
            font-size: 0.8125rem;
            line-height: 1.4;
            color: var(--text-gray);
        }

        /* Eine Reihe, auch am Handy: "Payer" bekommt den Rest der Breite, der ruhige Knopf
           darf dafuer zweizeilig werden. */
        .cart-actions {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 0.6rem;
        }

        .btn-cancel {
            max-width: 13rem;
            min-height: 3rem;
            padding: 0.3rem 1.1rem;
            border: 1px solid var(--border-gray);
            border-radius: 0.5rem;
            background: transparent;
            color: var(--white);
            font-family: var(--carte-display);
            font-size: 1.2rem;
            font-weight: 700;
            line-height: 1.05;
            cursor: pointer;
            transition: border-color 0.15s, background-color 0.15s;
        }

        .btn-cancel:hover {
            border-color: var(--text-gray);
            background: var(--medium-gray);
        }

        .btn-checkout {
            min-height: 3rem;
            padding: 0.3rem 1.25rem;
            border: 0;
            border-radius: 0.5rem;
            background: var(--brand);
            color: var(--white);
            font-family: var(--carte-display);
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.05;
            cursor: pointer;
            transition: background-color 0.15s;
        }

        .btn-checkout:hover {
            background: var(--brand-hover);
        }

        .checkout-total {
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .btn-cancel:focus,
        .btn-checkout:focus { outline: none; }

        .btn-cancel:focus-visible,
        .btn-checkout:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 2px;
        }

        /* Leerer Korb: kein Formular, keine Summe, kein "Payer" - nur der Weg zur Karte. */
        .modal-content.is-empty .cart-summary,
        .modal-content.is-empty .checkout-section,
        .modal-content.is-empty .cart-foot {
            display: none;
        }

        .cart-empty {
            padding-block: 2.25rem 1rem;
        }

        /* Der Kopf sagt schon "Votre panier" - der Satz darunter bleibt leise. */
        .cart-empty-title {
            font-size: 1.0625rem;
            line-height: 1.5;
            color: var(--text-gray);
        }

        .cart-empty-action {
            margin-top: 1.1rem;
            min-height: 3rem;
            padding: 0 1.4rem;
            border: 0;
            border-radius: 0.5rem;
            background: var(--brand);
            color: var(--white);
            font-family: var(--carte-display);
            font-size: 1.35rem;
            font-weight: 700;
            cursor: pointer;
        }

        .cart-empty-action:hover {
            background: var(--brand-hover);
        }

        .cart-empty-action:focus { outline: none; }

        .cart-empty-action:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 2px;
        }

        @media (max-width: 39.99rem) {
            .modal-content {
                width: 100%;
                height: 100%;
                max-height: none;
                margin: 0;
                border: 0;
                border-radius: 0;
            }

            /* Ein leerer Korb braucht keinen ganzen Bildschirm. */
            .modal-content.is-empty {
                width: calc(100% - 2rem);
                height: auto;
                margin: 1rem auto;
                border: 1px solid var(--border-gray);
                border-radius: 1rem;
            }

            .cart-head {
                padding: 0.5rem 0.5rem 0.5rem 1rem;
            }

            .modal-title {
                font-size: 1.75rem;
            }

            .cart-body {
                padding: 0.25rem 1rem 1.5rem;
            }

            .cart-foot {
                padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
            }

            .cart-secure {
                margin-bottom: 0.5rem;
            }

            .btn-cancel {
                max-width: 9.5rem;
                padding-inline: 0.85rem;
                font-size: 1.05rem;
            }

            .btn-checkout {
                font-size: 1.3rem;
            }
        }

        /* ============================================================
           Cookie-Dialog (consent.js)

           Ein Geschwister des Warenkorbs: dasselbe dunkle Blatt, derselbe Titel in der Schrift der
           Tafel, dieselben ruhigen Knoepfe. "Tout refuser" und "Tout accepter" sehen absichtlich
           gleich aus (CNIL: Ablehnen so leicht wie Annehmen) - die Markenfarbe traegt nur der
           eingeschaltete Schalter, nach der Regel oben: sie zeigt einen gewaehlten Zustand.
           Unter "Personnaliser" stehen die Wahlen als Zeilen der Tafel: Name ..... Wert.
           Am Handy kommt das Blatt von unten, wie eine Bestellbestaetigung.
           ============================================================ */
        html.consent-open {
            overflow: hidden;
        }

        .consent {
            position: fixed;
            inset: 0;
            z-index: 10001;   /* ueber dem Warenkorb (9999) und der Meldung (10000) */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background: rgba(11, 9, 8, 0.72);
            animation: fadeIn 0.2s;
        }

        .consent[hidden] {
            display: none;
        }

        .consent-panel {
            display: flex;
            flex-direction: column;
            width: min(30rem, 100%);
            max-height: calc(100vh - 2rem);
            max-height: calc(100dvh - 2rem);
            overflow: hidden;
            background: var(--dark-gray);
            border: 1px solid var(--border-gray);
            border-radius: 1rem;
            animation: slideUp 0.25s;
        }

        .consent-head {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.75rem 0.75rem 0.35rem 1.5rem;
        }

        .consent-title {
            font-family: var(--carte-display);
            font-size: 1.75rem;
            font-weight: 800;
            line-height: 1.05;
            color: var(--white);
        }

        /* Wie beim Warenkorb: der Titel bekommt beim Oeffnen den Fokus, er ist keine Schaltflaeche. */
        .consent-title:focus,
        .consent-title:focus-visible {
            outline: none;
        }

        .consent-body {
            flex: 1 1 auto;
            overflow-y: auto;
            padding: 0 1.5rem 1.1rem;
        }

        .consent-text {
            max-width: 26rem;
            font-size: 0.9375rem;
            line-height: 1.55;
            color: var(--text-gray);
        }

        .consent-rows {
            list-style: none;
            margin-top: 1rem;
            border-top: 1px solid var(--border-gray);
        }

        .consent-rows[hidden] {
            display: none;
        }

        .consent-row {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            min-height: calc(var(--tap-min) + 0.5rem);
            border-bottom: 1px solid var(--border-gray);
        }

        .consent-label {
            font-family: var(--carte-display);
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1.1;
            color: var(--white);
        }

        .consent-leader {
            flex: 1 1 1rem;
            min-width: 1rem;
            border-bottom: 2px dotted var(--carte-leader);
            transform: translateY(0.3em);
        }

        .consent-value {
            font-size: 0.875rem;
            color: var(--text-gray);
            white-space: nowrap;
        }

        .consent-switch {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            min-height: var(--tap-min);
            padding: 0 0.15rem;
            border: 0;
            background: transparent;
            color: var(--white);
            font: inherit;
            font-size: 0.9375rem;
            cursor: pointer;
        }

        .consent-switch-track {
            position: relative;
            flex: 0 0 auto;
            width: 2.75rem;
            height: 1.6rem;
            border-radius: 1rem;
            background: var(--light-gray);
            transition: background-color 0.15s;
        }

        .consent-switch-track::after {
            content: '';
            position: absolute;
            top: 0.2rem;
            left: 0.2rem;
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            background: var(--white);
            transition: transform 0.15s;
        }

        .consent-switch[aria-checked="true"] .consent-switch-track {
            background: var(--brand);
        }

        .consent-switch[aria-checked="true"] .consent-switch-track::after {
            transform: translateX(1.15rem);
        }

        /* "Oui"/"Non" steht daneben: der Zustand haengt nicht an der Farbe allein. */
        .consent-switch-text {
            min-width: 1.75rem;
            text-align: left;
        }

        .consent-links {
            margin-top: 0.9rem;
            font-size: 0.8125rem;
        }

        .consent-links a {
            color: var(--white);
            text-decoration-color: var(--brand);
            text-underline-offset: 3px;
        }

        .consent-foot {
            flex: 0 0 auto;
            padding: 0.85rem 1.5rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
            border-top: 1px solid var(--border-gray);
        }

        .consent-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.6rem;
        }

        .consent-btn {
            min-height: 3rem;
            padding: 0.3rem 0.9rem;
            border: 1px solid var(--border-gray);
            border-radius: 0.5rem;
            background: transparent;
            color: var(--white);
            font-family: var(--carte-display);
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1.05;
            cursor: pointer;
            transition: border-color 0.15s, background-color 0.15s;
        }

        .consent-btn:hover {
            border-color: var(--text-gray);
            background: var(--medium-gray);
        }

        .consent-more {
            display: block;
            width: 100%;
            min-height: var(--tap-min);
            margin-top: 0.3rem;
            border: 0;
            background: transparent;
            color: var(--text-gray);
            font: inherit;
            font-size: 0.9375rem;
            text-decoration: underline;
            text-decoration-color: var(--carte-leader);
            text-underline-offset: 3px;
            cursor: pointer;
        }

        .consent-more:hover {
            color: var(--white);
        }

        /* Nach "Personnaliser" wird aus dem Link der Knopf, der die Wahl festhaelt. */
        .consent-more.is-save {
            margin-top: 0.6rem;
            border: 1px solid var(--border-gray);
            border-radius: 0.5rem;
            color: var(--white);
            font-family: var(--carte-display);
            font-size: 1.25rem;
            font-weight: 700;
            text-decoration: none;
        }

        .consent-more.is-save:hover {
            border-color: var(--text-gray);
            background: var(--medium-gray);
        }

        .consent-btn:focus,
        .consent-more:focus,
        .consent-switch:focus { outline: none; }

        .consent-btn:focus-visible,
        .consent-more:focus-visible {
            outline: 2px solid var(--focus-color);
            outline-offset: 2px;
        }

        .consent-switch:focus-visible .consent-switch-track {
            outline: 2px solid var(--focus-color);
            outline-offset: 2px;
        }

        @media (max-width: 39.99rem) {
            .consent {
                align-items: flex-end;
                padding: 0;
            }

            .consent-panel {
                width: 100%;
                max-height: 90vh;
                max-height: 90dvh;
                border-bottom: 0;
                border-radius: 1rem 1rem 0 0;
            }

            .consent-head {
                padding: 0.5rem 0.5rem 0.25rem 1rem;
            }

            .consent-title {
                font-size: 1.5rem;
            }

            .consent-body {
                padding: 0 1rem 0.9rem;
            }

            .consent-foot {
                padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
            }

            .consent-btn {
                font-size: 1.15rem;
            }
        }

        /* "Gérer les cookies" im Fuss ist ein Knopf (er oeffnet den Dialog), sieht aber aus wie
           die Links daneben. */
        button.footer-link {
            padding: 0;
            border: 0;
            background: none;
            font: inherit;
            font-size: 0.85rem;
            cursor: pointer;
        }

        footer {
            background: var(--black);
            border-top: 1px solid var(--border-gray);
            padding: 1.5rem 0;
        }

        .footer-content {
            max-width: var(--carte-max);
            margin: 0 auto;
            padding-inline: var(--carte-gutter);
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .footer-link {
            color: var(--text-gray);
            text-decoration: none;
            font-size: 0.85rem;
            transition: color 0.3s;
        }

        .footer-link:hover,
        .footer-link:focus {
            color: var(--white);
            text-decoration: underline;
        }

        .footer-bottom {
            text-align: center;
            color: var(--text-gray);
            font-size: 0.85rem;
        }

        .toast {
            position: fixed;
            bottom: 1.5rem;
            right: 1.5rem;
            background: var(--white);
            color: var(--black);
            padding: 0.8rem 1.2rem;
            border-radius: 0.5rem;
            font-weight: 600;
            display: none;
            animation: slideInToast 0.3s;
            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
            z-index: 10000;
            font-size: 0.85rem;
            /* Eine Meldung nimmt keinen Tipp an: sonst verschluckt sie ihn fuer drei Sekunden. */
            pointer-events: none;
        }

        /* Solange der Warenkorb offen ist, steht die Meldung oben - unten laege sie auf "Payer". */
        body.cart-open .toast {
            top: 1rem;
            bottom: auto;
        }

        @keyframes slideInToast {
            from {
                transform: translateX(20rem);
            }
            to {
                transform: translateX(0);
            }
        }

        .toast.show {
            display: block;
        }

        .toast.success {
            background: var(--success);
            color: var(--black);
        }

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

        @media (max-width: 48rem) {
            .mobile-menu-btn {
                display: block;
            }

            /* display: none kann nicht animieren - der Uebergang war deshalb nie zu sehen. Mit
               visibility bleibt das Menue im Baum, faellt aber aus der Tabulatorfolge, solange es
               geschlossen ist. */
            .nav-menu {
                position: fixed;
                top: 0;
                left: 0;
                display: flex;
                width: min(20rem, 82%);
                height: 100vh;
                height: 100dvh;   /* Adressleiste des Browsers einrechnen */
                overflow-y: auto;
                background: var(--dark-gray);
                border-right: 1px solid var(--border-gray);
                flex-direction: column;
                padding: 4.5rem 1.5rem 1.5rem;
                z-index: 1002;
                visibility: hidden;
                transform: translateX(-100%);
                /* Beim Schliessen wartet visibility, bis das Menue draussen ist; beim Oeffnen
                   schaltet es sofort. Sonst nimmt der erste Link den Fokus nicht an - er waere
                   fuer die Dauer der Bewegung noch unsichtbar. */
                transition: transform 0.25s ease, visibility 0s linear 0.25s;
            }

            .nav-menu.is-open {
                visibility: visible;
                transform: translateX(0);
                transition: transform 0.25s ease, visibility 0s;
            }

            .nav-menu li {
                margin-bottom: 1.2rem;
            }

            .nav-menu a {
                /* inline-block, damit der Strich der aktuellen Seite unter dem Wort endet und
                   nicht ueber die ganze Blattbreite laeuft. */
                display: inline-block;
                min-height: var(--tap-min);
                font-family: var(--carte-display);
                font-size: 1.5rem;
                font-weight: 700;
                letter-spacing: 0;
                text-transform: none;
            }

            nav {
                padding: 0.5rem 1rem;
            }

            /* Der ausgeschriebene Name passt auf dem Handy nicht neben den
               Warenkorb-Knopf: Bildmarke bleibt, Schriftzug weicht. */
            .logo span {
                display: none;
            }

            .logo {
                font-size: 0.85rem;
                flex: 0 0 auto;
                min-width: 44px;
                min-height: 44px;
                justify-content: center;
            }

            .logo-image {
                height: 2.2rem;
                margin-right: 0;
            }

            nav {
                gap: 0.5rem;
            }

            /* Tippflaechen: mindestens 44px in beide Richtungen */
            .mobile-menu-btn {
                min-width: 44px;
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .cart-btn {
                padding: 0.75rem 1rem;
                font-size: 0.7rem;
                min-height: 44px;
            }

            .footer-link {
                display: inline-flex;
                align-items: center;
                min-height: 44px;
            }

            .social-icons {
                display: none;
            }

            .toast {
                bottom: 15px;
                right: 15px;
                left: 15px;
                width: auto;
                text-align: center;
            }

            .footer-links {
                flex-direction: column;
                align-items: center;
                gap: 0.8rem;
            }
        }

        @media (max-width: 25rem) {
            .logo {
                font-size: 1rem;
            }
        }

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

        @media (prefers-contrast: high) {
            :root {
                --text-gray: #ffffff;
                --border-gray: #ffffff;
            }
        }

        /* Tippflaechen: nur was bedient wird. Vorher galt die Regel fuer jedes a und jedes
           button - auch fuer Links mitten im Satz, die dadurch 40px hoch wurden. */
        @media (pointer: coarse) {
            .cart-btn,
            .mobile-menu-btn,
            .footer-link,
            .home-button,
            .home-cta,
            .time-slot,
            .consent-btn,
            .consent-more,
            .nav-order {
                min-height: var(--tap-min);
            }
        }