/* ============================================================
   fooddiez.de — home.css
   Front-page-only sections: hero, Steckbrief deck, Herkunfts-Atlas
   band, magazine list, "Wie wir arbeiten" method band.
   Ported 1:1 from the approved mockup MINUS the two ad slots.
   ============================================================ */

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(28px, 4.5vw, 60px); align-items: start; padding: clamp(34px, 5vw, 62px) var(--gut) var(--sec); max-width: 1200px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  line-height: 1.02; letter-spacing: -0.022em;
  margin: 4px 0 18px;
}
.hero h1 em { font-style: italic; color: var(--herb); }
/* QA round 1 (2026-08-11): homepage H1 is 93 chars, kept fuller/keyword-full
   per feedback_h1_fuller_not_shorter — fixed with a smaller font-size only,
   see feedback_long_h1_fix_via_font_size and .page-head h1.long in main.css. */
.hero h1.long { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
.lede { font-size: 1.0625rem; line-height: 1.66; color: var(--ink-2); max-width: 46ch; margin: 0 0 22px; }
.lede b { color: var(--ink); font-weight: 600; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line); }
.hero-facts div { padding: 12px 20px 12px 0; margin-right: 20px; border-right: 1px solid var(--line); }
.hero-facts div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-facts .n { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-size: 1.15rem; color: var(--ink); display: block; line-height: 1.2; }
.hero-facts .k { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }

/* newest dishes — balances the hero columns with real content */
.fresh { margin-top: 30px; }
.fresh-lbl { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 4px; }
.fresh-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--line);
  transition: padding-left .18s ease;
}
.fresh-row:hover { padding-left: 6px; }
.fresh-row em { font-family: var(--ff-display); font-size: 1.0625rem; font-style: italic; }
.fresh-row .p { font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--ink-3); margin-left: 8px; }
.fresh-row .p i { font-style: normal; color: var(--herb); font-weight: 700; text-transform: uppercase; }
.fresh-row .o { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.fresh .go { display: inline-block; margin-top: 14px; font-family: var(--ff-mono); font-size: 0.75rem; color: var(--herb); border-bottom: 1px solid currentColor; }

/* ---------- Steckbrief deck (signature feature) ---------- */
.deck {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow); overflow: hidden;
  position: relative;
}
.deck::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--herb-bright); z-index: 3; }
.deck-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft);
}
.deck-kicker { font-family: var(--ff-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--herb); }
.deck-idx { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-size: 0.6875rem; color: var(--ink-3); }
.deck-fig { margin: 0; position: relative; aspect-ratio: 16 / 10; background: var(--surface); }
.deck-fig img { width: 100%; height: 100%; object-fit: cover; }
.deck-fig figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--mast-bg); color: var(--mast-ink);
  font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 6px 12px 6px 14px;
}
.deck-body { padding: 18px; }
.deck-name { font-size: clamp(1.7rem, 3.2vw, 2.15rem); line-height: 1.06; margin: 0; font-style: italic; overflow-wrap: anywhere; }
.deck-name a:hover { color: var(--herb); }
.deck-phon {
  font-family: var(--ff-mono); font-size: 0.8125rem; color: var(--ink-2);
  margin: 8px 0 0; letter-spacing: 0.02em; overflow-wrap: anywhere;
}
.deck-phon i { font-style: normal; color: var(--herb); font-weight: 700; text-transform: uppercase; }
.deck-gloss { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); margin: 12px 0 0; min-height: 4.8em; }
.deck-facts { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; }
.fact { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
.fact dt { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.fact dd { margin: 0; font-size: 0.8125rem; color: var(--ink); }
.fact dd .sub { color: var(--ink-3); }

.deck-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Cycling to the next dish used to animate the WHOLE card: it dipped 7px,
   scaled to 0.988 and faded to .82, chrome included. Two things were wrong with
   that. home.js swaps the content synchronously on click, before the class is
   added, so the new dish was already painted when the card started moving — the
   animation played after the change instead of covering it, and a dip to only
   .82 opacity hid nothing anyway. And moving the frame, the saffron top rule
   and the "1 / 6" counter along with the content contradicts the metaphor: the
   card is a holder, the dish is what changes.

   Now only the photo and the body animate, and they animate IN — a fade and
   rise from the already-swapped content, so the deal reads as the next card
   arriving in a frame that stayed put. The counter in .deck-head updates
   instantly, which is correct: it is chrome, not cargo. */
.deck.swap .deck-fig,
.deck.swap .deck-body { animation: swap .28s cubic-bezier(.2,.8,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  .deck.swap .deck-fig, .deck.swap .deck-body { animation: none; }
}
@keyframes swap {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- atlas (dark band) ---------- */
.band { background: var(--mast-bg); color: var(--mast-ink); padding: var(--sec) 0; margin-top: var(--sec); position: relative; }
/* In LIGHT mode this band is the homepage's strongest structural device: a
   near-black slab (--mast-bg #2B1D10) on the bone ground (#F7ECD3). In DARK
   mode the same two tokens are #120D07 on #1B140B — a 1.4:1 difference. The
   single most committed move in the layout simply stopped existing, which is
   what "dark mode that was inverted rather than designed" looks like. A 3px
   saffron edge (the exact device .deck::before already uses) declares where the
   band starts in both themes, and the closing hairline gives it an end. */
.band::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--herb-bright);
}
.band::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: var(--mast-line);
}
/* On the front page the band opens with a .sec-head, so its var(--sec) top
   padding leads into a section header and the 208px it makes together with the
   band's own margin is a deliberate major break (and the mockup's spacing).
   /herkunfts-atlas/ renders the band with NO .sec-head — the page's own H1 has
   already done that job — so there the same 208px was 208px of empty dark
   directly above the first region cell. Measured, not estimated. */
.band:not(:has(.sec-head)) { padding-top: clamp(30px, 4vw, 48px); }

/* Same reasoning as `.home footer.site` in main.css: when the page ends in a
   coloured slab, the slab's own bottom padding already closes the page, and the
   footer's var(--sec) top margin only adds a second empty gap on top of it —
   another measured 208px on /herkunfts-atlas/. */
body:has(main > .band:last-child) footer.site { margin-top: 0; }

.band .eyebrow { color: var(--herb-bright); }
.band .eyebrow::after { background: var(--mast-line); }
.band .sec-head h2 { color: var(--mast-ink); }
.band .sec-head p { color: var(--mast-ink-2); }
/* Hairlines are drawn per-cell via box-shadow rather than by letting a 1px grid
   gap expose a coloured parent background. The term count is real data and will
   not always divide by 4/3/2 — with the background trick an orphan row would
   leave a solid --mast-line block where the missing cells are. */
/* Flex, not a fixed 4-column grid. The term count is real data and does not
   divide evenly: with 9 Herkünfte today a 4-up grid renders 4 / 4 / 1 and the
   last row is one lone cell beside a three-cell hole. On the front page that is
   untidy; on /herkunfts-atlas/, where this band IS the page, the hole is the
   largest single shape on the screen. `flex: 1 1 250px` reproduces the old
   4-up / 3-up / 2-up / 1-up breakpoints almost exactly (verified by measuring
   at 390 / 460 / 720 / 1040 / 1440) and additionally lets a short final row
   grow to fill the width, so the band always ends on a straight edge whatever
   the count. The old .atlas media queries are gone with it. */
.atlas { display: flex; flex-wrap: wrap; gap: 1px; }
.region {
  display: block;
  flex: 1 1 250px;
  box-shadow: 0 0 0 1px var(--mast-line);
  perspective: 1200px;
}
.region-flip {
  position: relative;
  display: block;
  min-height: 196px;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
  transform-style: preserve-3d;
}
.region:hover .region-flip, .region:focus-visible .region-flip { transform: rotateY(180deg); }
.region-face {
  position: absolute; inset: 0; box-sizing: border-box;
  padding: 18px 16px 20px;
  background: var(--mast-bg);
  backface-visibility: hidden;
  display: flex; flex-direction: column;
  transition: background .2s ease;
}
.region:hover .region-face, .region:focus-visible .region-face { background: var(--band-hover); }
.region-back {
  transform: rotateY(180deg);
  align-items: center; justify-content: center; text-align: center; gap: 5px;
}
/* real <img> flags (self-hosted SVGs) for the mapped terms; the two
   non-country terms ("Fusion"/"International") fall back to a plain text
   emoji, hence the font-size/line-height here still matter for those. */
.region-flag { font-size: 1.75rem; line-height: 1; display: block; margin-bottom: 10px; }
.region-back .region-flag { margin-bottom: 4px; }
.region-flag .flag-icon {
  width: 30px; height: auto; display: inline-block;
  border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  vertical-align: middle;
}
.region-flag .flag-icon + .flag-icon { margin-left: 4px; }
.region-face :is(h2, h3) { font-size: 1.0625rem; margin: 0 0 6px; color: var(--mast-ink); overflow-wrap: anywhere; }
.region-face p { font-size: 0.75rem; line-height: 1.5; color: var(--mast-ink-2); margin: 0; }
.region-back b { font-size: 1.0625rem; color: var(--mast-ink); overflow-wrap: anywhere; }
.region-back-count {
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
  font-size: 0.8125rem; font-weight: 700; color: var(--herb-bright);
}
@media (prefers-reduced-motion: reduce) { .region-flip { transition: none; } }
/* no hover on touch, and a tap on a real link navigates before a flip could
   ever be seen — so on touch devices both faces render stacked in normal
   flow instead, no animation, nothing hidden behind an unreachable gesture. */
@media (hover: none) {
  .region { perspective: none; }
  .region-flip { position: static; min-height: 0; transform: none !important; }
  .region-face { position: static; backface-visibility: visible; transform: none !important; }
  .region-back {
    align-items: flex-start; text-align: left;
    border-top: 1px solid var(--mast-line); margin-top: 10px; padding-top: 14px;
  }
}
.atlas-foot { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin-top: 20px; }
.atlas-foot .go { font-family: var(--ff-mono); font-size: 0.75rem; color: var(--herb-bright); border-bottom: 1px solid currentColor; }
.atlas-foot span { font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--mast-ink-2); }

/* ---------- magazine list ----------
   Moved to main.css. index.php and search.php render the same component and
   never load this sheet, so it has to live in the always-loaded one. */

/* ---------- method / trust ---------- */
.method { background: var(--herb-wash); margin-top: var(--sec); padding: var(--sec) 0; }
.method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 6px; }
.method h3 { font-size: 1.0625rem; margin: 0 0 6px; }
.method p { font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); margin: 0; }
.method .mk { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--herb-deep); display: block; margin-bottom: 10px; }

/* ---------- responsive ----------
   .atlas has no breakpoints any more — `flex: 1 1 250px` derives the same
   column counts from the available width. The .mag-item rules moved to
   main.css with the component. */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 26px; }
  .deck { max-width: 520px; }
  .method-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 720px) {
  .fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 460px) {
  .hero-facts div { border-right: 0; }
}