/* Page-specific layout for index.html. Anything reusable belongs in components.css. */

/* ---- Stage (internal ref) ---------------------------------------- */
/* The entry point is a proposition + a visible flagship, not a carousel.
   Two tracks: a copy RAIL (eyebrow, H1, lead, one primary action,
   qualification facts) and a product STAGE (the "Und alle so:" kicker over
   the flagship plate, with the strike stamp riding the frame's upper edge).
   Compact widths stack rail-then-stage so the offer is read before the
   photograph is seen; from 768px they become the asymmetric editorial spread
   introduced by internal ref, with the rail now carrying real sentences
   instead of a two-word heading.
   Order matters at every width: reading the rail top-to-bottom answers
   what / why / where / how-to-act before the visitor reaches anything
   interactive. */
.page-hero { display: grid; gap: var(--wtc-space-5); align-items: center; }
.page-hero__rail { display: grid; gap: var(--wtc-space-4); align-content: start; }
.page-hero__eyebrow { margin: 0; }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wtc-space-4); }

/* Compact widths pay for the rail out of the flagship's share of the first
   viewport, so the section's own top rhythm is spent where it buys least.
   Measured: the default clamp() floor of 3.5rem pushed the frame's top past
   the fold on every phone at or below 375px. */
@media (max-width: 767.98px) {
  .page-hero-section { padding-top: var(--wtc-space-5); }
}

/* Small phones (<=400px) are the tightest budget on the page: the rail has to
   deliver a complete proposition AND leave the flagship a real share of the
   fold. Measured at 360x640, the display-1 floor alone cost a whole extra
   line of headline (33.6px/4 lines vs 28px/3), which is most of the gap.
   These are the only overrides; nothing here changes the reading order or
   removes content. */
@media (max-width: 400px) {
  .page-hero { gap: var(--wtc-space-4); }
  .page-hero-section { padding-top: var(--wtc-space-3); }
  .page-hero__rail { gap: var(--wtc-space-3); }
  .page-hero .wtc-display-1 { font-size: 1.75rem; }
  /* Tighter than --wtc-leading-body (1.6). The lead is four to five short
     lines here, not a long read, and on a 568px-tall screen every line of
     leading is paid for out of the flagship's share of the fold. */
  .page-hero__rail .wtc-lead { font-size: 0.9375rem; line-height: 1.45; }
  .page-hero__stage { gap: var(--wtc-space-1); }
  .wtc-hero-kicker { font-size: 1.25rem; }
  /* Only a strip of the 4:5 frame reaches the fold on the shortest phones,
     and with a centred crop that strip is backdrop — grey wall and table —
     not cake. Anchoring lower puts the subject itself in the visible band,
     so "the flagship is present" means the product is present. */
  #hero-frame-flagship { --wtc-frame-focus: 64%; }
}

/* Qualification facts. Full-strength ink, not dimmed fine print: these are
   the lines that stop an out-of-town visitor from investing in the wizard,
   so they must survive greyscale, low brightness and a fast scan. The
   printed rule before each item reuses the .wtc-label--accent grammar
   (accent as a mark, never as text colour — magenta text at label size is
   3.48:1 and fails AA). */
.page-hero__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--wtc-space-2);
  font-family: var(--wtc-font-label);
  font-size: var(--wtc-type-label-lg);
  letter-spacing: var(--wtc-tracking-label);
  text-transform: uppercase;
}
.page-hero__facts li { display: flex; align-items: baseline; gap: 0.7em; }
.page-hero__facts li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 4px;
  background: var(--wtc-surface-accent);
  transform: translateY(-0.25em);
}

/* Stage. .page-hero__plate mirrors .wtc-slide exactly (position: relative +
   padding-top: --wtc-slide-pad) because the stamp uses the same absolute
   grammar: its vertical centre rides the frame's top edge, so the overhang
   above that edge has to be reserved inside the plate's own box. */
.page-hero__stage { width: 100%; max-width: 460px; justify-self: center; display: grid; gap: var(--wtc-space-2); }
/* Crop anchor for the flagship. Declared here rather than inline on the
   element (as the gallery slides do) precisely so the compact override below
   can reach it — an inline custom property beats any stylesheet rule. */
#hero-frame-flagship { --wtc-frame-focus: 50%; }
.wtc-hero-kicker { display: block; font-family: var(--wtc-font-display); font-size: var(--wtc-type-display-2); line-height: var(--wtc-leading-heading); text-transform: uppercase; letter-spacing: var(--wtc-tracking-display); }
.page-hero__plate { position: relative; padding-top: var(--wtc-slide-pad); }

@media (min-width: 768px) {
  .page-hero {
    /* The product stage's width. Everything else in this block is derived
       from it, so the composition scales as one system. */
    --wtc-stage-w: clamp(340px, 40vw, 480px);
    /* tokens.css requires the strike stamp to stay on ONE line: a wrapped
       two-line strike grows tall enough to collide with the kicker. The root
       value derives from 7vw, which was only safe while the column was frozen
       at 460px. Now that the stage width is independent of viewport width,
       the strike must derive from the STAGE instead. Factor 0.08 comes from
       the measurement recorded in tokens.css (glyph run 10.26x font size +
       1em inline padding + 6px border, inside a stamp box of 0.96x the plate
       width → ~0.084 is the limit); the 2.375rem ceiling keeps it inside the
       already-tested single-line envelope.
       --wtc-slide-pad must be restated here too: custom properties are
       substituted at the computed-value time of the element they are declared
       on, so the :root definition already resolved against the :root strike
       size and would not follow this override. */
    --wtc-strike-size: min(2.375rem, calc(var(--wtc-stage-w) * 0.08));
    --wtc-slide-pad: calc(var(--wtc-strike-size) * 1.8);

    /* Named areas rather than source order: the facts block sits after the
       stage in the DOM (so compact widths read pitch -> product -> terms),
       but in the wide spread it belongs under the rail's primary action,
       where it qualifies the offer before the eye travels to the stage.
       The stage spans both rows, so it stays one continuous column. */
    grid-template-columns: minmax(0, 1fr) var(--wtc-stage-w);
    grid-template-areas:
      "rail  stage"
      "facts stage";
    grid-template-rows: auto auto;
    align-content: center;
    gap: var(--wtc-space-5) clamp(2rem, 4vw, 4rem);
  }
  .page-hero__rail { grid-area: rail; }
  .page-hero__stage { grid-area: stage; max-width: none; align-self: center; }
  .page-hero__facts { grid-area: facts; align-self: start; }
  /* The rail's headline is the counterweight the two-word kicker used to be.
     It is a sentence, so it is capped by measure rather than by word-breaking
     the way "UND ALLE" was. */
  .page-hero .wtc-display-1 { font-size: clamp(2.6rem, 5vw, 4.25rem); max-width: 14ch; }
}

/* Landscape height budget. The frame's 4/5 aspect ratio turns height into
   width (width = 0.8 x height), so constraining the stage by viewport height
   is what stops iPad landscape from producing a giant portrait frame that
   pushes the rail's primary action off-screen. The 240px reserve covers the
   sticky header (48), the section rhythm (8vh) and the strike overhang. */
@media (min-width: 768px) and (orientation: landscape) {
  .page-hero {
    --wtc-stage-w: clamp(260px, 40vw, min(480px, calc((100vh - 240px) * 0.8)));
  }
}

/* ---- Gallery (internal ref, rebalanced internal ref) -------- */
/* The slider keeps its proven single-column geometry — the strike stamp's
   one-line envelope was measured against a 460px plate (tokens.css) — so the
   stage itself is never widened or stretched. internal ref's "orphaned
   460px column" defect was a HERO stranded alone in a 1240px canvas; here the
   fix is different because the content is different: from 768px the slider
   stays the visual main area and a deliberately composed invitation block —
   copy plus its own "Cake anfragen" CTA into the existing #anfrage flow —
   fills the width beside it, so the section reads as one balanced pair
   instead of a centred island in empty space. Below 768px both stack full
   width, centred, slider first. */
.page-gallery { display: flex; flex-direction: column; align-items: center; gap: var(--wtc-space-6); }
.page-gallery__stage { width: 100%; max-width: 460px; }
.page-gallery__invite {
  width: 100%;
  max-width: 460px;
  display: grid;
  gap: var(--wtc-space-4);
  text-align: center;
}
.page-gallery__invite .wtc-lead { margin: 0; }

@media (min-width: 768px) {
  .page-gallery {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .page-gallery__stage { flex: none; }
  .page-gallery__invite {
    flex: none;
    width: clamp(260px, 30vw, 380px);
    text-align: left;
    justify-items: start;
  }
}

.page-steps { display: grid; gap: var(--wtc-space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .page-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.page-request { max-width: 720px; display: grid; gap: var(--wtc-space-5); }
.page-request__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wtc-space-4); }

/* The sticky header (internal ref) must not cover anchor-jump targets. */
#top, #galerie, #anfrage { scroll-margin-top: 64px; }