/* ============================================================
   FORK & FIRE Catering — Unterseiten
   Kleiner Hero, Journal, Kalkulator, Artikel
   ============================================================ */

/* ── Kompakter Seiten-Hero ───────────────────────────── */
.chero--sub{ min-height:clamp(380px,56svh,620px); }
.chero--sub .display{ font-size:clamp(2.5rem,6.2vw,6rem); }
.chero--sub .crumb{ display:flex; width:max-content; }
.chero--sub .eyebrow{ display:block; }

/* Zurueck-Zeile */
.crumb{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:var(--t-kicker); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-bottom:var(--flow-lg);
}
.crumb::before{ content:"←"; color:var(--red); }
.crumb:hover{ color:#fff; }

/* ── Journal-Index ───────────────────────────────────── */
.jgrid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gut);
  padding-block:var(--sec);
}
.jcard{ display:block; }
.jcard figure{ overflow:hidden; margin:0; }
.jcard img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.jcard:hover img{ transform:scale(1.04); }
.jcard__meta{
  margin-top:1.1em; font-size:var(--t-kicker); letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); display:flex; gap:1.4em;
}
.jcard h3,.jcard h2{ margin-top:.45em; font-size:clamp(1.35rem,1.9vw,1.8rem); line-height:1.18; transition:color .16s linear; }
.jcard:hover h3{ color:var(--red); }
.jcard p{ margin-top:.6em; color:var(--muted); font-size:.94rem; max-width:40ch; }
.jcard__more{ display:inline-block; margin-top:1em; }

/* ── Artikel ─────────────────────────────────────────── */
.article{ padding-block:var(--sec); display:grid; grid-template-columns:minmax(0,1fr); }
.article__inner{ max-width:72ch; margin-inline:auto; width:100%; padding-inline:var(--pad); box-sizing:border-box; }
@media (min-width:1000px){ .article__inner{ padding-inline:0; max-width:72ch; } }
.article__meta{
  display:flex; gap:1.6em; font-size:var(--t-kicker); letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--flow);
}
.article h1{
  font-family:var(--serif); font-weight:480; font-size:clamp(2.1rem,4.6vw,3.9rem);
  line-height:1.06; letter-spacing:-.018em;
}
.article__hero{ margin:var(--flow-lg) 0; overflow:hidden; }
.article__hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.article__body p{ margin:0 0 var(--flow); font-size:clamp(1.04rem,1vw,1.14rem); line-height:1.75; }
.article__body h2{
  font-family:var(--serif); font-weight:480; font-size:clamp(1.45rem,2.2vw,2rem);
  line-height:1.15; margin:var(--flow-lg) 0 var(--flow);
}
.article__body .pull{ margin-block:var(--flow-lg); }
.article__body ul{ margin:0 0 var(--flow); }
.article__body ul li{
  display:grid; grid-template-columns:auto 1fr; column-gap:.7em;
  padding:.5em 0; border-top:1px solid var(--line);
}
.article__body ul li::before{
  content:""; width:12px; height:1px; background:var(--red); align-self:center;
}
.article__foot{
  margin-top:var(--sec); padding-top:var(--flow-lg); border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--gut); flex-wrap:wrap;
}

/* ── Kalkulator ──────────────────────────────────────── */
.calc{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--gut);
  padding-block:var(--sec); align-items:start;
}
.calc > form, .calc > aside{ min-width:0; width:100%; }
#calcForm fieldset, .opts, .opt label{ max-width:100%; }
.opt label{ overflow-wrap:anywhere; }
.calc fieldset{ border:0; padding:0; margin:0 0 var(--flow-lg); }
.calc legend{
  display:flex; align-items:baseline; gap:.9em; width:100%;
  padding-bottom:var(--flow); margin-bottom:var(--flow); border-bottom:1px solid var(--line);
  font-family:var(--serif); font-size:clamp(1.25rem,1.7vw,1.6rem);
}
.calc legend span{ font-family:var(--sans); font-size:var(--t-kicker); letter-spacing:.18em; color:var(--red); }

/* Personen */
.calc__pax{ display:grid; grid-template-columns:minmax(0,1fr) 92px; gap:var(--gut); align-items:center; }
.calc__pax input[type="range"]{
  -webkit-appearance:none; appearance:none; height:2px; background:var(--line); outline-offset:6px;
}
.calc__pax input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:0;
  background:var(--red); border:0; cursor:grab; transform:rotate(45deg); margin-top:-9px;
}
.calc__pax input[type="range"]::-webkit-slider-runnable-track{ height:2px; background:var(--line); }
.calc__pax input[type="number"]{
  border:0; border-bottom:1px solid var(--ink); background:none; padding:.5em 0;
  font-family:var(--serif); font-size:1.6rem; text-align:center; width:100%;
}
.calc__pax input:focus{ outline:none; border-color:var(--red); }

/* Wahlkarten */
.opts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.opts--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.opt label{
  display:block; border:1px solid var(--line); padding:clamp(12px,1.4vw,18px);
  cursor:pointer; transition:border-color .16s linear, background .16s linear;
  min-height:100%;
}
.opt b{ display:block; font-family:var(--serif); font-weight:480; font-size:clamp(1.05rem,1.4vw,1.3rem); }
.opt s{ display:block; text-decoration:none; margin-top:.3em; font-size:var(--t-kicker);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.opt small{ display:block; margin-top:.5em; font-size:.78rem; color:var(--muted); line-height:1.45; }
.opt input:checked + label{ border-color:var(--red); background:rgba(211,1,15,.045); }
.opt input:checked + label s{ color:var(--red); }
.opt input:focus-visible + label{ outline:2px solid var(--red); outline-offset:3px; }

/* Module-Checkboxen */
.mods{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--gut); }
.mods .opt label{ border:0; border-bottom:1px solid var(--line); display:grid;
  grid-template-columns:18px 1fr auto; gap:.9em; align-items:baseline; padding:.85em 0; }
.mods .opt label::before{
  content:""; width:14px; height:14px; border:1px solid var(--ink); align-self:center;
  transition:background .16s linear, border-color .16s linear;
}
.mods .opt input:checked + label{ background:none; }
.mods .opt input:checked + label::before{ background:var(--red); border-color:var(--red); }
.mods .opt b{ font-size:1rem; }
.mods .opt s{ margin-top:0; }

/* Dauer */
.dur{ display:flex; gap:10px; flex-wrap:wrap; }
.dur .opt label{ padding:.7em 1.1em; }
.dur .opt b{ font-family:var(--sans); font-size:.82rem; letter-spacing:.08em; }

/* Ergebnis */
.calc__out{ position:sticky; top:calc(var(--hdr-h) + 30px); background:var(--ink); color:#fff;
  padding:clamp(22px,2.6vw,36px); }
.calc__out .kicker{ color:var(--muted-l); }
.bill{ font-variant-numeric:tabular-nums; }
.bill td{ padding:.55em 0; border-bottom:1px solid rgba(255,255,255,.12); vertical-align:baseline; }
.bill td:last-child{ text-align:right; white-space:nowrap; padding-left:14px; }
.bill b{ display:block; font-weight:400; font-size:.94rem; }
.bill i{ display:block; font-style:normal; font-size:.74rem; color:var(--muted-l); margin-top:.15em; }
.bill tfoot td{ border-bottom:0; padding-top:.9em; }
.bill tfoot tr:first-child td{ border-top:2px solid #fff; font-family:var(--serif); font-size:clamp(1.3rem,1.8vw,1.7rem); }
.bill .bill__per td{ padding-top:.15em; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-l); }
.calc__warn{ margin-top:var(--flow); font-size:.78rem; color:#F2B8BC; min-height:1.2em; }
.calc__out .btn{ width:100%; margin-top:var(--flow); background:#fff; color:var(--ink); border-color:#fff; }
.calc__out .fine{ color:rgba(255,255,255,.5); margin-top:var(--flow); }

/* Summenleiste auf schmalen Schirmen */
.calc__bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:98;
  height:calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding:0 var(--pad) env(safe-area-inset-bottom);
  background:var(--ink); color:#fff; border:0; border-top:1px solid rgba(242,239,233,.22);
  align-items:center; justify-content:space-between; gap:16px; cursor:pointer;
  font:inherit;
}
.calc__bar span{ font-family:var(--serif); font-size:1.05rem; font-variant-numeric:tabular-nums; }
.calc__bar b{ font-weight:500; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#F87171; }
@media (max-width:1080px){
  .calc__bar{ display:flex; }
  body:has(.calc__bar){ padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom)); }
}

/* ── Liefergebiet-Seite ──────────────────────────────── */
.gsplit{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gut);
  padding-block:var(--sec);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:1080px){
  .jgrid{ grid-template-columns:1fr; }
  .jcard p{ max-width:60ch; }
  .calc{ grid-template-columns:1fr; }
  .calc__out{ position:static; }
  .gsplit{ grid-template-columns:1fr; }
  .opts--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .opts,.opts--3,.mods{ grid-template-columns:1fr; }
}


/* ── Artikel: CTA-Block + Mobile-Leselayout ── */
.article__cta{ margin-top:var(--sec); padding:clamp(24px,3vw,40px); background:var(--ink); color:#fff; display:grid; gap:14px; }
.article__cta p{ font-family:var(--serif); font-size:clamp(1.15rem,1.6vw,1.5rem); line-height:1.35; margin:0; }
.article__cta .btn--red{ background:var(--red); color:#fff; border-color:var(--red); justify-self:start; }
.article__cta .link-ul{ color:#fff; justify-self:start; }
@media (max-width:640px){
  .article__top{ display:none; }
  .article{ padding-block:0 var(--sec); }
  .article__inner{ display:flex; flex-direction:column; }
  .article__hero{ order:-1; margin:0 calc(-1 * var(--pad)) 22px; }
  .article__hero img{ aspect-ratio:4/5; max-height:70vh; }
  .article__meta{ order:0; margin-bottom:10px; font-size:.66rem; }
  .article h1{ order:1; font-size:clamp(1.9rem,8.4vw,2.4rem); line-height:1.08; margin-bottom:22px; }
  .article__body{ order:2; }
  .article__body p{ font-size:1.02rem; line-height:1.72; margin-bottom:22px; }
  .article__body h2{ font-size:1.42rem; margin:34px 0 12px; }
  .article__body .pull{ margin:26px 0; padding:16px 18px; background:var(--paper-2); border-left:3px solid var(--red); font-size:1.08rem; }
  .article__body ul li{ padding:.6em 0; font-size:.98rem; }
  .article__cta{ order:3; margin:36px calc(-1 * var(--pad)) 0; padding:26px var(--pad); }
  .article__cta .btn--red{ justify-self:stretch; text-align:center; }
  .article__foot{ order:4; margin-top:26px; flex-direction:column; gap:14px; }
}