/* ---------- Ernährung: Wochen-Essensplan (alles unter .ern gekapselt).
   Karten, Buttons, Segmente, KPIs und Leerzustände kommen aus dem Design-System;
   hier steht nur das Wochenraster mit der Gerichte-Tönung. Die Farbe eines Gerichts
   ist eine Datenfarbe: Farbton (--h) aus dem Gericht, Sättigung/Helligkeit je Theme. ---------- */
      .ern {
        --ern-tint-s: 25%;
        --ern-tint-l: 24%;
        --ern-edge-l: 58%;
        --ern-slot-s: 20%;
        --ern-slot-l: 32%;
        color: var(--ink);
        line-height: 1.45;
      }
      :root[data-theme="light"] .ern {
        --ern-tint-s: 42%;
        --ern-tint-l: 93%;
        --ern-edge-l: 52%;
        --ern-slot-s: 35%;
        --ern-slot-l: 82%;
      }
      .ern p {
        margin: 0;
      }
      .ern button:disabled {
        opacity: 0.4;
        cursor: default;
      }
      .ern select,
      .ern input[type="text"] {
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md);
        height: 38px;
        padding: 0 var(--s3);
        width: 100%;
        font-size: var(--fs-md);
        color: var(--ink);
      }
      .ern textarea {
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md);
        padding: var(--s2) var(--s3);
        width: 100%;
        font: inherit;
        font-size: var(--fs-md);
        color: var(--ink);
        resize: vertical;
      }
      .ern-kpis {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--s4);
        margin-bottom: var(--s4);
      }
      @media (max-width: 1024px) {
        .ern-kpis {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      .ern-kpis .kpi {
        min-width: 0;
      }
      .ern-kpis .k-v,
      .ern-kpis .k-s {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .ern-cardhead {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s3) var(--s4);
        margin-bottom: var(--s4);
      }
      .ern-cardhead h3 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: var(--s2);
      }
      .ern-spacer {
        flex: 1;
      }
      .ern .ern-hint {
        color: var(--ink-2);
        font-size: var(--fs-sm);
        margin-bottom: var(--s4);
        max-width: 70ch;
      }
      .ern-stepper {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--border-strong);
        border-radius: var(--r-md);
        background: var(--surface);
        height: 38px;
      }
      .ern-stepper button {
        background: none;
        border: 0;
        height: 100%;
        padding: 0 var(--s3);
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        cursor: pointer;
      }
      .ern-stepper output {
        min-width: 84px;
        text-align: center;
        font-size: var(--fs-sm);
        font-variant-numeric: tabular-nums;
      }
      .ern-addrow {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: var(--s2);
        align-items: center;
        max-width: 736px;
        margin-bottom: var(--s4);
      }
      @media (max-width: 640px) {
        .ern-addrow {
          grid-template-columns: 1fr auto;
        }
        .ern-addrow > .btn {
          grid-column: 1 / -1;
        }
      }
      .ern-dishes {
        list-style: none;
        padding: 0;
        margin: 0;
        max-width: 736px;
      }
      .ern-dishes li {
        display: grid;
        grid-template-columns: 10px minmax(0, 1fr) auto auto;
        gap: var(--s3);
        align-items: center;
        padding: var(--s3) 0;
        border-top: 1px solid var(--border);
      }
      .ern-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: hsl(var(--h) 50% var(--ern-edge-l));
      }
      .ern-dname strong {
        display: block;
        font-weight: 600;
        font-size: var(--fs-md);
        overflow-wrap: anywhere;
      }
      .ern-dname span {
        color: var(--ink-3);
        font-size: var(--fs-xs);
      }
      .ern-dname .is-done {
        color: var(--success);
      }
      .ern-dname .ern-warn {
        color: var(--danger);
      }
      .ern-total {
        color: var(--ink-3);
        font-size: var(--fs-sm);
        margin-top: var(--s3);
      }
      .ern-actions {
        display: flex;
        gap: var(--s2);
        flex-wrap: wrap;
        margin-top: var(--s4);
      }
      .ern-palette {
        display: flex;
        flex-wrap: wrap;
        gap: var(--s2);
        margin-bottom: var(--s4);
      }
      .ern-chip {
        --h: 30;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 99px;
        height: 32px;
        padding: 0 var(--s3) 0 10px;
        display: inline-flex;
        gap: var(--s2);
        align-items: center;
        font-size: var(--fs-sm);
        font-weight: 500;
        color: var(--ink);
        cursor: pointer;
      }
      .ern-chip::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: hsl(var(--h) 50% var(--ern-edge-l));
      }
      .ern-chip small {
        color: var(--ink-3);
        font-weight: 400;
        font-size: var(--fs-xs);
        font-variant-numeric: tabular-nums;
      }
      .ern-chip.is-done small {
        color: var(--success);
      }
      .ern-chip[aria-pressed="true"] {
        background: hsl(var(--h) var(--ern-tint-s) var(--ern-tint-l));
        border-color: hsl(var(--h) 45% var(--ern-edge-l));
      }
      .ern select.ern-quickadd {
        width: auto;
        max-width: 240px;
        height: 32px;
        border-radius: 99px;
        border-style: dashed;
        padding: 0 var(--s3);
        font-size: var(--fs-sm);
        font-weight: 500;
        color: var(--ink-3);
        cursor: pointer;
      }
      .ern select.ern-quickadd:hover {
        border-color: var(--primary);
        color: var(--primary);
      }
      .ern-customrow {
        margin-top: calc(var(--s2) * -1);
      }
      .ern-dname input.ern-dishname {
        font-weight: 600;
        height: 32px;
      }
      .ern input.ern-quickcustom {
        width: auto;
        min-width: 176px;
        max-width: 240px;
        height: 32px;
        border-radius: 99px;
        border-style: dashed;
        padding: 0 var(--s3);
        font-size: var(--fs-sm);
        font-weight: 500;
      }
      .ern-ing {
        margin-top: var(--s2);
      }
      .ern-ing summary {
        cursor: pointer;
        color: var(--ink-3);
        font-size: var(--fs-xs);
      }
      .ern-ing textarea {
        margin: var(--s2) 0 var(--s1);
      }
      .ern-shoplist {
        list-style: none;
        padding: 0;
        margin: 0;
        max-width: 736px;
      }
      .ern-shoplist li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 var(--s4);
        padding: var(--s2) 0;
        border-top: 1px solid var(--border);
      }
      .ern-shopname {
        font-weight: 600;
        overflow-wrap: anywhere;
      }
      .ern-shopqty {
        font-variant-numeric: tabular-nums;
        text-align: right;
      }
      .ern-shoplist small {
        grid-column: 1 / -1;
        color: var(--ink-3);
        font-size: var(--fs-xs);
      }
      .ern .ern-shopwarn {
        margin: var(--s4) 0 0;
      }
      .ern-activebar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s3);
        margin: 0 0 var(--s4);
        font-size: var(--fs-sm);
        color: var(--ink-3);
      }
      .ern-activebar strong {
        color: var(--ink);
      }
      .ern-scroll {
        /* width:0 + min-width:100%: der Scroll-Container trägt nicht zur Breite des
           Elternelements bei (sonst wuchs die ganze Seite auf die Tabellenbreite). */
        width: 0;
        min-width: 100%;
        overflow-x: auto;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
      }
      .ern-grid {
        border-collapse: collapse;
        width: 100%;
        min-width: 880px;
        table-layout: fixed;
      }
      .ern-grid col.ern-colhead {
        width: 136px;
      }
      .ern-grid th,
      .ern-grid td {
        border-bottom: 1px solid var(--border);
        padding: var(--s2);
        vertical-align: top;
        text-align: left;
      }
      .ern-grid tr:last-child th,
      .ern-grid tr:last-child td {
        border-bottom: 0;
      }
      .ern-grid thead th {
        background: var(--surface-2);
        font-size: var(--fs-xs);
        font-weight: 500;
        color: var(--ink-3);
        padding: var(--s3) var(--s2);
      }
      .ern-grid thead td {
        background: var(--surface-2);
      }
      .ern-grid thead th small {
        display: block;
        font-weight: 400;
        color: var(--ink-3);
        font-size: var(--fs-xs);
        margin-top: 2px;
      }
      .ern-grid thead th.is-today {
        color: var(--primary);
        box-shadow: inset 0 -2px 0 var(--primary);
      }
      .ern-grid thead th.is-today small {
        color: var(--primary);
      }
      .ern-grid td.is-today {
        background: color-mix(in srgb, var(--primary) 6%, transparent);
      }
      .ern-grid tbody th {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--ink);
        padding: var(--s3);
        overflow-wrap: anywhere;
      }
      .ern-slot {
        width: 100%;
        min-height: 56px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        background: transparent;
        color: var(--ink-3);
        border: 1px dashed var(--border-strong);
        border-radius: var(--r-sm);
        padding: var(--s2);
        text-align: left;
        font-size: var(--fs-xs);
        cursor: pointer;
      }
      .ern-slot:hover {
        border-color: var(--primary);
        color: var(--primary);
      }
      .ern-slot.is-filled {
        background: hsl(var(--h) var(--ern-tint-s) var(--ern-tint-l));
        color: var(--ink);
        border: 1px solid hsl(var(--h) var(--ern-slot-s) var(--ern-slot-l));
        border-left: 3px solid hsl(var(--h) 50% var(--ern-edge-l));
        cursor: grab;
      }
      .ern-slot.is-filled:active {
        cursor: grabbing;
      }
      .ern-slot.is-dragging {
        opacity: 0.35;
      }
      .ern-slot.is-dropover {
        border: 2px solid var(--primary) !important;
        background: var(--primary-tint);
        color: var(--primary);
      }
      .ern-slot.is-filled.is-dropover {
        box-shadow: 0 0 0 3px var(--primary-tint);
      }
      .ern-slot strong {
        font-weight: 600;
        font-size: var(--fs-sm);
        line-height: 1.25;
        overflow-wrap: anywhere;
        padding-right: var(--s4);
      }
      .ern-slot small {
        color: var(--ink-3);
        font-size: var(--fs-xs);
        margin-top: 2px;
        display: inline-flex;
        align-items: center;
        gap: var(--s1);
      }
      .ern-slot small.is-fresh {
        color: var(--primary);
        font-weight: 600;
      }
      .ern-clear {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border-radius: var(--r-sm);
        color: var(--ink-3);
      }
      .ern-clear:hover {
        background: var(--surface);
        color: var(--danger);
      }
      .ern-msg {
        min-height: 20px;
        margin-bottom: calc(var(--s2) * -1);
        color: var(--ink-2);
        font-size: var(--fs-sm);
        margin-top: var(--s3);
      }
      .ern-slots summary {
        cursor: pointer;
        font-weight: 600;
        font-size: var(--fs-lg);
        list-style: none;
        display: flex;
        align-items: center;
        gap: var(--s2);
      }
      .ern-slots summary::-webkit-details-marker {
        display: none;
      }
      .ern-slots summary::after {
        content: "";
        width: 7px;
        height: 7px;
        border-right: 1.75px solid var(--ink-3);
        border-bottom: 1.75px solid var(--ink-3);
        transform: rotate(45deg);
        margin-left: auto;
        transition: transform 0.15s;
      }
      .ern-slots:not([open]) summary::after {
        transform: rotate(-45deg);
      }
      .ern-slots summary span {
        color: var(--ink-3);
        font-weight: 400;
        font-size: var(--fs-sm);
      }
      .ern-slotlist {
        list-style: none;
        padding: 0;
        margin: var(--s4) 0 var(--s3);
        display: grid;
        gap: var(--s2);
        max-width: 480px;
      }
      .ern-slotlist li {
        display: flex;
        gap: var(--s1);
        align-items: center;
      }
      .ern-row {
        display: flex;
        gap: var(--s2);
        max-width: 480px;
      }
      @media (prefers-reduced-motion: no-preference) {
        .ern-slot.is-new {
          animation: ern-pop 0.2s ease-out;
        }
        @keyframes ern-pop {
          from {
            transform: scale(0.95);
            opacity: 0.5;
          }
          to {
            transform: none;
            opacity: 1;
          }
        }
      }


/* Wochen-Umschalter, Reiter und Sonntags-Hinweis */
.ern-weeksw {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
}
.ern-weeksw .seg button {
  min-width: 118px;
  justify-content: center;
  flex-direction: column;
  height: 44px;
  gap: 0;
  line-height: 1.2;
}
.ern-weeksw .seg button small {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-weight: 400;
}
.ern .tabs {
  margin-bottom: var(--s4);
}
.ern-tabcount {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-weight: 400;
}
.ern-banner {
  display: flex;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--primary-tint);
  color: var(--ink);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}
.ern-banner > svg {
  color: var(--primary);
}
.ern-banner .ern-bannertext {
  flex: 1;
  min-width: 200px;
}
@media (max-width: 640px) {
  .ern-weeksw {
    width: 100%;
  }
  .ern-weeksw .seg button {
    min-width: 0;
    padding: 0 var(--s2);
  }
}