/* Eigener Monatskalender für das Datumsfeld auf der Rezeptdetailseite.
   Progressive Enhancement: Ohne JavaScript bleibt der Öffnen-Button unsichtbar
   und das native Datumsfeld samt Label „Tag“ vollständig nutzbar. Mit aktivem
   JavaScript blendet das Skript das Feld samt Label aus; der Kalender-Button
   zeigt das gewählte Datum und bleibt die sichtbare Steuerung. */

.plan-date-field{display:flex;align-items:end;gap:8px}.plan-date-field label{display:grid;gap:4px;color:var(--dark);font-size:13px;font-weight:800}.plan-date-field input{width:140px;min-height:44px;padding:8px;border:1px solid #b8cda4;border-radius:8px;font:17px "Nunito"}.plan-date-open{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:44px;padding:6px 10px;border:1px solid var(--dark);border-radius:8px;color:var(--dark);background:#fff;font:800 13px "Nunito";cursor:pointer}.plan-date-open:hover{color:#fff;background:var(--dark)}.plan-date-open:focus-visible{outline:3px solid rgba(61,122,74,.35);outline-offset:2px}.plan-date-open-value{font-weight:900}

.plan-day-picker{width:min(400px,calc(100% - 28px));padding:20px;border:0;border-radius:18px;color:var(--ink);background:#fff;box-shadow:0 25px 80px rgba(0,0,0,.25)}.plan-day-picker::backdrop{background:rgba(5,38,26,.7);backdrop-filter:blur(4px)}.plan-day-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.plan-day-picker-head h2{margin:0;color:var(--dark);font-size:22px}.plan-day-picker-nav{display:flex;gap:8px}.plan-day-picker-nav-button{display:grid;width:44px;height:44px;padding:0;place-items:center;border:1px solid #c8d9b7;border-radius:50%;color:var(--dark);background:#fff;font-size:22px;line-height:1;cursor:pointer}.plan-day-picker-nav-button:hover{border-color:var(--green);color:#fff;background:var(--green)}.plan-day-picker-nav-button:focus-visible{outline:3px solid rgba(61,122,74,.35);outline-offset:2px}.plan-day-picker-month{margin:14px 0 10px;color:var(--dark);font-size:16px;font-weight:900;text-align:center}.plan-day-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}.plan-day-picker-weekdays span{text-align:center;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}.plan-day-picker-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.plan-day-picker-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;padding:5px 2px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink);font:700 15px "Nunito";cursor:pointer}.plan-day-picker-day:hover{background:#eef6e9}.plan-day-picker-day:focus-visible{outline:3px solid rgba(61,122,74,.35);outline-offset:2px}.plan-day-picker-day.is-today{box-shadow:inset 0 0 0 2px var(--green)}.plan-day-picker-day.is-selected{background:var(--dark);color:#fff}.plan-day-picker-day.is-selected.is-today{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--green)}.plan-day-picker-day.is-selected .plan-day-picker-dot{background:#fff}.plan-day-picker-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);opacity:0;transform:scale(.4);transition:opacity .12s,transform .12s}.plan-day-picker-day.is-occupied .plan-day-picker-dot{opacity:1;transform:scale(1)}.plan-day-picker-legend{display:flex;align-items:center;gap:8px;margin:12px 0 4px;color:var(--muted);font-size:12px;line-height:1.45}.plan-day-picker-legend-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--orange)}.plan-day-picker-status{min-height:20px;margin:4px 0 0;color:var(--dark);font-size:13px;font-weight:700}.plan-day-picker-error{margin:6px 0 0;padding:10px 12px;border:1px solid #f0c5bd;border-radius:8px;color:#8f291d;background:#fff0ec;font-size:13px;font-weight:700}.plan-day-picker-actions{display:flex;justify-content:flex-end;margin-top:14px}.plan-day-picker-actions .button{min-height:44px;padding:8px 16px}

@media(max-width:560px){.plan-date-field{flex-direction:column;align-items:stretch}.plan-date-field input{width:100%}.plan-date-open{width:100%}}
@media(max-width:480px){.plan-day-picker{width:calc(100% - 12px);padding:14px}.plan-day-picker-grid,.plan-day-picker-weekdays{gap:2px}.plan-day-picker-day{min-height:44px;padding:4px 1px;border-radius:8px}}
