/*
 * menu-page.css — die Karte (menu.html) und das Detail-Blatt.
 * Farben, die Schrift der Tafel und die Artikelzeile (Name ..... Preis) kommen aus styles.css -
 * die Startseite zeigt dieselben Zeilen. Was nur die Karte braucht, steht hier.
 *
 * DIE KARTE LIEST SICH WIE DIE TAFEL UEBER DER THEKE
 *
 * Vorher stand je Rubrik ein Raster gleich grosser Kacheln mit grossem Foto da, und immer nur
 * eine Rubrik. Die sechs Kebabs sind aber auf demselben Holz, im selben Winkel und mit derselben
 * Frittenschale fotografiert: auf dem Bildschirm standen sechs fast gleiche Bilder, und das, was
 * sie unterscheidet - die Zutaten -, war nach einer Zeile abgeschnitten.
 *
 *   - Alle Rubriken stehen untereinander; die Leiste springt und zeigt, wo man gerade ist.
 *   - Name und Preis stehen auf einer Zeile, durch eine Punktlinie verbunden, wie auf jeder
 *     Preistafel und auf dem Bon der AGB-Seite (legal.css).
 *   - Die Zusammensetzung steht vollstaendig da; das Foto ist kleiner und ruhig daneben.
 *   - Titel, Namen und Preise in der schmalen Schrift der Borne (fonts.css), Fliesstext in Inter.
 *
 * Markenfarbe nach der Regel in styles.css: was die Bestellung voranbringt, und die aktive
 * Rubrik. Gruen bleibt die Farbe der Auswahl im Detail-Blatt - so steht es auch auf der Borne
 * ("Les ingrédients encadrés en vert sont inclus").
 */

:root {
    --carte-bar: 3.25rem;       /* Hoehe der Rubrikleiste */

    /* Auswahl im Detail-Blatt */
    --pick-on: #22c55e;
    --pick-on-soft: rgba(34, 197, 94, 0.12);
    --pick-off: #3a332d;
}

/* ============================================================
   Seitenkopf
   ============================================================ */
.carte-head {
    max-width: var(--carte-max);
    margin-inline: auto;
    padding-inline: var(--carte-gutter);
    padding-block: 3.25rem 2rem;
}

.carte-title {
    font-family: var(--carte-display);
    font-size: clamp(3rem, 2.2rem + 3.6vw, 5.25rem);
    font-weight: 800;
    line-height: 0.92;
    color: var(--white);
}

.carte-lede {
    margin-top: 0.85rem;
    max-width: 36rem;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text-gray);
}

/* ============================================================
   Rubrikleiste - klebt unter der Kopfleiste

   styles.css setzt Regeln direkt auf <nav> (Flex, Hoehe, Innenabstand der Kopfleiste). Die
   werden hier zurueckgesetzt, wie in legal.css fuer das Inhaltsverzeichnis.
   ============================================================ */
nav.cat-nav {
    display: block;
    height: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 60px;
    z-index: 40;
    background: rgba(11, 9, 8, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-gray);
}

.cat-nav-track {
    position: relative;         /* Bezug fuer offsetLeft in menu-page.js */
    display: flex;
    gap: 2rem;
    max-width: var(--carte-max);
    margin-inline: auto;
    padding-inline: var(--carte-gutter);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cat-nav-track::-webkit-scrollbar { display: none; }

/* justify-content: center, weil styles.css auf Touchgeraeten jedem Link min-width: 40px gibt:
   "Box" ist schmaler, stand links in seiner Flaeche und hatte rechts eine Luecke. */
.cat-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--carte-bar);
    padding-top: 3px;
    border-bottom: 3px solid transparent;
    font-family: var(--carte-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-gray);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.cat-link:hover { color: var(--white); }

.cat-link[aria-current="true"] {
    color: var(--white);
    border-bottom-color: var(--brand);
}

.cat-link:focus { outline: none; }

.cat-link:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: -4px;
}

/* ============================================================
   Rubriken
   ============================================================ */
.carte-sections {
    max-width: var(--carte-max);
    margin-inline: auto;
    padding-inline: var(--carte-gutter);
    padding-block: 0 5rem;
}

.carte-section {
    padding-top: 2.75rem;
    /* Ein Sprung aus der Leiste legt den Titel knapp unter die Leiste, nicht darunter. */
    scroll-margin-top: calc(60px + var(--carte-bar) - 1.25rem);
}

.carte-section-title {
    margin-bottom: 1.5rem;
    font-family: var(--carte-display);
    font-size: clamp(2rem, 1.5rem + 1.9vw, 3rem);
    font-weight: 800;
    line-height: 1;
    color: var(--white);
}

.carte-unavailable {
    padding-block: 3rem;
    font-size: 1.1rem;
    color: var(--white);
}

/* ============================================================
   Getraenke: kleine Kacheln wie im Kuehlregal. Ein Tipp legt sie in den Korb - das Plus auf
   dem Bild sagt es, statt vierzehnmal "Ajouter" untereinander. Die Artikelzeile selbst
   steht in styles.css.
   ============================================================ */
.product-grid.is-drink {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 1.75rem 1.25rem;
}

.is-drink .product-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.65rem;
}

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

.is-drink .product-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.is-drink .product-leader { display: none; }

.is-drink .product-name,
.is-drink .product-price { font-size: 1.15rem; }

.is-drink .product-price { color: var(--text-gray); }

.product-add {
    position: absolute;
    right: 0.45rem;
    bottom: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding-bottom: 0.1rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--white);
    font-family: var(--carte-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: background-color 0.15s;
}

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

/* ============================================================
   Handy - die Artikelzeile schaltet in styles.css um, hier nur Seitenkopf, Leiste und
   Getraenke.
   ============================================================ */
@media (max-width: 39.99rem) {
    :root {
        --carte-bar: 3rem;
    }

    .carte-head { padding-block: 2.25rem 1.5rem; }

    .carte-lede { font-size: 0.975rem; }

    .cat-nav-track { gap: 1.4rem; }

    .cat-link { font-size: 1.2rem; }

    .carte-section { padding-top: 2.25rem; }

    .carte-section-title { margin-bottom: 1.1rem; }

    .product-grid.is-drink {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem 0.75rem;
    }

    .is-drink .product-name,
    .is-drink .product-price { font-size: 1.05rem; }

    .product-add {
        right: 0.35rem;
        bottom: 0.35rem;
        width: 2rem;
        height: 2rem;
        font-size: 1.5rem;
    }
}

/* Auf 360px breiten Handys passen die fuenf Rubriken nur mit etwas engerem Abstand ganz in die
   Leiste - sonst schneidet der Rand "Boissons" an. */
@media (max-width: 23.5rem) {
    .cat-nav-track { gap: 1.1rem; }
}

/* ============================================================
   Detail-Blatt - auf dem Handy bildschirmfuellend, ab 720px mittig
   ============================================================ */
.detail-sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.72);
}

.detail-sheet.is-open { display: block; }

.detail-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--black);
}

@media (min-width: 720px) {
    .detail-panel {
        top: 3vh;
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(60rem, 94vw);
        max-height: 94vh;
        border: 1px solid var(--border-gray);
        border-radius: 1rem;
    }
}

.detail-top {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border-gray);
    background: var(--dark-gray);
}

.detail-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 5rem;
    aspect-ratio: var(--ratio-food);
    border-radius: 0.45rem;
    overflow: hidden;
    background: var(--placeholder-bg);
}

.detail-thumb-frame {
    position: absolute;
    inset: 0;
}

.detail-heading {
    flex: 1;
    min-width: 0;
}

.detail-name,
.detail-price {
    font-family: var(--carte-display);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--white);
}

/* Der Titel wird beim Oeffnen fokussiert, damit Vorleseprogramme dort einsteigen. Er ist keine
   Schaltflaeche und liegt nicht in der Tab-Reihenfolge, deshalb kein Rahmen. Frueher stand
   einer bei :focus-visible - den zeigt der Browser aber auch, wenn das Blatt ohne jede Eingabe
   aufgeht, und genau das passiert beim Sprung von der Startseite (menu.html?p=...): der Name
   stand dann in einem blauen Kasten. */
.detail-name:focus,
.detail-name:focus-visible {
    outline: none;
}

.detail-price {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.detail-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.4rem 1.25rem 1.75rem;
    -webkit-overflow-scrolling: touch;
}

.detail-step + .detail-step { margin-top: 2.1rem; }

/* Die Titel der Saucengruppen schreibt der Chef, in Grossbuchstaben wie auf der Borne. Die festen
   Titel daneben ("CHOISISSEZ VOTRE PAIN") folgen ihnen, damit keine Gruppe lauter aussieht als
   die andere: dieselbe schmale Schrift, ohne Sperrung. */
.step-title {
    margin-bottom: 0.8rem;
    font-family: var(--carte-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--white);
}

.step-hint {
    margin: -0.4rem 0 0.9rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-gray);
}

/* Die Saucengruppen: auf dem Handy untereinander, ab 720px nebeneinander - wie auf der Borne und
   wie der Hinweis "une sauce dans chaque colonne" es sagt. In drei Spalten steht je Zeile eine
   Karte; neben dem runden Bild hat der Name Platz und bricht nicht mehr mitten im Wort um, wie
   frueher unter dem Bild ("Mayonnai-se"). */
.sauce-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
}

@media (min-width: 720px) {
    .sauce-columns.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sauce-columns.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   Auswahlkarten (Brot, Saucen, Zutaten)

   Bild rund links, Name daneben in lesbarer Groesse - vorher stand er in 0,68rem unter dem Bild.
   ============================================================ */
.chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.25rem, 1fr));
    gap: 0.5rem;
}

.chip {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.35rem 0.8rem 0.35rem 0.35rem;
    border: 2px solid var(--pick-off);
    border-radius: 2rem;
    background: var(--dark-gray);
    color: var(--text-gray);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.chip-media {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--placeholder-bg);
}

.chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chip-label {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
    hyphens: auto;
}

.chip-extra {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pick-on);
    font-variant-numeric: tabular-nums;
}

.chip-extra:empty { display: none; }

.chip[aria-pressed="true"],
.chip[aria-checked="true"] {
    border-color: var(--pick-on);
    background: var(--pick-on-soft);
    color: var(--white);
}

/* Zutaten sind vorab gewaehlt. Eine abgewaehlte bleibt sichtbar, aber durchgestrichen: das
   liest sich auch ohne Farbe als "ohne". */
.chip.is-removed {
    border-color: var(--pick-off);
    background: transparent;
    color: var(--text-gray);
}

.chip.is-removed .chip-label {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.chip.is-removed .chip-media {
    opacity: 0.45;
    filter: grayscale(1);
}

.chip:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.chip:focus { outline: none; }

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

/* ============================================================
   Fuss des Detail-Blatts: Menge und Aktionen
   ============================================================ */
.detail-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1.25rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-gray);
    background: var(--dark-gray);
}

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

.qty-btn {
    width: var(--tap-min);
    height: var(--tap-min);
    border: 0;
    background: var(--medium-gray);
    color: var(--white);
    font-size: 1.35rem;
    font-weight: 600;
    cursor: pointer;
}

.qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }

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

.btn-add {
    flex: 1;
    min-width: 12rem;
    min-height: var(--tap-min);
    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;
    transition: background-color 0.15s;
}

.btn-add:hover,
.btn-add:focus-visible { background: var(--brand-hover); }

.btn-add:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-back {
    min-height: var(--tap-min);
    padding: 0 1.1rem;
    border: 1px solid var(--border-gray);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--text-gray);
    font-family: var(--carte-display);
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
}

.btn-back:hover,
.btn-back:focus-visible {
    border-color: var(--text-gray);
    color: var(--white);
}

.qty-btn:focus,
.btn-add:focus,
.btn-back:focus { outline: none; }

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

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

/* Voreinstellung ist ein neutraler Hinweis. Erst wenn jemand den gesperrten
   Knopf antippt, wird daraus eine Fehlermeldung - sonst stehen hier zwei
   verschiedene Rottoene direkt nebeneinander (Warnung und Hauptknopf) und
   bedeuten nicht dasselbe. */
.detail-warning {
    flex-basis: 100%;
    min-height: 1.3rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-gray);
}

.detail-warning.is-error {
    color: var(--danger);
}

/* Gedaempft, solange noch etwas fehlt - aber bewusst nicht disabled, sonst
   bliebe ein Tipp darauf folgenlos und unerklaert. Steht nach :hover, damit
   der Knopf beim Ueberfahren nicht fertig aussieht. */
.btn-add.is-incomplete {
    background: var(--medium-gray);
    color: var(--text-gray);
}

/* Die Optionen einer Warenkorbzeile stehen seit dem Umbau des Warenkorbs in styles.css - er ist
   auf jeder Seite derselbe. */

@media (prefers-reduced-motion: reduce) {
    .cat-link,
    .product-action,
    .product-add,
    .chip,
    .btn-add { transition: none; }
}