/* ============================================================
   FORK & FIRE Catering — Responsive-Fixes (Override)
   Nach base.css, catering.css, map.css, sub.css laden.
   Geprueft bei 360 / 390 / 430 / 768 px (Chrome, lokal gerendert).
   Nur echte Korrekturen, keine Umgestaltung.
   ============================================================ */

/* ── 1 · Journal-Dreierreihe auf der Startseite ───────────────
   WARUM: index.html laedt sub.css nicht. Dort steht .jgrid{display:grid};
   catering.css setzt nur grid-template-columns. Ohne display:grid stapeln
   die drei Karten als volle Bloecke statt in einer Reihe. */
.cjournal .jgrid{ display:grid; }

/* ── 2 · Journal-Karten in der Dreierreihe auf schmalen Schirmen ──
   WARUM: Bei 360 px ist jede Spalte nur ~99 px breit. 16/10-Bilder werden
   zu flachen Streifen, Titel laufen auf 3–4 Zeilen und die Meta-Zeile
   (Sperrsatz .18em) stoesst an die Spaltenkante. */
@media (max-width:640px){
  .cjournal .jcard img{ aspect-ratio:4/3; }
  .cjournal .jcard h3,.cjournal .jcard h2{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden; line-height:1.25;
  }
  .cjournal .jcard__meta{ letter-spacing:.1em; }
}

/* ── 3 · Kalkulator: Summenleiste bricht bei 360 px um ────────
   WARUM: Summe „6.235,00 € · 103,92 € p. P.“ (~198 px) + „Zum Ergebnis“
   (~103 px) + 16 px Gap ergeben mehr als die 317 px Innenbreite —
   der Button-Text rutscht in eine zweite Zeile innerhalb der 58 px
   hohen Leiste. Nicht umbrechen lassen, Summe notfalls kappen. */
.calc__bar{ flex-wrap:nowrap; }
.calc__bar b{ white-space:nowrap; }
.calc__bar span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:430px){
  .calc__bar{ gap:10px; }
  .calc__bar span{ font-size:.92rem; }
  .calc__bar b{ font-size:.62rem; letter-spacing:.1em; }
}

/* ── 4 · Consent-Leiste vs. Kalkulator-Summenleiste ───────────
   WARUM: Beide sitzen fixed bei bottom:0. consent.css hebt die Leiste nur
   bis 767 px an (fuer das Dock); die calc__bar erscheint aber schon ab
   1080 px. Im Fenster 768–1080 px deckt die Consent-Leiste die Summe ab.
   Regel: calc__bar behaelt bottom:0 (Vorrang), Consent stapelt darueber. */
@media (max-width:1080px){
  body:has(.calc__bar) .consent{
    bottom:calc(var(--dock-h) + env(safe-area-inset-bottom));
    padding-bottom:14px;
  }
}

/* ── 5 · Totes Padding auf Seiten ohne Dock und ohne calc__bar ─
   WARUM: base.css gibt dem body unter 768 px pauschal padding-bottom in
   Dock-Hoehe. Das Dock existiert nur auf index.html, die calc__bar nur am
   Kalkulator — auf journal.html, artikel.html und liefergebiet.html bleibt
   ein leerer 58-px-Streifen unter dem Footer. Die Consent-Leiste wuerde
   dort zudem 58 px ueber dem unteren Rand schweben. */
@media (max-width:767px){
  body:not(:has(.dock)):not(:has(.calc__bar)){ padding-bottom:0; }
  body:not(:has(.dock)):not(:has(.calc__bar)) .consent{
    bottom:0;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }
}

/* ── 6 · Karte: Tap-Ziele der Chips und des Zurueck-Knopfs ────
   WARUM: Gemessen bei 360 px: Chips 39 px, Zurueck-Knopf 35 px hoch —
   unter der 44-px-Empfehlung fuer Touch. Nur auf Schirmen, auf denen die
   Chips als Wischleiste laufen; Desktop bleibt unveraendert. */
@media (max-width:1080px){
  .map__chips button{ min-height:44px; }
  .map__back{ min-height:44px; }
}

/* ── 7 · Kalkulator: Gaeste-Slider hat 2 px Trefferflaeche ────
   WARUM: input[type=range] ist 2 px hoch (die Linie selbst ist das
   Element) — am Touchscreen kaum zu treffen. Element auf 44 px anheben,
   die 2-px-Linie auf die Track-Pseudoelemente verlagern; der Daumen
   (20 px, margin-top -9 px) bleibt zentriert. */
.calc__pax input[type="range"]{ height:44px; background:transparent; }
.calc__pax input[type="range"]::-webkit-slider-runnable-track{ height:2px; background:var(--line); }
.calc__pax input[type="range"]::-moz-range-track{ height:2px; background:var(--line); }
.calc__pax input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:0; background:var(--red); border:0;
}

/* ── 8 · Drawer: zentrierter Inhalt wird oben abgeschnitten ───
   WARUM: .drawer kombiniert justify-content:center mit overflow-y:auto.
   Ist der Inhalt hoeher als der Schirm (kleine oder quer gehaltene
   Geraete), liegt der Anfang der Navigation oberhalb des scrollbaren
   Bereichs und ist unerreichbar. Auto-Margins zentrieren nur, solange
   Platz ist, und kollabieren sonst auf 0. */
@media (max-width:1080px){
  .drawer{ justify-content:flex-start; }
  .drawer nav{ margin-top:auto; }
  .drawer__foot{ margin-bottom:auto; }
}


/* ── Mobile Buchungs-Fokus: sekundäre Kapitel einklappbar, Weg zur Anfrage kurz ── */
@media (max-width:767px){
  :root{ --sec: clamp(40px, 9vw, 64px); }
  .mfold{ border-top:1px solid var(--line); }
  .mfold > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:18px var(--pad); font-family:var(--serif); font-size:1.25rem; line-height:1.2; }
  .mfold > summary::-webkit-details-marker{ display:none; }
  .mfold > summary::after{ content:"+"; color:var(--red); font-size:1.4em; line-height:1; flex:0 0 auto; }
  .mfold[open] > summary::after{ content:"–"; }
  .mfold > summary small{ display:block; font-family:var(--sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:4px; }
  .mfold > section{ padding-top:0 !important; }
  .mfold > section .csec__head{ display:none; }
  .mfold--dark{ background:var(--ink); color:#fff; border-top-color:rgba(255,255,255,.14); }
  .mfold--dark > summary small{ color:rgba(255,255,255,.55); }
  .mcta{ display:flex; flex-direction:column; gap:10px; padding:28px var(--pad) 32px; background:var(--paper); border-top:1px solid var(--line); }
  .mcta p{ font-family:var(--serif); font-size:1.15rem; }
  .mcta a{ display:block; text-align:center; padding:15px 18px; background:var(--red); color:#fff; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
  .mcta a.alt{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
  .brk{ height:clamp(220px, 46vw, 300px); }
  .coccasions{ display:none; }                    /* Marquee mobil raus: unruhig, kein Buchungswert */
  .format__fig{ aspect-ratio:16/10; max-height:200px; overflow:hidden; } .format__fig img{ width:100%; height:100%; object-fit:cover; }
  .mfold .rv span i{ transform:none !important; transition:none; }
  .mfold .reveal{ clip-path:none !important; }
  .mfold .fade{ opacity:1 !important; }
  .mfold .art path{ stroke-dashoffset:0 !important; }
}
@media (min-width:768px){ .mcta{ display:none; } }

/* ── Tippziele: gestapelte Textlinks waren 32-33px hoch und lagen aneinander.
   !important, weil spezifischere Regeln display/height sonst zurueckdrehen.
   Inline-Links im Fliesstext bleiben bewusst unveraendert. ── */
@media (max-width:768px){
  .foot__col li a,
  .foot__bar nav a,
  .link-ul,
  .crumb,
  .nf__list a,
  main ul li > a:only-child,
  .mark{
    display:inline-flex !important; align-items:center;
    min-height:44px;
  }
}

/* Telefonnummer im Header: nie umbrechen (der Zweizeiler war der Ausloeser) */
.hdr__tel{ white-space:nowrap; }
@media (max-width:768px){ .hdr__tel{ font-size:.78rem; letter-spacing:.02em; } }

/* Hero-CTA darf nicht unter Consent + Dock/Calc-Leiste verschwinden */
@media (max-width:767px){
  body:has(.consent.is-on) .chero{
    padding-bottom:calc(32px + 72px + env(safe-area-inset-bottom));
  }
  body:has(.consent.is-on):has(.dock) .chero,
  body:has(.consent.is-on):has(.calc__bar) .chero{
    padding-bottom:calc(32px + var(--dock-h) + 72px + env(safe-area-inset-bottom));
  }
}