/* ============================================================
   BERGHAUS WEISSBRIACH — ANFRAGE FORM: STEPPED PROGRESSIVE ENHANCEMENT
   Consumes site/shared/tokens.css exclusively. No new hex values,
   shadow-free depth (hairlines + surface shift only), square 2px
   radius, Petrona + Hanken Grotesk only.

   Every selector below targets classes that anfrage-steps.js itself
   creates at runtime (af-*). None of them exist in the static HTML,
   so if that script never runs, this stylesheet has nothing to
   select and the plain single-page form is completely unaffected —
   the enhancement never gates the working form behind CSS either.
   ============================================================ */

.af-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- shell ---------- */
/* `container-type: inline-size` turns the shell into the sizing context
   for the rail's compact-mode switch below. The rail's real constraint
   is the FORM'S available width, not the viewport: this card sits in a
   2-column grid from 760px viewport upward (site.css .anfrage-grid),
   which actually makes the form narrower there than it is on a 375px
   phone. A viewport media query cannot see that; a container query on
   the element the rail actually lives in does — see the @container
   block under "compact rail" below. */
.af-shell { display: flex; flex-direction: column; gap: var(--s-6); container-type: inline-size; }

/* ---------- rail ---------- */
.af-rail-nav { width: 100%; }
.af-rail {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}
.af-rail-item { min-width: 0; }
.af-rail-btn {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  background: transparent; border: none; padding: var(--s-2) var(--s-1) 0; cursor: pointer;
  font-family: var(--body); color: var(--ink-3);
  transition: color var(--t-hover) var(--e-out);
}
.af-rail-btn::before {
  content: ''; display: block; width: 100%; height: 2px; background: var(--line);
  transition: background-color var(--t-hover) var(--e-out);
}
.af-rail-btn:disabled { cursor: not-allowed; }
.af-rail-btn:not(:disabled):hover { color: var(--forest); }
.af-rail-num {
  margin-top: -13px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r);
  background: var(--ground); border: 1px solid var(--line);
  font-family: var(--body); font-size: var(--fs-small); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink-3);
  transition: background-color var(--t-hover) var(--e-out),
              border-color var(--t-hover) var(--e-out),
              color var(--t-hover) var(--e-out);
}
/* completed steps swap the number badge for a filled check badge of the
   same size, in the same flex slot — no overlap/absolute positioning.
   Selector is deliberately over-specific (.af-rail-btn .icon.af-rail-check)
   so it wins over site.css's generic `.icon { width:22px; height:22px }`
   regardless of stylesheet load order. */
.af-rail-btn .icon.af-rail-check {
  display: none; margin-top: -13px;
  width: 28px; height: 28px; padding: 7px; border-radius: var(--r);
  background: var(--forest); color: #fff; box-sizing: border-box;
}
.af-rail-label {
  font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-label);
  text-align: center; line-height: 1.3;
}

.af-rail-btn.is-current::before,
.af-rail-btn.is-complete::before { background: var(--forest); }
.af-rail-btn.is-current .af-rail-num {
  background: var(--forest); border-color: var(--forest); color: #fff;
}
.af-rail-btn.is-current .af-rail-label,
.af-rail-btn.is-complete .af-rail-label { color: var(--ink); }
.af-rail-btn.is-complete .af-rail-num { display: none; }
.af-rail-btn.is-complete .icon.af-rail-check { display: block; }

/* ---------- viewport + panels ---------- */
.af-viewport { position: relative; }
.af-viewport--animating { overflow: hidden; transition: height var(--t-band) var(--e-inout); }

.af-panel { padding-top: var(--s-1); }
.af-panel-heading {
  margin-bottom: var(--s-4);
  outline: none; /* focus ring still shows via :focus-visible below; this only suppresses the default rectangle some browsers add to programmatically focused non-interactive elements */
}
.af-panel-heading:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

.af-panel--leaving { opacity: 0; transition: opacity var(--t-band) var(--e-inout); }
.af-panel--entering { opacity: 0; }
.af-panel:not(.af-panel--leaving):not(.af-panel--entering) { opacity: 1; transition: opacity var(--t-band) var(--e-inout); }

.af-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.af-fields .field--wide { grid-column: 1 / -1; }

/* ---------- field-level error ---------- */
.af-field--invalid input,
.af-field--invalid select,
.af-field--invalid textarea { border-color: var(--taupe); }
.af-error {
  display: block; margin-top: var(--s-1);
  font-size: var(--fs-small); color: var(--ink); font-weight: 600;
}
.af-error::before { content: '– '; }

/* ---------- review ---------- */
.af-review { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
.af-review-heading {
  font-family: var(--body); font-size: var(--fs-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--ink-3);
  margin: 0 0 var(--s-4);
}
.af-review-list {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s-2) var(--s-4); margin: 0;
}
.af-review-term { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); margin: 0; }
.af-review-desc { font-size: var(--fs-small); color: var(--ink); margin: 0; word-break: break-word; }

/* ---------- nav bar ---------- */
.af-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
/* tokens.css declares `.btn { display: inline-flex }` unconditionally —
   an author-origin rule that otherwise beats the UA `[hidden]{display:none}`
   rule regardless of specificity, since origin/importance is compared
   before specificity. Back/Next/Submit all carry `.btn`, so their
   `.hidden = true` toggling in JS needs this `!important` to actually
   take effect; scoped to `.af-nav` so it cannot affect `.btn` elsewhere. */
.af-nav .btn[hidden] { display: none !important; }
.af-btn { min-height: 44px; }
.af-btn-back { margin-right: auto; }
.af-btn-next,
.af-nav > button[type="submit"] { margin-left: auto; }
.af-icon-back { transform: scaleX(-1); }

@media (max-width: 480px) {
  .af-fields { grid-template-columns: 1fr; }
  .af-fields .field--wide { grid-column: 1; }
  .af-review-list { grid-template-columns: 1fr; }
  .af-review-term { margin-top: var(--s-2); }
}

/* ---- compact rail: four labels side by side collide once the form
   itself drops under ~430px wide ("AUFENTHAL" "UNTERKUNF" "TKONTAKT"
   running together, measured at 375px viewport). This is a CONTAINER
   query, not a viewport one, on purpose: site.css puts this card into
   a 2-column grid from 760px viewport upward (.anfrage-grid), which
   makes the form narrower there than it is on a 375px phone — verified
   empirically, the same collision reappears roughly 760-1050px wide.
   A viewport media query cannot see the form's real width; querying
   .af-shell (container-type set above) does, at any viewport.

   The row of number/check markers stays exactly as-is (it already fits
   and already tells completed vs current vs upcoming apart by SHAPE —
   outlined square vs filled square vs check icon — not colour alone).
   Only the label treatment changes: every label stays in the DOM and
   in the accessibility tree (the same .af-sr-only clip technique
   already used elsewhere in this file, never display:none), so each
   button's accessible name is unaffected; only the CURRENT step's
   label is left visible, pulled out of the button's flex column and
   centred under the whole row so it never fights the other three for
   width. A "current / total" count is appended via CSS counter —
   digits and a slash only, no new translatable string, per the brief
   (the word-based "Schritt X von Y" stays screen-reader-only, already
   fully bilingual, unchanged, in the .af-live region). */
@container (max-width: 460px) {
  .af-rail-nav { padding-bottom: var(--s-8); }
  .af-rail { position: relative; counter-reset: af-step 0; }
  .af-rail-item { counter-increment: af-step; }

  .af-rail-btn:not(.is-current) .af-rail-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .af-rail-btn.is-current .af-rail-label {
    position: absolute; left: 0; right: 0; top: 100%;
    margin-top: var(--s-2);
    text-align: center; overflow-wrap: anywhere;
  }
  .af-rail-btn.is-current .af-rail-label::after {
    content: counter(af-step) ' / 4';
    display: block; margin-top: var(--s-1);
    font-family: var(--body); font-size: var(--fs-small); font-weight: 400;
    letter-spacing: normal; text-transform: none;
    font-variant-numeric: tabular-nums; color: var(--ink-3);
  }
}

/* ---------- reduced motion: tokens.css already forces near-zero
   transition-duration globally; this only removes the leftover
   opacity:0 state so a reduced-motion visitor never sees a panel
   stuck invisible if a timing edge case slips past the JS guard. */
@media (prefers-reduced-motion: reduce) {
  .af-panel--leaving,
  .af-panel--entering { opacity: 1; }
}