/* ===== Digitale Speisekarte – Subline/Preis/Chips (Desktop) ===== */
/* Scope auf .ds-items, damit nichts anderes beeinflusst wird */

/* 0) Grundlagen */
.ds-items .ds-item { position: relative; }

/* 1) Preis oben rechts; JS setzt --ds-price-w (Breite) & --ds-price-dy (Höhe) */
.ds-items .ds-item .ds-price-topright {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  transform: translateY(var(--ds-price-dy, 0px)) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  z-index: 3 !important;
}
.ds-items .ds-item .ds-price-topright > * {
  display: inline-block;
  line-height: 1 !important;
}

/* 2) Rechts Platz für den Preis (Desktop) – Kappung gegen Ausreißer */
.ds-items .ds-item .ds-title,
.ds-items .ds-item .ds-line,
.ds-items .ds-item .ds-subline,
.ds-items .ds-item .ds-desc,
.ds-items .ds-item .ds-variants,
.ds-items .ds-item .ds-chips {
  padding-right: clamp(6ch, var(--ds-price-w, 12ch), 24ch) !important;
}

/* 3) Titel/Desc wirklich dehnbar */
.ds-items .ds-item .ds-title { display:block; min-width:0; word-wrap:break-word; }
.ds-items .ds-item .ds-desc  { display:block; width:100%; max-width:none; }

/* 4) Subline: eine Zeile – links Badges, rechts Allergene */
.ds-items .ds-item .ds-subline {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; margin-top:6px; flex-wrap:nowrap;
}
.ds-items .ds-item .ds-subleft  { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:6px; }
.ds-items .ds-item .ds-subright { flex:0 0 auto; text-align:right; }

/* 5) Dots im Header neutralisieren */
.ds-items .ds-item .ds-dots { display:none; }

/* 6) Größen/Chips als Reihe */
.ds-items .ds-item .ds-variants { display:block; width:100%; margin-top:8px; }
.ds-items .ds-item .ds-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ds-items .ds-item .ds-chip  { display:inline-flex; align-items:center; padding:6px 10px;
  border-radius:9999px; border:1px solid #e5e7eb; white-space:nowrap; }

/* 7) Optik für Badges/Codes */
.ds-badges { display:flex; flex-wrap:wrap; gap:6px; }
.ds-badge  { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid #e5e7eb;
  font-size:.78rem; line-height:1.3; }
.ds-codes  { margin:0; font-size:.92rem; color:#666; }
.ds-codes .ds-codes-text { border-bottom:1px dotted #c4c4c4; line-height:1.2; }

/* ===== Handy-Layout: Bild links (Thumb-Größe), rechts Stack; unten Text & Größen ===== */
@media (max-width: 640px) {

  /* Kopfbereich als 2-Spalten-Grid:
     links: Bild (auto = Thumb-Breite), rechts: Content (minmax verhindert zu schmale Spalte) */
  .ds-items .ds-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-auto-rows: auto;
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
  }

  /* Bild NICHT hochskalieren – Thumb-Größe beibehalten */
  .ds-items .ds-item .ds-thumb,
  .ds-items .ds-item .ds-thumb img,
  .ds-items .ds-item > img {
    grid-column: 1;
    grid-row: 1 / span 3;     /* neben Titel, Subline, Preis */
    width: auto !important;
    height: auto !important;
    max-width: 100% !important; /* falls Container kleiner ist */
    display: block;
  }

  /* Titel rechts, oberste Zeile */
  .ds-items .ds-item .ds-line {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    display: block;
  }
  .ds-items .ds-item .ds-title { display:block; min-width:0; word-wrap:break-word; }

  /* Badges/Allergene rechts, zweite Zeile */
  .ds-items .ds-item .ds-subline {
    grid-column: 2;
    grid-row: 2;
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
  }

  /* Preis rechts unter Allergenen (nicht absolut) */
  .ds-items .ds-item .ds-price-topright {
    grid-column: 2;
    grid-row: 3;
    position: static !important;
    transform: none !important;
    display: block;
    text-align: right;
    margin-top: 2px;
  }

  /* Desktop-Padding rechts auf Mobile vollständig entfernen */
  .ds-items .ds-item .ds-title,
  .ds-items .ds-item .ds-line,
  .ds-items .ds-item .ds-subline,
  .ds-items .ds-item .ds-desc,
  .ds-items .ds-item .ds-variants,
  .ds-items .ds-item .ds-chips {
    padding-right: 0 !important;
  }
  .ds-items .ds-item .ds-line,
  .ds-items .ds-item .ds-title { min-width: 0 !important; }

  /* Beschreibung volle Breite unter dem Kopfbereich */
  .ds-items .ds-item .ds-desc {
    grid-column: 1 / span 2;
    grid-row: 4;
    width: 100% !important;
    max-width: none !important;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    margin-top: 6px;
  }

  /* Größen/Chips volle Breite darunter */
  .ds-items .ds-item .ds-variants,
  .ds-items .ds-item .ds-chips {
    grid-column: 1 / span 2;
    grid-row: 5;
    width: 100% !important;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Dots sicherheitshalber ausblenden */
  .ds-items .ds-item .ds-dots { display: none; }
}

/* ===== Desktop-Korrektur für Gerichte mit Varianten/Größen ===== */
@media (min-width: 641px) {
  /* Wenn Varianten/Chips vorhanden sind, darf der Titel wieder volle Breite haben */
  .ds-items .ds-item.has-variants .ds-title,
  .ds-items .ds-item.has-variants .ds-line,
  .ds-items .ds-item.has-variants .ds-subline {
    padding-right: 0 !important;
    min-width: 0 !important;
  }

  /* Falls .has-variants nicht existiert: allgemein auf .ds-variants prüfen */
  .ds-items .ds-item:has(.ds-variants) .ds-title,
  .ds-items .ds-item:has(.ds-variants) .ds-line,
  .ds-items .ds-item:has(.ds-variants) .ds-subline {
    padding-right: 0 !important;
    min-width: 0 !important;
  }
}

/* ===== Desktop: lange Titel gezielt umbrechen (~20 Zeichen) ===== */
@media (min-width: 641px) {
  /* Standard mäßig dürfen Titel breiter sein … */
  .ds-items .ds-item .ds-title {
    display: inline-block;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* … aber bei Gerichten MIT Varianten begrenzen wir bewusst auf ~20 Zeichen */
  .ds-items .ds-item:has(.ds-variants) .ds-title,
  .ds-items .ds-item.has-variants .ds-title {
    max-width: 20ch; /* ≈ 20 Zeichen */
  }
}