/* ======================================================================
   Hanware Shop - Restaurant Theme (Grill & Orient)
   Warme Brauntoene, Gold-Akzent, edle Typografie.
   Inspiriert von BBQ- und Mezze-Restaurants.
====================================================================== */

:root {
    --color-primary: #8b4513;         /* sattes Mahagoni-Braun */
    --color-primary-dark: #5d2e0d;    /* dunkles Holzbraun */
    --color-accent: #d4a24c;          /* warmes Gold / gebrannter Safran */
    --color-accent-dark: #b8862f;
    --color-dark: #2a1810;            /* tiefes Schokoladenbraun */
    --color-dark-2: #1c0f08;
    --color-bg: #faf5ee;              /* sanftes Creme / Kaffee mit Milch */
    --color-surface: #ffffff;
    --color-text: #2a1810;
    --color-muted: #8a7a6b;
    --color-border: #ece0d1;
    --color-border-strong: #d4bfa7;
    --color-danger: #c0392b;          /* warmes Paprikarot */
    --color-star: #e4a11b;            /* Safran-Gelb */
    --shadow-sm: 0 2px 6px rgba(42, 24, 16, 0.06);
    --shadow-md: 0 10px 30px rgba(42, 24, 16, 0.10);
    --shadow-lg: 0 24px 60px rgba(42, 24, 16, 0.22);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --transition: 200ms cubic-bezier(.2,.8,.2,1);
    --font-display: "Poppins", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { height: auto; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-display);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Body bleibt Scroll-Container, damit position: sticky im Header greift */
}

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

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

.container { width: min(1320px, 100% - 2rem); margin-inline: auto; }

/* ============================== Top-Bar ================================= */
/* Header-Stack: Top-Bar (Sterne/Share/Sprache) + Site-Header (Logo/Warenkorb)
   bleiben gemeinsam beim Scrollen oben - position:sticky auf dem Wrapper.
   z-index hoch genug, dass Modale/Dropdowns nichts ueberlagert. */
.header-stack {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Schatten erst wenn die Seite gescrollt wurde - vermeidet "schwebenden"
       Eindruck im Initialzustand. JS toggelt is-scrolled-Klasse. */
}
.header-stack.is-scrolled {
    box-shadow: 0 4px 18px -6px rgba(42, 24, 16, .22);
}

.top-bar {
    background: var(--color-dark);
    color: #cfd9c6;
    font-size: .82rem;
}
.top-bar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .45rem 0;
    flex-wrap: nowrap;
}
.top-bar a { color: #e7efe1; }
.top-bar a:hover { color: #fff; }
.top-bar__left, .top-bar__right { display: flex; gap: 1.25rem; align-items: center; }
.top-bar__left span, .top-bar__right > span { display: inline-flex; gap: .4rem; align-items: center; }

/* ---- Willkommens-Marquee (scrollt linksbuendig nach rechts, Loop) ----
   Zwei identische Text-Kopien nebeneinander; das Track-Element wird von
   translateX(-50%) -> 0 animiert. Dadurch: der Text fliesst nach rechts,
   und wenn die erste Kopie am rechten Rand ankommt, erscheint nahtlos die
   zweite Kopie von links - klassischer lueckenloser Ticker-Effekt. */
.top-bar__marquee {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    position: relative;
    height: 1.6em;
    padding-right: 1rem;
    /* Am rechten Rand weich ausblenden, damit der Text nicht abrupt am
       Sprachauswahlfeld abgeschnitten wirkt */
    mask-image: linear-gradient(90deg, #000 0%, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 85%, transparent 100%);
}
.top-bar__marquee-track {
    display: flex;
    width: max-content;            /* Track muss breiter als der Container sein */
    white-space: nowrap;
    animation: welcomeFlow 22s linear infinite;
    animation-play-state: running; /* nicht durch prefers-reduced-motion stoppen */
    will-change: transform;
}
.top-bar__marquee-text {
    flex: 0 0 auto;
    padding-right: 4em;   /* Abstand zur naechsten Textkopie */
}
@keyframes welcomeFlow {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* "Letzte Bestellung"-Pille in der Top-Bar */
.top-bar__last-order[hidden] { display: none; }
.top-bar__last-order {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .7rem;
    background: linear-gradient(180deg, rgba(212,162,76,.28), rgba(212,162,76,.08));
    color: #fff;
    border: 1px solid rgba(212, 162, 76, .4);
    border-radius: 999px;
    font: 700 .74rem var(--font-display);
    letter-spacing: .03em;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.top-bar__last-order:hover {
    background: linear-gradient(180deg, rgba(212,162,76,.55), rgba(212,162,76,.25));
    border-color: var(--color-accent);
    transform: translateY(-1px);
}
.top-bar__last-order svg { color: var(--color-accent); flex-shrink: 0; }
.top-bar__last-order strong {
    background: #fff;
    color: var(--color-primary-dark);
    padding: 1px 7px;
    border-radius: 999px;
    letter-spacing: .02em;
    font-weight: 800;
}

/* =========================== Bewertungen-Button + Modal ================ */
/* Sterne-Badge in der Top-Bar links neben dem Teilen-Button. Compact
   pill mit Sternen + "4.6 (127)"-Text. Klick oeffnet das Modal. */
.top-bar__rating {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .7rem;
    background: linear-gradient(180deg, rgba(212,162,76,.22), rgba(212,162,76,.06));
    color: #fff;
    border: 1px solid rgba(212, 162, 76, .35);
    border-radius: 999px;
    cursor: pointer;
    font: 700 .78rem/1 var(--font-display);
    letter-spacing: .05em;
    transition: background var(--transition), border-color var(--transition),
                box-shadow var(--transition), transform var(--transition);
}
.top-bar__rating:hover {
    background: linear-gradient(180deg, rgba(212,162,76,.45), rgba(212,162,76,.2));
    border-color: var(--color-accent, #d4a24c);
    box-shadow: 0 4px 14px -4px rgba(212, 162, 76, .55);
    transform: translateY(-1px);
}
.top-bar__rating-stars {
    display: inline-flex; gap: 1px;
    color: var(--color-accent, #d4a24c);
}
.top-bar__rating-label { white-space: nowrap; }

/* Modal-Overlay */
.bewertungen-modal {
    position: fixed; inset: 0;
    z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.bewertungen-modal[hidden] { display: none; }
.bewertungen-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 12, 6, .55);
    backdrop-filter: blur(2px);
}
.bewertungen-modal__dialog {
    position: relative;
    background: #fffaf2;
    border-radius: 18px;
    box-shadow: 0 24px 64px -12px rgba(0,0,0,.45);
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.4rem 1.6rem 1.8rem;
}
.bewertungen-modal__close {
    position: absolute; top: .6rem; right: .9rem;
    background: transparent; border: none;
    font-size: 1.6rem; line-height: 1;
    color: #5a3c14; cursor: pointer;
    padding: .25rem .5rem;
}
.bewertungen-modal__close:hover { color: #8b4513; }
.bewertungen-modal__title {
    margin: 0 0 1.1rem;
    font: 700 1.4rem/1.2 var(--font-display);
    color: var(--color-primary, #8b4513);
}
.bewertungen-modal__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: center;
    padding: .6rem .8rem 1.1rem;
    border-bottom: 1px dashed #e0c8a0;
    margin-bottom: 1.2rem;
}
@media (min-width: 560px) {
    .bewertungen-modal__head {
        grid-template-columns: minmax(140px, auto) 1fr;
        gap: 1.5rem;
    }
    .bewertungen-modal__avg { align-items: flex-start; }
}
.bewertungen-modal__avg {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.bewertungen-modal__stars {
    color: var(--color-accent, #d4a24c);
    display: inline-flex; gap: 2px;
}
.bewertungen-modal__avg-text {
    display: flex; flex-direction: column; align-items: center;
    color: var(--color-primary, #8b4513);
}
.bewertungen-modal__avg-text strong { font-size: 1.6rem; line-height: 1; }
.bewertungen-modal__avg-of {
    font-size: .85rem; opacity: .7;
}
.bewertungen-modal__count {
    font-size: .82rem;
    color: #6a4826; opacity: .85;
    margin-top: .15rem;
}

.bewertungen-modal__body {
    display: grid; gap: 1.6rem;
}
@media (min-width: 720px) {
    .bewertungen-modal__body { grid-template-columns: 1fr 1fr; }
}
.bewertungen-modal__form-section h4,
.bewertungen-modal__list-section h4 {
    margin: 0 0 .7rem;
    font: 700 1rem/1.2 var(--font-display);
    color: var(--color-primary, #8b4513);
    letter-spacing: .03em;
}
.bewertungen-form__row { margin-bottom: .85rem; }
.bewertungen-form__label {
    display: block; margin-bottom: .25rem;
    font: 600 .78rem/1 var(--font-body);
    text-transform: uppercase; letter-spacing: .08em;
    color: #6a4826;
}
.bewertungen-form__label .req { color: #c0392b; }
.bewertungen-form__input,
.bewertungen-form__textarea {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid #e0cdab;
    border-radius: 8px;
    background: #fff;
    font: 400 .95rem/1.3 var(--font-body);
    color: #333;
    transition: border-color .15s, box-shadow .15s;
}
.bewertungen-form__input:focus,
.bewertungen-form__textarea:focus {
    outline: none;
    border-color: var(--color-accent, #d4a24c);
    box-shadow: 0 0 0 3px rgba(212,162,76,.18);
}
.bewertungen-form__textarea { resize: vertical; min-height: 90px; }
.bewertungen-form__rating {
    display: inline-flex; gap: 4px;
}
.bewertungen-form__star {
    background: transparent; border: none;
    color: #d8c6a0; cursor: pointer;
    padding: 2px;
    transition: color .12s, transform .12s;
}
.bewertungen-form__star:hover { transform: scale(1.08); }
.bewertungen-form__star.is-on { color: var(--color-accent, #d4a24c); }
.bewertungen-form__star.is-on svg { fill: currentColor; }

/* Rotes Pulse-Highlight wenn der Kunde absenden will, ohne Sterne zu waehlen */
.bewertungen-form__rating.is-error {
    animation: bewertung-rating-pulse 1.6s ease-in-out;
    border-radius: 8px;
}
@keyframes bewertung-rating-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
    20%, 60% { box-shadow: 0 0 0 4px rgba(192, 57, 43, .35); }
}
.bewertungen-form__error {
    margin: .75rem 0 0; padding: .55rem .8rem;
    border-radius: 8px; background: #fde2dc; color: #7a1f10;
    font-size: .85rem;
}
.bewertungen-form__success {
    margin: .75rem 0 0; padding: .55rem .8rem;
    border-radius: 8px; background: #dff5e1; color: #234d28;
    font-size: .9rem; font-weight: 600;
}
.bewertungen-form__actions { margin-top: 1rem; }

.bewertungen-list {
    list-style: none; margin: 0; padding: 0 .25rem 0 0;
    /* Liste fuellt die volle Hoehe der List-Section und scrollt
       intern bis ganz nach unten - sauberes thin-scroll-Design. */
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(70vh, 720px);
    overflow-y: auto;
    display: flex; flex-direction: column; gap: .7rem;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent, #d4a24c) transparent;
}
.bewertungen-list::-webkit-scrollbar { width: 8px; }
.bewertungen-list::-webkit-scrollbar-track { background: transparent; }
.bewertungen-list::-webkit-scrollbar-thumb {
    background: var(--color-accent, #d4a24c);
    border-radius: 4px;
}

/* List-Section als Flex-Spalte, damit die <ul> das verbleibende
   Restspielraum unter Header (Titel+Sort) und Filter-Chips fuellt. */
.bewertungen-modal__list-section {
    display: flex; flex-direction: column; min-height: 0;
}
.bewertungen-list__item {
    background: #fff;
    border: 1px solid #f0deb8;
    border-radius: 10px;
    padding: .7rem .85rem;
}
.bewertungen-list__head {
    display: flex; justify-content: space-between;
    font-size: .85rem;
}
.bewertungen-list__name { font-weight: 700; color: #5a3c14; }
.bewertungen-list__date { color: #98815f; font-size: .8rem; }
.bewertungen-list__stars {
    color: var(--color-accent, #d4a24c);
    display: inline-flex; gap: 1px; margin: .25rem 0 .35rem;
}
.bewertungen-list__msg {
    margin: 0; font-size: .9rem; line-height: 1.45;
    color: #4a3a26;
    white-space: pre-wrap;
}
.bewertungen-modal__empty {
    color: #8a7556; font-style: italic; font-size: .9rem; margin: 0;
}

/* ---- Sterne-Verteilung im Modal-Kopf ---- */
.bewertungen-modal__distribution {
    display: flex; flex-direction: column; gap: .25rem;
    width: 100%;
}
.bewertungen-distribution__row {
    display: grid;
    grid-template-columns: 28px 1fr 32px;
    align-items: center;
    gap: .5rem;
    padding: .15rem .25rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s;
}
.bewertungen-distribution__row:hover { background: rgba(212,162,76,.12); }
.bewertungen-distribution__label {
    font: 700 .8rem/1 var(--font-display);
    color: var(--color-primary, #8b4513);
    text-align: right;
}
.bewertungen-distribution__bar {
    height: 9px;
    border-radius: 999px;
    background: #f1e4ce;
    position: relative;
    overflow: hidden;
}
.bewertungen-distribution__bar::after {
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: var(--p, 0%);
    background: linear-gradient(90deg, var(--color-accent, #d4a24c), #c2832e);
    border-radius: 999px;
    transition: width .25s ease;
}
.bewertungen-distribution__pct {
    font: 600 .78rem/1 var(--font-body);
    color: #6a4826;
    text-align: right;
}

/* ---- Liste: Header (Titel + Sort), Filter-Chips, klickbare Items ---- */
.bewertungen-modal__list-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .55rem;
}
.bewertungen-modal__list-header h4 { margin: 0; }
.bewertungen-list__sort {
    padding: .35rem .5rem;
    border: 1px solid #e0cdab;
    border-radius: 8px;
    background: #fff;
    color: #5a3c14;
    font: 500 .8rem/1 var(--font-body);
    cursor: pointer;
}
.bewertungen-list__filters {
    display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem;
}
.bewertungen-list__chip {
    border: 1px solid #e0cdab;
    background: #fff;
    color: #6a4826;
    padding: .3rem .65rem;
    border-radius: 999px;
    font: 600 .78rem/1 var(--font-body);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .3rem;
    transition: background .12s, color .12s, border-color .12s;
}
.bewertungen-list__chip:hover {
    background: rgba(212, 162, 76, .12);
    border-color: var(--color-accent, #d4a24c);
}
.bewertungen-list__chip.is-active {
    background: var(--color-primary, #8b4513);
    color: #fff;
    border-color: var(--color-primary, #8b4513);
}
.bewertungen-list__chip-count { opacity: .75; font-weight: 500; }

/* Items sind reine Leseansicht - kein Pointer, kein Hover-Lift, kein Klick. */
.bewertungen-list__item {
    cursor: default;
    position: relative;
}

/* ---- Spotlight-View (einzelne Bewertung gross) ---- */
.bewertungen-spotlight {
    margin-top: .5rem;
    background: #fffaf2;
    border: 1px solid #f0deb8;
    border-radius: 12px;
    padding: 1.2rem 1.3rem;
}
.bewertungen-spotlight__back {
    background: transparent;
    border: none;
    color: var(--color-primary, #8b4513);
    font: 600 .85rem/1 var(--font-body);
    cursor: pointer;
    padding: .25rem .5rem .5rem 0;
    margin-bottom: .8rem;
    display: inline-flex; align-items: center; gap: .25rem;
}
.bewertungen-spotlight__back:hover { color: var(--color-accent, #d4a24c); }
.bewertungen-spotlight__item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: default !important;
    box-shadow: none !important;
}
.bewertungen-spotlight__item .bewertungen-list__head {
    font-size: 1rem;
}
.bewertungen-spotlight__item .bewertungen-list__name { font-size: 1.15rem; }
.bewertungen-spotlight__item .bewertungen-list__date { font-size: .9rem; }
.bewertungen-spotlight__item .bewertungen-list__stars svg { width: 22px; height: 22px; }
.bewertungen-spotlight__item .bewertungen-list__msg {
    font-size: 1.05rem; line-height: 1.55;
    margin-top: .6rem;
}

/* ---- Verifizierter-Kaeufer-Badge im Listen-Eintrag ---- */
.bewertungen-list__verified {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: 1px 7px;
    margin-left: .35rem;
    background: #e0f0e3;
    color: #2e5e45;
    border-radius: 99px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.bewertungen-list__verified svg { color: #2e5e45; }

/* ---- Foto-Thumbnails in der Liste ---- */
.bewertungen-list__photos {
    display: flex; flex-wrap: wrap; gap: .35rem;
    margin: .4rem 0 .25rem;
}
.bewertungen-list__photo {
    display: block;
    width: 56px; height: 56px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e6d6b0;
    transition: transform .12s, box-shadow .12s;
}
.bewertungen-list__photo:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 10px -2px rgba(212,162,76,.45);
}
.bewertungen-list__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* In der Spotlight-Ansicht groessere Fotos */
.bewertungen-spotlight__item .bewertungen-list__photo {
    width: 96px; height: 96px;
}

/* ---- Inhaberantwort, eingerueckt ---- */
.bewertungen-list__reply {
    margin: .55rem 0 .25rem 1rem;
    padding: .6rem .75rem;
    background: linear-gradient(180deg, #fbf1d9, #f4e1b4);
    border-left: 3px solid var(--color-primary, #8b4513);
    border-radius: 6px;
    font-size: .87rem;
    color: #4a3a26;
}
.bewertungen-list__reply-head {
    display: flex; justify-content: space-between; gap: .5rem;
    font-size: .82rem;
    margin-bottom: .25rem;
}
.bewertungen-list__reply-head strong { color: var(--color-primary, #8b4513); }
.bewertungen-list__reply-date { color: #98815f; }
.bewertungen-list__reply-text {
    margin: 0; line-height: 1.45; white-space: pre-wrap;
}

/* ---- Footer mit Helpful-Button ---- */
.bewertungen-list__footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .55rem;
    padding-top: .45rem;
    border-top: 1px dashed #f0deb8;
}
.bewertungen-list__helpful {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .65rem;
    border: 1px solid #e0cdab;
    border-radius: 999px;
    background: #fff;
    color: #6a4826;
    font: 600 .78rem/1 var(--font-body);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.bewertungen-list__helpful:hover {
    background: rgba(212, 162, 76, .12);
    border-color: var(--color-accent, #d4a24c);
}
.bewertungen-list__helpful.is-voted {
    background: var(--color-primary, #8b4513);
    color: #fff;
    border-color: var(--color-primary, #8b4513);
    cursor: default;
}
.bewertungen-list__helpful-count {
    font-weight: 700;
    background: rgba(0,0,0,.06);
    padding: 1px 6px;
    border-radius: 99px;
    min-width: 20px; text-align: center;
}
.bewertungen-list__helpful.is-voted .bewertungen-list__helpful-count {
    background: rgba(255,255,255,.25);
}

/* Footer-Pfeil rueckt jetzt in den Footer */
.bewertungen-list__footer .bewertungen-list__more-hint {
    position: static;
    transform: none;
}

/* ---- Honeypot: visuell + a11y unsichtbar ---- */
.bewertungen-form__honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---- Moderner Foto-Picker (eine Datei) ----
   Native <input type="file"> visuell ausgeblendet, sichtbarer Button
   uebernimmt den Klick. Dateiname wird daneben angezeigt, "x" entfernt. */
.bewertungen-form__photo-picker {
    display: flex; align-items: center; gap: .55rem;
    padding: .35rem .45rem .35rem .35rem;
    background: #fffaf2;
    border: 1px solid #e6d6b0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.bewertungen-form__photo-picker:hover {
    border-color: var(--color-accent, #d4a24c);
    box-shadow: 0 4px 14px -6px rgba(212,162,76,.45);
    background: #fff5e1;
}
.bewertungen-form__photo-picker.has-file {
    border-color: var(--color-accent, #d4a24c);
    background: #fff5e1;
}
.bewertungen-form__photo-real {
    /* Native Input visuell und a11y-mit Tab-Reihenfolge versteckt -
       Klick passiert ueber das umschliessende <label>. */
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    opacity: 0 !important;
    overflow: hidden;
    pointer-events: none;
}
.bewertungen-form__photo-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .85rem;
    background: linear-gradient(180deg, var(--color-primary, #8b4513), #6e3610);
    color: #fff;
    border-radius: 8px;
    font: 700 .8rem var(--font-display);
    letter-spacing: .04em;
    flex-shrink: 0;
    transition: filter .12s, transform .12s;
}
.bewertungen-form__photo-picker:hover .bewertungen-form__photo-btn {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.bewertungen-form__photo-btn svg { color: var(--color-accent, #d4a24c); }
.bewertungen-form__photo-name {
    flex: 1 1 auto;
    color: #6a4826;
    font-size: .85rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.bewertungen-form__photo-picker.has-file .bewertungen-form__photo-name {
    color: #5a3c14; font-weight: 600;
}
.bewertungen-form__photo-clear {
    background: rgba(122, 31, 16, .12);
    color: #7a1f10;
    border: none;
    width: 24px; height: 24px;
    border-radius: 99px;
    font-size: 1.1rem; line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s;
}
.bewertungen-form__photo-clear:hover { background: rgba(122, 31, 16, .25); }

.bewertungen-form__hint {
    display: block; margin-top: .25rem;
    font-size: .75rem; color: #98815f;
}

/* ---- SEO-Seite /Bewertungen ---- */
.bewertungen-page {
    padding: 2rem 1rem 3rem;
    max-width: 900px;
    margin: 0 auto;
}
.bewertungen-page__header {
    text-align: center; margin-bottom: 2rem;
}
.bewertungen-page__header h1 {
    font: 700 2rem/1.2 var(--font-display);
    color: var(--color-primary, #8b4513);
    margin: 0 0 .8rem;
}
.bewertungen-page__summary {
    display: inline-flex; flex-direction: column; align-items: center; gap: .35rem;
    padding: 1rem 1.6rem;
    background: #fffaf2;
    border-radius: 14px;
    border: 1px solid #f0deb8;
}
.bewertungen-page__avg {
    display: inline-flex; align-items: center; gap: .5rem;
}
.bewertungen-page__avg .bewertungen-modal__stars { color: var(--color-accent, #d4a24c); }
.bewertungen-page__avg strong { font-size: 1.7rem; color: var(--color-primary, #8b4513); }
.bewertungen-page__count { color: #6a4826; font-weight: 600; }

.bewertungen-list--page {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .8rem;
}

.bewertungen-page__pager {
    display: flex; justify-content: center; align-items: center;
    gap: 1rem; margin-top: 2rem;
}
.bewertungen-page__pager-btn {
    padding: .55rem 1rem;
    background: var(--color-primary, #8b4513);
    color: #fff; border-radius: 8px;
    text-decoration: none; font-weight: 600;
    transition: background .15s;
}
.bewertungen-page__pager-btn:hover { background: #6e3610; }
.bewertungen-page__pager-pos { color: #6a4826; font-weight: 600; }
.bewertungen-modal__loading {
    display: flex; gap: .35rem; justify-content: center; padding: 2rem 0;
}
.bewertungen-modal__loading .loading-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--color-accent, #d4a24c);
    animation: bewertung-bounce 1.2s infinite ease-in-out;
}
.bewertungen-modal__loading .loading-dot:nth-child(2) { animation-delay: .15s; }
.bewertungen-modal__loading .loading-dot:nth-child(3) { animation-delay: .3s; }
@keyframes bewertung-bounce {
    0%, 100% { opacity: .3; transform: translateY(0); }
    50%      { opacity: 1;  transform: translateY(-4px); }
}
.bewertungen-modal__error {
    text-align: center; color: #a02414; padding: 1.2rem;
}
body.bewertungen-modal-open { overflow: hidden; }

/* =========================== Teilen-Button (Web Share API) ============ */
/* Sitzt links neben dem Sprachwechsler in der Top-Bar. Kompakte Pille
   im selben Gold-/Akzent-Stil wie .lang-switch__toggle - so wirkt's wie
   eine zusammengehoerige Gruppe. Auf iOS/Android oeffnet der Klick das
   native Teilen-Sheet, auf Desktops kommt ein Toast "Link kopiert". */
.top-bar__share {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    background: linear-gradient(180deg, rgba(212,162,76,.22), rgba(212,162,76,.06));
    color: #fff;
    border: 1px solid rgba(212, 162, 76, .35);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                box-shadow var(--transition), transform var(--transition);
}
.top-bar__share:hover {
    background: linear-gradient(180deg, rgba(212,162,76,.45), rgba(212,162,76,.2));
    border-color: var(--color-accent);
    box-shadow: 0 4px 14px -4px rgba(212, 162, 76, .55);
    transform: translateY(-1px);
}
.top-bar__share:active { transform: translateY(0); }
.top-bar__share svg { display: block; }

/* Toast oben mittig fuer den Clipboard-Fallback. Wird per JS
   (.share-toast--show) ein-/ausgeblendet. */
.share-toast {
    position: fixed; top: 1.25rem; left: 50%;
    transform: translate(-50%, -120%);
    background: var(--color-primary, #8b4513);
    color: #fff;
    padding: .55rem 1rem;
    border-radius: 999px;
    font: 600 .85rem/1.2 var(--font-body, system-ui, sans-serif);
    letter-spacing: .01em;
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .25s ease;
    z-index: 9999;
}
.share-toast--show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.share-toast--err {
    background: #a02414;
}

/* =========================== Language switcher ========================== */
.lang-switch { position: relative; }

.lang-switch__toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem .75rem .4rem .85rem;
    background: linear-gradient(180deg, rgba(212,162,76,.22), rgba(212,162,76,.06));
    color: #fff;
    border: 1px solid rgba(212, 162, 76, .35);
    border-radius: 999px;
    font: 800 .8rem/1 var(--font-display);
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                box-shadow var(--transition), transform var(--transition);
}
.lang-switch__toggle:hover {
    background: linear-gradient(180deg, rgba(212,162,76,.45), rgba(212,162,76,.2));
    border-color: var(--color-accent);
    box-shadow: 0 4px 14px -4px rgba(212, 162, 76, .55);
    transform: translateY(-1px);
}
.lang-switch__toggle svg {
    transition: transform var(--transition);
    opacity: .85;
}
.lang-switch__toggle[aria-expanded="true"] {
    background: linear-gradient(180deg, rgba(212,162,76,.55), rgba(212,162,76,.3));
    border-color: var(--color-accent);
    box-shadow: 0 6px 18px -5px rgba(212, 162, 76, .65);
}
.lang-switch__toggle[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; }

/* Im Toggle: kein Avatar-Kreis mehr, nur klarer Code-Text */
.lang-switch__toggle .lang-switch__avatar {
    display: inline-block;
    padding: 0;
    background: none;
    color: #fff;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    box-shadow: none;
    width: auto; height: auto;
}
.lang-switch__code { display: none; } /* nicht mehr benoetigt */

@keyframes langMenuIn {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lang-switch__menu {
    list-style: none; margin: 0; padding: .4rem;
    position: absolute; right: 0; top: calc(100% + 10px);
    min-width: 220px;
    background: #fff;
    color: var(--color-text);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    animation: langMenuIn 180ms cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}

/* Kleiner Pfeil-Indikator oben rechts */
.lang-switch__menu::before {
    content: "";
    position: absolute; top: -6px; right: 18px;
    width: 12px; height: 12px;
    background: #fff;
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    transform: rotate(45deg);
}

.lang-switch__menu li { list-style: none; position: relative; }
.lang-switch__menu li + li { margin-top: 2px; }

.lang-switch__menu a {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: .7rem;
    padding: .55rem .75rem;
    border-radius: 10px;
    color: var(--color-text);
    font-size: .9rem; font-weight: 500;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), padding var(--transition);
    position: relative;
}
.lang-switch__menu a:hover {
    background: var(--color-bg);
    text-decoration: none;
    padding-left: 1rem;
}

/* Im Dropdown: runder Avatar-Kreis mit Code */
.lang-switch__menu .lang-switch__avatar {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-primary-dark);
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
    font: 800 .7rem var(--font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lang-switch__name {
    font-weight: 600;
}

.lang-switch__item--active {
    background: linear-gradient(90deg,
        rgba(139, 69, 19, .10) 0%,
        rgba(139, 69, 19, .02) 100%);
    color: var(--color-primary-dark) !important;
    font-weight: 700 !important;
}
.lang-switch__item--active::before {
    content: "";
    position: absolute;
    left: 2px; top: 8px; bottom: 8px;
    width: 3px;
    background: var(--color-primary);
    border-radius: 999px;
}
.lang-switch__item--active .lang-switch__avatar {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px -4px rgba(139, 69, 19, .55) !important;
}
.lang-switch__item--active::after {
    content: "✓";
    position: absolute;
    right: 14px;
    color: var(--color-primary);
    font-weight: 900;
    font-size: 1rem;
}

/* =============================== Header ================================== */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    /* sticky uebernimmt jetzt der .header-stack-Wrapper, der Top-Bar
       und Site-Header gemeinsam fixiert. */
}
.site-header.site-header--scrolled {
    box-shadow: 0 4px 18px -6px rgba(42, 24, 16, .18);
}
.site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 0;
}
.site-header__brand { display: inline-flex; align-items: center; gap: .8rem; color: inherit; }
.site-header__brand:hover { text-decoration: none; }
.site-header__logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    object-position: center;
    background: transparent;
    display: block;
    flex-shrink: 0;
}
.site-header__logo-fallback {
    width: 46px; height: 46px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff; border-radius: 14px;
    display: grid; place-items: center;
    font-weight: 700; letter-spacing: .5px;
    box-shadow: 0 6px 16px -6px rgba(139, 69, 19, .85);
}
/* Sponsor-Logo links VOR dem Hauptlogo, gleiche Hoehe */
.site-header__sponsor-logo {
    height: 46px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    object-position: center;
    background: transparent;
    display: block;
    flex-shrink: 0;
    padding-right: .6rem;
    margin-right: .2rem;
    border-right: 1px solid var(--color-border, #ece0d1);
}
@media (max-width: 520px) {
    .site-header__sponsor-logo {
        height: 38px;
        max-width: 78px;
        padding-right: .4rem;
    }
}

.site-header__titles { display: flex; flex-direction: column; line-height: 1.1; }
.site-header__titles strong { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: var(--color-dark); }
.site-header__titles small { color: var(--color-muted); font-size: .78rem; font-weight: 400; }

.site-search {
    display: flex; align-items: center;
    background: #fff;
    border: 2px solid var(--color-primary);
    border-radius: 999px;
    padding: 3px 3px 3px 1.25rem;
    max-width: 640px; width: 100%;
    margin: 0 auto 1.25rem;
    transition: box-shadow var(--transition);
}
/* Inline-Suchfeld (unter Switch): zentriert, volle Breite bis 640px */
.site-search--inline {
    margin: 0 auto 1.25rem;
}
.site-search:focus-within { box-shadow: 0 0 0 4px rgba(139, 69, 19, .2); }
.site-search input {
    border: none; background: transparent;
    padding: .6rem .5rem; flex: 1;
    font: 400 .95rem var(--font-display);
    outline: none; color: var(--color-text);
}
.site-search input::placeholder { color: var(--color-muted); }
.site-search button {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .65rem 1.4rem;
    background: var(--color-primary);
    color: #fff; border: none;
    border-radius: 999px; cursor: pointer;
    font: 600 .88rem var(--font-display);
    text-transform: uppercase; letter-spacing: .04em;
    transition: background var(--transition);
}
.site-search button:hover { background: var(--color-primary-dark); }

.site-header__nav { display: flex; align-items: center; gap: 1rem; }
.site-header__nav a { color: var(--color-dark); font-weight: 500; font-size: .93rem; }
.site-header__nav a:hover { color: var(--color-primary); text-decoration: none; }
.site-header__user { color: var(--color-muted); font-weight: 500; font-size: .9rem; }

/* ============================== Cart menu =============================== */
.cart-menu { position: relative; }
.cart-menu__toggle {
    position: relative;
    background: transparent;
    color: var(--color-dark);
    border: 1px solid transparent;
    padding: .35rem .7rem .25rem;
    min-width: 58px;
    border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    cursor: pointer;
    transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.cart-menu__toggle:hover {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-border);
    transform: translateY(-1px);
}
@keyframes cartPulse {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(139,69,19,0); }
    40% { transform: translateY(-3px); box-shadow: 0 10px 20px -8px rgba(139,69,19,.55); }
}
.cart-menu__toggle--pulse {
    animation: cartPulse 600ms ease-out;
    background: var(--color-bg);
    border-color: var(--color-accent);
    color: var(--color-primary-dark);
}
.cart-menu__badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--color-accent); color: var(--color-dark);
    border-radius: 999px; font-size: .66rem; font-weight: 800;
    padding: 2px 6px; min-width: 20px; text-align: center;
    box-shadow: 0 3px 8px -2px rgba(212, 162, 76, .7);
    border: 2px solid #fff;
    line-height: 1;
}
.cart-menu__total {
    font: 700 .7rem var(--font-display);
    letter-spacing: .02em;
    color: var(--color-primary-dark);
    line-height: 1;
    margin-top: 1px;
    white-space: nowrap;
}
.cart-menu__dropdown {
    position: absolute; right: 0; top: calc(100% + 12px);
    width: min(380px, 92vw);
    max-height: calc(100vh - 120px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 1.1rem;
    z-index: 40;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cart-menu__dropdown[hidden] { display: none; }
.cart-menu__loading { color: var(--color-muted); font-size: .9rem; text-align: center; padding: 1rem 0; }

/* Cart-Preview: flex-column, damit der Footer (mit Button) immer unten bleibt */
.cart-preview {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;       /* erlaubt Shrinken innerhalb des Flex-Parents */
    /* overflow: hidden bewusst NICHT hier - Button sonst abgeschnitten.
       Das aussenliegende Dropdown hat bereits overflow: hidden. */
}
.cart-preview__header {
    flex: 0 0 auto;
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: .75rem; padding-bottom: .6rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-muted); font-size: .85rem;
}
.cart-preview__header strong { color: var(--color-dark); font-size: 1rem; font-weight: 700; }
.cart-preview__empty {
    color: var(--color-muted); text-align: center;
    padding: 1.5rem 1rem;
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.cart-preview__empty svg { color: var(--color-border-strong); }
.cart-preview__empty p { margin: 0; font-size: .95rem; font-weight: 500; }
.cart-preview__empty .btn { margin-top: .25rem; }
.cart-preview__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .55rem;
    flex: 1 1 auto;      /* nimmt verfuegbaren Platz */
    min-height: 0;       /* erlaubt shrinken, sonst overflow doesnt work in flex */
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cart-preview__item {
    display: grid; grid-template-columns: 56px 1fr auto;
    gap: .75rem; align-items: center;
    padding: .55rem; border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.cart-preview__item:hover { background: var(--color-bg); }
.cart-preview__item img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
.cart-preview__info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.cart-preview__info strong { font-size: .92rem; font-weight: 600; color: var(--color-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-preview__info small { color: var(--color-muted); font-size: .78rem; }
.cart-preview__variants {
    color: var(--color-primary, #8b4513) !important;
    font-style: italic;
    font-size: .72rem !important;
    margin-top: 2px;
}
.cart-preview__sum { font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.cart-preview__footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--color-border);
    padding-top: .85rem;
    margin-top: .75rem;
    display: flex;
    flex-direction: row;          /* Button links, Summe rechts */
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: var(--color-surface);
    min-height: max-content;
}
.cart-preview__footer .btn {
    flex: 0 0 auto;
    min-width: 130px;
    max-width: 65%;
    white-space: nowrap;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.cart-preview__footer .btn--primary,
.cart-preview__footer a.btn--primary {
    color: #fff !important;   /* helle Schrift auf dem braunen Button, ueberschreibt Link-Default */
}
.cart-preview__footer .btn--primary:hover,
.cart-preview__footer a.btn--primary:hover {
    color: #fff !important;
}
.cart-preview__total {
    display: inline-flex;
    flex-direction: row;            /* Label + Betrag auf einer Zeile */
    align-items: baseline;
    justify-content: flex-end;
    gap: .45rem;                    /* kleiner Abstand zwischen Label und Betrag */
    white-space: nowrap;
}
.cart-preview__total span {
    font-size: .78rem;
    color: var(--color-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
}
.cart-preview__total strong {
    color: var(--color-primary);
    font-size: 1.2rem;
    font-weight: 800;
}

/* ============================= Buttons ================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 600 .88rem/1 var(--font-display);
    text-transform: uppercase; letter-spacing: .04em;
    cursor: pointer;
    transition: transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
    text-decoration: none;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primary {
    background: var(--color-primary); color: #fff;
    box-shadow: 0 10px 22px -12px rgba(139, 69, 19, .85);
}
.btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); text-decoration: none; color: #fff; }
.btn--accent {
    background: var(--color-accent); color: var(--color-dark);
    box-shadow: 0 10px 22px -12px rgba(212, 162, 76, .85);
}
.btn--accent:hover { background: var(--color-accent-dark); transform: translateY(-2px); text-decoration: none; color: #fff; }
.btn--ghost {
    background: transparent; border-color: var(--color-border-strong);
    color: var(--color-dark);
}
.btn--ghost:hover { background: var(--color-bg); border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.btn--lg { padding: .95rem 1.9rem; font-size: .95rem; }
.btn--sm { padding: .45rem 1rem; font-size: .75rem; }
.btn--full { width: 100%; }

.link-btn {
    background: transparent; border: none; color: var(--color-dark);
    font: 500 .93rem var(--font-display); cursor: pointer; padding: .25rem .5rem;
}
.link-btn:hover { color: var(--color-primary); }
.link { color: var(--color-primary); font-weight: 600; }

.icon-btn {
    background: transparent; border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    cursor: pointer; color: var(--color-muted);
    transition: var(--transition);
}
.icon-btn:hover { border-color: var(--color-danger); color: var(--color-danger); }

/* ============================== Hero ==================================== */
.hero {
    margin: 1.5rem 0 2.5rem;
    padding: 3.5rem 2.5rem;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at top right, rgba(212, 162, 76, .35), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(192, 57, 43, .28), transparent 60%),
        linear-gradient(125deg, #3d2317 0%, #8b4513 45%, #6b3410 100%);
    color: #fff;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='white' fill-opacity='0.06'><circle cx='80' cy='90' r='50'/><circle cx='520' cy='130' r='70'/><circle cx='460' cy='480' r='90'/><circle cx='120' cy='500' r='40'/></g></svg>");
    background-size: cover; background-position: center;
    pointer-events: none;
}
.hero__content { max-width: 640px; position: relative; z-index: 2; }

/* ---- Hero-Media (Video/Bild im natuerlichen Seitenverhaeltnis) ----
   Das Media-Element skaliert immer auf die volle Container-Breite; die Hoehe
   ergibt sich aus dem Seitenverhaeltnis der Datei - keine fixe aspect-ratio,
   kein Cropping, funktioniert auf jedem Screen (Mobile bis Wide-Desktop). */
.hero--has-media {
    padding: 0;
    background: var(--color-dark);
    overflow: hidden;
    position: relative;
    display: block;
}
.hero--has-media::after { display: none; }

.hero__media {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    /* kein object-fit: bei width:100% + height:auto behaelt das Element sein
       natuerliches Seitenverhaeltnis, skaliert fluessig mit Screen-Breite. */
}

/* Mit Slogans: Content absolut ueber dem Video, Overlay-Gradient fuer Lesbarkeit. */
.hero--has-media:not(.hero--empty) .hero__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.75rem 2rem 2rem;
    max-width: none;
}
.hero--has-media:not(.hero--empty) .hero__content > * { max-width: 640px; }

.hero__media-overlay {
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(42,24,16,.1) 0%, rgba(42,24,16,.78) 100%),
        linear-gradient(110deg, rgba(42,24,16,.5) 0%, rgba(42,24,16,.15) 55%, transparent 100%);
}
.hero--has-media .hero__content h1,
.hero--has-media .hero__content p {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

/* Mobile: Text kompakter, etwas weniger Innenabstand */
@media (max-width: 560px) {
    .hero--has-media:not(.hero--empty) .hero__content {
        padding: 1rem 1rem 1.2rem;
    }
    .hero--has-media h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
    .hero--has-media p { font-size: .95rem !important; }
}
.hero__eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(4px);
    padding: .35rem 1rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    margin-bottom: 1rem;
}
.hero h1 {
    margin: 0 0 .8rem; line-height: 1.1;
    font: 700 clamp(1.9rem, 3.4vw, 3rem) var(--font-serif);
    letter-spacing: -.02em;
}
.hero p { margin: 0; opacity: .92; font-size: 1.1rem; max-width: 560px; }
.hero__tag {
    display: inline-block; margin-top: 1.25rem;
    background: rgba(255, 255, 255, .22);
    border-radius: 999px; padding: .4rem 1rem; font-size: .85rem;
    backdrop-filter: blur(4px);
}

/* ====================== Section headings ================================= */
.section-head {
    text-align: center;
    margin: 2.5rem 0 1.75rem;
    scroll-margin-top: 100px;  /* fuer Anker-Scroll #katalog aus Kategorien-Chips */
}
.section-head__eyebrow {
    color: var(--color-accent-dark); font-weight: 700;
    text-transform: uppercase; letter-spacing: .15em;
    font-size: .78rem;
}
.section-head h2 {
    margin: .35rem 0 0;
    font: 700 clamp(1.5rem, 2.4vw, 2rem) var(--font-serif);
    color: var(--color-dark); letter-spacing: -.01em;
}
.section-head__rule {
    width: 56px; height: 3px; border-radius: 2px;
    background: var(--color-primary);
    margin: .8rem auto 0;
}

.search-info { margin: 1rem 0; color: var(--color-muted); }

/* ===================== Article grid & product cards ===================== */
.article-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 720px)  { .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1024px) { .article-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }

.card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex; flex-direction: column;
    height: 100%;
    min-height: 450px;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
}
.card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}
.card:hover .card__media img { transform: scale(1.08); }

.card__badge {
    position: absolute; top: 12px; left: 12px;
    padding: .25rem .75rem; border-radius: 999px;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.card__badge--sale { background: var(--color-accent); }
.card__badge--new  { background: var(--color-primary); }

/* Icon-Stack wie bei Galvatron: erscheint bei Hover rechts im Bild */
.card__quick {
    position: absolute;
    top: 50%; right: 12px;
    transform: translateY(-50%) translateX(12px);
    display: flex; flex-direction: column; gap: .5rem;
    opacity: 0;
    transition: opacity var(--transition), transform var(--transition);
    pointer-events: none;
}
.card:hover .card__quick {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}
.card__quick-btn {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-dark);
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.card__quick-btn:hover { background: var(--color-primary); color: #fff; transform: scale(1.08); }

.card__body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.card__meta { color: var(--color-muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.card__title {
    margin: 0;
    font: 600 1rem var(--font-display);
    line-height: 1.35;
    color: var(--color-dark);
    min-height: 2.7em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__rating { display: inline-flex; gap: 2px; color: var(--color-star); font-size: .85rem; }
.card__teaser {
    margin: 0;
    color: var(--color-muted); font-size: .85rem; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.4em;
}
/* Beilagen/Varianten-Namen (komma-getrennt) unter Artikeltext2 in der Kachel.
   Label "Möglicher Beilagen:" steht auf eigener Zeile, darunter die Liste. */
.card__variants {
    margin: .1rem 0 0;
    padding: .35rem .55rem;
    background: rgba(212, 162, 76, .08);
    border: 1px solid rgba(212, 162, 76, .25);
    border-radius: 8px;
    color: var(--color-primary, #8b4513);
    font-size: .78rem;
    line-height: 1.35;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    max-width: 100%;
}
.card__variants-label {
    color: var(--color-accent, #d4a24c);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .04em;
    white-space: nowrap;
}
.card__variants-list {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.card__footer { margin-top: auto; display: flex; flex-direction: column; gap: .75rem; padding-top: .5rem; }
.card__price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.card__price-current { font: 700 1.25rem var(--font-display); color: var(--color-primary); }
.card__price-old { font-size: .92rem; color: var(--color-muted); text-decoration: line-through; }
/* Im Preview-Modus (Countdown aktiv) wird hier ein langer Hinweistext
   gerendert ("Verkaufsstart am 28.04.2026"). Der muss umbrechen duerfen,
   wenn die Kachel schmal ist. */
.card__price--muted {
    color: var(--color-muted);
    font-style: italic;
    font-size: .92rem;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}
.card__unit { color: var(--color-muted); font-size: .82rem; }

.card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ----------------------------------------------------------------------
   Abteilungshinweis ("Erhältlich in der Abteilung „..."" / „X" var sadece)
   ----------------------------------------------------------------------
   Prominenter Pill-Badge in waermerem Rot-Braun-Gold-Verlauf - der Kunde
   soll sofort sehen, dass dieser Artikel nur in einer bestimmten Abteilung
   verfuegbar ist. Wird sowohl auf den Karten (.card__abteilung), in der
   Speisekarte (.menu-item__abteilung) als auch im Detail-Modal
   (.detail__abteilung) verwendet. Farbpalette zentral hier definiert. */
.card__abteilung,
.menu-item__abteilung,
.detail__abteilung {
    --abt-bg-from:   #ffe4d1;        /* helles Rot-Cream */
    --abt-bg-to:     #f3b88c;        /* sattes Terrakotta */
    --abt-border:    #c0392b;        /* kraeftiges Rot-Braun */
    --abt-text:      #7a1f10;        /* tiefes Rot-Braun */
    --abt-name-bg:   #ffffff;        /* Name-Pill weisser Grund */
    --abt-name-text: #b32d1c;        /* Name in kraeftigem Rot */
    --abt-icon:      #c0392b;        /* Icon im Rot-Ton */
    --abt-shadow:    0 2px 6px rgba(192, 57, 43, .25);
}
.card__abteilung {
    margin: .65rem 0 0;
    padding: .5rem .85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--abt-bg-from) 0%, var(--abt-bg-to) 100%);
    border: 1.5px solid var(--abt-border);
    box-shadow: var(--abt-shadow);
    color: var(--abt-text);
    font-size: .8rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .01em;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
}
.card__abteilung-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--abt-icon);
    flex-shrink: 0;
}
.card__abteilung-name {
    color: var(--abt-name-text);
    background: var(--abt-name-bg);
    padding: .08rem .45rem;
    border-radius: 5px;
    font-weight: 800;
    font-style: normal;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(122, 31, 16, .15);
}

/* Zweite Reihe ("in X kalmadı, lütfen Y bölümünden alın"): kraeftiger,
   Warnungs-Optik mit deutlich rot-betontem Hintergrund und Achtungs-Icon.
   Steht direkt unter dem ersten Badge - der Kunde liest erst "var sadece"
   und dann den konkreten Verweis. Wird in beiden Ansichten verwendet. */
.card__abteilung--hint,
.menu-item__abteilung--hint,
.detail__abteilung--hint {
    --abt-bg-from: #ffd9c2;
    --abt-bg-to:   #f08260;          /* sattere Warn-Terrakotta */
    --abt-border:  #a02414;          /* tiefes Warn-Rot */
    --abt-text:    #5e1308;
    --abt-icon:    #a02414;
    --abt-shadow:  0 2px 8px rgba(160, 36, 20, .35);
    margin-top: .35rem;              /* enger an die erste Reihe rangruecken */
}

/* ============================= Quantity =================================== */
.qty {
    display: inline-flex; align-items: center;
    background: #fff;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    overflow: hidden;
}
.qty__btn {
    border: none; background: transparent;
    width: 34px; height: 34px; cursor: pointer;
    font-size: 1.15rem; line-height: 1; color: var(--color-dark);
    transition: background var(--transition), color var(--transition);
}
.qty__btn:hover { background: var(--color-primary); color: #fff; }
.qty__input {
    border: none; background: transparent; outline: none;
    width: 42px; text-align: center; font-weight: 600;
    font-size: .95rem; color: var(--color-dark);
    -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--lg .qty__btn { width: 42px; height: 42px; font-size: 1.25rem; }
.qty--lg .qty__input { width: 54px; }
.qty--sm .qty__btn { width: 28px; height: 28px; font-size: 1rem; }
.qty--sm .qty__input { width: 36px; font-size: .82rem; }

/* =============================== Modal ==================================== */
.modal {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-items: center;
    animation: modalIn 200ms ease-out;
}
.modal[hidden] { display: none; }
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.modal__backdrop { position: absolute; inset: 0; background: rgba(37, 50, 55, .55); backdrop-filter: blur(6px); }
.modal__dialog {
    position: relative;
    width: min(1150px, calc(100% - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: dialogIn 280ms cubic-bezier(.2,.8,.2,1);
}
@keyframes dialogIn { from { transform: translateY(16px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__close {
    position: absolute; top: 12px; right: 16px;
    background: #fff; border: 1px solid var(--color-border);
    font-size: 1.4rem; line-height: 1; color: var(--color-dark);
    cursor: pointer; width: 36px; height: 36px;
    border-radius: 50%;
    transition: var(--transition);
    z-index: 1;
}
.modal__close:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); transform: rotate(90deg); }

.detail { display: grid; gap: 0; grid-template-columns: 1fr; padding: 1.25rem; }
@media (min-width: 720px) { .detail { grid-template-columns: 1.05fr 1fr; gap: 1.5rem; padding: 1.75rem; } }
.detail__media {
    position: relative;
    background: linear-gradient(160deg, #fdfaf3 0%, #f5ecd9 100%);
    aspect-ratio: 1/1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 1rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(139, 69, 19, 0.08);
}
.detail__media img {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: calc(var(--radius-lg) - 6px);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.15));
}
.detail__badge {
    position: absolute; top: 16px; left: 16px;
    background: var(--color-accent); color: #fff;
    border-radius: 999px; padding: .35rem 1rem;
    font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
}
.detail__body { padding: .5rem .5rem .25rem; display: flex; flex-direction: column; gap: .9rem; }
@media (min-width: 720px) { .detail__body { padding: .75rem .5rem .5rem; } }
.detail__sku { color: var(--color-muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.detail__title { margin: 0; font: 700 clamp(1.4rem, 2.6vw, 2rem) var(--font-serif); line-height: 1.2; color: var(--color-dark); letter-spacing: -.01em; }
.detail__rating { display: inline-flex; gap: 2px; color: var(--color-star); font-size: 1rem; align-items: center; }
.detail__rating small { color: var(--color-muted); margin-left: .5rem; font-size: .78rem; }
.detail__desc { margin: 0; color: #4a5560; line-height: 1.6; white-space: pre-line; font-size: .92rem; }
/* Beilagen/Varianten-Namen (komma-getrennt) in der Detailansicht - groesser
   und auffaelliger als in Kachel/Menu. Label "Mögliche Beilagen:" steht
   auf eigener Zeile, darunter die Liste. */
.detail__variants {
    margin: .25rem 0 .5rem;
    padding: .85rem 1rem;
    background: linear-gradient(135deg, rgba(212, 162, 76, .1) 0%, rgba(139, 69, 19, .06) 100%);
    border: 1px solid rgba(212, 162, 76, .35);
    border-left: 4px solid var(--color-accent, #d4a24c);
    border-radius: 10px;
    color: var(--color-dark, #2a1810);
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-width: 100%;
}
.detail__variants-label {
    color: var(--color-primary, #8b4513);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
    white-space: nowrap;
}
.detail__variants-list {
    color: var(--color-dark, #2a1810);
    word-break: break-word;
    font-weight: 500;
}
@media (max-width: 560px) {
    .detail__variants { padding: .7rem .85rem; font-size: .95rem; }
    .detail__variants-label { font-size: .88rem; }
}
.detail__price { display: flex; align-items: baseline; gap: .6rem; padding: .75rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.detail__price-current { font: 700 2rem var(--font-display); color: var(--color-primary); }
.detail__price-old { text-decoration: line-through; color: var(--color-muted); font-size: 1.05rem; }
.detail__price--muted {
    color: var(--color-muted);
    font-style: italic;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}
.detail__unit { color: var(--color-muted); font-size: .95rem; }
.detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .25rem; }
.detail__ean { color: var(--color-muted); font-size: .82rem; }

/* =========================== Pagination ================================== */
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 2.5rem 0; }
.pagination__item {
    min-width: 40px; height: 40px;
    padding: 0 .85rem;
    display: grid; place-items: center;
    border-radius: 10px;
    border: 1px solid var(--color-border-strong);
    background: #fff;
    color: var(--color-dark);
    font-weight: 600; font-size: .9rem;
}
.pagination__item:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.pagination__item--current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ================================ Cart =================================== */
.page-title {
    margin: 1.75rem 0 1.5rem;
    font: 700 clamp(1.5rem, 2.6vw, 2.2rem) var(--font-serif);
    color: var(--color-dark); letter-spacing: -.01em;
}

.cart { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: flex-start; }
@media (min-width: 960px) { .cart { grid-template-columns: 1.6fr 1fr; } }
.cart__items { display: flex; flex-direction: column; gap: .75rem; }

.cart-row {
    display: grid;
    grid-template-columns: 88px 1fr auto auto auto;
    gap: 1rem;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .9rem 1.1rem;
    transition: box-shadow var(--transition);
}
/* Varianten-Variante: eigener Block + Area-basiertes Grid, damit der
   Varianten-Container ueber die komplette Zeilenbreite stehen kann. */
.cart-row--variants {
    grid-template-columns: 88px 1fr auto auto auto;
    grid-template-areas:
        "img  info  unit  price  remove"
        "vars vars  vars  vars   vars";
    column-gap: 1rem;
    row-gap: .55rem;
    align-items: center;
}
.cart-row--variants .cart-row__img         { grid-area: img; }
.cart-row--variants .cart-row__info        { grid-area: info; }
.cart-row--variants .cart-row__variants    { grid-area: vars; }
.cart-row--variants .cart-row__unit-badge  { grid-area: unit; justify-self: center; }
.cart-row--variants .cart-row__price       { grid-area: price; }
.cart-row--variants .icon-btn              { grid-area: remove; }
.cart-row:hover { box-shadow: var(--shadow-sm); border-color: var(--color-border-strong); }
.cart-row__img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; background: var(--color-bg); }
.cart-row__info { min-width: 0; }
.cart-row__info strong { display: block; line-height: 1.3; color: var(--color-dark); font-weight: 600; }
.cart-row__info small { color: var(--color-muted); font-size: .78rem; }
.cart-row__price { text-align: right; white-space: nowrap; }
.cart-row__price span { font-weight: 700; font-size: 1.15rem; color: var(--color-primary); display: block; white-space: nowrap; }
.cart-row__price small { color: var(--color-muted); font-size: .78rem; white-space: nowrap; }

/* Unit-Badge bei Varianten-Artikeln (ersetzt die +/- Menge-Steuerung) */
.cart-row__unit-badge {
    display: inline-flex;
    align-items: center; justify-content: center;
    padding: .35rem .75rem;
    min-width: 52px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-weight: 700;
    color: var(--color-primary);
    font-size: .92rem;
}

/* ==== Varianten-Bereich (Beilagen) in Cart-Zeile ==== */
.cart-row__variants {
    margin-top: .7rem;
    padding: .7rem .8rem .6rem;
    background: linear-gradient(180deg, #fbf6ec 0%, #f5ecdc 100%);
    border: 1px dashed var(--color-accent, #d4a24c);
    border-radius: 12px;
}
.cart-row__variants-title {
    font: 700 .7rem 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary-dark, #5d2e0d);
    margin-bottom: .45rem;
}
.cart-row__variants-list {
    display: flex; flex-wrap: wrap;
    gap: .4rem;
}

/* Varianten gruppiert nach Artikelgruppe (Saucen, Extras, ...) */
.variant-group { margin-bottom: .55rem; }
.variant-group:last-child { margin-bottom: 0; }
.variant-group__header {
    display: inline-flex; align-items: center;
    gap: .4rem;
    margin-bottom: .3rem;
}
.variant-group__name {
    font: 600 .72rem 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-primary, #8b4513);
}
.variant-group__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(212, 162, 76, .22);
    color: var(--color-primary-dark, #5d2e0d);
    font: 700 .64rem 'Helvetica Neue', Arial, sans-serif;
}
.variant-group__list {
    display: flex; flex-wrap: wrap; gap: .4rem;
}
.variant-chip {
    display: inline-flex; align-items: center;
    gap: .4rem;
    padding: .35rem .75rem .35rem .55rem;
    background: #fff;
    border: 1.5px solid var(--color-border, #ece0d1);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-text, #2a1810);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .12s;
    user-select: none;
    line-height: 1.2;
}
.variant-chip:hover { border-color: var(--color-accent, #d4a24c); }
.variant-chip.is-selected {
    background: linear-gradient(135deg, var(--color-primary, #8b4513), var(--color-primary-dark, #5d2e0d));
    border-color: var(--color-primary-dark, #5d2e0d);
    color: #fff;
    box-shadow: 0 2px 8px rgba(93, 46, 13, .2);
}
.variant-chip.is-selected:hover { transform: translateY(-1px); }
.variant-chip__cb {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}
.variant-chip__box {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border: 1.5px solid var(--color-border-strong, #d4a24c);
    border-radius: 5px;
    background: #fff;
    color: transparent;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}
.variant-chip.is-selected .variant-chip__box {
    background: #fff;
    border-color: #fff;
    color: var(--color-primary-dark, #5d2e0d);
}
.variant-chip__name { white-space: nowrap; }
.variant-chip__price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary, #8b4513);
    padding-left: .1rem;
    white-space: nowrap;   /* "+5,00 €" nie trennen */
    flex-shrink: 0;
}
.variant-chip.is-selected .variant-chip__price { color: #f5d591; }

@media (max-width: 600px) {
    .cart-row {
        grid-template-columns: 56px 1fr auto;
        grid-template-areas:
            "img  info  remove"
            "img  qty   qty"
            "img  price price";
        row-gap: .4rem;
    }
    .cart-row__img { grid-area: img; width: 56px; height: 56px; }
    .cart-row__info { grid-area: info; }
    .cart-row .qty { grid-area: qty; justify-self: start; }
    .cart-row__price { grid-area: price; text-align: left; }
    .cart-row .icon-btn { grid-area: remove; }

    /* Varianten-Karte auf Mobile: Bild + Titel oben, Trash rechts oben,
       Beilagen-Container auf voller Breite, unten Unit + Preis. */
    .cart-row--variants {
        grid-template-columns: 56px 1fr auto !important;
        grid-template-areas:
            "img  info  remove"
            "vars vars  vars"
            "unit unit  price" !important;
        row-gap: .5rem;
        column-gap: .65rem;
        align-items: start;
    }
    .cart-row--variants .cart-row__img         { width: 56px; height: 56px; align-self: start; }
    .cart-row--variants .cart-row__unit-badge  { justify-self: start; }
    .cart-row--variants .cart-row__price       { justify-self: end; text-align: right; }
    .cart-row--variants .icon-btn              { align-self: start; }
}

.cart__summary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.4rem;
    position: sticky; top: 100px;
    display: flex; flex-direction: column; gap: .75rem;
    box-shadow: var(--shadow-sm);
}
.cart__summary h2 { margin: 0 0 .5rem; font: 700 1.25rem var(--font-serif); color: var(--color-dark); }
.cart__summary-row { display: flex; justify-content: space-between; color: var(--color-muted); font-size: .92rem; }
.cart__summary-row--total { font-size: 1.1rem; color: var(--color-text); padding-top: .85rem; margin-top: .25rem; border-top: 1px solid var(--color-border); }
.cart__summary-row--total strong { color: var(--color-primary); font-size: 1.4rem; font-weight: 700; }
.cart__hint { color: var(--color-muted); font-size: .82rem; line-height: 1.5; }
.cart__hint code { background: var(--color-bg); padding: 0 .3rem; border-radius: 4px; }

/* =========================== Empty state ================================= */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
}
.empty-state--xl { padding: 4.5rem 1rem; }
.empty-state h1, .empty-state h2 { margin-top: 0; font-family: var(--font-serif); color: var(--color-dark); }

/* =============================== Forms =================================== */
.auth { max-width: 820px; margin: 2rem auto; }
.auth--narrow { max-width: 460px; }
.form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.8rem;
    display: flex; flex-direction: column; gap: 1.1rem;
    box-shadow: var(--shadow-sm);
}
.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
/* Erst ab 880px auf Mehrspaltig - darunter (Handy, Tablet portrait) alle
   Felder klar untereinander, damit nichts abgeschnitten wird. */
@media (min-width: 880px) { .form-row { grid-template-columns: repeat(3, 1fr); } }
.form-span-2 { grid-column: span 2; }
/* In Single-Column (Mobile) darf span-2 die volle Breite nehmen, sonst
   entsteht unten eine Luecke */
@media (max-width: 879px) { .form-span-2 { grid-column: auto; } }
.form-card label {
    display: flex; flex-direction: column; gap: .35rem;
    font-size: .82rem; color: var(--color-muted);
    font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.form-card input:not([type="checkbox"]),
.form-card select {
    padding: .7rem .9rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    background: #fff;
    font: 400 .95rem var(--font-display);
    color: var(--color-text);
    text-transform: none; letter-spacing: normal;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-card input:focus, .form-card select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(139, 69, 19, .18);
}
.checkbox { flex-direction: row !important; align-items: center !important; gap: .6rem !important; color: var(--color-text) !important; font-size: .9rem !important; text-transform: none !important; letter-spacing: normal !important; }
.form-error { color: var(--color-danger); font-size: .78rem; font-weight: 500; text-transform: none; letter-spacing: normal; }
.form-optional {
    font-style: normal;
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .02em;
    color: #a08a72;
    margin-left: .3em;
    opacity: .85;
}
.form-errors { background: rgba(192, 57, 43, .08); color: var(--color-danger); border-radius: 10px; padding: .75rem 1rem; font-weight: 500; }
.form-errors:empty { display: none; }
.form-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* ---- Registrierungs-Erfolgs-Modal ---- */
.body-no-scroll { overflow: hidden; }
.reg-success-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    animation: regModalIn .25s ease-out;
}
.reg-success-modal.is-closing { animation: regModalOut .22s ease-in forwards; }
.reg-success-modal__backdrop {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at top, rgba(93, 46, 13, .55), rgba(42, 24, 16, .75));
    backdrop-filter: blur(3px);
}
.reg-success-modal__dialog {
    position: relative;
    width: 100%; max-width: 460px;
    background: linear-gradient(180deg, #ffffff 0%, #faf5ee 100%);
    border-radius: 18px;
    padding: 2.2rem 1.8rem 1.8rem;
    text-align: center;
    box-shadow: 0 24px 80px rgba(93, 46, 13, .35), 0 0 0 1px rgba(212, 162, 76, .35);
    animation: regModalPop .35s cubic-bezier(.2, 1.2, .4, 1);
}
.reg-success-modal__close {
    position: absolute; top: .5rem; right: .75rem;
    border: 0; background: transparent;
    font-size: 1.8rem; line-height: 1;
    color: #8a7a6b; cursor: pointer;
}
.reg-success-modal__close:hover { color: #5d2e0d; }
.reg-success-modal__icon {
    margin: 0 auto .8rem;
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6ac27a, #1f6b38);
    color: #fff;
    box-shadow: 0 8px 22px rgba(31, 107, 56, .4);
}
.reg-success-modal__title {
    margin: 0 0 .25rem;
    font: 700 1.6rem Georgia, serif;
    color: #2a1810;
}
.reg-success-modal__lead {
    margin: 0 0 1.1rem;
    color: #5d4030;
    font-size: .98rem;
}
.reg-success-modal__kdnr {
    display: inline-flex; flex-direction: column;
    gap: .2rem;
    padding: .9rem 1.6rem;
    margin: 0 auto 1rem;
    border: 2px solid #d4a24c;
    border-radius: 12px;
    background: repeating-linear-gradient(45deg, #faf5ee, #faf5ee 8px, #f5ecdc 8px, #f5ecdc 16px);
}
.reg-success-modal__kdnr-label {
    font: 600 .7rem 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .2em; text-transform: uppercase;
    color: #8a7a6b;
}
.reg-success-modal__kdnr-value {
    font: 700 2rem Georgia, serif;
    letter-spacing: .08em;
    color: #8b4513;
}
.reg-success-modal__hint {
    margin: 0 0 1.4rem;
    font-size: .9rem; line-height: 1.5;
    color: #5d4030;
    padding: .7rem .9rem;
    border-left: 3px solid #d4a24c;
    background: rgba(212, 162, 76, .1);
    border-radius: 4px;
    text-align: left;
}
.reg-success-modal__actions { display: flex; justify-content: center; }

@keyframes regModalIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes regModalOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes regModalPop {
    0%   { transform: scale(.85) translateY(8px); opacity: 0; }
    100% { transform: scale(1)    translateY(0);   opacity: 1; }
}

/* ---- Kontrollzahl (leichtes Zahlen-Captcha in der Registrierung) ---- */
.auth-captcha { display: flex; flex-direction: column; gap: .35rem; }
.auth-captcha .form-label { font-size: .82rem; color: var(--color-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.auth-captcha__row { display: flex; gap: .75rem; align-items: stretch; }
.auth-captcha__code {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 120px;
    padding: .7rem 1.1rem;
    border: 2px dashed var(--color-primary);
    border-radius: 10px;
    background: repeating-linear-gradient(45deg, #faf5ee, #faf5ee 6px, #f5ecdc 6px, #f5ecdc 12px);
    font: 700 1.5rem var(--font-serif, Georgia, serif);
    letter-spacing: .35em;
    color: var(--color-dark, #2a1810);
    user-select: none;
}
.auth-captcha__row input {
    flex: 1;
    min-width: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: .15em;
}

/* ============================== Footer =================================== */
.site-footer {
    margin-top: 4rem;
    color: #d8cbb9;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(212, 162, 76, .14), transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(139, 69, 19, .22), transparent 60%),
        linear-gradient(180deg, var(--color-dark) 0%, var(--color-dark-2) 100%);
    position: relative;
    overflow: hidden;
}
/* Subtile dekorative Top-Linie in Gold-Gradient */
.site-footer::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    opacity: .6;
}

.site-footer__inner {
    display: grid; gap: 2.5rem;
    grid-template-columns: 1fr;
    padding: 3.5rem 0 2.5rem;
}
@media (min-width: 720px) {
    .site-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; align-items: start; gap: 2.5rem; }
}

.site-footer a {
    color: #e8dfcf;
    transition: color 160ms ease, padding var(--transition);
}
.site-footer a:hover { color: var(--color-accent); text-decoration: none; }

.site-footer strong, .site-footer__heading {
    color: #fff; font-family: var(--font-serif); font-weight: 700;
    display: block;
}

.site-footer__brand { display: flex; flex-direction: column; gap: 1rem; max-width: 420px; }

.site-footer__logo {
    display: flex; align-items: center; gap: .9rem;
}
.site-footer__logo img {
    width: 56px; height: 56px;
    object-fit: contain;
    background: transparent;
}
.site-footer__logo strong {
    font-size: 1.3rem;
    line-height: 1.1;
    margin: 0;
    color: #fff;
}
.site-footer__logo small {
    display: block;
    color: #b2a58e;
    font-size: .82rem;
    margin-top: 2px;
    font-family: var(--font-display);
    font-weight: 400;
}

.site-footer__tagline {
    margin: 0; color: #bcae95; line-height: 1.55;
    font-size: .94rem;
    max-width: 380px;
}

.site-footer__address {
    display: flex; align-items: flex-start; gap: .6rem;
    font-style: normal; color: #bcae95;
    font-size: .88rem; line-height: 1.5;
    padding-top: .25rem;
}
.site-footer__address svg {
    color: var(--color-accent); flex-shrink: 0; margin-top: 2px;
}

.site-footer__heading {
    font-size: 1.05rem;
    margin: 0 0 1rem;
    letter-spacing: -.01em;
    position: relative;
    padding-bottom: .65rem;
}
.site-footer__heading::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 34px; height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
}

.site-footer__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .65rem;
}
.site-footer__list li {
    display: flex; align-items: center; gap: .6rem;
    font-size: .9rem;
}
.site-footer__list li svg {
    color: var(--color-accent);
    flex-shrink: 0;
    opacity: .85;
}
.site-footer__list a { color: #d8cbb9; }
.site-footer__list a:hover { color: #fff; }

.site-footer__bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap;
    gap: .8rem;
    padding: 1.1rem 0;
    font-size: .82rem;
    color: #8f8470;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.site-footer__partner-link {
    color: var(--color-accent) !important;
    font-weight: 700;
    letter-spacing: .01em;
    transition: color 160ms ease, text-shadow 160ms ease;
}
.site-footer__partner-link:hover {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(212, 162, 76, .6);
    text-decoration: none;
}
.site-footer__partner-link--brand {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: .95rem;
}

@media (max-width: 560px) {
    .site-footer__inner { padding: 2.5rem 0 2rem; gap: 2rem; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================== Category strip ============================== */
/* ====================== Modernes Multi-Select-Panel fuer Kategorien ===== */
.cat-filter {
    background: linear-gradient(180deg, var(--color-surface) 0%, #faf5ee 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem 1rem;
    margin: 1rem 0 1.75rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), border-color var(--transition);
    scroll-margin-top: 100px;  /* Anker-Sprung #katalog, sticky Header-Abstand */
}
.cat-filter--active {
    border-color: var(--color-accent, #d4a24c);
    box-shadow: 0 6px 20px rgba(139, 69, 19, .08);
}
.cat-filter__head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .6rem;
    padding-bottom: .85rem;
    margin-bottom: .85rem;
    border-bottom: 1px dashed var(--color-border);
}
.cat-filter__title {
    display: inline-flex; align-items: center; gap: .5rem;
    font: 700 .92rem var(--font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-primary-dark, #5d2e0d);
}
.cat-filter__title svg { color: var(--color-accent, #d4a24c); }
.cat-filter__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    border-radius: 999px;
    font: 700 .72rem 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0;
    margin-left: .15rem;
}
.cat-filter__actions {
    display: inline-flex; align-items: center; gap: .75rem;
    flex-wrap: wrap;
}
.cat-filter__hint {
    font-size: .78rem;
    color: var(--color-muted, #8a7a6b);
    font-style: italic;
}
.cat-filter__reset {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    font: 600 .78rem var(--font-display);
    color: var(--color-primary-dark, #5d2e0d);
    background: #fff;
    border: 1px solid var(--color-border-strong, #d4bfa7);
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cat-filter__reset:hover {
    background: var(--color-primary-dark, #5d2e0d);
    color: #fff;
    border-color: var(--color-primary-dark, #5d2e0d);
    text-decoration: none;
}
/* Grid mit gleich breiten Zellen. Jede Zelle nimmt mindestens die
   Breite des laengsten Textes (via --cat-pill-min, vom JS gesetzt),
   spaetere Pillen brechen natuerlich in die naechste Reihe um. */
.cat-filter__grid {
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--cat-pill-min, 120px), 1fr));
}
/* Kleine Ueberschrift einer Hauptgruppe (artikelgruppen.Hauptgruppe).
   Spannt sich ueber die volle Reihe des Kategorien-Grids und steht damit
   ueber den zugehoerigen Pillen. Bewusst dezent: kleiner als der Pill-Text,
   matt-gold und mit dezenter Trennlinie. */
.cat-filter__hauptgruppe {
    grid-column: 1 / -1;
    margin: .8rem 0 .15rem;
    padding: 0 .15rem .15rem;
    color: var(--color-muted, #8a7a6b);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1.2;
    border-bottom: 1px dotted rgba(212, 162, 76, .35);
}
.cat-filter__hauptgruppe--first {
    /* Erste Hauptgruppen-Ueberschrift: weniger Abstand nach oben, weil das
       Grid bereits einen Padding-Abstand zur Header-Reihe hat. */
    margin-top: .15rem;
}
/* Moderne Pillen-Buttons - alle gleich breit innerhalb des Grids.
   Dezent warme Gold/Creme-Toenung passend zum Restaurant-Theme. */
.cat-pill {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    gap: .5rem;
    width: 100%;
    height: 100%;            /* fuellt die Grid-Zelle - gleiche Hoehe pro Reihe */
    box-sizing: border-box;
    padding: .5rem .95rem;
    border: 1.5px solid rgba(212, 162, 76, .45);
    border-radius: 999px;
    background:
        linear-gradient(180deg, #fffaf0 0%, #fcf2de 100%);
    cursor: pointer;
    user-select: none;
    font: 600 .92rem var(--font-display);
    color: var(--color-primary-dark, #5d2e0d);
    letter-spacing: .01em;
    transition: transform .15s, box-shadow .15s, border-color .15s, background .15s, color .15s;
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
                0 1px 2px rgba(139, 69, 19, .05);
}
.cat-pill:hover {
    border-color: var(--color-accent, #d4a24c);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(139, 69, 19, .12);
}
.cat-pill--active {
    background: linear-gradient(135deg, var(--color-primary, #8b4513), var(--color-primary-dark, #5d2e0d));
    border-color: var(--color-primary-dark, #5d2e0d);
    color: #fff;
    box-shadow: 0 6px 16px rgba(93, 46, 13, .25);
}
.cat-pill--active:hover { transform: translateY(-2px); }
.cat-pill__cb {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.cat-pill__tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(212, 162, 76, .75);
    background: #fff;
    color: transparent;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
    box-shadow: inset 0 1px 2px rgba(212, 162, 76, .18);
}
.cat-pill__tick svg { width: 12px; height: 12px; }
.cat-pill--active .cat-pill__tick {
    background: #fff;
    border-color: #fff;
    color: var(--color-primary-dark, #5d2e0d);
}
.cat-pill__name {
    font: inherit;
    text-transform: uppercase;
    font-size: .84rem;
    letter-spacing: .05em;
    flex: 1 1 auto;
    text-align: center;
}
.cat-pill__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(212, 162, 76, .35), rgba(184, 134, 47, .28));
    color: var(--color-primary-dark, #5d2e0d);
    font: 700 .72rem 'Helvetica Neue', Arial, sans-serif;
    flex-shrink: 0;
    box-shadow: inset 0 -1px 0 rgba(184, 134, 47, .18);
}
.cat-pill--active .cat-pill__count {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* ===================== Shop-Info-Box (unter Hero, vor Suche) ============== */
.shop-info {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 980px;
    margin: 1.25rem auto 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #fffaf0 0%, #f7ecd5 100%);
    border: 1px solid rgba(212, 162, 76, .55);
    border-left: 4px solid var(--color-accent, #d4a24c);
    border-radius: var(--radius-md);
    color: var(--color-primary-dark, #5d2e0d);
    box-shadow: 0 6px 18px rgba(139, 69, 19, .08),
                inset 0 1px 0 rgba(255, 255, 255, .6);
    font: 500 .95rem var(--font-display);
    line-height: 1.55;
}
.shop-info__icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent, #d4a24c), var(--color-accent-dark, #b8862f));
    color: #fff;
    box-shadow: 0 4px 10px rgba(139, 69, 19, .25);
}
.shop-info__body {
    flex: 1 1 auto;
    min-width: 0;
    white-space: pre-line;
}
@media (max-width: 640px) {
    .shop-info {
        padding: .85rem 1rem;
        font-size: .88rem;
        gap: .75rem;
    }
    .shop-info__icon { width: 30px; height: 30px; }
}

/* ===================== Footer-Standort-Karte ============================= */
.site-footer__col--map { min-width: 0; }
.site-footer__map {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    width: 100%;
    border: 1px solid rgba(212, 162, 76, .4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    background: #1c0f08;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.site-footer__map:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
    text-decoration: none;
}
.site-footer__map-frame {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    /* Das iframe soll nicht selber Klicks abfangen - der <a> darum herum
       oeffnet Google Maps in neuem Tab. */
    pointer-events: none;
    filter: saturate(.9) contrast(1.05);
}
.site-footer__map-overlay {
    position: absolute;
    left: 10px; bottom: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--color-primary, #8b4513), var(--color-primary-dark, #5d2e0d));
    color: #fff;
    font: 700 .74rem var(--font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.site-footer__map-overlay svg { color: var(--color-accent, #d4a24c); }
.site-footer__map-addr {
    margin: .55rem 0 0;
    font-size: .82rem;
    color: #d8cbb9;
    line-height: 1.45;
}

/* Mobile: 2 Gruppen pro Reihe, Namen duerfen umbrechen */
@media (max-width: 640px) {
    .cat-filter__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .cat-pill {
        padding: .45rem .55rem;
        gap: .35rem;
        white-space: normal;
        text-align: center;
        min-width: 0;
    }
    .cat-pill__name {
        font-size: .76rem;
        letter-spacing: .03em;
        white-space: normal;
        word-break: break-word;
        line-height: 1.15;
    }
    .cat-pill__tick {
        width: 16px; height: 16px;
    }
    .cat-pill__tick svg { width: 10px; height: 10px; }
    .cat-pill__count {
        min-width: 18px; height: 17px;
        font-size: .66rem;
        padding: 0 5px;
    }
}

/* Legacy category-strip bleibt (ausser Gebrauch) */
.category-strip {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding: 1.5rem .5rem 1.75rem;
    margin: .5rem -.5rem 2rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
    -webkit-overflow-scrolling: touch;
    position: relative;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background:
        linear-gradient(90deg, var(--color-bg) 0%, transparent 3%, transparent 97%, var(--color-bg) 100%),
        #fdfaf4;
}
.category-strip::-webkit-scrollbar { height: 6px; }
.category-strip::-webkit-scrollbar-track { background: transparent; }
.category-strip::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }

.category-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: .4rem .3rem;
    min-width: 100px;
    max-width: 130px;
    text-decoration: none;
    color: var(--color-dark);
    border-radius: var(--radius-md);
    transition: transform var(--transition);
    scroll-snap-align: start;
    position: relative;
}
.category-chip:hover { text-decoration: none; transform: translateY(-4px); }

.category-chip__avatar {
    position: relative;
    width: 84px; height: 84px;
    border-radius: 50%;
    display: grid; place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #f4e6cc, #caa773);
    color: #fff;
    font: 700 1.1rem var(--font-display);
    letter-spacing: .02em;
    box-shadow:
        0 6px 14px -6px rgba(42, 24, 16, .25),
        inset 0 0 0 3px #fff,
        inset 0 0 0 4px var(--color-border);
    transition: transform var(--transition), box-shadow var(--transition);
    isolation: isolate;
}
.category-chip__avatar::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at top, rgba(255,255,255,.25), transparent 60%);
    z-index: 1;
    pointer-events: none;
}
.category-chip__avatar img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 600ms ease;
}
.category-chip:hover .category-chip__avatar {
    box-shadow:
        0 12px 26px -8px rgba(42, 24, 16, .35),
        inset 0 0 0 3px #fff,
        inset 0 0 0 4px var(--color-accent);
}
.category-chip:hover .category-chip__avatar img { transform: scale(1.08); }

.category-chip__avatar--all {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
}
/* Abwechslungsreiche warme Tonwerte pro Kategorie */
.category-chip__avatar[data-seed="0"] { background: linear-gradient(135deg, #f1d9b3, #b8803f); }
.category-chip__avatar[data-seed="1"] { background: linear-gradient(135deg, #f0b894, #a14d27); }
.category-chip__avatar[data-seed="2"] { background: linear-gradient(135deg, #e5c59e, #834418); }
.category-chip__avatar[data-seed="3"] { background: linear-gradient(135deg, #ecaa76, #7e3e14); }
.category-chip__avatar[data-seed="4"] { background: linear-gradient(135deg, #e8cca0, #a06830); }
.category-chip__avatar[data-seed="5"] { background: linear-gradient(135deg, #d4a96c, #5d2e0d); }

.category-chip__initials {
    font: 700 1.35rem var(--font-serif);
    letter-spacing: .02em;
    z-index: 2; position: relative;
}

.category-chip__name {
    font: 600 .85rem var(--font-display);
    letter-spacing: .02em;
    text-align: center;
    line-height: 1.3;
    max-width: 115px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-dark);
}
.category-chip__count {
    position: absolute;
    top: -2px; right: 2px;
    min-width: 22px;
    padding: 2px 7px;
    font: 800 .68rem var(--font-display);
    letter-spacing: .04em;
    color: var(--color-dark);
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 999px;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(0,0,0,.06);
}

/* Aktiver Zustand - filled primary avatar mit weisser Check-Bordure */
.category-chip--active .category-chip__avatar {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
    color: #fff !important;
    box-shadow:
        0 14px 28px -8px rgba(139, 69, 19, .5),
        inset 0 0 0 3px #fff,
        inset 0 0 0 5px var(--color-accent);
    transform: scale(1.03);
}
.category-chip--active .category-chip__avatar img { opacity: .35; }
.category-chip--active .category-chip__avatar::before {
    content: "✓";
    position: absolute;
    font: 900 1.8rem var(--font-display);
    color: #fff;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.category-chip--active .category-chip__initials { display: none; }
.category-chip--active .category-chip__name {
    color: var(--color-primary-dark);
    font-weight: 700;
}
.category-chip--active .category-chip__count {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 4px 8px -2px rgba(139, 69, 19, .4);
}

@media (max-width: 540px) {
    .category-strip { gap: .85rem; padding: 1rem .25rem 1.25rem; }
    .category-chip__avatar { width: 68px; height: 68px; }
    .category-chip__name { font-size: .78rem; max-width: 90px; }
    .category-chip { min-width: 80px; max-width: 100px; }
}

.section-head__meta {
    display: block;
    margin-top: .4rem;
    color: var(--color-muted);
    font-size: .82rem;
    font-weight: 500;
}

/* ============================ Active filters ============================ */
.active-filters {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: 0 0 1.25rem;
}
.active-filter {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    font-size: .82rem;
    color: var(--color-muted);
}
.active-filter strong { color: var(--color-dark); font-weight: 600; }
.active-filter a {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-muted);
    font-weight: 700; line-height: 1; font-size: .95rem;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.active-filter a:hover { background: var(--color-danger); color: #fff; }

/* =========================== View switch (Tabs) ========================== */
.view-switch {
    display: inline-flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    box-shadow: var(--shadow-sm);
    margin: 1rem auto 1.5rem;
    justify-content: center;
}
.view-switch + .view-switch { margin-left: auto; }
.view-switch__tab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem 1.2rem;
    border-radius: 999px;
    font: 600 .82rem var(--font-display);
    letter-spacing: .03em;
    color: var(--color-muted);
    text-transform: uppercase;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.view-switch__tab:hover { color: var(--color-primary); text-decoration: none; background: var(--color-bg); }
.view-switch__tab--active {
    background: var(--color-primary); color: #fff;
    box-shadow: 0 4px 10px -4px rgba(139, 69, 19, .55);
}
.view-switch__tab--active:hover { background: var(--color-primary-dark); color: #fff; }
.site-main > .view-switch { display: flex; margin: 1.5rem 0 1.5rem auto; }

/* ========================= Speisekarte (Menu) ============================ */
.hero--menu {
    background:
        radial-gradient(ellipse at top right, rgba(212, 162, 76, .45), transparent 55%),
        linear-gradient(125deg, #1c0f08 0%, #2a1810 45%, #3d2317 100%);
}
.hero--menu h1 { font-family: var(--font-serif); font-style: italic; }

.menu-toc {
    display: flex; flex-wrap: wrap; gap: .5rem;
    justify-content: center;
    margin: 0 auto 2.5rem;
    max-width: 1000px;
    padding: 1rem 1rem;
    border-top: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border-strong);
    scroll-margin-top: 100px;  /* Anker-Sprung #kategorien, sticky Header-Abstand */
}
.menu-toc__chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font-weight: 600; font-size: .85rem;
    letter-spacing: .02em;
    border: 1px solid var(--color-border-strong);
    transition: var(--transition);
    text-decoration: none;
}
.menu-toc__chip:hover {
    background: var(--color-bg);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    text-decoration: none;
    transform: translateY(-1px);
}
.menu-toc__chip--active,
.menu-toc__chip--active:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px -4px rgba(139, 69, 19, .55);
}
.menu-toc__count {
    display: inline-grid; place-items: center;
    min-width: 22px; height: 22px;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
}
.menu-toc__chip--active .menu-toc__count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.menu-section { margin: 0 auto 3.5rem; max-width: 980px; scroll-margin-top: 100px; }
.menu-section__head { text-align: center; margin-bottom: 1.5rem; }

/* Spezialartikel-Sektion (StatusID=10) - eigene Empfehlungs-Vitrine
   oben am Shop, optisch durch Gold-Gradient-Hintergrund + Akzent-Border
   abgehoben. Funktioniert sowohl in Speisekarte (.menu-section--special)
   als auch in der Bestellansicht (.special-grid-section). */
.menu-section--special,
.special-grid-section {
    margin: 0 auto 3rem;
    padding: 1.8rem clamp(1rem, 3vw, 2rem) 1rem;
    background:
        linear-gradient(135deg, rgba(212, 162, 76, .14) 0%, rgba(139, 69, 19, .06) 100%);
    border: 1px solid rgba(212, 162, 76, .35);
    border-radius: var(--radius-lg, 18px);
    box-shadow: 0 6px 22px -10px rgba(139, 69, 19, .25);
    position: relative;
    scroll-margin-top: 100px;
}
.menu-section--special::before,
.special-grid-section::before {
    content: "";
    position: absolute; top: -1px; left: 24px; right: 24px;
    height: 4px;
    background: linear-gradient(90deg,
        var(--color-primary, #8b4513),
        var(--color-accent, #d4a24c),
        var(--color-primary-dark, #5d2e0d));
    border-radius: 4px 4px 0 0;
}
.menu-section--special .menu-section__title,
.special-grid-section .section-head h2 {
    color: var(--color-primary, #8b4513);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
.special-grid-section .section-head__eyebrow {
    color: var(--color-accent, #d4a24c);
    font-weight: 700;
    letter-spacing: .18em;
}

/* Spezialartikel: Artikeltext1 (Title) und Artikeltext2 (Teaser) duerfen
   auf Mobile (und auch generell auf der Spezial-Sektion) frei umbrechen -
   kein Ellipsis, kein Line-Clamp. Begruendung: Spezialartikel sind oft
   "Bewirten Sie einen Talebe?"-Aufrufe mit erklaerendem Untertitel,
   den der Anwender vollstaendig lesen koennen muss. */
.menu-item--special .menu-item__headline {
    flex-wrap: wrap;
    align-items: flex-start;
}
.menu-item--special .menu-item__name {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    flex: 1 1 100%;            /* nimmt eigene Zeile, wenn noetig */
    line-height: 1.25;
}
.menu-item--special .menu-item__dots { display: none; }
.menu-item--special .menu-item__price { margin-left: auto; }
.menu-item--special .menu-item__teaser {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    word-break: break-word;
}
@media (max-width: 540px) {
    .menu-item--special .menu-item__name {
        font-size: 1rem;
    }
    .menu-item--special .menu-item__price {
        flex: 0 0 auto;
        margin-left: auto;
    }
}

/* Auch in der Bestellansicht (Grid-Karten) sollen Spezialartikel-Texte
   nicht abgeschnitten werden. */
.article-grid--special .card__title {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    white-space: normal;
    min-height: 0;
}
.article-grid--special .card__teaser {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
    min-height: 0;
}

/* Spezial-Badge auf Menu-Item-Bild: einfacher goldener Stern als
   Sonderzeichen, keine Schrift mehr. */
.menu-item__badge--special {
    background: linear-gradient(135deg, var(--color-accent, #d4a24c), var(--color-primary, #8b4513));
    color: #fff;
    font-weight: 700;
    letter-spacing: 0;
    width: 32px;
    height: 32px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(139, 69, 19, .35);
}

/* Bestellansicht - Spezial-Grid bekommt einen leichten Aufmerksamkeits-
   Boost (groessere Karten dadurch dass auto-fill min auf 280 statt 240). */
.article-grid--special {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Spezialartikel in der Bestellansicht (Grid-Karten via _ArticleCard.cshtml):
   Artikelnummer-Zeile (.card__meta) ausblenden. Bewertungs-Sterne ebenfalls
   weg, da diese Sektion ohnehin Empfehlungen sind. Sieht aufgeraeumter aus. */
.article-grid--special .card__meta { display: none; }
.article-grid--special .card__rating { display: none; }

@media (max-width: 540px) {
    .menu-section--special,
    .special-grid-section { padding: 1.4rem 1rem .75rem; }
}
.menu-section__title {
    margin: 0;
    font: italic 700 clamp(1.6rem, 3vw, 2.4rem) var(--font-serif);
    color: var(--color-primary-dark);
    letter-spacing: -.01em;
}
.menu-section__desc { margin: .4rem 0 0; color: var(--color-muted); max-width: 620px; margin-left: auto; margin-right: auto; }
.menu-section__rule {
    width: 120px; height: 2px; margin: .85rem auto 0;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    position: relative;
}
.menu-section__rule::after {
    content: "✦";
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-bg); padding: 0 .6rem;
    color: var(--color-accent-dark); font-size: 1rem;
    line-height: 1;
}

.menu-items { display: flex; flex-direction: column; gap: 1.25rem; }

.menu-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 1.1rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.menu-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border-strong);
}
@media (max-width: 540px) {
    .menu-item { grid-template-columns: 72px 1fr; gap: .75rem; padding: .85rem; }
}

.menu-item__thumb {
    position: relative;
    width: 96px; height: 96px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-bg);
}
.menu-item__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms; }
.menu-item:hover .menu-item__thumb img { transform: scale(1.08); }
.menu-item__badge {
    position: absolute; top: 6px; left: 6px;
    padding: .15rem .5rem; border-radius: 999px;
    font-size: .62rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    background: var(--color-accent); color: var(--color-dark);
    box-shadow: var(--shadow-sm);
}
@media (max-width: 540px) {
    .menu-item__thumb { width: 72px; height: 72px; }
}

.menu-item__text { min-width: 0; display: flex; flex-direction: column; gap: .4rem; }

.menu-item__headline {
    display: flex; align-items: baseline; gap: .6rem;
    flex-wrap: nowrap;
}
.menu-item__name {
    margin: 0;
    font: 600 1.05rem var(--font-display);
    color: var(--color-dark);
    flex-shrink: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-item__dots {
    flex: 1 1 auto;
    min-width: 30px;
    height: 0;
    border-bottom: 1px dotted var(--color-border-strong);
    position: relative;
    top: -5px;
}
.menu-item__price {
    font: 700 1.1rem var(--font-display);
    color: var(--color-primary-dark);
    white-space: nowrap;
    display: inline-flex; gap: .4rem; align-items: baseline;
}
.menu-item__price-old {
    text-decoration: line-through;
    color: var(--color-muted);
    font-weight: 500; font-size: .8rem;
}
/* Im Preview-Modus (Countdown aktiv) steht hier z.B. "Verkaufsstart am
   28.04.2026" - das ist deutlich laenger als ein Preis und muss umbrechen
   duerfen, sobald die Karte zu schmal wird. Setzt den nowrap der Basis
   .menu-item__price gezielt fuer die "muted"-Variante zurueck. */
.menu-item__price--muted {
    color: var(--color-muted);
    font-style: italic;
    font-size: .95rem;
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
    text-align: right;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
}

.menu-item__teaser {
    margin: 0;
    color: var(--color-muted); font-size: .9rem; line-height: 1.45;
    font-style: italic;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Beilagen/Varianten-Namen (komma-getrennt) unter Artikeltext2 in der
   Speisekarten-Zeile. Label "Möglicher Beilagen:" steht auf eigener Zeile,
   darunter die Liste der Beilagen. */
.menu-item__variants {
    margin: .15rem 0 0;
    padding: .3rem .55rem;
    background: rgba(212, 162, 76, .08);
    border: 1px solid rgba(212, 162, 76, .25);
    border-radius: 8px;
    color: var(--color-primary, #8b4513);
    font-size: .8rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    max-width: 100%;
}
.menu-item__variants-label {
    color: var(--color-accent, #d4a24c);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    white-space: nowrap;
}
.menu-item__variants-list {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.menu-item__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    margin-top: .25rem;
}
.menu-item__sku { color: var(--color-muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.menu-item__unit { color: var(--color-muted); font-size: .8rem; }
.menu-item__actions { display: flex; gap: .5rem; align-items: center; margin-left: auto; }

/* Abteilungshinweis in der Speisekarte - Farben/Variablen oben definiert
   (siehe .card__abteilung). Pill-Badge in waermerem Rot-Braun-Gold-Verlauf. */
.menu-item__abteilung {
    margin: .55rem 0 0;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--abt-bg-from) 0%, var(--abt-bg-to) 100%);
    border: 1.5px solid var(--abt-border);
    box-shadow: var(--abt-shadow);
    color: var(--abt-text);
    font-size: .8rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .01em;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
}
.menu-item__abteilung-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--abt-icon);
    flex-shrink: 0;
}
.menu-item__abteilung-name {
    color: var(--abt-name-text);
    background: var(--abt-name-bg);
    padding: .08rem .45rem;
    border-radius: 5px;
    font-weight: 800;
    font-style: normal;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(122, 31, 16, .15);
}

/* Abteilungshinweis im Detail-Modal - selbe Variablen, etwas groesser
   und prominenter, da die Detailansicht mehr Platz hat. */
.detail__abteilung {
    margin: 1rem 0 0;
    padding: .65rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--abt-bg-from) 0%, var(--abt-bg-to) 100%);
    border: 1.5px solid var(--abt-border);
    box-shadow: var(--abt-shadow);
    color: var(--abt-text);
    font-size: .92rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .01em;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
}
.detail__abteilung-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--abt-icon);
    flex-shrink: 0;
}
.detail__abteilung-name {
    color: var(--abt-name-text);
    background: var(--abt-name-bg);
    padding: .12rem .55rem;
    border-radius: 6px;
    font-weight: 800;
    font-style: normal;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(122, 31, 16, .15);
}

@media (max-width: 540px) {
    .menu-item__headline { flex-wrap: wrap; }
    .menu-item__dots { display: none; }
    .menu-item__price { margin-left: auto; }
    .menu-item__actions { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* ============================== Checkout ================================ */
.checkout {
    max-width: 1200px;
    margin: 1.5rem auto 3rem;
}

.checkout__header {
    text-align: center;
    margin: 1.5rem 0 2rem;
}
.checkout__title {
    margin: 0;
    font: 700 clamp(1.6rem, 3vw, 2.4rem) var(--font-serif);
    color: var(--color-dark);
    letter-spacing: -.01em;
}
.checkout__subtitle {
    margin: .4rem 0 0;
    color: var(--color-muted);
    font-size: 1rem;
}

.checkout__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;   /* Bemerkung + Bestellung untereinander */
    max-width: 780px;
    margin: 0 auto;
}

.checkout__main { display: flex; flex-direction: column; gap: 1.25rem; }

.checkout-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.checkout-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }

.checkout-card__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.checkout-card__step {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    font: 800 .95rem var(--font-display);
    box-shadow: 0 6px 12px -5px rgba(139, 69, 19, .55);
}
.checkout-card__head h2 {
    margin: 0;
    font: 700 1.15rem var(--font-serif);
    color: var(--color-dark);
}
.checkout-card__head p {
    margin: 2px 0 0;
    color: var(--color-muted);
    font-size: .85rem;
}

.checkout-card textarea {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    background: #fff;
    font: 400 .95rem var(--font-display);
    color: var(--color-text);
    resize: vertical;
    min-height: 80px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.checkout-card textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(139, 69, 19, .15);
}

/* --- Summary (unter Bemerkung, volle Breite) --- */
.checkout__summary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.4rem;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 1rem;
}
.checkout-summary__title {
    margin: 0;
    font: 700 1.25rem var(--font-serif);
    color: var(--color-dark);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--color-border);
}

.checkout-summary__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .6rem;
    /* kein Scroll mehr - die gesamte Bestellung inkl. aller Varianten
       ist zur Kontrolle am Stueck sichtbar */
}
.checkout-summary__list li {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: .65rem;
    align-items: start;
    padding: .4rem;
    border-radius: 8px;
    transition: background var(--transition);
}
.checkout-summary__list li.has-variants {
    background: #fbf6ec;
    border: 1px dashed rgba(212, 162, 76, .45);
}
.checkout-summary__info { min-width: 0; }
.checkout-summary__list li:hover { background: var(--color-bg); }
.checkout-summary__list img {
    width: 48px; height: 48px;
    object-fit: cover; border-radius: 8px;
    background: var(--color-bg);
}
.checkout-summary__list strong {
    display: block; font-size: .88rem; font-weight: 600;
    color: var(--color-dark);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.checkout-summary__list small {
    color: var(--color-muted); font-size: .76rem;
}
.checkout-summary__list span {
    font-weight: 700; color: var(--color-primary);
    font-size: .95rem; white-space: nowrap;
}

/* Gewaehlte Varianten in der Checkout-Zusammenfassung */
.checkout-summary__variants {
    margin-top: .45rem;
    padding-top: .4rem;
    border-top: 1px dashed rgba(212, 162, 76, .45);
    display: flex; flex-direction: column;
    gap: .3rem;
}
.checkout-summary__vgroup {
    display: flex; flex-direction: column;
    gap: .15rem;
}
.checkout-summary__vgroup-name {
    font: 700 .62rem 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary-dark, #5d2e0d);
}
.checkout-summary__vlist {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 2px;
}
.checkout-summary__vlist li {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: baseline !important;
    justify-content: space-between;
    padding: 2px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}
.checkout-summary__vname {
    font-size: .75rem;
    color: var(--color-dark, #2a1810);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}
.checkout-summary__vname::before {
    content: '+ ';
    color: var(--color-accent, #d4a24c);
    font-weight: 700;
}
.checkout-summary__vprice {
    font-size: .75rem !important;
    color: var(--color-primary, #8b4513) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.checkout-summary__rows {
    display: flex; flex-direction: column; gap: .4rem;
    padding-top: .75rem;
    border-top: 1px solid var(--color-border);
}
.checkout-summary__rows > div {
    display: flex; justify-content: space-between;
    color: var(--color-muted); font-size: .9rem;
}
.checkout-summary__rows strong { color: var(--color-dark); font-weight: 600; }
.checkout-summary__total {
    margin-top: .4rem; padding-top: .5rem;
    border-top: 1px solid var(--color-border);
    font-size: 1.05rem;
    color: var(--color-text) !important;
}
.checkout-summary__total strong {
    color: var(--color-primary) !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
}

.checkout-summary__agb {
    display: flex !important; align-items: flex-start !important;
    flex-direction: row !important;
    gap: .6rem !important;
    font-size: .82rem !important;
    line-height: 1.4;
    padding: .75rem .85rem;
    background: var(--color-bg);
    border-radius: 10px;
    color: var(--color-text) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.checkout-summary__agb input { margin-top: 2px; }

.checkout__submit {
    margin-top: .35rem;
}
.checkout__submit span { font-size: .95rem; }

.checkout-summary__hint {
    margin: 0; text-align: center;
    font-size: .78rem; color: var(--color-muted);
    line-height: 1.45;
}

@media (max-width: 720px) {
    .checkout__summary { position: static; top: auto; }
    .checkout-card { padding: 1.2rem 1rem; }
    .checkout-card__head { grid-template-columns: auto 1fr; gap: .75rem; padding-bottom: .8rem; margin-bottom: 1rem; }
}

/* ============================ Bestellmodal ============================== */
.order-modal {
    position: fixed; inset: 0; z-index: 80;
    display: grid; place-items: center;
    animation: modalIn 200ms ease-out;
}
.order-modal[hidden] { display: none; }

/* AGB / Datenschutz / Impressum-Modal mit Tab-Wechsel.
   z-index 85 - oberhalb des Order-Modals (80), unter dem Confirm (90),
   damit ein Confirm-Dialog aus dem Modal heraus weiterhin moeglich ist. */
.legal-modal {
    position: fixed; inset: 0; z-index: 85;
    display: grid; place-items: center;
    animation: modalIn 200ms ease-out;
}
.legal-modal[hidden] { display: none; }
.legal-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(42, 24, 16, .65);
    backdrop-filter: blur(6px);
    cursor: pointer;
}
.legal-modal__dialog {
    position: relative;
    width: min(780px, calc(100% - 1.5rem));
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    background: var(--color-surface, #fffaf0);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-lg, 0 24px 60px -16px rgba(42, 24, 16, .55));
    padding: 1.4rem 1.5rem 1.2rem;
    animation: dialogIn 240ms cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}
.legal-modal__dialog::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg,
        var(--color-primary, #8b4513),
        var(--color-accent, #d4a24c),
        var(--color-primary-dark, #5d2e0d));
}
.legal-modal__close {
    position: absolute; top: 12px; right: 14px;
    background: #fff; border: 1px solid var(--color-border, #ece0d1);
    width: 36px; height: 36px;
    border-radius: 50%;
    font-size: 1.4rem; line-height: 1;
    color: var(--color-dark, #2a1810);
    cursor: pointer;
    transition: var(--transition, all .2s);
    z-index: 2;
}
.legal-modal__close:hover {
    background: var(--color-accent, #d4a24c); color: #fff;
    border-color: var(--color-accent, #d4a24c);
    transform: rotate(90deg);
}
.legal-modal__tabs {
    display: flex; gap: .25rem;
    margin: .25rem 0 .9rem;
    padding-right: 3rem;  /* Platz fuer Close-Button */
    flex-wrap: wrap;
}
.legal-modal__tab {
    padding: .5rem 1.05rem;
    background: transparent;
    border: 1px solid var(--color-border-strong, #d6c4a3);
    border-radius: 999px;
    color: var(--color-primary, #8b4513);
    font: 600 .82rem var(--font-display, Georgia, serif);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.legal-modal__tab:hover {
    background: rgba(212, 162, 76, .12);
    border-color: var(--color-accent, #d4a24c);
}
.legal-modal__tab.is-active {
    background: linear-gradient(135deg, var(--color-primary, #8b4513) 0%, var(--color-primary-dark, #5d2e0d) 100%);
    color: #fff;
    border-color: transparent;
}
.legal-modal__title {
    margin: 0 0 .8rem;
    font: 700 1.35rem var(--font-display, Georgia, serif);
    color: var(--color-dark, #2a1810);
    line-height: 1.2;
}
.legal-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .9rem .35rem 1rem .25rem;
    color: var(--color-dark, #2a1810);
    font-size: .9rem;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    border-top: 1px dashed var(--color-border, #ece0d1);
}
.legal-modal__body[hidden] { display: none; }
/* Sauberes Default-Styling fuer HTML-Inhalte im Legal-Modal -
   greift sowohl bei Auto-Konvertierung von Plain-Text als auch bei
   Admin-gepflegtem HTML mit <h2>, <p>, <ul>, <strong>, <a> etc. */
.legal-modal__body p           { margin: 0 0 .65rem; }
.legal-modal__body p:last-child{ margin-bottom: 0; }
.legal-modal__body h1,
.legal-modal__body h2,
.legal-modal__body h3 {
    margin: 1.2rem 0 .55rem;
    line-height: 1.25;
    color: var(--color-dark, #2a1810);
    font-family: var(--font-display, Georgia, serif);
}
.legal-modal__body h1           { font-size: 1.3rem; font-weight: 700; }
.legal-modal__body h2 {
    font-size: 1.05rem;
    font-weight: 700;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--color-border, #ece0d1);
}
.legal-modal__body h3           { font-size: .98rem; font-weight: 600; }
.legal-modal__body h2:first-child,
.legal-modal__body h1:first-child { margin-top: 0; }
.legal-modal__body ul,
.legal-modal__body ol           { margin: .35rem 0 .85rem 1.4rem; padding: 0; }
.legal-modal__body li           { margin: .2rem 0; }
.legal-modal__body strong       { color: var(--color-dark, #2a1810); font-weight: 700; }
.legal-modal__body em           { font-style: italic; }
.legal-modal__body a {
    color: var(--color-primary, #8b4513);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}
.legal-modal__body a:hover      { color: var(--color-accent, #d4a24c); }
.legal-modal__body hr {
    border: 0;
    border-top: 1px dashed var(--color-border, #ece0d1);
    margin: 1rem 0;
}
/* Falls der Admin den Inhalt in <section>/<article> packt mit eigenen
   Margins/Paddings, neutralisieren wir den AEusseren Wrapper, damit
   das Modal-Padding alleine die Breite bestimmt. */
.legal-modal__body > section,
.legal-modal__body > article,
.legal-modal__body > div {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.legal-modal__actions {
    display: flex;
    justify-content: center;
    padding-top: .9rem;
    border-top: 1px solid var(--color-border, #ece0d1);
    margin-top: .25rem;
    flex-shrink: 0;
}
@media (max-width: 540px) {
    .legal-modal__dialog { padding: 1.1rem 1rem 1rem; }
    .legal-modal__title  { font-size: 1.1rem; }
    .legal-modal__body   { font-size: .85rem; }
    .legal-modal__tab    { font-size: .76rem; padding: .4rem .8rem; }
}

/* Klickbarer Inline-Link, der einen Punkt im Legal-Modal oeffnet.
   Sieht aus wie ein Link, ist technisch ein <button>. */
.legal-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-primary, #8b4513);
    text-decoration: underline;
    text-underline-offset: 2px;
    font: inherit;
    cursor: pointer;
}
.legal-link:hover {
    color: var(--color-accent, #d4a24c);
}

/* Generische Bestaetigungs-Modal (z.B. "Bestellung wirklich stornieren?").
   Liegt mit z-index 90 ueber dem .order-modal (z-index 80), damit ein
   Confirm aus dem Bestellungs-Modal heraus sichtbar bleibt. */
.confirm-modal {
    position: fixed; inset: 0; z-index: 90;
    display: grid; place-items: center;
    animation: modalIn 180ms ease-out;
}
.confirm-modal[hidden] { display: none; }
.confirm-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(42, 24, 16, .55);
    backdrop-filter: blur(4px);
    cursor: pointer;
}
.confirm-modal__dialog {
    position: relative;
    width: min(420px, calc(100% - 2rem));
    background: var(--color-surface, #fffaf0);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-lg, 0 24px 60px -16px rgba(42, 24, 16, .55));
    padding: 1.8rem 1.6rem 1.5rem;
    text-align: center;
    animation: dialogIn 220ms cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}
.confirm-modal__dialog::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg,
        var(--color-primary, #8b4513),
        var(--color-accent, #d4a24c),
        var(--color-primary-dark, #5d2e0d));
}
.confirm-modal__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px;
    margin: .25rem auto .9rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(212, 162, 76, .15), rgba(139, 69, 19, .12));
    color: var(--color-primary, #8b4513);
}
.confirm-modal__title {
    margin: 0 0 .5rem;
    font: 700 1.2rem var(--font-display, Georgia, serif);
    color: var(--color-dark, #2a1810);
    line-height: 1.25;
}
.confirm-modal__message {
    margin: 0 0 1.4rem;
    color: var(--color-muted, #5d4a3c);
    font-size: .95rem;
    line-height: 1.5;
}
.confirm-modal__actions {
    display: flex;
    gap: .65rem;
    justify-content: center;
    flex-wrap: wrap;
}
.confirm-modal__actions .btn {
    min-width: 110px;
    flex: 1 1 110px;
    max-width: 180px;
}
@media (max-width: 380px) {
    .confirm-modal__actions { flex-direction: column-reverse; }
    .confirm-modal__actions .btn { max-width: none; width: 100%; }
}
.order-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(42, 24, 16, .65);
    backdrop-filter: blur(6px);
}
.order-modal__dialog {
    position: relative;
    width: min(520px, calc(100% - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    animation: dialogIn 280ms cubic-bezier(.2,.8,.2,1);
}
.order-modal__close {
    position: absolute; top: 12px; right: 14px;
    background: #fff; border: 1px solid var(--color-border);
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: 1.3rem; line-height: 1;
    color: var(--color-dark);
    cursor: pointer;
    transition: var(--transition);
    z-index: 2;
}
.order-modal__close:hover {
    background: var(--color-accent); color: #fff; border-color: var(--color-accent);
    transform: rotate(90deg);
}
.order-modal__dialog::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary-dark));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.order-modal__icon {
    width: 96px; height: 96px;
    margin: 0 auto 1rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(139, 69, 19, .1), rgba(212, 162, 76, .2));
    color: var(--color-primary-dark);
    animation: thankyouPop 500ms cubic-bezier(.34,1.56,.64,1) both;
}
.order-modal__title {
    margin: .25rem 0 1rem;
    font: 700 clamp(1.25rem, 2.2vw, 1.6rem) var(--font-serif);
    color: var(--color-dark);
    letter-spacing: -.01em;
}
.order-modal__lead {
    margin: 0 0 .35rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .75rem;
    font-weight: 700;
}
.order-modal__number {
    margin: 0 0 1.25rem;
    padding: 1rem 1.5rem;
    display: inline-block;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    border-radius: var(--radius-md);
    font: 900 clamp(2.4rem, 5vw, 3.4rem) var(--font-display);
    letter-spacing: .04em;
    box-shadow: 0 14px 30px -10px rgba(139, 69, 19, .55);
    min-width: 180px;
}
.order-modal__instruction {
    margin: 0 auto 1.5rem;
    padding: 1.1rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    text-align: left;
}

/* Stornieren-Bereich direkt unter dem Barcode im Bestaetigungs-Modal.
   Klein/dezent, damit er nicht den Hauptablauf "Bestellung -> Kasse"
   ueberschattet, aber sichtbar genug, dass der Kunde ihn findet, falls
   er es sich anders ueberlegt hat. */
.order-modal__cancel {
    /* Klarer Abstand nach oben - die Stornieren-Box steht jetzt UNTER dem
       primaeren "Zurueck zur Speisekarte"-Button und soll als dezenter
       "Notausgang" wahrgenommen werden, nicht als Teil des Hauptablaufs. */
    margin: 1.4rem auto .25rem;
    padding: .75rem 1rem .85rem;
    text-align: center;
    background: rgba(185, 28, 28, .04);
    border: 1px dashed rgba(185, 28, 28, .25);
    border-radius: var(--radius-md);
    max-width: 380px;
}
.order-modal__cancel-hint {
    margin: 0 0 .6rem;
    color: #7a0f0f;
    font-size: .82rem;
    line-height: 1.4;
    font-style: italic;
}
.order-modal__cancel .btn--danger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.1rem;
    background: linear-gradient(135deg, #b91c1c 0%, #7a0f0f 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    font: 700 .82rem var(--font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(185, 28, 28, .25);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.order-modal__cancel .btn--danger:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(185, 28, 28, .35);
    filter: brightness(1.05);
}
.order-modal__cancel .btn--danger:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.order-modal__instruction strong {
    display: block;
    color: var(--color-dark);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.order-modal__instruction p {
    margin: 0;
    color: var(--color-muted);
    font-size: .85rem;
    line-height: 1.55;
}
.order-modal__actions {
    display: flex; flex-wrap: wrap; gap: .6rem;
    justify-content: center;
}
.order-modal__actions .btn svg { flex-shrink: 0; }

/* QR-Code & EAN13 im Bestaetigungs-Modal */
.order-modal__qr {
    margin: 1rem auto .3rem;
    display: flex; justify-content: center;
}
.order-modal__qr img {
    width: 170px; height: 170px;
    padding: 8px;
    background: #fff;
    border: 2px solid var(--color-accent, #d4a24c);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(139, 69, 19, .15);
    display: block;
}
.order-modal__ean {
    margin: 1rem auto 1.2rem;
    display: flex; justify-content: center;
}
.order-modal__ean img {
    width: min(280px, 80%);
    height: auto;
    display: block;
}

/* ============================== Danke / Thank You ======================= */
.thankyou {
    max-width: 640px; margin: 3rem auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.thankyou::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary-dark));
}
.thankyou__icon {
    width: 96px; height: 96px;
    margin: 0 auto 1rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(139, 69, 19, .12), rgba(212, 162, 76, .18));
    color: var(--color-primary-dark);
    animation: thankyouPop 500ms cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes thankyouPop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.thankyou__title {
    margin: .5rem 0 .75rem;
    font: 700 clamp(1.5rem, 2.8vw, 2.1rem) var(--font-serif);
    color: var(--color-dark);
    letter-spacing: -.01em;
}
.thankyou__lead {
    margin: 0 auto 1.5rem;
    color: var(--color-muted);
    max-width: 480px;
    line-height: 1.6;
}
.thankyou__receipt {
    display: inline-flex; flex-direction: column; align-items: center;
    padding: 1rem 2rem;
    margin-bottom: 1.75rem;
    background: var(--color-bg);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
}
.thankyou__receipt span {
    font-size: .72rem; color: var(--color-muted);
    letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
}
.thankyou__receipt strong {
    font: 700 1.8rem var(--font-serif); color: var(--color-primary);
    letter-spacing: .05em;
}
.thankyou__actions { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }

/* ========================= Fly-to-cart animation ========================= */
.cart-fly {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    padding: .4rem .9rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    border-radius: 999px;
    font: 800 .9rem var(--font-display);
    letter-spacing: .02em;
    box-shadow: 0 10px 26px -8px rgba(139, 69, 19, .55);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition:
        transform 750ms cubic-bezier(.55, -0.2, .35, 1.2),
        opacity 650ms ease-in 100ms;
    white-space: nowrap;
}
.cart-fly--arrived {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.25);
}

/* =============================== Misc ==================================== */
.inline-form { display: inline; }
body.is-modal-open { overflow: hidden; }

@media (max-width: 720px) {
    .site-header__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: .75rem;
        column-gap: .75rem;
    }
    .site-header__brand { min-width: 0; align-items: flex-start; }
    .site-header__brand .site-header__titles {
        min-width: 0;
        line-height: 1.2;
    }
    .site-header__brand .site-header__titles strong {
        /* Statt abschneiden: umbrechen. Die Leiste waechst mit. */
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        display: block;
        font-size: 1.05rem;
    }
    .site-header__brand .site-header__titles small {
        white-space: normal;
        overflow-wrap: anywhere;
        display: block;
    }
    /* Logo nicht an vertikaler Mitte ausrichten, wenn Titel mehrzeilig wird */
    .site-header__logo,
    .site-header__logo-fallback { flex-shrink: 0; }

    .site-header__inner { align-items: flex-start; }
}

/* Sehr schmale Viewports: Logos in einer Zeile, Firmenname direkt darunter in voller Breite */
@media (max-width: 520px) {
    .site-header__brand {
        flex-wrap: wrap;
        align-items: center;
        row-gap: .3rem;
        column-gap: .55rem;
    }
    .site-header__brand .site-header__titles {
        flex: 1 1 100%;
        order: 99;        /* immer ans Ende */
        text-align: left;
        padding-left: 2px;
    }
    .site-header__brand .site-header__titles strong {
        font-size: .98rem;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }
    /* Logos etwas kleiner, damit die Zeile kompakt bleibt */
    .site-header__logo,
    .site-header__logo-fallback {
        width: 40px; height: 40px;
    }
    .site-header__sponsor-logo {
        height: 34px;
        max-width: 68px;
        padding-right: .35rem;
    }

    .site-header__nav { justify-self: end; gap: .4rem; align-items: center; }
    /* Auf Mobile nur Login-Icon + Standort + Warenkorb - alte Anmelden/Registrieren-Links ziehen sich zurueck.
       WICHTIG: .user-menu__item NICHT ausblenden, sonst verschwinden Dashboard /
       Mein Konto / Meine Bestellungen / Abmelden im Dropdown des angemeldeten
       Kunden auf dem Smartphone (das Dropdown selbst ist abs. positioniert,
       nicht Teil der Header-Aktions-Reihe). */
    .site-header__nav a:not(.btn--mobile-account):not(.header-login):not(.header-map-btn):not(.user-menu__item),
    .site-header__nav > form:not(.header-login) { display: none; }

    /* Login-Icon auf Mobile etwas kleiner, damit es neben dem Warenkorb passt */
    .header-login { margin-right: .3rem; }
    .header-login__btn { width: 40px; height: 40px; }

    /* Standort-Icon auf Mobile etwas kleiner */
    .header-map-btn { width: 40px; height: 40px; margin-right: .2rem; }
    .header-map-btn svg { width: 20px; height: 20px; }

    /* Warenkorb-Button auf Mobile deutlich hervorheben */
    .cart-menu__toggle {
        padding: .45rem .7rem .35rem;
        background: linear-gradient(180deg, #fff, var(--color-bg));
        border: 1px solid var(--color-border-strong);
        border-radius: 14px;
        box-shadow: 0 4px 10px -4px rgba(42, 24, 16, .15);
        min-width: 64px;
    }
    .cart-menu__toggle:hover,
    .cart-menu__toggle--pulse {
        background: linear-gradient(180deg, #fff, rgba(212, 162, 76, .2));
        border-color: var(--color-accent);
    }

    /* Inline-Suche auf Mobile: Button nur Lupen-Icon */
    .site-search--inline {
        padding: 3px 3px 3px .9rem;
    }
    .site-search--inline input {
        font-size: .9rem;
        padding: .5rem .25rem;
        min-width: 0;
    }
    .site-search--inline button {
        flex: 0 0 auto;
        padding: .5rem .8rem;
        gap: 0;
    }
    .site-search--inline button span { display: none; }

    .top-bar__inner { font-size: .74rem; gap: .6rem; }
    .top-bar__right { gap: .6rem; }
    /* Auf Mobile keinen Lauftext anzeigen - nur die rechten Buttons.
       Buttons rechts ausrichten, weil der linke Flex-Slot wegfaellt. */
    .top-bar__marquee { display: none; }
    .top-bar__inner { justify-content: flex-end; }
}

@media (max-width: 420px) {
    .site-header__titles strong { font-size: 1.05rem; }
    .site-header__titles small { display: none; }
    .site-search input::placeholder { font-size: .85rem; }
    .site-header__logo-fallback { width: 40px; height: 40px; font-size: .85rem; }
}

@media (max-width: 560px) {
    /* Cart-Dropdown auf Mobile: fast volle Breite, damit der Button
       "Zum Warenkorb" immer erreichbar bleibt */
    .cart-menu__dropdown {
        position: fixed;
        right: 8px; left: 8px; top: auto;
        width: auto;
        max-height: 80vh;   /* genug Platz fuer Liste + Footer */
        padding: 1rem;
    }
    .cart-menu__dropdown::before { display: none; }
    /* Footer etwas kompakter auf Mobile, damit der Button immer sichtbar ist */
    .cart-preview__footer {
        padding-top: .7rem;
        margin-top: .5rem;
        gap: .75rem;
    }
    .cart-preview__footer .btn {
        padding: .6rem .9rem;
        font-size: .78rem;
        letter-spacing: .04em;
    }
    .cart-preview__total strong { font-size: 1.1rem; }
    .cart-preview__total span { font-size: .68rem; }
}

/* ============================== Toast + Shake ============================= */
.shop-toast-host {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.shop-toast {
    background: var(--color-dark, #2a1810);
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 500;
    box-shadow: 0 12px 32px rgba(42, 24, 16, .35);
    border-left: 4px solid var(--color-accent, #d4a24c);
    max-width: min(92vw, 480px);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: auto;
}
.shop-toast--visible { opacity: 1; transform: translateY(0); }
.shop-toast--warn    { border-left-color: #e0a840; background: #4a2f12; }
.shop-toast--error   { border-left-color: #c44; }

@keyframes shopShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.shop-shake { animation: shopShake .45s ease; }

/* =============================== Sponsor-Logo im Footer ================= */
.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.site-footer__sponsor {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem .85rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(212, 162, 76, .25);
    border-radius: 10px;
    text-decoration: none;
    transition: transform .25s, background .25s, border-color .25s;
}
.site-footer__sponsor:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .09);
    border-color: rgba(212, 162, 76, .5);
}
.site-footer__sponsor-label {
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-accent, #d4a24c);
    font-weight: 600;
}
.site-footer__sponsor img {
    max-height: 34px;
    max-width: 110px;
    width: auto; height: auto;
    object-fit: contain;
}
@media (max-width: 520px) {
    .site-footer__bottom { justify-content: center; text-align: center; }
    .site-footer__sponsor img { max-height: 30px; max-width: 96px; }
}

/* ========================== Bestellmodal: 3-Optionen-Leiste =============== */
.order-modal__actions--receipts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    /* Abstand nach oben - die Receipt-Buttons (PDF/Bild/HTML) sollen sich
       optisch klar vom primaeren "Zurueck zur Speisekarte"-Button daruber
       absetzen, damit das Modal in zwei Aktions-Gruppen gelesen wird. */
    margin-top: 1rem;
    margin-bottom: 10px;
}
.order-modal__actions--receipts .btn {
    min-width: 124px;
    justify-content: center;
}
.btn--ghost {
    background: transparent;
    color: var(--color-primary, #8b4513);
    border: 1px solid var(--color-accent, #d4a24c);
}
.btn--ghost:hover {
    background: var(--color-accent, #d4a24c);
    color: #fff;
    border-color: var(--color-accent, #d4a24c);
}

/* =============================== Ausverkauft-Darstellung ================= */
/* Bild wird normal dargestellt - kein Grayscale, kein Overlay-Badge.
   Stattdessen zeigt die Aktions-Leiste einen auffaelligen darkred-Button. */
.card__soldout-note,
.menu-item__soldout,
.detail__soldout-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    background: #8b0000;              /* darkred */
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(139, 0, 0, .25);
}
.card__soldout-note   { width: 100%; }
.detail__soldout-note { width: 100%; padding: 14px 22px; font-size: .9rem; }
.menu-item__soldout   { padding: 9px 20px; }

/* =============================== Login-Icon im Header =================== */
.header-login {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 .5rem 0 0;
}
.header-login__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border, #ece0d1);
    background: #fff;
    color: var(--color-primary, #8b4513);
    cursor: pointer;
    transition: background .2s, color .2s, transform .15s, border-color .2s;
}
.header-login__btn:hover {
    background: var(--color-accent, #d4a24c);
    color: #fff;
    border-color: var(--color-accent, #d4a24c);
    transform: translateY(-1px);
}
.header-login__btn--on {
    background: linear-gradient(135deg, #8b4513 0%, #d4a24c 100%);
    color: #fff;
    border-color: transparent;
}
.header-login__btn--on:hover { filter: brightness(1.1); }

/* =============================== Standort-Icon im Header ================ */
.header-map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border, #ece0d1);
    background: #fff;
    color: var(--color-primary, #8b4513);
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, color .2s, transform .15s, border-color .2s;
    margin: 0 .25rem 0 0;
    flex-shrink: 0;
}
.header-map-btn:hover {
    background: var(--color-accent, #d4a24c);
    color: #fff;
    border-color: var(--color-accent, #d4a24c);
    transform: translateY(-1px);
    text-decoration: none;
}
.header-map-btn:focus-visible {
    outline: 2px solid var(--color-accent, #d4a24c);
    outline-offset: 2px;
}

/* =============================== Angemeldet-Leiste ====================== */
.logged-in-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 1.2rem;
    padding: .7rem 1rem;
    background: linear-gradient(135deg, rgba(139, 69, 19, .08) 0%, rgba(212, 162, 76, .12) 100%);
    border: 1px solid rgba(212, 162, 76, .25);
    border-radius: 12px;
    font-size: .9rem;
    color: var(--color-dark, #2a1810);
}

/* Hinweis direkt unter der Login-Leiste - nur sichtbar, wenn der Kunde
   ein Guthabenkonto hat. Klein, aber durch goldene Akzentlinie + Icon
   ein wenig auffaellig. Mehrsprachig via @T[] (TR ist via FixedTranslations
   gesteuert, andere Sprachen via MyMemory-Auto-Translate). */
.guthaben-hint {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: -.5rem 0 1.2rem;
    padding: .6rem .9rem .65rem;
    background: linear-gradient(135deg, rgba(212, 162, 76, .12) 0%, rgba(139, 69, 19, .06) 100%);
    border: 1px solid rgba(212, 162, 76, .35);
    border-left: 3px solid var(--color-accent, #d4a24c);
    border-radius: 10px;
    color: var(--color-primary-dark, #5d2e0d);
    font-size: .82rem;
    line-height: 1.45;
}
.guthaben-hint__icon {
    flex-shrink: 0;
    margin-top: .2em;
    color: var(--color-accent, #d4a24c);
}
.guthaben-hint span { min-width: 0; }
@media (max-width: 540px) {
    .guthaben-hint { font-size: .78rem; gap: .45rem; padding: .55rem .7rem; }
}
.logged-in-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b4513 0%, #d4a24c 100%);
    color: #fff;
    flex-shrink: 0;
}
.logged-in-bar__info {
    flex: 1 1 auto;
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: .45rem;
    min-width: 0;
}
.logged-in-bar__label {
    color: var(--color-muted, #8a7a6b);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.logged-in-bar__name { font-weight: 700; font-size: 1rem; }
.logged-in-bar__sep  { color: var(--color-accent, #d4a24c); }
.logged-in-bar__kdnr { color: var(--color-muted, #8a7a6b); font-size: .85rem; }
.logged-in-bar__kdnr b { color: var(--color-dark, #2a1810); font-weight: 700; }
.logged-in-bar__guthaben {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #e0f5e4 0%, #c4ebcf 100%);
    border: 1px solid #1f6b38;
    color: #1f6b38;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
}
.logged-in-bar__guthaben b {
    color: #0f4a24;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.logged-in-bar__guthaben-label {
    font-weight: 500;
    opacity: .85;
}
.logged-in-bar__guthaben--neg {
    background: linear-gradient(135deg, #fde0dc 0%, #f7c4bd 100%);
    border-color: #b91c1c;
    color: #b91c1c;
}
.logged-in-bar__guthaben--neg b { color: #7a0f0f; }
@media (max-width: 640px) {
    .logged-in-bar__guthaben-label { display: none; }
}
.logged-in-bar__logout-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--color-border, #ece0d1);
    color: var(--color-primary, #8b4513);
    border-radius: 20px;
    font-size: .78rem; font-weight: 600;
    letter-spacing: .05em;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.logged-in-bar__logout-btn:hover {
    background: var(--color-primary, #8b4513);
    color: #fff;
    border-color: var(--color-primary, #8b4513);
}

/* Auffaellige Logout-Pille - wird jetzt rechts in der Zeile angezeigt.
   Farbe bewusst wie .btn--primary (Mahagoni-Braun), damit sie zur
   restlichen Shop-Optik passt. */
.logged-in-bar__logout--left,
.logged-in-bar__logout--right { margin: 0; flex: 0 0 auto; margin-left: auto; }
.logged-in-bar__logout-icon {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    border: 2px solid var(--color-primary-dark, #5d2e0d);
    background: linear-gradient(135deg, var(--color-primary, #8b4513), var(--color-primary-dark, #5d2e0d));
    color: #fff;
    font: 700 .82rem 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(93, 46, 13, .25);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.logged-in-bar__logout-icon svg { flex-shrink: 0; }
.logged-in-bar__logout-icon:hover,
.logged-in-bar__logout-icon:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(93, 46, 13, .45);
    filter: brightness(1.08);
    outline: none;
}
.logged-in-bar__logout-icon:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(93, 46, 13, .35);
}

@media (max-width: 520px) {
    .logged-in-bar { gap: .7rem; padding: .6rem .8rem; }
    .logged-in-bar__info { font-size: .85rem; }
    .logged-in-bar__logout-btn span { display: none; }
    /* Auf schmalen Phones nur Icon + kleiner Text */
    .logged-in-bar__logout-icon { padding: .45rem .7rem; font-size: .72rem; }
}

/* =============================== Modernes Login ========================= */
.login-hero {
    min-height: 70vh;
    display: grid;
    place-items: center;
    padding: 3rem 1rem;
}
.login-card {
    width: min(440px, 100%);
    background: #fff;
    border-radius: 20px;
    padding: 2.4rem 2rem;
    box-shadow: 0 24px 60px rgba(93, 46, 13, .18);
    border: 1px solid var(--color-border, #ece0d1);
}
.login-card__brand {
    text-align: center;
    margin-bottom: 1.8rem;
}
.login-card__orb {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b4513 0%, #d4a24c 100%);
    color: #fff;
    margin-bottom: 1rem;
    box-shadow: 0 12px 24px rgba(139, 69, 19, .3);
}
.login-card__title {
    margin: 0 0 .3rem;
    font: 700 1.7rem 'Playfair Display', Georgia, serif;
    color: var(--color-dark, #2a1810);
    letter-spacing: -.01em;
}
.login-card__subtitle {
    color: var(--color-muted, #8a7a6b);
    font-size: .92rem;
    margin: 0;
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
/* "Noch kein Konto? Jetzt registrieren"-Box unter dem Anmelden-Button */
.login-register-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px dashed #e6d4b8;
}
.login-register-row__text {
    color: #8a7a6b;
    font-size: .9rem;
}
.login-register-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.3rem;
    background: linear-gradient(135deg, #d4a24c 0%, #f5d591 100%);
    color: #5d2e0d;
    text-decoration: none;
    font: 700 .95rem 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .02em;
    border-radius: 999px;
    border: 1px solid #c48a2a;
    box-shadow: 0 4px 12px rgba(212, 162, 76, .35);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-register-cta:hover,
.login-register-cta:focus-visible {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #e4b560 0%, #ffe4a8 100%);
    box-shadow: 0 6px 18px rgba(212, 162, 76, .5);
    color: #3d1e07;
    text-decoration: none;
    outline: none;
}
.login-register-cta:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(212, 162, 76, .35); }
.login-register-cta svg { flex-shrink: 0; }
.login-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff4f4;
    color: #a33;
    border: 1px solid #f5caca;
    border-radius: 10px;
    font-size: .87rem;
}
.login-alert ul { margin: 0; padding: 0; list-style: none; }
.login-field {
    display: flex; align-items: center;
    background: #faf5ee;
    border: 1px solid var(--color-border, #ece0d1);
    border-radius: 12px;
    padding: 0 12px;
    transition: border-color .2s, background .2s;
}
.login-field:focus-within {
    border-color: var(--color-accent, #d4a24c);
    background: #fff;
}
.login-field__icon {
    color: var(--color-muted, #8a7a6b);
    margin-right: 10px;
    display: inline-flex;
}
.login-field input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 14px 0;
    font-size: .95rem;
    outline: none;
    color: var(--color-dark, #2a1810);
}
.login-field input::placeholder { color: #a89989; }
.login-field__toggle {
    background: transparent; border: none; padding: 4px;
    color: var(--color-muted, #8a7a6b);
    cursor: pointer; display: inline-flex;
}
.login-field__toggle:hover { color: var(--color-primary, #8b4513); }
.login-field-error {
    color: #a33; font-size: .78rem; margin: -4px 0 4px 8px;
    display: block;
}
.login-field-error:empty { display: none; }
.login-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .86rem; color: var(--color-muted, #8a7a6b);
    margin-bottom: .3rem;
}
.login-check {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
}
.login-divider {
    text-align: center;
    color: var(--color-muted, #8a7a6b);
    font-size: .82rem;
    margin: .2rem 0;
    position: relative;
}
.login-divider::before,
.login-divider::after {
    content: ''; position: absolute; top: 50%; width: 40%;
    border-top: 1px solid var(--color-border, #ece0d1);
}
.login-divider::before { left: 0; }
.login-divider::after  { right: 0; }
.login-divider span {
    background: #fff; padding: 0 10px; position: relative; z-index: 1;
}

/* =============================== User-Menue (Hamburger) ================= */
.user-menu { position: relative; margin-right: .5rem; }
.user-menu__dropdown[hidden] { display: none; }
.user-menu__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--color-border, #ece0d1);
    border-radius: 12px;
    box-shadow: 0 16px 44px rgba(42, 24, 16, .18);
    padding: .4rem;
    z-index: 50;
    animation: menuFadeIn .18s ease-out;
}
@keyframes menuFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.user-menu__head {
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--color-border, #ece0d1);
    margin-bottom: 4px;
}
.user-menu__name { font-weight: 700; font-size: .95rem; color: var(--color-dark, #2a1810); }
.user-menu__sub  { font-size: .78rem; color: var(--color-muted, #8a7a6b); margin-top: 2px; }
.user-menu__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-dark, #2a1810);
    font-size: .92rem;
    background: transparent; border: none;
    cursor: pointer;
    text-align: left;
    transition: background .15s, color .15s;
}
.user-menu__item:hover {
    background: var(--color-bg, #faf5ee);
    color: var(--color-primary, #8b4513);
    text-decoration: none;
}
.user-menu__item--danger:hover { color: #a33; }
.user-menu__logout { margin: 0; }

/* =============================== Konto-Seite ============================= */
.konto { max-width: 880px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.konto__head {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.4rem 1.6rem;
    background: linear-gradient(135deg, rgba(139, 69, 19, .08) 0%, rgba(212, 162, 76, .14) 100%);
    border: 1px solid rgba(212, 162, 76, .3);
    border-radius: 14px;
    margin-bottom: 1.2rem;
}
.konto__avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b4513 0%, #d4a24c 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.konto__identity { flex: 1 1 auto; min-width: 0; }
.konto__eyebrow {
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--color-muted, #8a7a6b);
    font-weight: 600;
}
.konto__name { font: 700 1.5rem 'Playfair Display', Georgia, serif; margin: 2px 0 4px; color: var(--color-dark, #2a1810); }
.konto__kdnr { font-size: .88rem; color: var(--color-muted, #8a7a6b); }
.konto__kdnr strong { color: var(--color-dark, #2a1810); }

.konto__guthaben {
    display: flex; align-items: center; gap: 1.2rem;
    padding: 1.4rem 1.6rem;
    background: linear-gradient(135deg, #5d2e0d 0%, #8b4513 100%);
    color: #fff;
    border-radius: 14px;
    margin-bottom: 1.2rem;
    box-shadow: 0 12px 28px rgba(93, 46, 13, .2);
    flex-wrap: wrap;
}
.konto__guthaben-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: #f5d591;
}
.konto__guthaben-amount {
    font: 700 clamp(1.6rem, 3.5vw, 2.2rem) 'Playfair Display', Georgia, serif;
    flex: 1 1 auto;
    letter-spacing: -.01em;
}
.konto__guthaben .btn { background: #fff; color: var(--color-primary, #8b4513); border: none; }
.konto__guthaben .btn:hover { background: var(--color-accent, #d4a24c); color: #fff; }

.konto__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.konto__card {
    background: #fff;
    border: 1px solid var(--color-border, #ece0d1);
    border-radius: 14px;
    padding: 1.2rem 1.4rem;
}
.konto__card-title {
    margin: 0 0 .8rem;
    font-size: .88rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-accent, #d4a24c);
    font-weight: 700;
}
.konto__list { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: .9rem; }
.konto__list dt { color: var(--color-muted, #8a7a6b); }
.konto__list dd { margin: 0; color: var(--color-dark, #2a1810); }
.konto__address { font-style: normal; color: var(--color-dark, #2a1810); font-size: .9rem; line-height: 1.65; }
.konto__logout .btn { padding: 6px 14px; font-size: .82rem; }
.konto__loading, .konto__error { padding: 1.4rem; text-align: center; color: var(--color-muted, #8a7a6b); }
.konto__error { color: #a33; }

/* Konto-Formular */
.konto__alert {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    margin-bottom: 1rem;
    border-radius: 10px;
    font-size: .88rem;
}
.konto__alert--ok   { background: rgba(22, 163, 74, .1);  color: #166534; border: 1px solid rgba(22, 163, 74, .3); }
.konto__alert--warn { background: rgba(185, 28, 28, .08); color: #7f1d1d; border: 1px solid rgba(185, 28, 28, .3); }

.konto__form { margin-top: 0; }
.konto__row { margin-bottom: 12px; }
.konto__row--split,
.konto__row--plz-ort {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.konto__row--plz-ort { grid-template-columns: 120px 1fr; }
.konto__label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    color: var(--color-muted, #8a7a6b);
    margin-bottom: 4px;
}
.konto__req { color: #b91c1c; font-size: .9rem; margin-left: 2px; }
.konto__input {
    width: 100%;
    padding: 10px 12px;
    background: #faf5ee;
    border: 1px solid var(--color-border, #ece0d1);
    border-radius: 10px;
    color: var(--color-dark, #2a1810);
    font-size: .95rem;
    font-family: inherit;
    transition: border-color .15s, background .15s;
    box-sizing: border-box;
}
.konto__input:focus {
    outline: none;
    border-color: var(--color-accent, #d4a24c);
    background: #fff;
}
.konto__input--readonly {
    background: #f1e8d8;
    color: var(--color-muted, #8a7a6b);
    cursor: not-allowed;
}
.konto__error { color: #a33; font-size: .8rem; margin-top: 4px; display: inline-block; padding: 0; }

/* Passwort-Aenderungs-Sektion (aufklappbar unter Kontaktdaten) */
.konto__pw {
    margin-top: 18px;
    border-top: 1px dashed var(--color-border, #ece0d1);
    padding-top: 14px;
}
.konto__pw-summary {
    display: inline-flex; align-items: center; gap: .5rem;
    cursor: pointer;
    font: 700 .78rem 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary, #8b4513);
    list-style: none;
    padding: 4px 0;
    user-select: none;
}
.konto__pw-summary::-webkit-details-marker { display: none; }
.konto__pw-summary small {
    font-size: .65rem; font-weight: 500;
    color: var(--color-muted, #8a7a6b);
    text-transform: lowercase;
    letter-spacing: .06em;
}
.konto__pw-summary::after {
    content: '▸';
    margin-left: .3rem;
    color: var(--color-accent, #d4a24c);
    transition: transform .2s;
}
.konto__pw[open] > .konto__pw-summary::after { transform: rotate(90deg); }
.konto__pw-body {
    margin-top: 12px;
    padding: 14px;
    border-radius: 10px;
    background: #faf5ee;
    border: 1px solid var(--color-border, #ece0d1);
}
.konto__pw-hint {
    display: flex; align-items: center; gap: 6px;
    margin-top: 4px;
    font-size: .78rem;
    color: var(--color-muted, #8a7a6b);
}
.konto__form-actions {
    display: flex; justify-content: flex-end;
    margin-top: 1.2rem;
}
.konto__form-actions .btn { min-width: 180px; }
@media (max-width: 520px) {
    .konto__row--plz-ort,
    .konto__row--split { grid-template-columns: 1fr; }
    .konto__form-actions { justify-content: stretch; }
    .konto__form-actions .btn { width: 100%; }
}

/* =============================== Verkaufshistorie-Kontenblatt ========== */
.modal__dialog--lg { width: min(860px, calc(100% - 2rem)); }

.statement__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.6rem 1rem;
    border-bottom: 1px solid var(--color-border, #ece0d1);
    flex-wrap: wrap;
}
.statement__head h2 {
    margin: 0;
    font: 700 1.4rem 'Playfair Display', Georgia, serif;
    color: var(--color-dark, #2a1810);
}
.statement__saldo-label { color: var(--color-muted, #8a7a6b); font-size: .85rem; }
.statement__saldo-value { color: var(--color-primary, #8b4513); font-size: 1.2rem; margin-left: .4rem; }
.statement__empty { padding: 2rem; text-align: center; color: var(--color-muted, #8a7a6b); }

.statement__table {
    max-height: 65vh;
    overflow-y: auto;
    padding: 0 .8rem;
}
.statement__thead {
    display: grid;
    grid-template-columns: 110px 1fr 120px 110px;
    gap: 10px;
    padding: 10px 14px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--color-muted, #8a7a6b);
    font-weight: 700;
    border-bottom: 1px solid var(--color-border, #ece0d1);
    background: #faf5ee;
    position: sticky; top: 0; z-index: 1;
}
.statement__row {
    border-bottom: 1px solid var(--color-border, #ece0d1);
    transition: background .15s;
}
.statement__row:hover { background: rgba(212, 162, 76, .04); }
.statement__row > summary {
    display: grid;
    grid-template-columns: 110px 1fr 120px 110px;
    gap: 10px;
    padding: 12px 14px;
    align-items: center;
    cursor: default;
    list-style: none;
    position: relative;
}
.statement__row > summary::-webkit-details-marker { display: none; }
.statement__row--sale > summary,
.statement__row--return > summary { cursor: pointer; }
.statement__row--sale > summary::before,
.statement__row--return > summary::before {
    content: '▸';
    position: absolute;
    left: -2px;
    color: var(--color-accent, #d4a24c);
    font-size: .8rem;
    transition: transform .2s;
}
.statement__row[open] > summary::before { transform: rotate(90deg); }
.statement__row--sale > summary,
.statement__row--return > summary { padding-left: 18px; }

.statement__col-date {
    display: flex; flex-direction: column;
    font-size: .82rem;
}
.statement__date-day {
    font-weight: 600;
    color: var(--color-dark, #2a1810);
}
.statement__date-time {
    color: var(--color-muted, #8a7a6b);
    font-size: .72rem;
}
.statement__col-label { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.statement__badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.statement__row--load   .statement__badge { background: rgba(42, 164, 77, .12); color: #1f6b38; }
.statement__row--refund .statement__badge { background: rgba(163, 58, 58, .12); color: #7a2323; }
.statement__row--sale   .statement__badge { background: rgba(180, 83, 9, .12);  color: #7c3e09; }
.statement__row--return .statement__badge { background: rgba(42, 164, 77, .12); color: #1f6b38; }
.statement__belegnr {
    font-size: .82rem;
    color: var(--color-muted, #8a7a6b);
    font-weight: 600;
}
.statement__toggle-hint {
    font-size: .75rem;
    color: var(--color-accent, #d4a24c);
    font-weight: 600;
}
.statement__col-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.statement__col-amount.is-plus  { color: #1f6b38; }
.statement__col-amount.is-minus { color: #7a2323; }
.statement__col-balance {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-dark, #2a1810);
}

.statement__detail {
    padding: 0 14px 14px 32px;
    background: #faf5ee;
}
.statement__items {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}
.statement__items thead th {
    text-align: left;
    padding: 8px 10px;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-muted, #8a7a6b);
    font-weight: 700;
    background: #f1e8d8;
    border-bottom: 1px solid var(--color-border, #ece0d1);
}
.statement__items tbody td { padding: 8px 10px; border-bottom: 1px solid var(--color-border, #ece0d1); }
.statement__items tbody td small { color: var(--color-muted, #8a7a6b); }
.statement__items tbody tr:last-child td { border-bottom: none; }

/* Sektions-Ueberschriften innerhalb der Verkaufshistorie */
.statement__section {
    margin: 1.1rem 1.6rem .2rem;
    font: 700 .78rem 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-primary, #8b4513);
    padding-bottom: .3rem;
    border-bottom: 1px dashed var(--color-border, #ece0d1);
}
.statement__section--direct { color: #7c3e09; }
.statement__section-hint {
    margin: 0 1.6rem .4rem;
    color: var(--color-muted, #8a7a6b);
    font-size: .78rem;
    font-style: italic;
}

/* Tabelle ohne Saldo-Spalte (Direktverkaufs-Liste) */
.statement__table--nosaldo .statement__thead,
.statement__table--nosaldo .statement__row > summary {
    grid-template-columns: 110px 1fr 120px;
}

.statement__foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    padding: 1rem 1.6rem 1.4rem;
    border-top: 2px solid var(--color-accent, #d4a24c);
    background: #faf5ee;
}
.statement__foot div span { color: var(--color-muted, #8a7a6b); font-size: .82rem; display: block; }
.statement__foot div strong { color: var(--color-dark, #2a1810); font-size: 1rem; }
.statement__foot-total strong { color: var(--color-primary, #8b4513); font-size: 1.1rem; }

@media (max-width: 640px) {
    .statement__thead,
    .statement__row > summary {
        grid-template-columns: 84px 1fr 100px;
    }
    .statement__thead > :nth-child(3),
    .statement__row > summary > .statement__col-balance {
        display: none;
    }
    .statement__table--nosaldo .statement__thead,
    .statement__table--nosaldo .statement__row > summary {
        grid-template-columns: 84px 1fr 100px;
    }
    .statement__col-amount { font-size: .85rem; }
    .statement__date-day   { font-size: .78rem; }
}

/* --- Alte history__*-Regeln komplett uebersteuert durch .statement__* --- */

/* =============================== Dashboard ============================== */
.dash { max-width: 1100px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.dash__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.dash__eyebrow {
    font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--color-muted, #8a7a6b); font-weight: 600;
}
.dash__title {
    margin: 2px 0 .3rem;
    font: 700 clamp(1.6rem, 3vw, 2.2rem) 'Playfair Display', Georgia, serif;
    color: var(--color-dark, #2a1810);
}
.dash__subtitle { margin: 0; color: var(--color-muted, #8a7a6b); font-size: .94rem; }

/* KPI-Kacheln */
.dash__kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.kpi {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--color-border, #ece0d1);
    border-radius: 14px;
    transition: transform .15s, box-shadow .2s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(42, 24, 16, .08); }
.kpi__icon {
    flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(139, 69, 19, .08), rgba(212, 162, 76, .2));
    color: var(--color-primary, #8b4513);
}
.kpi--primary .kpi__icon { background: linear-gradient(135deg, #8b4513, #d4a24c); color: #fff; }
.kpi--accent  .kpi__icon { background: linear-gradient(135deg, #5d2e0d, #a0662f); color: #fff; }
.kpi__content { min-width: 0; }
.kpi__label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted, #8a7a6b); font-weight: 600; }
.kpi__value {
    margin-top: 4px;
    font: 700 clamp(1.2rem, 2.4vw, 1.5rem) 'Playfair Display', Georgia, serif;
    color: var(--color-dark, #2a1810);
    font-variant-numeric: tabular-nums;
}
.kpi__sub { color: var(--color-muted, #8a7a6b); font-size: .75rem; margin-top: 2px; display: block; }

/* Chart/Card-Grid */
.dash__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.dash-card {
    background: #fff;
    border: 1px solid var(--color-border, #ece0d1);
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
}
.dash-card--wide { grid-column: span 2; }
@media (max-width: 720px) { .dash-card--wide { grid-column: span 1; } }
.dash-card__head { margin-bottom: .9rem; }
.dash-card__head h3 {
    margin: 0; font: 700 1.02rem 'Playfair Display', Georgia, serif; color: var(--color-dark, #2a1810);
}
.dash-card__head small { color: var(--color-muted, #8a7a6b); font-size: .78rem; }
.dash-card__empty { padding: 1.5rem; text-align: center; color: var(--color-muted, #8a7a6b); }

/* Chart-Wrapper mit FIXER Hoehe - Chart.js wuerde sonst unendlich wachsen
   (Responsive + Grid-Container ohne feste Hoehe = Endlos-Resize-Loop). */
.dash-chart {
    position: relative;
    width: 100%;
    height: 240px;
}
.dash-chart--donut { height: 220px; }
.dash-chart > canvas {
    position: absolute; inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Kategorien-Legende unter Donut */
.dash-legend {
    list-style: none; margin: 1rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.dash-legend li {
    display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center;
    font-size: .82rem;
}
.dash-legend__dot { width: 10px; height: 10px; border-radius: 50%; }
.dash-legend__label { color: var(--color-dark, #2a1810); }
.dash-legend__val { color: var(--color-muted, #8a7a6b); font-variant-numeric: tabular-nums; }

/* Top-Artikel-Liste */
.top-list { list-style: none; margin: 0; padding: 0; counter-reset: top; }
.top-list__item {
    counter-increment: top;
    padding: 10px 0 14px;
    border-top: 1px solid var(--color-border, #ece0d1);
}
.top-list__item:first-child { border-top: none; }
.top-list__head {
    display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline;
}
.top-list__name {
    display: flex; flex-direction: column;
    font-size: .92rem; font-weight: 600; color: var(--color-dark, #2a1810);
}
.top-list__name::before {
    content: counter(top);
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-right: 8px;
    background: rgba(212, 162, 76, .18);
    color: var(--color-primary, #8b4513);
    border-radius: 6px;
    font-size: .72rem; font-weight: 700;
    vertical-align: middle;
}
.top-list__name small { color: var(--color-muted, #8a7a6b); font-weight: 400; font-size: .72rem; margin-left: 32px; }
.top-list__stats { display: flex; gap: 12px; align-items: baseline; font-variant-numeric: tabular-nums; }
.top-list__qty { color: var(--color-muted, #8a7a6b); font-size: .82rem; }
.top-list__sum { color: var(--color-primary, #8b4513); font-size: 1rem; }
.top-list__bar {
    margin: 6px 0 0 32px;
    background: rgba(139, 69, 19, .08);
    border-radius: 99px;
    overflow: hidden;
    height: 6px;
}
.top-list__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #d4a24c, #8b4513);
    border-radius: 99px;
    transition: width .3s;
}

/* Zuletzt eingekauft */
.recent { list-style: none; margin: 0; padding: 0; }
.recent li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid var(--color-border, #ece0d1);
}
.recent li:first-child { border-top: none; }
.recent li > div { display: flex; flex-direction: column; min-width: 0; }
.recent li strong { color: var(--color-dark, #2a1810); font-size: .92rem; }
.recent li small { color: var(--color-muted, #8a7a6b); font-size: .78rem; margin-top: 2px; }
.recent__amount { font-weight: 700; color: var(--color-primary, #8b4513); font-variant-numeric: tabular-nums; }

/* Call-to-Action */
.dash__cta {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
    padding: 1.5rem 1.8rem;
    background: linear-gradient(135deg, #5d2e0d 0%, #8b4513 100%);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(93, 46, 13, .25);
}
.dash__cta p { margin: 0; color: #f5d591; font-size: 1rem; }
.dash__cta .btn { background: #fff; color: var(--color-primary, #8b4513); border: none; }
.dash__cta .btn:hover { background: var(--color-accent, #d4a24c); color: #fff; }
.history__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.6rem 1rem;
    border-bottom: 1px solid var(--color-border, #ece0d1);
    flex-wrap: wrap;
}
.history__head h2 { margin: 0; font: 700 1.4rem 'Playfair Display', Georgia, serif; color: var(--color-dark, #2a1810); }
.history__sum-label { color: var(--color-muted, #8a7a6b); font-size: .85rem; }
.history__sum-value { color: var(--color-primary, #8b4513); font-size: 1.2rem; margin-left: .4rem; }
.history__empty { padding: 2rem; text-align: center; color: var(--color-muted, #8a7a6b); }
.history__timeline {
    list-style: none; margin: 0; padding: 1rem 1.4rem; max-height: 60vh; overflow-y: auto;
}
.history__entry {
    background: #faf5ee;
    border: 1px solid var(--color-border, #ece0d1);
    border-radius: 10px;
    padding: .8rem 1rem;
    margin-bottom: .8rem;
}
.history__entry-head {
    display: flex; justify-content: space-between; gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.history__entry-stats { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.history__pill {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .03em;
}
.history__pill--plus  { background: rgba(42, 164, 77, .12); color: #1f6b38; }
.history__pill--minus { background: rgba(163, 58, 58, .12); color: #7a2323; }
.history__pill--rest  { background: rgba(139, 69, 19, .1);  color: var(--color-primary, #8b4513); }
.history__date {
    display: block; margin-top: 2px;
    font-size: .75rem; color: var(--color-muted, #8a7a6b);
}
.history__entry--orphan {
    background: rgba(139, 69, 19, .04);
    border-style: dashed;
}
.history__entry-guthaben {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.history__entry-meta { display: flex; flex-direction: column; }
.history__entry-type {
    font-size: .8rem;
    color: var(--color-dark, #2a1810);
    font-weight: 600;
    letter-spacing: .02em;
}
.history__bon-list {
    list-style: none;
    margin: .8rem 0 0;
    padding: 0;
    border-top: 1px dashed var(--color-border, #ece0d1);
}
.history__bon {
    padding: .7rem .2rem;
    border-top: 1px solid var(--color-border, #ece0d1);
}
.history__bon:first-child { border-top: none; }
.history__bon--return { background: rgba(42, 164, 77, .04); border-radius: 6px; }
.history__bon-head {
    display: grid;
    grid-template-columns: 90px 1fr auto auto;
    gap: 10px;
    align-items: baseline;
    font-size: .86rem;
    padding: 0 .4rem;
}
.history__bon-nr    { font-weight: 700; color: var(--color-dark, #2a1810); }
.history__bon-date  { color: var(--color-muted, #8a7a6b); }
.history__bon-tag {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: rgba(163, 58, 58, .1); color: #7a2323;
}
.history__bon--return .history__bon-tag { background: rgba(42, 164, 77, .12); color: #1f6b38; }
.history__bon-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.history__bon-total.is-plus  { color: #1f6b38; }
.history__bon-total.is-minus { color: #7a2323; }
.history__items { margin-left: .4rem; margin-right: .4rem; }
.history__items { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: .82rem; }
.history__items thead th {
    text-align: left;
    padding: 4px 8px;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-muted, #8a7a6b);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border, #ece0d1);
}
.history__items tbody td { padding: 6px 8px; border-bottom: 1px solid var(--color-border, #ece0d1); }
.history__items tbody td small { color: var(--color-muted, #8a7a6b); }
.history__foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    padding: 1rem 1.6rem 1.4rem;
    border-top: 2px solid var(--color-accent, #d4a24c);
    background: #faf5ee;
}
.history__foot div span { color: var(--color-muted, #8a7a6b); font-size: .82rem; display: block; }
.history__foot div strong { color: var(--color-dark, #2a1810); font-size: 1rem; }
.history__foot-total strong { color: var(--color-primary, #8b4513); font-size: 1.1rem; }
.txt-right { text-align: right; }

/* =============================== Guthaben-Info im Warenkorb ============== */
.guthaben-info {
    margin: 12px 0 4px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid;
    font-size: .9rem;
}
.guthaben-info--ok {
    background: rgba(42, 164, 77, .06);
    border-color: rgba(42, 164, 77, .35);
}
.guthaben-info--low {
    background: rgba(212, 100, 40, .07);
    border-color: rgba(212, 100, 40, .35);
}
.guthaben-info__row {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 2px 0;
}
.guthaben-info__row--available {
    border-top: 1px dashed rgba(0,0,0,.08);
    padding-top: 6px;
    margin-top: 4px;
}
.guthaben-info__label { color: var(--color-muted, #8a7a6b); }
.guthaben-info__val   { font-weight: 700; color: var(--color-dark, #2a1810); }
.guthaben-info__row--available .guthaben-info__val { font-size: 1.08rem; }
.guthaben-info__val--minus { color: #7a3b17; }
.guthaben-info--ok  .guthaben-info__row--available .guthaben-info__val { color: #1f6b38; }
.guthaben-info--low .guthaben-info__row--available .guthaben-info__val { color: #7a3b17; }
.guthaben-info__msg {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,.06);
    font-size: .82rem;
    line-height: 1.5;
}
.guthaben-info__msg--ok  { color: #1f6b38; }
.guthaben-info__msg--low { color: #7a3b17; }
.guthaben-info__msg svg { flex-shrink: 0; margin-top: 2px; }

.cart-preview__total ~ .guthaben-info,
.cart-preview ~ .guthaben-info {
    margin: 10px 14px 14px;
}

/* =============================== Bestellungen-Seite ====================== */
.bestellungen { max-width: 920px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.bestellungen__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.bestellungen__eyebrow {
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-muted, #8a7a6b);
    font-weight: 600;
}
.bestellungen__title {
    margin: 2px 0 0;
    font: 700 clamp(1.5rem, 3vw, 2rem) 'Playfair Display', Georgia, serif;
    color: var(--color-dark, #2a1810);
}
.bestellungen__hint {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    margin-bottom: 1rem;
    background: rgba(212, 162, 76, .1);
    border: 1px solid rgba(212, 162, 76, .35);
    border-radius: 12px;
    font-size: .88rem;
    color: #7a3b17;
}
.bestellungen__hint strong { color: var(--color-primary, #8b4513); }

.status-chips {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    background: #faf5ee;
    border: 1px solid var(--color-border, #ece0d1);
    border-radius: 99px;
    margin-bottom: 1rem;
}
.status-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border-radius: 99px;
    text-decoration: none;
    color: var(--color-dark, #2a1810);
    font-weight: 600;
    font-size: .88rem;
    transition: background .2s, color .2s, box-shadow .2s;
    cursor: pointer;
}
.status-chip:hover { background: #fff; text-decoration: none; }
.status-chip--active {
    background: #fff;
    box-shadow: 0 2px 8px rgba(42, 24, 16, .08);
    color: var(--color-primary, #8b4513);
}
.status-chip__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #d4a24c;
}
.status-chip__dot--pending { background: #d97706; }
.status-chip__dot--done    { background: #16a34a; }
.status-chip__dot--cancel  { background: #b91c1c; }
.status-chip__count {
    font-size: .72rem;
    padding: 2px 8px;
    background: rgba(0,0,0,.05);
    border-radius: 99px;
    color: var(--color-muted, #8a7a6b);
}
.status-chip--active .status-chip__count {
    background: var(--color-primary, #8b4513);
    color: #fff;
}

.bestellungen__empty {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--color-muted, #8a7a6b);
    background: #fff;
    border: 1px dashed var(--color-border, #ece0d1);
    border-radius: 14px;
}
.bestellungen__empty svg { color: #c9b898; margin-bottom: 1rem; }

.bestellungen__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bestell-card {
    background: #fff;
    border: 1px solid var(--color-border, #ece0d1);
    border-radius: 14px;
    transition: border-color .2s, box-shadow .2s;
}
.bestell-card:hover { border-color: rgba(212, 162, 76, .5); }
.bestell-card[open] {
    box-shadow: 0 8px 20px rgba(42, 24, 16, .08);
    border-color: rgba(212, 162, 76, .55);
}
.bestell-card__head {
    display: grid;
    grid-template-columns: 16px auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}
.bestell-card__head::-webkit-details-marker { display: none; }
.bestell-card__chevron {
    color: var(--color-accent, #d4a24c);
    transition: transform .2s;
    display: inline-block;
    font-size: .9rem;
}
.bestell-card[open] .bestell-card__chevron { transform: rotate(90deg); }
.bestell-card__nr {
    display: flex; flex-direction: column;
    min-width: 120px;
}
.bestell-card__nr-label {
    font-size: .68rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--color-muted, #8a7a6b);
    font-weight: 600;
}
.bestell-card__nr strong {
    font: 700 1.2rem 'Playfair Display', Georgia, serif;
    color: var(--color-primary, #8b4513);
    margin-top: 2px;
}
.bestell-card__meta {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
    font-size: .82rem;
    color: var(--color-muted, #8a7a6b);
}
.bestell-card__date {
    display: inline-flex; align-items: center; gap: 6px;
}
.bestell-card__poscount {
    font-size: .75rem;
    color: var(--color-accent, #d4a24c);
    font-weight: 600;
}
.bestell-card__price {
    font: 700 1.1rem Georgia, serif;
    color: var(--color-dark, #2a1810);
    font-variant-numeric: tabular-nums;
}
.bestell-card__body {
    padding: 0 18px 16px 44px;
    border-top: 1px solid var(--color-border, #ece0d1);
    padding-top: 12px;
    background: #faf5ee;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}
.bestell-card__empty { color: var(--color-muted, #8a7a6b); padding: .5rem 0 .8rem; }

.bestell-items {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    font-size: .88rem;
}
.bestell-items thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-muted, #8a7a6b);
    font-weight: 700;
    background: #f1e8d8;
    border-bottom: 1px solid var(--color-border, #ece0d1);
}
.bestell-items tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border, #ece0d1);
}
.bestell-items tbody tr:last-child td { border-bottom: none; }
.bestell-items tbody td small { color: var(--color-muted, #8a7a6b); }
.bestell-items tfoot td {
    padding: 10px 12px;
    background: #faf5ee;
    font-size: .92rem;
    border-top: 2px solid var(--color-accent, #d4a24c);
    color: var(--color-dark, #2a1810);
}
.bestell-items tfoot td strong {
    color: var(--color-primary, #8b4513);
    font-size: 1rem;
}

.bestell-card__actions {
    display: inline-flex; gap: 6px; flex-wrap: wrap;
    margin-top: 4px;
}
.bestell-card__actions .btn { padding: 6px 12px; font-size: .8rem; }

.status-pill {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.status-pill--pending { background: rgba(217, 119, 6, .12);  color: #955006; }
.status-pill--done    { background: rgba(22, 163, 74, .12); color: #166534; }
.status-pill--cancel  { background: rgba(185, 28, 28, .12); color: #7f1d1d; }

.bestellungen__alert {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    margin-bottom: 1rem;
    border-radius: 10px;
    font-size: .88rem;
}
.bestellungen__alert--ok {
    background: rgba(22, 163, 74, .1);
    color: #166534;
    border: 1px solid rgba(22, 163, 74, .3);
}
.bestellungen__alert--warn {
    background: rgba(185, 28, 28, .08);
    color: #7f1d1d;
    border: 1px solid rgba(185, 28, 28, .3);
}

.bestell-card__storno-form { display: inline-flex; margin: 0; }

/* =============================== Confirm-Modal ========================== */
.confirm-modal {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center;
    padding: 1rem;
    animation: modalIn 180ms ease-out;
}
.confirm-modal[hidden] { display: none; }
.confirm-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(26, 15, 8, .6);
    backdrop-filter: blur(4px);
}
.confirm-modal__dialog {
    position: relative;
    width: min(440px, 100%);
    background: #fff;
    border-radius: 16px;
    padding: 2rem 1.8rem 1.5rem;
    box-shadow: 0 24px 60px rgba(93, 46, 13, .25);
    text-align: center;
    animation: dialogIn 220ms cubic-bezier(.2,.8,.2,1);
}
.confirm-modal__icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(185, 28, 28, .1);
    color: #b91c1c;
    margin-bottom: .9rem;
}
.confirm-modal__title {
    margin: 0 0 .5rem;
    font: 700 1.25rem 'Playfair Display', Georgia, serif;
    color: var(--color-dark, #2a1810);
}
.confirm-modal__text {
    margin: 0 0 1.4rem;
    color: var(--color-muted, #8a7a6b);
    font-size: .95rem;
    line-height: 1.55;
}
.confirm-modal__actions {
    display: flex; gap: 10px; justify-content: center;
    flex-wrap: wrap;
}
.confirm-modal__actions .btn {
    min-width: 130px;
    padding: 10px 20px;
}
.btn--danger {
    background: #fff;
    color: #b91c1c;
    border: 1px solid rgba(185, 28, 28, .4);
    transition: background .15s, color .15s, border-color .15s;
}
.btn--danger:hover {
    background: #b91c1c;
    color: #fff;
    border-color: #b91c1c;
}

@media (max-width: 640px) {
    .bestell-card__head {
        grid-template-columns: 16px 1fr;
        gap: 8px 12px;
        padding: 12px 14px;
    }
    .bestell-card__chevron { grid-row: span 3; }
    .bestell-card__nr      { grid-column: 2; }
    .bestell-card__meta    { grid-column: 2; font-size: .78rem; }
    .bestell-card__price   { grid-column: 2; text-align: left; font-size: 1rem; }
    .bestell-card__body    { padding: 12px 14px 14px; }
    .bestell-items          { font-size: .82rem; }
    .bestell-items thead th:nth-child(3),
    .bestell-items tbody td:nth-child(3) { display: none; }  /* Einzelpreis-Spalte weg */
}

/* ======================================================================
   B2B-Top-Menue (nur bei shop_einstellungen.shopart=1 + eingeloggt sichtbar)
   Aufklappbare Dropdowns mit Hover- und Click-Verhalten.
====================================================================== */
.b2b-menu {
    background: var(--color-primary, #1e3a8a);
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 80%, #000);
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.b2b-menu__list {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}
.b2b-menu__item {
    position: relative;
}
.b2b-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .85rem 1rem;
    border: 0;
    background: transparent;
    color: #fff;
    font: 600 .9rem var(--font-display);
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s ease;
}
.b2b-menu__toggle:hover,
.b2b-menu__item.is-open > .b2b-menu__toggle {
    background: color-mix(in srgb, var(--color-primary) 60%, #000);
}
.b2b-menu__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 240px;
    margin: 0;
    padding: .35rem 0;
    list-style: none;
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-md);
}
.b2b-menu__sub li a {
    display: block;
    padding: .55rem .9rem;
    color: var(--color-text);
    font-size: .88rem;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.b2b-menu__sub li a:hover {
    background: color-mix(in srgb, var(--color-accent) 18%, #fff);
    color: var(--color-primary);
}
@media (max-width: 720px) {
    /* Auf Smartphones komplett ausblenden - die gleichen 5 Bereiche
       sind ueber den Burger-Button (user-menu) als Accordion erreichbar.
       Doppelte Navigation wuerde nur Platz fressen. */
    .b2b-menu { display: none; }
}

/* ======================================================================
   B2B-Tabellen + Summen-Box (Rechnungen, OffeneRechnungen, Kontoauszug)
   Reine B2B-Komponenten - im B2C nicht eingebunden, daher kein Effekt.
====================================================================== */
.b2b-rechnungen__sums,
.b2b-kontoauszug .b2b-rechnungen__sums {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
}
.b2b-rechnungen__sums > div {
    flex: 1 1 130px;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.b2b-rechnungen__sums span { display: block; color: var(--color-muted); font-size: .8rem; }
.b2b-rechnungen__sums strong { font-size: 1.15rem; color: var(--color-primary); }
.b2b-rechnungen__verzug { border-left: 4px solid var(--color-danger); }
.b2b-kontoauszug__saldo.is-debit strong { color: var(--color-danger); }

.b2b-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.b2b-table thead th {
    background: color-mix(in srgb, var(--color-primary) 8%, #fff);
    color: var(--color-primary);
    font-weight: 700;
    text-align: left;
    padding: .65rem .85rem;
    border-bottom: 2px solid var(--color-border);
    font-size: .85rem;
}
.b2b-table th.num,
.b2b-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.b2b-table tbody td {
    padding: .55rem .85rem;
    border-top: 1px solid var(--color-border);
    font-size: .9rem;
}
.b2b-table tbody tr.row--verzug { background: color-mix(in srgb, var(--color-danger) 8%, #fff); }

.badge {
    display: inline-block;
    padding: .15em .55em;
    margin-left: .35rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
}
.badge--danger { background: var(--color-danger); color: #fff; }
.badge--warn   { background: var(--color-accent); color: #1a1a1a; }

.b2b-kontoauszug__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.b2b-kontoauszug__filter label { margin-right: .5rem; color: var(--color-muted); }
.b2b-kontoauszug__filter select {
    padding: .35rem .55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
}

/* B2B: Inhalt/VPE-Anzeige statt Abteilungs-Hinweis */
.card__inhalt,
.detail__inhalt,
.menu-item__inhalt {
    margin: .35rem 0 0;
    padding: .25rem .5rem;
    background: color-mix(in srgb, var(--color-primary) 5%, #fff);
    border-left: 3px solid var(--color-primary);
    border-radius: 4px;
    font-size: .82rem;
    color: var(--color-primary);
}
.detail__inhalt { font-size: .9rem; padding: .35rem .65rem; }
.card__inhalt strong,
.detail__inhalt strong,
.menu-item__inhalt strong { color: var(--color-text); }

/* ======================================================================
   B2B-Catalog-Toolbar (PageSize + Sort) - sichtbar unter den
   Kategorien in Bestellansicht und Speisekarte. Reine B2B-Komponente.
====================================================================== */
.b2b-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    padding: .65rem .85rem;
    margin: .75rem 0 1.25rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.b2b-toolbar__count {
    margin-right: auto;
    font-size: .9rem;
    color: var(--color-muted);
}
.b2b-toolbar__count strong { color: var(--color-primary); }
.b2b-toolbar__field {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
}
.b2b-toolbar__field span { color: var(--color-muted); }
.b2b-toolbar__field select {
    padding: .35rem .55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    font: inherit;
    cursor: pointer;
}
.b2b-toolbar__field select:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -1px;
}
@media (max-width: 720px) {
    .b2b-toolbar { gap: .5rem .75rem; padding: .55rem .65rem; }
    .b2b-toolbar__count { width: 100%; margin-right: 0; }
    .b2b-toolbar__field { flex: 1 1 calc(50% - .5rem); justify-content: space-between; }
    .b2b-toolbar__field select { flex: 1 1 auto; }
}

/* ======================================================================
   B2B-Burger: Accordion-Gruppen im User-Menu (Mobile-freundlich).
   Nur bei shopart=1 + eingeloggt aktiv. Im B2C bleibt das User-Menu
   als flache Liste (Dashboard/Konto/Bestellungen) wie bisher.
====================================================================== */
.user-menu__group {
    border-top: 1px solid var(--color-border);
}
.user-menu__group:first-of-type {
    border-top: 0;
}
.user-menu__group > summary {
    list-style: none;
    cursor: pointer;
    padding: .65rem .9rem;
    font: 600 .92rem var(--font-display);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
.user-menu__group > summary::-webkit-details-marker { display: none; }
.user-menu__group > summary::after {
    content: '▾';
    font-size: .75rem;
    color: var(--color-muted);
    transition: transform .18s ease;
}
.user-menu__group[open] > summary::after { transform: rotate(180deg); }
.user-menu__group[open] > summary {
    background: color-mix(in srgb, var(--color-primary) 6%, #fff);
}

.user-menu__item--sub {
    padding: .5rem 1.1rem .5rem 1.6rem;
    font-size: .86rem;
    color: var(--color-text);
    border-left: 3px solid color-mix(in srgb, var(--color-primary) 22%, #fff);
    margin-left: .35rem;
    background: #fff;
}
.user-menu__item--sub:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, #fff);
    color: var(--color-primary);
}

@media (max-width: 720px) {
    /* Im B2B-Mobile-Layout darf der Dropdown breiter werden, damit die
       Accordion-Gruppen + Sub-Items lesbar bleiben. */
    .user-menu__dropdown { min-width: min(92vw, 320px); }
}

/* ======================================================================
   Mobile (<=720px): Add-to-Cart-Buttons zeigen nur das Wagen-Icon,
   kein Text. Spart Platz auf Smartphone-Karten und vermeidet das
   Umbrechen von "IN DEN WARENKORB" auf zwei Zeilen.
====================================================================== */
@media (max-width: 720px) {
    [data-add-to-cart] > span { display: none; }
    [data-add-to-cart] {
        gap: 0;
        padding-left:  .65rem;
        padding-right: .65rem;
        min-width: 0;
    }
    [data-add-to-cart] > svg { width: 18px; height: 18px; }
}

/* ======================================================================
   Horizontal scrollbarer Wrapper fuer breite Tabellen (Rechnungen,
   OffeneRechnungen, Kontoauszug). Auf schmalen Viewports kann der Nutzer
   die Tabelle nach links/rechts scrollen, ohne dass der Rest der Seite
   beeintraechtigt wird. Die WebKit-Scrollbar wird etwas dezenter
   gestylt. -webkit-overflow-scrolling sorgt fuer Momentum-Scroll auf iOS.
====================================================================== */
.b2b-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
    /* Dezenter Schatten, der andeutet, dass mehr Inhalt seitlich existiert. */
    background:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) 0 0/16px 100% no-repeat,
        linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) 100% 0/16px 100% no-repeat,
        linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0))    0 0/8px  100% no-repeat,
        linear-gradient(to left,  rgba(0,0,0,.08), rgba(0,0,0,0))  100% 0/8px  100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}
.b2b-table-wrap .b2b-table { min-width: 720px; }   /* erzwingt Scroll auf Mobile */
.b2b-table-wrap::-webkit-scrollbar       { height: 8px; }
.b2b-table-wrap::-webkit-scrollbar-track { background: transparent; }
.b2b-table-wrap::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: 4px;
}
.b2b-table-wrap::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

/* Listen-Kopf: Titel links, Export-Buttons rechts. Bei schmalen Viewports
   stacken die Elemente untereinander. */
.b2b-listenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.b2b-listenkopf .page-title { margin: 0; }

/* ======================================================================
   Cart-Qty-Badge: zeigt im B2B-Modus, wieviel von einem Artikel bereits
   im Warenkorb liegt. Dezent, kompakt, in Akzentfarbe -> Kunde sieht es,
   aber es dominiert nicht die Karte/Zeile.
====================================================================== */
.cart-qty-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15em .55em;
    margin: .25rem 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 20%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
    color: color-mix(in srgb, var(--color-accent) 90%, #000);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    white-space: nowrap;
}
.cart-qty-badge svg { color: currentColor; flex-shrink: 0; }

/* Inline-Variante in der B2B-Listen-Tabelle (Menge-Spalte): kleiner Abstand
   nach unten zum Stepper. */
.cart-qty-badge--inline { display: inline-flex; margin-bottom: .35rem; }

/* B2B-Cart-Zeile: VPE-Aufschluesselung "3 x 5 Kg = 15 Kg" unter dem Preis. */
.cart-row__inhalt {
    display: block;
    margin-top: .25rem;
    padding: .15rem .45rem;
    background: color-mix(in srgb, var(--color-primary) 7%, #fff);
    border-left: 2px solid var(--color-primary);
    border-radius: 4px;
    font-size: .76rem;
    color: var(--color-primary);
}
.cart-row__inhalt strong { color: var(--color-text); font-weight: 700; }

/* B2B-Listen: VPE-Badge bei Artikeln mit Inhalt > 1, klein aber deutlich. */
.b2b-liste__vpe {
    display: inline-block;
    margin-top: .2rem;
    padding: .12em .55em;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-primary) 8%, #fff);
    border-left: 3px solid var(--color-accent);
    color: var(--color-primary);
    font-size: .75rem;
    line-height: 1.4;
}
.b2b-liste__vpe strong { color: var(--color-text); font-weight: 700; }

/* ======================================================================
   B2B-Dashboard: KPI-Karten, Charts, Top/Flop-Listen, Empfehlungen.
   Modernes, professionelles Layout mit dezenten Schatten und klarer
   Hierarchie. Nutzt die B2B-Farbvariablen aus shop_einstellungen.
====================================================================== */
.dash { display: flex; flex-direction: column; gap: 1.5rem; max-width: 1280px; margin: 2rem auto 0; }
.dash__head {
    position: relative; isolation: isolate;
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 1.75rem; flex-wrap: wrap;
    padding: 2.25rem 2rem 2rem;
    border-radius: 22px;
    background:
        radial-gradient(120% 140% at 100% 0%,
            color-mix(in srgb, var(--color-accent) 55%, transparent) 0%,
            transparent 55%),
        radial-gradient(80% 120% at 0% 100%,
            color-mix(in srgb, var(--color-primary) 60%, #000) 0%,
            transparent 60%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary) 92%, #000) 0%,
            var(--color-primary) 55%,
            color-mix(in srgb, var(--color-accent) 50%, var(--color-primary)) 100%);
    color: #fff;
    box-shadow:
        0 18px 40px -18px color-mix(in srgb, var(--color-primary) 70%, #000),
        0 2px 6px rgba(15, 23, 42, .12);
    overflow: hidden;
}
/* Dekorative Lichtblitze im Hero */
.dash__head::before,
.dash__head::after {
    content: ''; position: absolute; z-index: -1;
    border-radius: 50%; pointer-events: none;
    filter: blur(8px);
}
.dash__head::before {
    top: -60px; right: -40px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,.28) 0%, transparent 65%);
}
.dash__head::after {
    bottom: -80px; left: 30%;
    width: 320px; height: 220px;
    background: radial-gradient(ellipse, rgba(255,255,255,.10) 0%, transparent 70%);
}
.dash__head > div:first-child { max-width: 60ch; }

.dash__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.85); font-weight: 700;
}
.dash__eyebrow::before {
    content: ''; width: 22px; height: 2px;
    background: rgba(255,255,255,.6); border-radius: 2px;
}
.dash__title {
    font: 800 2.15rem/1.15 var(--font-display);
    margin: .65rem 0 .55rem;
    color: #fff;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.dash__lead {
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: .95rem; line-height: 1.55;
    max-width: 60ch;
}
.dash__cta {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .9rem 1.4rem;
    background: #fff; color: var(--color-primary);
    border-radius: 999px;
    font-weight: 700; letter-spacing: .03em;
    text-decoration: none;
    box-shadow: 0 10px 26px -10px rgba(0,0,0,.45),
                0 0 0 1px rgba(255,255,255,.4) inset;
    transition: transform .18s ease, box-shadow .18s ease;
}
.dash__cta:hover {
    transform: translateY(-2px);
    color: var(--color-primary);
    box-shadow: 0 14px 32px -10px rgba(0,0,0,.55),
                0 0 0 1px rgba(255,255,255,.55) inset;
}

/* KPI-Grid */
.dash__kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.kpi {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: .35rem;
    position: relative; overflow: hidden;
}
.kpi::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--color-border);
}
.kpi--accent::before { background: var(--color-primary); }
.kpi--rest::before   { background: #15803d; }
.kpi__label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.kpi__value {
    font-size: 1.7rem; font-weight: 800;
    color: var(--color-text);
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
    line-height: 1.1;
}
.kpi__value.is-warning { color: var(--color-danger); }
.kpi__value.is-ok      { color: #15803d; }
.kpi__sub { font-size: .82rem; color: var(--color-muted); }
.kpi__trend {
    display: inline-flex; align-items: baseline; gap: .35rem;
    font-size: .82rem; font-weight: 700;
}
.kpi__trend.is-up   { color: #15803d; }
.kpi__trend.is-down { color: var(--color-danger); }
.kpi__trend.is-flat { color: var(--color-muted); }
.kpi__trend small { color: var(--color-muted); font-weight: 500; }

/* Chart-Karten */
.dash__charts, .dash__lists {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.dash__card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.25rem 1.4rem;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: .85rem;
}
.dash__card--span2 { grid-column: span 2; }
.dash__card header { display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem 1rem; }
.dash__card header h2 { font-size: 1.05rem; margin: 0; color: var(--color-primary); font-weight: 700; }
.dash__card header small { color: var(--color-muted); font-size: .82rem; }
.dash__hint { margin-left: auto; font-size: .82rem; color: var(--color-muted); }
.dash__hint strong { color: var(--color-primary); }

/* Ranklisten */
.ranklist {
    list-style: none; padding: 0; margin: 0;
    counter-reset: rank;
}
.ranklist li {
    counter-increment: rank;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    grid-template-rows: auto auto;
    gap: .15rem .8rem;
    padding: .6rem .25rem;
    border-bottom: 1px solid var(--color-border);
    align-items: center;
}
.ranklist li:last-child { border-bottom: 0; }
.ranklist li::before {
    content: counter(rank);
    grid-row: span 2;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 12%, #fff);
    color: var(--color-primary);
    font-weight: 700; font-size: .82rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.ranklist--flop li::before {
    background: color-mix(in srgb, var(--color-danger) 12%, #fff);
    color: var(--color-danger);
}
.ranklist__title { font-weight: 600; color: var(--color-text); }
.ranklist li small { grid-column: 2; color: var(--color-muted); font-size: .78rem; }
.ranklist__value {
    grid-row: span 2;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    text-align: right;
    white-space: nowrap;
}

/* Empfehlungen */
.empfehlungen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .85rem;
}
.empfehlung {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .85rem 1rem;
    background: color-mix(in srgb, var(--color-accent) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    border-radius: var(--radius-sm);
    text-decoration: none; color: var(--color-text);
    transition: transform .15s ease, box-shadow .15s ease;
}
.empfehlung:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--color-text); }
.empfehlung strong { font-size: .92rem; line-height: 1.3; }
.empfehlung small  { color: var(--color-muted); font-size: .76rem; }
/* Rang-Pille oben rechts in der Empfehlungs-Karte */
.empfehlung { position: relative; }
.empfehlung__rank {
    position: absolute; top: .55rem; right: .65rem;
    background: var(--color-primary); color: #fff;
    padding: .12em .55em;
    border-radius: 999px;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .04em;
}

/* Bestseller-Badge unten in der Karte (nur Hinweis, kein Wert!) */
.empfehlung__bestseller-badge {
    margin-top: .4rem;
    display: inline-flex; align-items: center; gap: .3rem;
    background: color-mix(in srgb, var(--color-accent) 14%, #fff);
    color: color-mix(in srgb, var(--color-accent) 95%, #000);
    padding: .2em .55em; border-radius: 4px;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .02em;
    align-self: flex-start;
}
.empfehlung__bestseller-badge svg { color: currentColor; }

/* Direktlink-Variante des Top-Menue-Toggles (kein Submenu) */
.b2b-menu__toggle--direct {
    text-decoration: none;
    color: #fff;
    align-items: center;
}
.b2b-menu__toggle--direct svg { margin-right: .15rem; }

@media (max-width: 720px) {
    .dash__charts, .dash__lists { grid-template-columns: 1fr; }
    .dash__card--span2 { grid-column: auto; }
}

/* B2B-Dashboard Chart-Wrapper: feste Hoehen statt Aspekt-Ratio.
   - dash__canvas       : Standard (Donut/kompakt)
   - dash__canvas--tall : Hoeher fuer Linien- und Balkenverlauf
   Hoehen sind responsive: kleiner auf Smartphone, hoeher auf Desktop. */
.dash__canvas {
    position: relative;
    width: 100%;
    height: 280px;
    min-height: 240px;
}
.dash__canvas--tall {
    height: 360px;
    min-height: 300px;
}
.dash__canvas canvas {
    max-width: 100% !important;
    height: 100% !important;
    width: 100% !important;
}

/* Tablet (bis 1024px) - mittlere Hoehen */
@media (max-width: 1024px) {
    .dash__canvas       { height: 260px; min-height: 220px; }
    .dash__canvas--tall { height: 320px; min-height: 280px; }
}

/* Mobile (bis 720px) - kompakter, aber immer noch lesbar */
@media (max-width: 720px) {
    .dash { margin-top: 1.25rem; }
    .dash__head { padding: 1.5rem 1.25rem 1.4rem; border-radius: 16px; }
    .dash__title { font-size: 1.55rem; }
    .dash__lead  { font-size: .85rem; }
    .dash__cta   { padding: .75rem 1.1rem; font-size: .9rem; }

    .dash__charts, .dash__lists { gap: .85rem; }
    .dash__card { padding: .85rem 1rem 1.1rem; }
    .dash__card header h2 { font-size: .98rem; }
    .dash__card header small { font-size: .76rem; }

    .dash__canvas       { height: 240px; min-height: 200px; }
    .dash__canvas--tall { height: 280px; min-height: 240px; }

    /* KPI-Karten kompakter */
    .kpi { padding: .85rem .9rem; }
    .kpi__value { font-size: 1.4rem; }
    .kpi__label { font-size: .7rem; }
}

/* Sehr kleine Smartphones (bis 420px) - eine Spalte fuer KPIs auch */
@media (max-width: 420px) {
    .dash__kpi { grid-template-columns: 1fr 1fr; }
    .dash__canvas--tall { height: 260px; min-height: 220px; }
    .dash__canvas       { height: 230px; min-height: 200px; }
}

/* Jahr-Filter im Dashboard-Header */
.dash__actions {
    display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
}
.dash__yearfilter {
    display: inline-flex; align-items: center; gap: .6rem;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.28);
    padding: .55rem .9rem;
    border-radius: 999px;
    color: #fff;
    font-size: .8rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    transition: background .15s ease, border-color .15s ease;
}
.dash__yearfilter:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); }
.dash__yearfilter label { opacity: .78; }
.dash__yearfilter select {
    background: transparent;
    color: #fff;
    border: 0;
    font: inherit;
    font-weight: 700; letter-spacing: .04em;
    cursor: pointer;
    padding-right: .2rem;
}
.dash__yearfilter select option { color: #1f2937; }
.dash__yearfilter select:focus { outline: none; }

.kpi__sublabel {
    margin-left: .35rem;
    padding: .05em .45em;
    background: color-mix(in srgb, var(--color-primary) 12%, #fff);
    color: var(--color-primary);
    border-radius: 999px;
    font-size: .65rem; font-weight: 700;
    letter-spacing: .04em;
}

/* ======================================================================
   Kurban (Vacip Kurban 2026) — Erfassungsform + Listen.
   Layout angelehnt an HanwareBusinessOnline (Kayit Formu links, Hisse
   Sahipleri unten), aber modern: Hero mit Countdown, Cards mit Schatten,
   klare Typografie, Tabellen-Grid mit kompakter Bedienung.
====================================================================== */
.kurban-form { display: flex; flex-direction: column; gap: 1.5rem; max-width: 1280px; margin: 1.5rem auto 0; }

/* Hero mit Saison-Status + Countdown */
.kurban-hero {
    position: relative; isolation: isolate;
    display: grid; grid-template-columns: 1fr auto; gap: 1.5rem;
    padding: 1.85rem 2rem;
    border-radius: 22px;
    color: #fff;
    box-shadow: 0 18px 40px -18px rgba(15,23,42,.4),
                0 2px 6px rgba(15,23,42,.12);
    overflow: hidden;
}
.kurban-hero.is-open {
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, #16a34a 55%, transparent) 0%, transparent 55%),
        linear-gradient(135deg, #064e3b 0%, #047857 60%, #16a34a 100%);
}
.kurban-hero.is-closed {
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, #ef4444 50%, transparent) 0%, transparent 55%),
        linear-gradient(135deg, #4c1d1d 0%, #991b1b 60%, #dc2626 100%);
}
.kurban-hero::before {
    content: ''; position: absolute; z-index: -1;
    top: -80px; right: -40px;
    width: 280px; height: 280px;
    border-radius: 50%; filter: blur(8px);
    background: radial-gradient(circle, rgba(255,255,255,.22) 0%, transparent 65%);
    pointer-events: none;
}
.kurban-hero__badge {
    display: inline-flex; align-items: center;
    padding: .35em .9em; border-radius: 999px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.35);
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700;
    backdrop-filter: blur(6px);
}
.kurban-hero__title {
    font: 800 1.85rem/1.18 var(--font-display);
    margin: .8rem 0 .9rem;
    color: #fff; letter-spacing: -0.01em;
    text-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.kurban-hero__meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin: 0; }
.kurban-hero__meta dt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.kurban-hero__meta dd { margin: .2rem 0 0; font-weight: 700; font-size: 1rem; }

.kurban-hero__countdown {
    display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
    align-self: center;
}
.kurban-hero__countdown-label {
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    opacity: .85; font-weight: 700;
}
.kurban-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.kurban-countdown div {
    min-width: 64px; padding: .55rem .35rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    text-align: center;
}
.kurban-countdown strong {
    display: block;
    font: 800 1.45rem/1 var(--font-display);
    font-variant-numeric: tabular-nums;
}
.kurban-countdown span {
    display: block; margin-top: .2rem;
    font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    opacity: .85;
}

/* Grid: Antragsdaten links, Hisse-Sahipleri rechts (auf Desktop) */
.kurban-grid {
    display: grid; gap: 1.25rem;
    grid-template-columns: minmax(320px, 380px) 1fr;
    align-items: start;
}
.kurban-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 1.4rem 1.55rem 1.55rem;
    box-shadow: 0 1px 3px rgba(15,23,42,.05),
                0 6px 20px -12px rgba(15,23,42,.18);
    display: flex; flex-direction: column; gap: 1.1rem;
}
.kurban-card > header { display: flex; flex-direction: column; gap: .15rem; }
.kurban-card > header h2 {
    margin: 0; font: 700 1.1rem/1.2 var(--font-display);
    color: var(--color-primary);
}
.kurban-card > header small { color: var(--color-muted); font-size: .82rem; }

.kurban-card--kopf { position: sticky; top: 1rem; }

/* Read-only Definition-List fuer die Kopfdaten */
.kurban-readonly { display: flex; flex-direction: column; gap: .7rem; margin: 0; }
.kurban-readonly > div {
    display: grid; grid-template-columns: 1fr auto;
    align-items: baseline; gap: .85rem;
    padding-bottom: .6rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-border) 80%, #fff);
}
.kurban-readonly > div:last-child { border-bottom: 0; }
.kurban-readonly dt {
    font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-muted); font-weight: 600;
}
.kurban-readonly dd {
    margin: 0; text-align: right;
    font-weight: 600; color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.kurban-readonly dd .muted { color: var(--color-muted); font-weight: 500; }
.kurban-readonly__total dt { color: var(--color-primary); font-weight: 700; }
.kurban-readonly__total dd strong {
    font-size: 1.4rem; color: var(--color-primary);
    letter-spacing: -0.01em;
}
.kurban-pill {
    display: inline-flex; align-items: center;
    padding: .15em .65em; border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 10%, #fff);
    color: var(--color-primary); font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Form-Felder modern */
.kurban-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.kurban-field > span {
    font-size: .76rem; letter-spacing: .04em;
    color: var(--color-muted); font-weight: 600;
    text-transform: uppercase;
}
.kurban-field > span.req::after {
    content: '*'; margin-left: .25rem;
    color: var(--color-danger); font-weight: 800;
}
.kurban-field input[type="text"],
.kurban-field input[type="email"],
.kurban-field input[type="tel"],
.kurban-field input[type="number"],
.kurban-field select,
.kurban-field textarea {
    width: 100%;
    padding: .65rem .8rem;
    background: color-mix(in srgb, var(--color-primary) 4%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--color-border) 90%, var(--color-primary));
    border-radius: 10px;
    font: 500 .92rem/1.4 inherit;
    color: var(--color-text);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.kurban-field input:hover, .kurban-field select:hover, .kurban-field textarea:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
.kurban-field input:focus, .kurban-field select:focus, .kurban-field textarea:focus {
    outline: 0;
    background: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.kurban-field textarea { resize: vertical; min-height: 80px; }
.kurban-hint {
    margin: 0 0 .35rem;
    font-size: .78rem; line-height: 1.4;
    color: var(--color-muted);
}
.kurban-hint--warn { color: var(--color-danger); font-weight: 600; }

.hisse-form {
    display: grid; gap: .9rem 1rem;
    grid-template-columns: 1fr 1fr 1fr;
}
.kurban-field--full { grid-column: 1 / -1; }
.kurban-form__actions { display: flex; justify-content: flex-end; }

.kurban-mobil {
    display: grid; grid-template-columns: minmax(160px, 200px) 1fr; gap: .55rem;
}

/* Tabelle der hinzugefuegten Hissedare */
.hisse-table__wrap {
    margin-top: .25rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    overflow-x: auto;
}
.hisse-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.hisse-table th {
    position: sticky; top: 0; z-index: 1;
    background: color-mix(in srgb, var(--color-primary) 8%, #fff);
    color: var(--color-primary);
    font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
    text-align: left;
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--color-border);
}
.hisse-table td {
    padding: .65rem .75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, #fff);
    vertical-align: top;
}
.hisse-table tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 4%, #fff); }
.hisse-table__empty td {
    padding: 1.5rem;
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
}
.hisse-badge {
    display: inline-flex; padding: .15em .6em; border-radius: 999px;
    font-size: .72rem; font-weight: 700;
    background: color-mix(in srgb, var(--color-danger) 10%, #fff);
    color: var(--color-danger);
    white-space: nowrap;
}
.hisse-badge.is-ok {
    background: color-mix(in srgb, #16a34a 12%, #fff);
    color: #15803d;
}
.btn--icon {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .4rem; min-width: 32px; min-height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--icon.btn--danger:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 8%, #fff);
}

/* Submit-Bereich */
.kurban-submit {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 1.15rem 1.5rem;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.kurban-submit__agb {
    display: inline-flex; align-items: flex-start; gap: .65rem;
    font-size: .92rem;
}
.kurban-submit__agb input[type="checkbox"] { margin-top: .15rem; transform: scale(1.15); }
.kurban-submit__actions { display: flex; gap: .75rem; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
    .kurban-grid { grid-template-columns: 1fr; }
    .kurban-card--kopf { position: static; }
    .hisse-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .kurban-form { margin-top: 1rem; }
    .kurban-hero { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; border-radius: 16px; }
    .kurban-hero__title { font-size: 1.45rem; }
    .kurban-hero__countdown { align-items: stretch; }
    .kurban-countdown div { min-width: 0; }
    .kurban-card { padding: 1.1rem 1.15rem 1.25rem; border-radius: 14px; }
    .hisse-form { grid-template-columns: 1fr; }
    .kurban-mobil { grid-template-columns: 1fr; }
    .kurban-submit { padding: 1rem 1.15rem; border-radius: 14px; }
    .kurban-submit__actions { width: 100%; justify-content: stretch; }
    .kurban-submit__actions .btn { flex: 1; }
}

/* Listen-Page: Header mit Action-Buttons modernisiert */
.kurban-page-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
    margin-bottom: 1.25rem;
}
.kurban-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.kurban-actions .btn { display: inline-flex; align-items: center; gap: .4rem; }

/* ======================================================================
   Verein (Nafile Kurban / Umbuchungsbelege / Vertriebspartner).
   Wiederverwendung der kurban-* Klassen, eigene Akzente:
   - Hero-Variante in Lila (vom Kurban-Gruen abgegrenzt — Verein ist nicht
     saisonal sondern Daueraufgabe).
   - 3-Karten-Grid fuer NafileKurban (Mitglied / Bank / Erfassung).
   - Total-Card mit Live-Preisberechnung.
====================================================================== */
.verein-form { max-width: 1280px; margin: 1.5rem auto 0; }

.verein-hero {
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, #c026d3 50%, transparent) 0%, transparent 55%),
        linear-gradient(135deg, #312e81 0%, #6d28d9 60%, #c026d3 100%);
}
.kurban-hero__lead {
    margin: .35rem 0 .85rem;
    color: rgba(255,255,255,.88);
    font-size: .95rem; line-height: 1.5;
    max-width: 60ch;
}
.verein-hero__stats {
    display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin: .25rem 0 0;
}
.verein-hero__stats dt {
    font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
    opacity: .8;
}
.verein-hero__stats dd {
    margin: .2rem 0 0;
    font-weight: 800; font-size: 1.4rem;
    font-variant-numeric: tabular-nums;
}

/* 3-Spalten-Grid fuer NafileKurban (auf Desktop):
   Mitglied | Bank | Erfassung-Card spannt Reihe 2 oder rechte Seite */
.kurban-grid--3 {
    grid-template-columns: minmax(260px, 320px) minmax(260px, 320px) 1fr;
    align-items: start;
}
.kurban-card--info,
.kurban-card--bank {
    position: sticky; top: 1rem;
}
.kurban-card--erf { grid-row: span 2; }

/* Bank-Block: bei Vorkasse versteckt (per JS), bei Lastschrift Pflichtfelder */
.verein-bank-block { display: flex; flex-direction: column; gap: .85rem; }

/* Total-Live-Anzeige (Toplam) */
.verein-total {
    display: flex; align-items: center; justify-content: space-between;
    padding: .8rem 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-primary) 8%, #fff);
    border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
.verein-total > span {
    font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--color-muted); font-weight: 600;
}
.verein-total > strong {
    font: 800 1.45rem/1 var(--font-display);
    color: var(--color-primary);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.hisse-form--2 { grid-template-columns: 1fr 1fr; }

@media (max-width: 1100px) {
    .kurban-grid--3 { grid-template-columns: 1fr 1fr; }
    .kurban-card--erf { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 720px) {
    .kurban-grid--3 { grid-template-columns: 1fr; }
    .kurban-card--info,
    .kurban-card--bank { position: static; }
    .hisse-form--2 { grid-template-columns: 1fr; }
    .verein-total > strong { font-size: 1.2rem; }
}