/* Seiten-Anordnung Website: nur Layout, Komponenten kommen aus app.css. */

/* Kategorie */
.ws-cat + .ws-cat { margin-top: var(--s5); }
.ws-cat-h { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); min-height: var(--ctl); }
.ws-cat-h h3 { font: 400 var(--fs-lg)/1.2 var(--serif); }

/* Produkte: Raster aus Zeilen-Karten, am Handy eine Spalte */
.ws-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-p {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img main price" "img meta acts";
  column-gap: var(--s3); row-gap: var(--s2); align-items: start;
  padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.ws-p.off .ws-thumb img { opacity: .55; }
.ws-p.off .ws-p-name { color: var(--text-2); }
.ws-p .ws-thumb { grid-area: img; width: 72px; height: 72px; }
.ws-p-main { grid-area: main; min-width: 0; }
.ws-p-name { font-weight: 600; font-size: var(--fs-body); line-height: 1.3; overflow-wrap: anywhere; }
.ws-p-desc { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-p-meta { grid-area: meta; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); min-width: 0; align-self: end; min-height: 32px; }
.ws-p-meta .st { font-size: var(--fs-sm); }
.ws-p-price { grid-area: price; text-align: right; font-weight: 600; font-size: var(--fs-body); white-space: nowrap; padding-top: 2px; }
.ws-p-price.none { font-weight: 500; color: var(--text-3); font-size: var(--fs-sm); }
.ws-p-acts { grid-area: acts; display: flex; justify-content: flex-end; align-items: center; gap: var(--s1); align-self: end; }
@media (max-width: 479px) {
  .ws-p { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img main price" "meta meta acts"; }
  .ws-p .ws-thumb { width: 56px; height: 56px; }
}

/* Vorschaubild (Liste) */
.ws-thumb { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-3); font-size: 20px; overflow: hidden; }
.ws-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* Zeilenende in Listen (Status und Knoepfe) */
.ws-row-end { display: flex; align-items: center; gap: var(--s1); flex: none; margin-left: auto; }
.ws-row-end .st { margin-right: var(--s2); }
@media (max-width: 559px) {
  .card .list > li:has(.ws-row-end) { flex-wrap: wrap; }
  .ws-row-end { flex-basis: 100%; justify-content: flex-end; }
  .ws-row-end .st { margin-right: auto; }
}
.ws-foot { margin-top: var(--s3); }

/* Produkt-Dialog: Formular links, Live-Vorschau rechts (am Handy darunter) */
.ws-pw { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
@media (min-width: 760px) {
  .ws-pw { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
  .ws-pw-prev { position: sticky; top: 0; }
}
.ws-sw-cell { display: flex; flex-direction: column; justify-content: flex-start; padding-top: calc(var(--fs-sm) * 1.3 + 6px); }
@media (max-width: 520px) { .ws-sw-cell { padding-top: 0; } }
.ws-prev-lbl { font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s2); }
.ws-prev { background: var(--bg); border-radius: var(--r-md); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.ws-prev.off { opacity: .6; }
.ws-prev-img { aspect-ratio: 4 / 5; border-radius: var(--r-sm); background: var(--surface-3); display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 32px; overflow: hidden; }
.ws-prev-img img { width: 100%; height: 100%; object-fit: contain; }
.ws-prev-body { display: flex; flex-direction: column; gap: var(--s1); padding: 0 var(--s1) var(--s1); }
.ws-prev-tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s1); }
.ws-prev-name { font: 400 22px/1.15 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.ws-prev-desc { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.4; }
.ws-prev-price { font-weight: 600; font-size: var(--fs-body); margin-top: var(--s1); }
.ws-prev-note { margin-top: var(--s2); }
@media (max-width: 759px) {
  .ws-prev { flex-direction: row; align-items: center; }
  .ws-prev-img { width: 84px; flex: none; }
  .ws-prev-name { font-size: 19px; }
}

/* Oeffnungszeiten */
.ws-hr-head, .ws-hr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s2); align-items: center; }
.ws-hr-head { font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s2); }
.ws-hr { margin-bottom: var(--s3); }
.ws-hr-end { display: flex; align-items: center; gap: var(--s2); }
.ws-hr-end .cb { font-size: var(--fs-sm); align-items: center; }
#hrs + .btn { margin-top: var(--s1); }
@media (max-width: 559px) {
  .ws-hr-head { display: none; }
  .ws-hr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
  .ws-hr-days { grid-column: 1 / -1; }
  .ws-hr-end { grid-column: 1 / -1; justify-content: space-between; }
}

/* Gewinner einer Ziehung */
.ws-winner { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); margin-bottom: var(--s4); border-radius: var(--r-md); background: var(--accent-soft); }
.ws-winner > .ic { font-size: 26px; color: var(--accent-deep); }
.ws-winner-n { font-weight: 700; font-size: var(--fs-md); }
.ws-part { min-width: 560px; }