/* Wochenplan am Handy: 7 Tages-Kacheln (static/js/plan_day_tabs.js, 30.09.2026).
   Alles nur bis 760 px - der Desktop bleibt unveraendert. */
@media (max-width: 760px){
  #planGrid .pdt-strip{
    position:sticky; top:var(--pdt-top, 3.7rem); z-index:15;
    display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:.35rem;
    margin:0 -.2rem .9rem; padding:.45rem .2rem; background:var(--bg);
  }
  #planGrid .pdt-tab{
    aspect-ratio:1 / 1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem;
    border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--ink);
    font:inherit; padding:.2rem 0; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  #planGrid .pdt-name{font-size:.72rem; font-weight:700; color:var(--ink-muted); line-height:1;}
  #planGrid .pdt-date{font-size:1.02rem; font-weight:800; line-height:1.1;}
  #planGrid .pdt-dots{display:flex; gap:2px; height:5px;}
  #planGrid .pdt-dots i{width:4px; height:4px; border-radius:50%; background:var(--border);}
  #planGrid .pdt-dots i.on{background:var(--accent-strong);}
  #planGrid .pdt-tab.is-today{border:2px solid var(--accent-strong);}
  #planGrid .pdt-tab.is-past:not(.active){opacity:.6;}
  #planGrid .pdt-tab.active{background:var(--accent-strong); border-color:var(--accent-strong); color:var(--accent-ink, #fff);}
  #planGrid .pdt-tab.active .pdt-name{color:inherit; opacity:.85;}
  #planGrid .pdt-tab.active .pdt-dots i{background:rgba(255,255,255,.35);}
  #planGrid .pdt-tab.active .pdt-dots i.on{background:#fff;}
  #planGrid .pdt-tab:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px;}

  #planGrid .plan-day-section.pdt-hidden{display:none !important;}
  #planGrid.pdt-on .plan-day-section{margin-bottom:1rem;}
  #planGrid.pdt-on .plan-day-section.plan-day-past{opacity:1;}   /* gewaehlter Tag immer gut lesbar */

  /* leere Mahlzeit: eine schmale Zeile statt drei grosser Knoepfe untereinander */
  #planGrid.pdt-on .plan-cell-actions.plan-cell-actions-stacked{grid-template-columns:minmax(0, 1fr) auto auto; gap:.35rem;}
  #planGrid.pdt-on .plan-cell-actions.plan-cell-actions-stacked .plan-cell-add-btn{grid-column:auto; min-height:2.5rem; font-size:1.1rem;}
  #planGrid.pdt-on .plan-cell-actions.plan-cell-actions-stacked > button:not(.plan-cell-add-btn){min-height:2.5rem; width:2.75rem; font-size:.95rem;}

  #planGrid .plan-day-section.pdt-enter-right{animation:pdt-in-right .22s ease;}
  #planGrid .plan-day-section.pdt-enter-left{animation:pdt-in-left .22s ease;}
}
@keyframes pdt-in-right{from{opacity:0; transform:translateX(24px);} to{opacity:1; transform:none;}}
@keyframes pdt-in-left{from{opacity:0; transform:translateX(-24px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){
  #planGrid .plan-day-section.pdt-enter-right, #planGrid .plan-day-section.pdt-enter-left{animation:none;}
}
@media print{
  #planGrid .pdt-strip{display:none !important;}
  #planGrid .plan-day-section.pdt-hidden{display:block !important;}
}
/* Gericht am Handy als kompakte Zeile: kleines Bild links, Text rechts (statt 140 px Foto) */
@media (max-width: 760px){
  #planGrid.pdt-on .plan-chip{display:grid; grid-template-columns:4.6rem minmax(0, 1fr); align-items:stretch; position:relative;}
  #planGrid.pdt-on .plan-chip-photo{width:4.6rem; height:auto; min-height:4.6rem; aspect-ratio:auto; border-radius:inherit; border-top-right-radius:0; border-bottom-right-radius:0;}
  #planGrid.pdt-on .plan-chip-photo img{width:100%; height:100%; object-fit:cover;}
  #planGrid.pdt-on .plan-chip-body{padding:.45rem 2.2rem .45rem .7rem; display:flex; flex-direction:column; justify-content:center; gap:.1rem;}
  /* Kopieren/Entfernen/Anpinnen rechts oben an der Zeile statt ueber dem Bild */
  #planGrid.pdt-on .plan-chip-remove{top:.35rem; right:.35rem; left:auto;}
  #planGrid.pdt-on .plan-chip-duplicate{top:auto; bottom:.35rem; right:.35rem; left:auto;}
  #planGrid.pdt-on .plan-chip-pin{top:.35rem; left:.35rem; right:auto;}
}

/* ---- Tag wie auf "Mein Tag" (30.09.2026, Winki: "zu viel Platz, komische Zeilenumbrueche,
   ich will es wie bei Mein Tag"): Zeitleiste schmal (Icon-Kreis 44 px), Mahlzeit-Name +
   "bis"-Zeit in einer Zeile, darunter die Kacheln in voller Breite; Naehrwerte stehen in
   der Gericht-Kachel (plan_day_tabs.js verschiebt .plan-summary dorthin). Nur bis 760 px. */
@media (max-width: 760px){
  #planGrid.pdt-on .plan-slot-row{
    display:grid; grid-template-columns:44px minmax(0, 1fr); column-gap:.8rem; row-gap:0;
    position:relative; margin:0; padding-bottom:1.1rem; align-items:start;
  }
  #planGrid.pdt-on .plan-slot-row::before{
    content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:var(--border);
  }
  #planGrid.pdt-on .plan-slot-row:has(.plan-slot-tl[data-tl="none"])::before,
  #planGrid.pdt-on .plan-slot-row:has(.plan-slot-tl[data-tl="last"])::before{display:none;}
  #planGrid.pdt-on .plan-slot-row:last-of-type, #planGrid.pdt-on .plan-slot-row:has(+ .plan-slot-row.plan-hint-row){padding-bottom:.4rem;}

  /* Label aufloesen: Kreis links ueber beide Zeilen, Text oben rechts */
  #planGrid.pdt-on .plan-slot-row-label.plan-slot-tl{display:contents;}
  #planGrid.pdt-on .plan-slot-tl::before, #planGrid.pdt-on .plan-slot-tl::after{display:none !important;}
  #planGrid.pdt-on .plan-slot-dot{grid-column:1; grid-row:1 / span 2; width:44px; height:44px;}
  #planGrid.pdt-on .plan-slot-dot .hicon{width:24px; height:24px;}
  #planGrid.pdt-on .plan-slot-text{
    grid-column:2; grid-row:1; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:.1rem .6rem;
    padding:.55rem 0 .55rem; font-size:1rem;
  }
  #planGrid.pdt-on .plan-slot-time{font-size:.8rem; font-weight:500; opacity:1;}
  #planGrid.pdt-on .plan-slot-row > .plan-cell{grid-column:2; grid-row:2;}

  /* Zelle ohne Rahmen, eine Spalte */
  #planGrid.pdt-on .plan-cell{
    display:flex; flex-direction:column; gap:.5rem; border:0; padding:0; min-height:0; background:none;
  }
  #planGrid.pdt-on .plan-cell.drag-over{background:var(--surface-hover);}

  /* Kachel in voller Breite: Bild links, Name + Portionen + Naehrwerte rechts */
  #planGrid.pdt-on .plan-chip{grid-template-columns:5rem minmax(0, 1fr); width:100%; min-height:5rem;}
  #planGrid.pdt-on .plan-chip-photo{width:5rem; min-height:5rem;}
  #planGrid.pdt-on .plan-chip-body{gap:.25rem; padding:.5rem 2.4rem .5rem .75rem;}
  #planGrid.pdt-on .plan-chip-name{font-size:.98rem; overflow-wrap:anywhere; hyphens:auto;}
  #planGrid.pdt-on .plan-chip-portions{font-size:.78rem;}
  /* Notiz-/Restaurant-/Produkt-Kachel: Text in einer Zeile statt Buchstabenturm */
  #planGrid.pdt-on .plan-chip-note, #planGrid.pdt-on .plan-chip:not(:has(.plan-chip-photo)){
    display:flex; align-items:center; width:100%; min-height:0; position:relative;
  }
  #planGrid.pdt-on .plan-chip-note .plan-chip-body, #planGrid.pdt-on .plan-chip:not(:has(.plan-chip-photo)) .plan-chip-body{
    flex-direction:row; align-items:center; gap:.5rem; padding:.6rem 2.6rem .6rem .75rem; flex:1; min-width:0;
  }
  #planGrid.pdt-on .plan-chip-note .plan-chip-name{overflow-wrap:break-word; hyphens:none;}

  /* Naehrwerte: eine Zeile, in der Kachel oder (bei mehreren Gerichten) unter den Kacheln */
  #planGrid.pdt-on .plan-summary{
    display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .8rem; font-size:.82rem; margin:0;
  }
  #planGrid.pdt-on .plan-summary-macros{flex-direction:row; flex-wrap:wrap; gap:.15rem .7rem; width:auto;}
  #planGrid.pdt-on .plan-chip-body .plan-summary{margin-top:.1rem;}

  /* "+ / Notiz / Restaurant" bei belegter Mahlzeit: kleine Knoepfe rechts statt volle Zeile */
  #planGrid.pdt-on .plan-cell-actions:not(.plan-cell-actions-stacked){
    display:flex; justify-content:flex-end; gap:.4rem;
  }
  #planGrid.pdt-on .plan-cell-actions:not(.plan-cell-actions-stacked) > button{
    width:2.6rem; min-height:2.1rem; padding:0;
  }
  #planGrid.pdt-on .plan-cell-actions.plan-cell-actions-stacked{margin-top:.05rem;}
}
@media (max-width: 760px){
  #planGrid.pdt-on .plan-summary.plan-summary-empty{display:none;}
}
@media (max-width: 760px){
  /* Naehrwerte als Fusszeile ueber die ganze Kachelbreite; Knoepfe oben rechts nebeneinander */
  #planGrid.pdt-on .plan-chip > .plan-summary{
    grid-column:1 / -1; justify-content:space-between; gap:.2rem .6rem; padding:.45rem .75rem;
    border-top:1px dashed var(--border); margin:0; font-size:.8rem;
  }
  #planGrid.pdt-on .plan-chip > .plan-summary .plan-summary-macros{flex:1; justify-content:flex-end; flex-wrap:nowrap; gap:.6rem;}
  #planGrid.pdt-on .plan-chip > .plan-summary .plan-summary-macro{gap:.2rem; white-space:nowrap;}
  #planGrid.pdt-on .plan-chip-body{padding-right:4.4rem;}
  #planGrid.pdt-on .plan-chip-duplicate{top:.35rem; bottom:auto; right:2.2rem;}
}
@media (max-width: 760px){
  #planGrid.pdt-on .plan-chip > .plan-summary{flex-wrap:nowrap; font-size:.76rem; padding:.45rem .65rem;}
  #planGrid.pdt-on .plan-chip > .plan-summary .plan-summary-kcal{white-space:nowrap; text-align:left;}
  #planGrid.pdt-on .plan-chip > .plan-summary .plan-summary-macros{gap:.45rem;}
}
@media (max-width: 760px){
  #planGrid.pdt-on .plan-summary{flex-direction:row;}
  #planGrid.pdt-on .plan-summary-macros{flex-direction:row;}
}
/* Tagessumme je Person: ohne Zeitleiste, Ueberschrift ueber der Liste (kein Ueberlappen) */
@media (max-width: 760px){
  #planGrid.pdt-on .plan-slot-row.plan-goals-row, #planGrid.pdt-on .plan-slot-row.plan-hint-row{
    display:block; padding:.6rem 0 0; border-top:1px solid var(--border); margin-top:.3rem;
  }
  #planGrid.pdt-on .plan-slot-row.plan-goals-row::before, #planGrid.pdt-on .plan-slot-row.plan-hint-row::before{display:none;}
  #planGrid.pdt-on .plan-goals-row-label, #planGrid.pdt-on .plan-hint-row .plan-hint-label{padding:0 0 .4rem;}
}