/* =========================================================
   Kastner Metzgerei — printable WOCHENANGEBOTE sheet component
   Rebuilt for official Kastner Metzgerei offer format matching original site.
   ========================================================= */

.ms-fit {
  position: relative;
  width: 100%;
  aspect-ratio: 210 / 297;
  overflow: hidden;
}
.ms-fit > .menu-sheet {
  position: absolute;
  top: 0;
  left: 0;
  width: 794px;
  height: 1123px;
  transform: scale(var(--ms-k, 1));
  transform-origin: 0 0;
}

/* The sheet is embedded in three different hosts (admin preview, the homepage
   card — which is a <button>, hence centred text — and the lightbox), so it
   states its own text-align and image behaviour instead of inheriting theirs. */
.menu-sheet {
  width: 100%;
  aspect-ratio: 210 / 297;
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  font-family: "Outfit", system-ui, sans-serif;
  background: var(--ms-bg);
  color: var(--ms-fg);
  text-align: left;
}
.menu-sheet * { box-sizing: border-box; }
.menu-sheet img { aspect-ratio: auto; object-fit: contain; }

.menu-sheet--light {
  --ms-bg: #ffffff;
  --ms-fg: #1F1423;
  --ms-red: #D9001A;
  --ms-red-d: #5B000C;
  --ms-frame: #5B000C;
  --ms-rule: rgba(91, 0, 12, 0.2);
}
.menu-sheet--dark {
  --ms-bg: #5B000C;
  --ms-fg: #FAF4EE;
  --ms-red: #F6AD6E;
  --ms-red-d: #ffffff;
  --ms-frame: #FAF4EE;
  --ms-rule: rgba(250, 244, 238, 0.25);
}

.menu-sheet-inner {
  position: absolute;
  inset: 2.4cqw;
  border: .28cqw solid var(--ms-frame);
  padding: 3.4cqw 4cqw 3cqw;
  display: flex;
  flex-direction: column;
}

.ms-brand { text-align: center; margin-bottom: 1cqw; }
.ms-brand img {
  display: block;
  height: 9cqw;
  width: auto;
  max-width: 70cqw;
  margin: 0 auto;
}

.ms-headline {
  margin: 0;
  text-align: center;
  color: var(--ms-red-d);
  font-weight: 800;
  font-size: 5.6cqw;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.1;
}
.ms-validity {
  margin: 1.2cqw 0 2cqw;
  text-align: center;
  font-size: 3.2cqw;
  letter-spacing: .01em;
  font-weight: 700;
  color: var(--ms-red-d);
}

/* --- Offers Container ---
   --ms-density (set by renderMenuSheet) shrinks type and spacing together once
   there are more offers than fit on the A4 box; it is 1 for a normal sheet. */
.ms-offers-container {
  --ms-density: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(2.4cqw * var(--ms-density));
  margin-top: 1.5cqw;
}

.ms-cat-block {
  display: flex;
  flex-direction: column;
  gap: calc(1cqw * var(--ms-density));
}

.ms-cat-title {
  margin: 0 0 calc(1cqw * var(--ms-density));
  font-size: calc(3.4cqw * var(--ms-density));
  font-weight: 800;
  color: var(--ms-red-d);
  letter-spacing: 0.01em;
  padding-bottom: 0.5cqw;
  border-bottom: 0.2cqw solid var(--ms-red-d);
}

.ms-item-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: calc(0.8cqw * var(--ms-density)) 0;
  border-bottom: 0.15cqw solid var(--ms-rule);
  font-size: calc(3.2cqw * var(--ms-density));
}

.ms-item-name {
  font-weight: 700;
  color: var(--ms-fg);
  flex: 1;
}

.ms-item-portion {
  font-weight: 800;
  color: var(--ms-red);
  margin-right: 3cqw;
  font-size: 3.2cqw;
}

.ms-item-price {
  font-weight: 800;
  color: var(--ms-red);
  font-size: 3.4cqw;
  min-width: 8cqw;
  text-align: right;
}

/* Caption printed under a category's items ("Fleisch vom Außerferner
   Jungrind"). Same weight as the category heading but without its rule, so it
   reads as a closing line of that block, not as the next heading. */
.ms-cat-foot {
  margin: calc(0.6cqw * var(--ms-density, 1)) 0 0;
  font-size: calc(3.2cqw * var(--ms-density, 1));
  font-weight: 800;
  color: var(--ms-fg);
  letter-spacing: 0.01em;
}

/* --- Footer --- */
.ms-foot {
  margin-top: auto;
  padding-top: 2cqw;
  border-top: .15cqw solid var(--ms-rule);
  text-align: center;
}
.ms-note {
  margin: 0 0 0.8cqw;
  font-size: 2.6cqw;
  font-weight: 800;
  color: var(--ms-red);
  text-transform: uppercase;
}
.ms-allergens {
  margin: 0 0 1cqw;
  font-size: 2.1cqw;
  color: rgba(31,20,35,0.7);
}
.ms-signature {
  margin: 1cqw 0 0.5cqw;
  font-size: 2.8cqw;
  font-weight: 800;
  color: var(--ms-red-d);
}
.ms-contact {
  font-size: 2.2cqw;
  line-height: 1.4;
  color: var(--ms-fg);
  margin-top: 0.5cqw;
}