/* =============================================================================
   GKMB Menucard

   Zurückhaltender Standard, der in jedem Projekt tragfähig ist. Alle Farben,
   Abstände und Schriftgrößen kommen aus der variables.css des Sitepackages,
   damit sich das Aussehen dort zentral steuern lässt. Projektspezifische
   Anpassungen gehören nach
   gkmb_template/Resources/Public/Css/Extensions/menucard.css – diese Datei wird
   danach geladen und überschreibt die Regeln hier.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Auswahlmenü
   -------------------------------------------------------------------------- */
.menucard__menuwrap {
    margin-bottom: var(--g-gap);
}

.menucard__menuheadline {
    font-weight: var(--f-weight-b);
    margin-bottom: 0.5rem;
}

.menucard__menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-gap-s);
}

.menucard__menuitem {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid rgb(var(--c-neutral-light));
    text-decoration: none;
}

.menucard__menuitem:focus-visible {
    border-color: rgb(var(--c-primary));
}

.menucard__menuitem.-active {
    border-color: rgb(var(--c-primary));
    background-color: rgb(var(--c-primary));
    color: rgb(var(--c-neutral-lightest));
}

@media (hover: hover) {
    .menucard__menuitem:hover {
        border-color: rgb(var(--c-primary));
    }
}

/* Während des Nachladens einer Karte */
.gkmb__menucard.-loading .menucard__cards {
    opacity: 0.5;
}

.menucard__cards {
    transition: opacity 0.3s;
}

/* -----------------------------------------------------------------------------
   Karte
   -------------------------------------------------------------------------- */
.menucard__card:not(:last-child) {
    margin-bottom: var(--p);
}

.menucard__card > .headline {
    margin-bottom: var(--g-gap);
}

.menucard__information {
    margin-bottom: var(--g-gap);
}

.menucard__notfound {
    color: rgb(var(--c-neutral-dark));
}

/* -----------------------------------------------------------------------------
   Produktgruppe
   -------------------------------------------------------------------------- */
.menucard__group {
    border: 1px solid rgb(var(--c-neutral-light));
}

.menucard__group:not(:last-child) {
    margin-bottom: var(--g-gap);
}

.menucard__groupimage {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgb(var(--c-neutral-light));
}

.menucard__grouptext {
    padding: 1.5rem;
}

.menucard__grouptext > .headline {
    margin-bottom: var(--g-gap);
}

.menucard__groupinformation {
    margin-bottom: var(--g-gap);
}

/* -----------------------------------------------------------------------------
   Produkt und Preise
   -------------------------------------------------------------------------- */
.menucard__product:not(:last-child) {
    margin-bottom: 1.5rem;
}

.menucard__producttitle {
    font-weight: var(--f-weight-b);
}

.menucard__prices {
    margin-top: 0.5rem;
}

/* Menge und Preis stehen immer in denselben beiden Spalten, auch wenn ein
   Preis ohne Mengenangabe auskommt. */
.menucard__price {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-gap: 0 var(--g-gap-s);
    gap: 0 var(--g-gap-s);
    white-space: nowrap;
}

.menucard__pricevalue {
    grid-column: 2;
}

@media (min-width: 640px) {
    .menucard__product {
        display: grid;
        grid-template-columns: 1fr max-content;
        grid-gap: 0 var(--g-gap);
        gap: 0 var(--g-gap);
    }

    .menucard__prices {
        margin-top: 0;
    }

    .menucard__price {
        justify-content: end;
    }
}