/* Best Break – Persönlicher Wochenplan: Editor (/mein-wochenplan/). Baut auf css/wochenplan.css auf (Farben, Umschalter,
 * Seitenkopf, Einkaufskarte). Design: docs/wochenplan/design-privat/ (Main = Desktop, MobileEditor/MobileAuswahl = Handy ≤ 800 px).
 * Desktop: Zeitleiste der Tage mit Rezeptkarten + mitlaufende Einkaufskarte; Handy: Umschalter Woche/Einkaufsliste, Tage als
 * Akkordeon, Auswahl als Bottom-Sheet. Hover = Bewegung, nie Unterstreichung. Schriften in px: die Seite setzt 20px als rem-Basis. */
.wochenplan-planer { padding: 56px 0 80px; }
.wpp-laedt, .wpp-leer { color: var(--wp-text); }
.wpp-art--fruehstueck { color: #8A6D12; }
.wpp-art--abendessen { color: #3E6A7B; }

/* ---------- Pills (Rezeptseiten-Optik wie .rezept-share-btn) ---------- */
.wpp-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 10px 19px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid rgba(214, 184, 74, .55); background: #fff;
  font: 700 15px/1.1 var(--font-text); color: var(--color-primary); text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.wpp-pill svg { display: block; flex: none; }
.wpp-pill--aktiv { background: var(--color-rezepte); border-color: #E0C84A; }
.wpp-pill--grau { border-color: rgba(107, 105, 112, .22); }
.wpp-pill--klein { min-height: 36px; padding: 9px 15px; font-size: 13.5px; }
a.wpp-pill:hover, a.wpp-pill:focus, a.wpp-pill:visited { color: var(--color-primary); text-decoration: none; }
.wpp-pill:not([disabled]):not([aria-disabled="true"]):hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(107, 105, 112, .16); }
.wpp-pill[disabled], .wpp-pill[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.wpp-nur-handy { display: none; }

.wpp-pill:focus-visible, .wpp-rund:focus-visible, .wpp-mehr:focus-visible, .wpp-plus:focus-visible, .wpp-chip:focus-visible,
.wpp-tag-knopf:focus-visible, .wpp-wahl:focus-visible, .wpp-dialog-zu:focus-visible, .wpp-eintrag-titel:focus-visible,
.wpp-hinweis-link:focus-visible, .wpp-liste button:focus-visible, .wpp-entwurf-raus:focus-visible, .wpp-vorschlag-knopf:focus-visible,
.wpp-optionen-check input:focus-visible, .wpp-ziel:focus-within, .wpp-notiz input:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 2px;
}

/* Runde ±-Knöpfe 28 px (wie der Portionsrechner); Trefferfläche per ::after auf 40 px erweitert */
.wpp-rund {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%; background: var(--color-rezepte); color: var(--color-primary); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.wpp-rund::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.wpp-rund:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(107, 105, 112, .18); }

/* ---------- Kopf „Deine Woche“ ---------- */
.wpp-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; }
.wpp-plan { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.wpp-woche-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.wpp-woche-titel { margin: 0; padding: 0; font: 700 40px/1.2 var(--font-headline); color: var(--color-primary); }
.wpp-schalter { display: flex; gap: 8px; flex-wrap: wrap; }
.wpp-schalter-knopf { gap: 7px; }
.wpp-schalter-knopf[aria-pressed="false"] { border-color: rgba(107, 105, 112, .22); }
.wpp-meldung { margin: -12px 0 0; font-size: 15px; color: var(--wp-text); }
.wpp-meldung:empty { display: none; }

/* ---------- Zeitleiste (wie die Zubereitungsschritte) ---------- */
.wpp-zeitleiste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wpp-tag { position: relative; padding: 0 0 40px 78px; }
.wpp-tag:last-child { padding-bottom: 0; }
.wpp-tag:not(:last-child)::before { content: ''; position: absolute; left: 25px; top: 60px; bottom: 8px; width: 2px; background: rgba(214, 184, 74, .4); }
.wpp-knoten {
  position: absolute; left: 0; top: 0; width: 52px; height: 52px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff; border: 1px solid #E0C84A; font: 700 22px/1 var(--font-headline); color: var(--color-primary);
}
.wpp-tag.is-belegt .wpp-knoten { background: var(--color-rezepte); }
.wpp-tag[data-tag="vorbereitung"] .wpp-knoten { font-size: 15px; }
.wpp-tag-name { margin: 0 0 16px; padding: 8px 0 0; font: 700 28px/1.2 var(--font-headline); letter-spacing: 1px; color: var(--color-primary); }
.wpp-tag-knopf { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 10px; align-items: center; width: 100%; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: default; }
.wpp-tag-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wpp-tag-zeile, .wpp-tag-chevron { display: none; }
.wpp-felder { display: grid; grid-template-columns: repeat(var(--wp-spalten, 2), minmax(0, 1fr)); gap: 20px; }
.wpp-feld { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- Rezeptkarte ---------- */
.wpp-eintrag { display: flex; flex-direction: column; min-width: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 10px 28px rgba(107, 105, 112, .12); }
.wpp-eintrag-kopf { position: relative; height: 150px; }
.wpp-eintrag-bild { display: block; width: 100%; height: 150px; object-fit: cover; background: var(--color-rezepte-soft); }
.wpp-eintrag-art {
  position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94);
  font-size: 11.5px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
}
.wpp-eintrag-koerper { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.wpp-eintrag-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wpp-eintrag-titel { align-self: flex-start; font: 700 21px/1.25 var(--font-headline); color: var(--color-primary); overflow-wrap: break-word; hyphens: auto; }
a.wpp-eintrag-titel { text-decoration: none; transition: transform .2s ease; }
a.wpp-eintrag-titel:hover, a.wpp-eintrag-titel:focus { color: var(--color-primary); text-decoration: none; }
a.wpp-eintrag-titel:hover { transform: translateX(3px); }
.wpp-eintrag .wochenplan-notiz { font-size: 15px; color: var(--color-primary); }
/* Bei offenem Menü steht die Notiz im Feld; die Zeile in der Karte bleibt verborgen, damit nichts springt (change feuert beim mousedown) */
.wpp-eintrag.is-menue .wpp-eintrag-text .wochenplan-notiz { display: none; }
.wpp-eintrag-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.wpp-portionen { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.wpp-portionen b { font-weight: 700; }
.wpp-mehr {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0;
  border: 1px solid rgba(214, 184, 74, .55); border-radius: 50%; background: #fff; color: var(--color-primary); cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.wpp-mehr::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; }
.wpp-mehr[aria-expanded="true"] { background: var(--color-rezepte); }
.wpp-mehr:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(107, 105, 112, .16); }
.wpp-eintrag.is-weg .wpp-eintrag-kopf { height: 72px; }
.wpp-eintrag.is-weg .wpp-eintrag-bild { height: 72px; }
.wpp-eintrag.is-weg .wpp-eintrag-kopf, .wpp-eintrag.is-weg .wpp-eintrag-text { opacity: .55; filter: grayscale(1); }

/* „⋯“-Menü innerhalb der Karte */
.wpp-menue { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--color-rezepte-soft); border-top: 1px solid rgba(214, 184, 74, .4); }
.wpp-notiz { display: flex; flex-direction: column; gap: 6px; }
.wpp-notiz-kopf { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.wpp-zaehler { font-weight: 300; }
.wpp-notiz input { box-sizing: border-box; width: 100%; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(214, 184, 74, .55); background: #fff; font: 300 16px var(--font-text); color: #4D4D4D; }
.wpp-chips, .wpp-menue-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.wpp-menue-aktionen { padding-top: 10px; border-top: 1px dashed rgba(107, 105, 112, .16); }
.wpp-chip {
  min-height: 32px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(214, 184, 74, .55); background: #fff;
  font: 700 12.5px/1.1 var(--font-text); color: var(--color-primary); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.wpp-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(107, 105, 112, .14); }

/* Freier Platz: gestrichelte hellgelbe Karte */
.wpp-plus {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 230px; padding: 20px; box-sizing: border-box;
  border-radius: 18px; border: 1.5px dashed rgba(214, 184, 74, .75); background: var(--color-rezepte-soft);
  font: inherit; color: var(--color-primary); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wpp-plus:hover { transform: translateY(-2px); border-color: #E0C84A; box-shadow: 0 8px 20px rgba(107, 105, 112, .12); }
.wpp-plus[disabled] { display: none; }
.wpp-plus-kreis { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; box-sizing: border-box; border-radius: 50%; background: var(--color-rezepte); border: 1px solid #E0C84A; }
.wpp-plus-kreis svg { width: 16px; height: 16px; }
.wpp-plus-text { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wpp-plus-art { font-size: 11.5px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.wpp-plus-titel { font: 700 20px/1.2 var(--font-headline); }
.wpp-plus.is-kompakt { flex-direction: row; min-height: 56px; padding: 10px 16px; }
.wpp-plus.is-kompakt .wpp-plus-kreis { width: 32px; height: 32px; }
.wpp-plus.is-kompakt .wpp-plus-kreis svg { width: 12px; height: 12px; }
.wpp-plus.is-kompakt .wpp-plus-text { font: 700 15px/1.2 var(--font-text); }

/* ---------- Einkaufskarte (wie .rezept-zutaten-card) ---------- */
.wpp-einkauf-karte { display: block; gap: 0; padding: 32px; }
.wpp-einkauf-titel { margin: 0 0 22px; padding: 0; font: 700 32px/1.2 var(--font-headline); letter-spacing: 1px; color: var(--color-primary); }
.wpp-personen { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid rgba(214, 184, 74, .4); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.wpp-personen output { font: inherit; }
.wpp-einkauf-hinweis { margin: 18px 0 0; font-size: 13.6px; line-height: 1.5; color: #8C9590; }
.wpp-liste-status { margin: 0 0 8px; font-size: 14px; color: #9a4a00; }

/* Live-Liste in Zutatenlisten-Optik: gelbe Punkte, gestrichelte Linien, Gang-Überschriften 16 px Caps (nur in der Editor-Karte) */
.wpp-liste .wochenplan-gruppe { border-top: 0; margin-bottom: 18px; }
.wpp-liste .wochenplan-gruppe:last-child { margin-bottom: 0; }
.wpp-liste .wochenplan-gruppe-kopf { min-height: 40px; padding: 4px 0; }
.wpp-liste .wochenplan-gang > .wochenplan-gruppe-kopf { grid-template-columns: minmax(0, 1fr) 16px; }
.wpp-liste .wochenplan-gang .wochenplan-gruppe-wann, .wpp-liste .wochenplan-gruppe-zahl { display: none; }
.wpp-liste .wochenplan-gang .wochenplan-gruppe-name, .wpp-liste .wochenplan-vorrat .wochenplan-gruppe-name { font: 700 16px/1.3 var(--font-text); letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary); }
.wpp-liste .wochenplan-zeilen { padding: 0; }
.wpp-liste .wochenplan-zeile label:not(.wochenplan-chip) { position: relative; padding: 11px 0 11px 32px; font-size: 20px; font-weight: 300; line-height: 1.4; color: var(--color-primary); cursor: default; }
.wpp-liste .wochenplan-zeile label:not(.wochenplan-chip)::before {
  content: ''; position: absolute; left: 0; top: 20px; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; background: var(--color-rezepte); border: 1px solid #E0C84A;
}
.wpp-liste .wochenplan-posten-wann { margin: 15px 0 0; font-size: 13px; }
.wpp-liste .wochenplan-posten-hinweis, .wpp-liste .wochenplan-posten-rezepte { padding-left: 32px; font-size: 13px; }
.wpp-liste .wochenplan-chips { padding-top: 8px; }

/* ---------- Dialog (Merkliste-Look) ---------- */
.wpp-dialog { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wpp-dialog[hidden] { display: none; }
.wpp-dialog-overlay { position: absolute; inset: 0; background: rgba(43, 43, 48, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.wpp-dialog-box {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto;
  padding: 28px 32px 32px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(43, 43, 48, .35); color: var(--color-primary);
}
.wpp-dialog-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wpp-dialog-kopf-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wpp-dialog-ueber { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.wpp-dialog-titel { margin: 0; padding: 0; font: 700 30px/1.2 var(--font-headline); color: var(--color-primary); }
.wpp-dialog-zu {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: var(--color-rezepte-soft); color: var(--color-primary); cursor: pointer; transition: transform .2s ease, background-color .2s ease;
}
.wpp-dialog-zu:hover { background: var(--color-rezepte); transform: rotate(90deg); }
.wpp-dialog-inhalt { display: flex; flex-direction: column; gap: 14px; }
.wpp-dialog-inhalt > p { margin: 0; }
.wpp-wahl-liste { display: flex; flex-direction: column; gap: 6px; }
.wpp-wahl {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: #fff;
  text-align: left; font: inherit; color: var(--color-primary); cursor: pointer; transition: transform .2s ease, background-color .2s ease;
}
.wpp-wahl:not([disabled]):hover { background: var(--color-rezepte-soft); transform: translateY(-2px); }
.wpp-wahl[disabled] { opacity: .5; cursor: not-allowed; }
.wpp-wahl-bild { display: block; flex: none; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--color-rezepte-soft); }
.wpp-wahl-text { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.wpp-wahl-titel { font: 700 21px/1.2 var(--font-headline); }
.wpp-wahl-drin { padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid rgba(107, 105, 112, .22); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.wpp-dialog-fuss { margin: 0; }
.wpp-ziele { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.wpp-ziel { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(214, 184, 74, .45); background: #fff; font-size: 16px; cursor: pointer; }
.wpp-ziel:has(input:checked) { background: var(--color-rezepte); border-color: #E0C84A; }
.wpp-ziel input { margin: 0; accent-color: #C9A82A; }
.wpp-ziel.is-hier { opacity: .55; cursor: default; }
.wpp-ziel-hier { font-size: 13px; }
html.wpp-dialog-offen { overflow: hidden; }

/* ---------- Vorschläge (TP4b, Design: docs/wochenplan/design-vorschlaege/) ---------- */
.wpp-optionen { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 4px; padding: 12px 20px; border-radius: 18px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(214, 184, 74, .35); }
.wpp-optionen[hidden] { display: none; }
.wpp-optionen-check { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: 16px; font-weight: 400; color: #4D4D4D; cursor: pointer; }
.wpp-optionen-check input { width: 20px; height: 20px; margin: 0; accent-color: #8A6D12; }
.wpp-optionen-trenner { width: 1px; height: 26px; background: rgba(214, 184, 74, .45); }
.wpp-formen { display: inline-flex; align-items: center; gap: 6px; }
.wpp-formen-label { margin-right: 4px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.wpp-vorschlag-leiste {
  position: sticky; top: 104px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 12px 16px 12px 18px; border-radius: 18px; background: #fff; border: 2px dashed #D6B84A; box-shadow: 0 8px 26px rgba(107, 105, 112, .10);
}
.wpp-vorschlag-leiste-text { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 400; color: #4D4D4D; }
.wpp-vorschlag-leiste-text b { font-weight: 700; }
.wpp-vorschlag-leiste-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-rezepte); border: 1px solid #E0C84A; color: var(--color-primary); }
.wpp-vorschlag-leiste-knoepfe { display: inline-flex; gap: 8px; }

.wpp-entwurf { display: flex; flex-direction: column; min-width: 0; border-radius: 18px; overflow: hidden; background: #fff; border: 2px dashed #D6B84A; }
.wpp-entwurf .wpp-eintrag-kopf { height: 136px; }
.wpp-entwurf .wpp-eintrag-bild { height: 136px; opacity: .82; filter: saturate(.8); }
.wpp-entwurf .wpp-eintrag-koerper { padding-bottom: 0; background: #FFFDF5; }
.wpp-entwurf-plakette {
  position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: #6B6970; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.wpp-entwurf-plakette svg { width: 12px; height: 12px; }
.wpp-entwurf-grund { font-size: 14px; line-height: 1.4; color: var(--wp-text); }
.wpp-entwurf-aktionen { display: flex; align-items: center; gap: 8px; padding: 12px 16px 16px; background: #FFFDF5; }
.wpp-entwurf-raus {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; margin-left: auto; padding: 0;
  border-radius: 50%; border: 1px solid rgba(107, 105, 112, .22); background: #fff; color: var(--color-primary); cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wpp-entwurf-raus:not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(107, 105, 112, .14); }
.wpp-entwurf-raus[disabled] { opacity: .5; cursor: not-allowed; }

.wpp-frei {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 230px; padding: 20px; box-sizing: border-box;
  border-radius: 18px; border: 1.5px dashed rgba(214, 184, 74, .75); background: var(--color-rezepte-soft); transition: border-color .2s ease;
}
.wpp-frei .wpp-plus { min-height: 0; width: auto; padding: 6px 12px; border: 0; background: none; }
.wpp-frei .wpp-plus:hover { box-shadow: none; }
.wpp-frei-oder { font-size: 13px; color: #8C9590; }
.wpp-vorschlag-knopf svg { width: 14px; height: 14px; }
.wpp-frei--nichts { padding: 20px 24px; text-align: center; }
.wpp-nichts-text { margin: 0; font-size: 15px; line-height: 1.45; color: #4D4D4D; }
.wpp-tag.is-entwurf .wpp-knoten { border: 2px dashed #D6B84A; }
.wpp-einkauf-entwuerfe { margin: 6px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px dashed #D6B84A; font-size: 14px; line-height: 1.45; color: #4D4D4D; }
.wpp-dialog-text { margin: 0 0 6px; font-size: 17px; line-height: 1.5; color: #4D4D4D; }
.wpp-dialog-fuss--reihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Hinweiskarte + Meal-Prep-Gruppen (TP4c, Design: docs/wochenplan/design-vorschlaege/MealPrep.dc.html) ---------- */
/* Abstand nach unten kommt aus dem gap der Plan-Spalte (28 px wie im Artboard) */
.wpp-hinweis { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; margin: 0; padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid rgba(214, 184, 74, .55); box-shadow: 0 8px 26px rgba(107, 105, 112, .10); }
.wpp-hinweis-kreis { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; box-sizing: border-box; border-radius: 50%; background: var(--color-rezepte); border: 1px solid #E0C84A; color: var(--color-primary); }
.wpp-hinweis-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wpp-hinweis-titel { font: 700 24px/1.2 var(--font-headline); color: var(--color-primary); }
.wpp-hinweis-text p { margin: 0; font-size: 17px; line-height: 1.5; color: #4D4D4D; }
.wpp-hinweis-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wpp-hinweis-knoepfe .wpp-pill { font-size: 14.5px; padding: 0 17px; gap: 8px; }
.wpp-hinweis-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; font-weight: 700; font-size: 14.5px; color: var(--color-primary); text-decoration: none; transition: transform .2s ease; }
.wpp-hinweis-link:hover, .wpp-hinweis-link:focus, .wpp-hinweis-link:visited { text-decoration: none; color: var(--color-primary); }
.wpp-hinweis-link:hover, .wpp-hinweis-link:focus { transform: translateX(3px); }
.wpp-entwurf-gehoert { font-size: 13px; color: #8C9590; }
/* Prep-Karte: „Mit Esstagen übernehmen“ ist breit → Knöpfe dürfen umbrechen, ✕ bleibt rechts */
.wpp-entwurf--prep .wpp-entwurf-aktionen { flex-wrap: wrap; }
/* „Vorbereiten · Abendessen“ ist lang: Meal-Prep-Plakette unten rechts im Bild statt oben (sonst überlappen beide) */
.wpp-entwurf--prep .wpp-entwurf-plakette { top: auto; bottom: 12px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) and (min-width: 801px) {
  .wpp-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
  .wpp-einkauf-karte { padding: 26px; }
  .wpp-tag { padding-left: 66px; }
}

/* ---------- Handy ---------- */
@media (max-width: 800px) {
  .wpp-nur-breit { display: none; }
  span.wpp-nur-handy { display: inline; }
  .wpp-pill--breit.wpp-nur-handy { display: flex; }
  .wochenplan-privat-aktionen .wpp-pill { padding: 10px 16px; font-size: 14px; }
  .wpp-pill--klein, .wpp-chip { min-height: 40px; }
  .wpp-pill--breit { width: 100%; padding: 14px 19px; }

  .wochenplan-planer { padding: 22px 0 40px; }
  .wochenplan-planer .boxed { width: auto; margin: 0 16px; }
  .wpp-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wpp-plan { gap: 18px; }

  /* Umschalter exakt wie .rezept-mobile-tabs */
  .wpp-tabs .wochenplan-tab { padding: 11px 10px; font-size: 14.4px; letter-spacing: .06em; }
  .wpp-tabs .wochenplan-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

  .wpp-woche-kopf { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wpp-woche-titel { font-size: 28px; }
  .wpp-schalter-knopf { padding: 9px 15px; font-size: 14px; }
  .wpp-meldung { margin-top: -6px; }

  /* Zeitleiste mit aufklappbaren Tagen */
  .wpp-tag { padding: 0 0 18px 54px; }
  .wpp-tag:not(:last-child)::before { left: 19px; top: 50px; bottom: 4px; }
  .wpp-knoten { top: 4px; width: 40px; height: 40px; font-size: 17px; }
  .wpp-tag[data-tag="vorbereitung"] .wpp-knoten { font-size: 12px; }
  .wpp-tag-name { margin: 0; padding: 0; font-size: 22px; }
  .wpp-tag-knopf { min-height: 48px; cursor: pointer; }
  .wpp-tag-zeile { display: block; font: 300 13px/1.4 var(--font-text); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wpp-tag-chevron { display: block; transition: transform .2s ease, translate .2s ease; }
  .wpp-tag-knopf:hover .wpp-tag-chevron { translate: 0 2px; }
  .wpp-tag.is-offen .wpp-tag-chevron { transform: rotate(180deg); }
  .wpp-tag:not(.is-offen) > .wpp-felder { display: none; }
  .wpp-felder { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 12px; }
  .wpp-feld { gap: 14px; }

  .wpp-eintrag-kopf, .wpp-eintrag-bild { height: 130px; }
  .wpp-eintrag-art { left: 10px; top: 10px; padding: 5px 11px; font-size: 11px; }
  .wpp-eintrag-koerper { gap: 4px; padding: 12px 14px 14px; }
  .wpp-eintrag-titel { font-size: 19px; }
  .wpp-mehr { width: 40px; height: 40px; }
  .wpp-mehr::after { inset: 0; }

  .wpp-plus { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 76px; padding: 14px 16px; text-align: left; }
  .wpp-plus-kreis { width: 40px; height: 40px; }
  .wpp-plus-kreis svg { width: 14px; height: 14px; }
  .wpp-plus-text { align-items: flex-start; gap: 2px; }
  .wpp-plus-art { font-size: 11px; }
  .wpp-plus-titel { font-size: 18px; }
  .wpp-plus.is-kompakt { min-height: 56px; }

  .wpp-einkauf-karte { padding: 24px 20px; }
  .wpp-einkauf-titel { margin-bottom: 18px; font-size: 28px; }
  .wpp-personen { margin-bottom: 20px; padding-bottom: 18px; }
  .wpp-einkauf-hinweis { font-size: 13px; }
  .wpp-liste .wochenplan-zeile label:not(.wochenplan-chip) { min-height: 0; align-items: flex-start; padding: 11px 0 11px 32px; font-size: 18px; }
  .wpp-liste .wochenplan-zeile label:not(.wochenplan-chip)::before { top: 19px; }
  .wpp-liste .wochenplan-posten-wann { min-height: 40px; margin: 3px 0 0; font-size: 12px; }
  .wpp-liste .wochenplan-zeilen { padding-left: 0; }

  /* Auswahl als Bottom-Sheet */
  .wpp-dialog { align-items: flex-end; padding: 0; }
  .wpp-dialog-box { max-width: none; max-height: 85vh; padding: 12px 20px 28px; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(43, 43, 48, .25); }
  .wpp-dialog-box::before { content: ''; align-self: center; flex: none; width: 44px; height: 5px; border-radius: 3px; background: rgba(107, 105, 112, .22); }
  .wpp-ziele { grid-template-columns: minmax(0, 1fr); }

  /* Vorschläge (Design: MobileEditor.dc.html) */
  .wpp-optionen { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; text-align: left; }
  .wpp-optionen-trenner, .wpp-formen-label { display: none; }
  .wpp-optionen-check { min-height: 44px; font-size: 15px; }
  .wpp-optionen-check input { width: 22px; height: 22px; }
  .wpp-formen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wpp-formen .wpp-pill { justify-content: center; min-height: 44px; padding: 0 6px; }
  .wpp-vorschlag-leiste { top: 76px; flex-direction: column; align-items: stretch; }
  .wpp-vorschlag-leiste-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpp-vorschlag-leiste-knoepfe .wpp-pill { justify-content: center; min-height: 44px; padding: 0 6px; }
  .wpp-entwurf { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 12px; padding: 10px; }
  .wpp-entwurf .wpp-eintrag-kopf { height: 96px; border-radius: 12px; overflow: hidden; }
  .wpp-entwurf .wpp-eintrag-bild { height: 96px; }
  .wpp-entwurf .wpp-eintrag-art { display: none; }
  .wpp-entwurf-plakette { right: 6px; top: 6px; padding: 4px 8px; font-size: 10px; }
  .wpp-entwurf .wpp-eintrag-koerper { padding: 2px 0 0; background: none; }
  .wpp-entwurf-aktionen { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; padding: 12px 0 0; background: none; }
  .wpp-entwurf-aktionen .wpp-pill { justify-content: center; gap: 6px; min-height: 44px; padding: 0 6px; }
  /* schmale Spalten (Canvas): Haken nur am Desktop, damit „Übernehmen“ in die Pille passt */
  .wpp-entwurf-aktionen [data-a="entwurf-rein"] svg, .wpp-vorschlag-leiste-knoepfe svg { display: none; }
  .wpp-entwurf-raus { width: 44px; height: 44px; }
  .wpp-frei { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 76px; padding: 12px 12px 12px 14px; }
  .wpp-frei .wpp-plus { justify-content: flex-start; padding: 0; }
  .wpp-frei-oder { display: none; }
  .wpp-vorschlag-knopf { min-height: 44px; }
  .wpp-frei--nichts { display: flex; }
  .wpp-frei--nichts .wpp-pill { min-height: 44px; }   /* „Rezept selbst wählen“: Tippziel ≥ 44 px */
  /* Hinweiskarte: Kreis über dem Text, Knöpfe volle Breite */
  .wpp-hinweis { grid-template-columns: 1fr; padding: 18px 16px; }
  .wpp-hinweis-knoepfe { display: grid; grid-template-columns: 1fr; }
  .wpp-hinweis-knoepfe .wpp-pill, .wpp-hinweis-link { justify-content: center; min-height: 44px; }
  /* Prep: „Mit Esstagen übernehmen“ eigene Zeile, darunter Anderer + ✕; Esstag: Hinweis + ✕ */
  .wpp-entwurf--prep .wpp-entwurf-aktionen, .wpp-entwurf--esstag .wpp-entwurf-aktionen { grid-template-columns: minmax(0, 1fr) 44px; }
  .wpp-entwurf--prep [data-a="entwurf-rein"] { grid-column: 1 / -1; }
  .wpp-entwurf--prep .wpp-entwurf-plakette { top: 6px; bottom: auto; white-space: nowrap; }   /* Art-Pille ist am Handy ausgeblendet */
}

@media (prefers-reduced-motion: reduce) {
  .wpp-pill, .wpp-rund, .wpp-mehr, .wpp-plus, .wpp-chip, .wpp-wahl, .wpp-dialog-zu, a.wpp-eintrag-titel, .wpp-tag-chevron,
  .wpp-entwurf-raus, .wpp-vorschlag-knopf, .wpp-frei, .wpp-hinweis-link { transition: none; }
}