@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Inter:wght@400;500;600;700&display=swap');

#dp-menu-root{
  --bg: #f4e4c6;
  --text: #242021;
  --muted: #4b4647;
  --accent: #971b1e;
  --card: rgba(255,255,255,.55);
  --line: rgba(36,32,33,.18);
  --radius: 18px;
  --pad: 14px;
  --max: 980px;
  --shadow: 0 10px 22px rgba(36,32,33,.12);

  color: var(--text);
  font-family: Inter, Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  background:
    radial-gradient(900px 600px at 15% -10%, rgba(151,27,30,.10), transparent 55%),
    radial-gradient(900px 600px at 90% 0%, rgba(151,27,30,.08), transparent 60%),
    var(--bg);

  border-radius: 12px;
  padding: 0;
  margin: 0 auto;
}

.dp-wrap{ max-width: var(--max); margin:0 auto; padding: 14px 14px 44px; }

/* Header */
.dp-header-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dp-title{
  margin: 14px 0 0;
  font-family: "Great Vibes", cursive;
  font-size: clamp(34px, 8vw, 52px);
  color: var(--accent);
  line-height: .95;
}
.dp-header p{ margin: 8px 0 0; color: var(--muted); font-size: 14px; }

/* Toggle (DE/EN) */
.dp-toggle{
  display:inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.52);
  box-shadow: 0 6px 14px rgba(36,32,33,.08);
}
.dp-btn{
  border:0;
  background: transparent;
  padding: 8px 10px;
  font-size: 12px;
  cursor:pointer;
  color: var(--muted);
  white-space: nowrap;
}
.dp-btn.is-active{
  background: rgba(151,27,30,.10);
  color: var(--accent);
  font-weight: 700;
}

/* SINGLE COLUMN ALWAYS */
.dp-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

.dp-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}

.dp-cardhead{
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.dp-cardhead strong{ font-size: 16px; letter-spacing:.2px; }
.dp-meta{ color: var(--muted); font-size: 13px; }

.dp-details{ border-top: 1px solid var(--line); }
.dp-details:first-of-type{ border-top:0; }

.dp-summary{
  list-style:none;
  cursor:pointer;
  padding: 14px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: rgba(255,255,255,.18);
}
.dp-summary::-webkit-details-marker{ display:none; }

.dp-sum-left{ display:flex; flex-direction:column; gap:2px; }
.dp-sum-left strong{
  font-family: "Great Vibes", cursive;
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
}

/* section subtitle in header */
.dp-section-sub{
  font-size: 13px;
  color: var(--muted);
}

/* chevron */
.dp-chev{
  width: 10px; height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-right: 4px;
  flex: 0 0 auto;
}
details[open] .dp-chev{ transform: rotate(225deg); }

.dp-content{ padding: 0 var(--pad) 14px; }

/* Section note (only visible when opened) */
.dp-note{
  margin: 10px 0 10px;
  color: var(--muted);
  font-size: 13px;
  white-space: pre-line;
  line-height: 1.25;
}

/* items default */
.dp-items{ display:flex; flex-direction:column; gap: 10px; }

.dp-item{
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(36,32,33,.14);
}

/* ✅ FIX: prevent price overflow in columns (grid instead of flex) */
.dp-row{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:start;
  gap: 10px;
  padding: 2px 4px;
  border-radius: 12px;
}
.dp-row--toggle{ cursor:pointer; }
.dp-row--toggle:hover{ background: rgba(255,255,255,.22); }

.dp-name{ font-weight: 700; letter-spacing:.1px; }
.dp-desc{ color: var(--muted); font-size: 13px; margin-top: 3px; }

.dp-right{ text-align:right; }
.dp-price-inline{
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: normal;      /* was nowrap */
  max-width: 14ch;
  line-height: 1.15;
}

/* Item note line + note-only rows */
.dp-item-note{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  white-space: pre-line;
}
.dp-item--note{
  background: rgba(255,255,255,.45);
  border-style: dashed;
}

/* Options list */
.dp-options{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(36,32,33,.20);
  display:flex;
  flex-direction:column;
  gap: 6px;
}

/* ✅ “flatter” options for 1–2 options (JS adds .dp-options--flat) */
.dp-options.dp-options--flat{
  margin-top: 8px;
  padding-top: 8px;
  gap: 4px;
}
.dp-options.dp-options--flat .dp-option-line{
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(36,32,33,.08);
}

.dp-option-line{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(36,32,33,.10);
}
.dp-option-left{ color: var(--text); font-size: 13px; }
.dp-option-name{ font-weight: 700; }
.dp-option-desc{ color: var(--muted); font-weight: 500; }

/* option prices smaller + slightly less dominant on desktop */
.dp-option-price{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 700;
  font-size: 12px;
  opacity: .92;
}
@media (min-width: 980px){
  .dp-option-price{ font-size: 11px; }
}

/* Options columns (only if JS adds .dp-options--cols) */
@media (min-width: 740px){
  .dp-options.dp-options--cols{
    display:grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dp-options.dp-options--cols .dp-option-line{ margin:0; }
}

/* collapsed: hide options completely */
.dp-options.is-collapsed{ display:none; }

/* Footer */
.dp-footer{ margin-top: 18px; }
.dp-footer-title{
  margin: 18px 0 10px;
  font-size: 14px;
  letter-spacing: .2px;
}

.dp-footbox{
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 8px 18px rgba(36,32,33,.10);
}
.dp-footbox--notes{ display:block; }

.dp-footnote{
  color: var(--muted);
  font-size: 13px;
  white-space: pre-line;
  margin: 0 0 8px;
}
.dp-footnote:last-child{ margin-bottom: 0; }

.dp-footbox--legend{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 740px){
  .dp-footbox--legend{ grid-template-columns: 1fr 1fr; }
}

.dp-legend-head{ font-weight: 800; margin-bottom: 6px; }
.dp-legend-row{ color: var(--muted); font-size: 13px; margin: 3px 0; }

/* ---------------------------
   Nested subsections styling
   --------------------------- */

.dp-subsections{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* smaller titles for child / deeper */
.dp-depth-1 > .dp-summary .dp-sum-left strong{ font-size: 26px; }
.dp-depth-2 > .dp-summary .dp-sum-left strong{ font-size: 24px; }
.dp-depth-3 > .dp-summary .dp-sum-left strong{ font-size: 22px; }

/* slightly softer summary bg for nested levels */
.dp-depth-1 > .dp-summary{ background: rgba(255,255,255,.12); }
.dp-depth-2 > .dp-summary{ background: rgba(255,255,255,.10); }
.dp-depth-3 > .dp-summary{ background: rgba(255,255,255,.08); }

/* subchild headings (not clickable) */
.dp-subchildwrap{
  margin-top: 10px;
  margin-bottom: 10px; /* ensures same spacing to following normal items */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dp-subchild-title{
  margin: 2px 0 6px;
  padding: 4px 2px;
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: .2px;
}
.dp-depth-2 .dp-subchild-title{ font-size: 13px; opacity: .95; }
.dp-depth-3 .dp-subchild-title{ font-size: 12px; opacity: .9; }

/* ---------------------------
   Columns for ITEMS (Masonry)
   --------------------------- */

@media (min-width: 980px){

  /* Default: Masonry (CSS columns) */
  .dp-items.dp-items--cols{
    display: block;
    column-count: 2;
    column-gap: 10px;
  }

  .dp-items.dp-items--cols .dp-item{
    display: inline-block;
    width: 100%;
    margin: 0 0 10px;
    break-inside: avoid;
  }

  .dp-items.dp-items--cols .dp-item.dp-item--wide{
    column-span: all;
    width: 100%;
  }

  /* 3 columns only when JS adds dp-cols-3 */
  .dp-items.dp-items--cols.dp-cols-3{
    column-count: 3;
  }

  /* ✅ Grid override (use this for <=2 items): makes items sit side-by-side */
  .dp-items.dp-items--cols.dp-cols-grid{
    column-count: initial;
    column-gap: initial;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .dp-items.dp-items--cols.dp-cols-grid .dp-item{
    display: block;
    width: auto;
    margin: 0;
    break-inside: initial;
  }

  .dp-items.dp-items--cols.dp-cols-grid .dp-item.dp-item--wide{
    grid-column: 1 / -1;
    width: auto;
  }

}

/* guard: never force 3 cols on narrower desktops */
@media (max-width: 1499px){
  .dp-items.dp-items--cols.dp-cols-3{
    column-count: 2;
  }
}
/* small codes next to title */
/* small, subtle codes next to title */
.dp-name{
  display:flex;
  align-items: baseline;
  justify-content: space-between; /* Code nach rechts */
  gap: 8px;
}

.dp-name-text{
  flex: 1 1 auto;
  min-width: 0; /* wichtig für sauberes Umbrechen */
}

.dp-codes-inline{
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15px;
  color: var(--muted);
  opacity: .70;
  white-space: nowrap; /* bleibt einzeilig rechts */
}

/* Compact stacked price (regular + small underneath) */
.dp-price-inline{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 2px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dp-pr-main{
  font-weight: 800;
  font-size: 13px;
}

.dp-pr-small{
  font-weight: 700;
  font-size: 11px;
  opacity: .85;
}

@media (max-width: 520px){
  .dp-pr-main{ font-size: 12px; }
  .dp-pr-small{ font-size: 10px; }
}
/* 1.13.14: Badges, inline codes and quieter title parentheses */
.dp-footer-title{
  font-weight:800;
  font-size:15px;
}

.dp-name{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:6px;
  flex-wrap:wrap;
}

.dp-name-text{
  flex:0 1 auto;
  min-width:0;
}

.dp-title-muted{
  font-weight:600;
  opacity:.68;
}

.dp-codes-inline,
.dp-inline-codes{
  display:inline;
  vertical-align:super;
  margin-left:3px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.08px;
  opacity:.72;
  white-space:nowrap;
}

.dp-desc .dp-inline-codes,
.dp-item-note .dp-inline-codes,
.dp-note .dp-inline-codes,
.dp-option-desc .dp-inline-codes{
  margin-left:2px;
  transform:none;
}

.dp-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  text-align:right;
}

.dp-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:3px;
  max-width:16ch;
}

.dp-badge{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.50);
  border:1px solid rgba(36,32,33,.12);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}

.dp-badge--vegan,
.dp-badge--veggie{
  background:rgba(255,255,255,.58);
}

.dp-badge--hot{
  background:rgba(151,27,30,.08);
  color:var(--accent);
}

.dp-badge--custom{
  font-weight:700;
  opacity:.9;
}

@media (max-width: 520px){
  .dp-row{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .dp-badges{
    max-width:12ch;
  }
  .dp-badge{
    font-size:9px;
    padding:1px 5px;
  }
}


/* 1.13.22: hard frontend cleanup for codes + legend layout */
#dp-menu-root .dp-codes-inline,
#dp-menu-root .dp-inline-codes{
  display:inline !important;
  vertical-align:super !important;
  margin-left:3px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--muted) !important;
  font-size:9px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.08px !important;
  opacity:.72 !important;
  white-space:nowrap !important;
}

#dp-menu-root .dp-footbox--legend{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
}
@media (min-width:740px){
  #dp-menu-root .dp-footbox--legend{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
#dp-menu-root .dp-footbox--legend > div:nth-child(n+3){
  display:none !important;
}

/* 1.13.30: inline option badges for fish/meat + stable badge placement */
#dp-menu-root .dp-right .dp-tag-badges{
  margin-left:0 !important;
  justify-content:flex-end !important;
}
#dp-menu-root .dp-tag{
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
}
#dp-menu-root .dp-tag--fish{
  background:rgba(33,115,160,.08) !important;
  border-color:rgba(33,115,160,.22) !important;
  color:#2173a0 !important;
}
#dp-menu-root .dp-tag--meat{
  background:rgba(120,58,34,.08) !important;
  border-color:rgba(120,58,34,.22) !important;
  color:#783a22 !important;
}
#dp-menu-root .dp-inline-badge{
  display:inline-flex !important;
  align-items:center !important;
  margin-left:4px !important;
  font-size:11px !important;
  line-height:1 !important;
  vertical-align:baseline !important;
  position:relative !important;
  top:-.06em !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#dp-menu-root .dp-inline-codes,
#dp-menu-root .dp-codes-inline{
  vertical-align:baseline !important;
  position:relative !important;
  top:-.28em !important;
}