/* ============================================================
   Recruit·Novae — Swiss Precision direction. International Typographic
   Style (Swiss Modernism): strict grid, Inter only (no serif pairing),
   near-black/white + one Swiss-red accent, near-zero border-radius. Real
   stock photography (fetch_stock_image.py, Openverse/CC) for hero and
   journal illustrations — matches the rest of the batch's convention,
   not an abstract diagram substitute.
   ============================================================ */

body { font-family: var(--font-body); }
.container-inner { padding: 2.6rem clamp(1.2rem, 4vw, 3rem); }

/* ============================================================
   L7 — dot separator between the two halves of the compound name
   ============================================================ */
.brand__dot { color: var(--accent); font-weight: 400; margin: 0 0.03em; }

/* ============================================================
   H7 — vertical rail instead of a horizontal topbar. Re-picked after
   H8 (transparent→solid on scroll) was flagged as "maximally generic" —
   technically distinct code from the rest of the batch, but the same
   ubiquitous pattern as most of the web. A full sidebar-column nav is a
   genuinely different layout paradigm, and reads naturally as Swiss/
   editorial grid (asymmetric column division), not just a re-skinned
   topbar. Collapses to a plain top bar + off-canvas menu on mobile
   (existing initBurger()/placeNav() already handles relocating #nav).
   ============================================================ */
.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail-w);
  background: var(--night);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 90;
}
.rail__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1.5rem;
}
.rail__brand { color: #fff; margin-bottom: 3rem; flex-shrink: 0; }
/* base `.brand:hover { color: var(--ink) }` is near-black — meant for a
   light-background header, invisible against this dark rail. */
.rail__brand:hover { color: rgba(255, 255, 255, 0.75); }
/* BUG: `<nav class="nav rail__nav">` carries BOTH classes on the SAME
   element (not nav wrapped in a .rail__nav ancestor) — so a descendant
   selector `.rail__nav .nav` never matches anything and silently did
   nothing this whole time. Base `.nav`'s own `margin-left:auto` (meant
   to push nav to the right edge of a horizontal topbar) kept leaking
   through uncontested. Fix: target `.rail__nav` directly, not
   `.rail__nav .nav` — it IS the `.nav` element, not its ancestor. */
.rail__nav.nav,
.rail__nav { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-height: 0; gap: 0.15rem; margin-left: 0; width: 100%; }
.rail__nav .nav__link { color: rgba(255, 255, 255, 0.68); width: 100%; padding: 1rem 1.4rem; }
.rail__nav .nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.rail__nav .nav__link.is-active { color: #fff; background: rgba(var(--accent-rgb), 0.18); }
.rail__nav .nav__link.is-active::after { left: 0.8rem; right: auto; top: 0.6rem; bottom: 0.6rem; width: 2px; height: auto; background: var(--accent); }
.rail__cta {
  margin: auto 0 0;
  width: 100%;
  justify-content: center;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  min-height: auto;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
}
.rail .burger { display: none; }

/* content offset for the rail (desktop only — collapses to a normal
   top bar + existing off-canvas mobile menu below the breakpoint) */
body { padding-top: 0; }
main, .footer { margin-left: var(--rail-w); }

@media (max-width: 920px) {
  .rail { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: var(--topbar-h); border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .rail__inner { flex-direction: row; align-items: center; justify-content: space-between; height: 100%; padding: 0 1.1rem; }
  .rail__brand { margin-bottom: 0; }
  .rail .burger { display: flex; }
  /* base .burger is a white box (var(--surface)) with dark lines — same
     invisible-on-dark bug as the earlier H8 header, just re-appearing
     here since the collapsed rail-as-topbar is dark too. */
  .rail .burger { background: transparent; border-color: rgba(255, 255, 255, 0.35); }
  .rail .burger span { background: #fff; }
  /* base #nav is `background: var(--surface)` (white) at this breakpoint,
     only switching dark via `.topbar.is-scrolled .nav` — a class this
     site never sets (renamed `.topbar`→`.rail`). Off-canvas panel stayed
     white while the nav-link text (styled white for the dark rail
     context) was rendered on top — invisible. Force it dark directly,
     no scroll-state dependency needed. */
  #nav { background: var(--night) !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
  main, .footer { margin-left: 0; }
  body { padding-top: var(--topbar-h); }
}

/* ============================================================
   Dark hero/page-hero band. With a left rail instead of a fixed top
   overlay, there's no more "must extend behind the header" mechanic to
   maintain — plain padding, no negative-margin/height compensation.
   ============================================================ */
.hero--precision,
.page-hero {
  background: var(--night);
  color: rgba(255, 255, 255, 0.82);
}
.hero--precision { padding-top: clamp(2rem, 5vw, 3.5rem); }
.page-hero { padding: 2.2rem 0 2.6rem; }
.page-hero__title { color: #fff; margin: 0.6rem 0 0; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.page-hero__lead { color: rgba(255, 255, 255, 0.68); max-width: 40rem; margin: 0.9rem 0 0; }
.page-hero .eyebrow { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); }
@media (max-width: 920px) {
  .hero--precision { padding-top: calc(var(--topbar-h) + clamp(1.5rem, 4vw, 2.5rem)); }
  .page-hero { padding-top: calc(var(--topbar-h) + 1.6rem); }
}

/* SH4 bare kicker — no pill/background/border/icon, just a small tracked
   label. Used on most page-heros/article headers instead of the
   `.eyebrow` pill so not every single page announces itself with the
   identical badge component. */
.kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.page-hero .kicker { color: var(--accent); }
.article__header .kicker { color: var(--accent); }

.hero--precision__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.hero--precision__eyebrow { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.hero--precision__title { font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.25; color: #fff; margin: 0; }
.hero--precision__lead { margin: 1.2rem 0 0; max-width: 32rem; color: rgba(255, 255, 255, 0.68); font-size: 1rem; line-height: 1.75; }
.hero--precision__grid .btn { margin-top: 1.75rem; }
.hero--precision__diagram { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius); padding: 0.6rem; background: rgba(255, 255, 255, 0.03); }
.hero--precision__diagram img { display: block; width: 100%; height: auto; }
@media (max-width: 780px) {
  /* was a fixed 2-column grid at every width — the diagram column got
     squeezed to ~45% of a 390px viewport, clipping the photo. */
  .hero--precision__grid { grid-template-columns: 1fr; }
  .hero--precision__diagram { margin-top: 0.5rem; }
}

/* Real stock photography (Openverse, CC-licensed via scripts/fetch_stock_image.py)
   for the hero + journal illustrations — matches the rest of the batch's
   convention (dwelloryx etc. all use real photos), not an abstract
   diagram/icon substitute. */
.post-featured__diagram img,
.article__diagram img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }

/* ============================================================
   F5 — two-tone 50/50 footer split
   ============================================================ */
.footer--split { background: none; color: var(--ink); }
.footer--split .footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.footer__brand-block { background: var(--night); color: rgba(255, 255, 255, 0.78); }
.footer__brand-block .brand__name,
.footer__brand-block .brand { color: #fff; }
/* same base `.brand:hover{color:var(--ink)}` invisible-on-dark bug as
   the rail brand link — this half of the footer is dark too. */
.footer__brand-block .brand:hover { color: rgba(255, 255, 255, 0.75); }
.footer__about { margin: 1rem 0 0; max-width: 24rem; color: rgba(255, 255, 255, 0.6); }
.footer__info-block { background: var(--surface-2); color: var(--ink-soft); }
.footer__info-block .container-inner { display: flex; flex-wrap: wrap; gap: 2.2rem; }
.footer__col { flex: 1 1 9rem; min-width: 9rem; }
.footer__heading { color: var(--ink); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 1rem; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer__col a { color: var(--ink-soft); }
.footer__col a:hover { color: var(--accent); }
.footer__contact { color: var(--ink-soft); font-size: 0.9rem; }
/* base style.css's `.footer__contact li` is `display:grid; grid-template-
   columns:2.6rem 1fr` for an icon+text pair — this footer has no icon
   column at all (plain text lines), so that inherited grid forced each
   li's raw text into the 2.6rem first cell alone, wrapping character by
   character. Reset to block. Same base rule also sets near-white text
   (built for the original all-dark footer) — invisible on this light
   `.footer__info-block` half, so color needs re-declaring here too. */
.footer__info-block .footer__contact li,
.footer__info-block .footer__contact li a { display: block; padding: 0.15rem 0; color: var(--ink-soft); }
.footer__info-block .footer__contact li a:hover { color: var(--accent); }
.footer__bottom { padding: 1.4rem 0; color: var(--muted); font-size: 0.8rem; text-align: center; }
@media (max-width: 780px) {
  .footer--split .footer__top { grid-template-columns: 1fr; }
}

/* ============================================================
   K1 (base) — reverted from K5 (quiet in-flow row before <footer>).
   User's point: a cookie notice that only appears at the very bottom of
   the document, in normal flow, can go unseen entirely by anyone who
   doesn't scroll all the way down — the fixed bottom bar is the right
   default here, not a diversity pick worth keeping over that. Base
   `.cookie` (style.css) already gives the fixed/floating behaviour; no
   overrides needed, just plain K1 markup in footer.php.

   BUG (found live): base style.css also reserves
   `body:has(#cookie-banner:not([hidden])){padding-bottom:...}` sized to
   the banner's measured height, so the page grew ~137px taller than its
   real content while the (non-full-width, floating) card was visible —
   scrolling to the bottom showed a dead empty gap below the footer for
   no visible reason, since the card floats OVER content and was never
   going to overlap the footer text anyway at this footer's height. A
   floating overlay by definition doesn't need reserved layout space.
   ============================================================ */
body:has(#cookie-banner:not([hidden])) { padding-bottom: 0; }

/* ============================================================
   T6 — icon-in-circle + border-top/border-bottom horizontal strip
   ============================================================ */
.callout--strip { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.callout--strip__icon { flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand-tint); color: var(--accent); }
.callout--strip p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ============================================================
   G6 — horizontal accordion-lite: 4 panels in a row, collapsed to
   title+icon; hover/focus expands one, siblings shrink.
   ============================================================ */
.reveal-row { display: flex; gap: 0.75rem; min-height: 20rem; }
.reveal-row__item {
  /* now a real <a> (was a non-interactive <div> with no click target at
     all, despite reading like a clickable card) — reset link defaults */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  transition: flex-grow 0.28s var(--ease-out), box-shadow 0.2s var(--ease-out);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1.6rem 1.3rem;
  display: flex;
  flex-direction: column;
}
.reveal-row__item:hover { box-shadow: var(--shadow-sm); }
.reveal-row__item:hover,
.reveal-row__item:focus-within { flex-grow: 2.2; background: var(--surface-2); }
.reveal-row__no { font-family: var(--font-mono); color: var(--accent); font-size: 0.8rem; }
.reveal-row__title { font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 0.9rem 0 0; writing-mode: horizontal-tb; }
.reveal-row__desc { margin: 0.8rem 0 0; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.6; opacity: 0; max-height: 0; transition: opacity 0.2s var(--ease-out); }
.reveal-row__item:hover .reveal-row__desc,
.reveal-row__item:focus-within .reveal-row__desc { opacity: 1; max-height: none; }
@media (max-width: 780px) {
  .reveal-row { flex-direction: column; min-height: 0; }
  .reveal-row__item:hover, .reveal-row__item:focus-within { flex-grow: 1; }
  .reveal-row__desc { opacity: 1; max-height: none; }
}

/* ============================================================
   P7 — one featured post (full width) + smaller row underneath
   ============================================================ */
.post-grid--featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.post-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: start; border: 1px solid var(--line); padding: 2rem; }
.post-featured__meta { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); }
.post-featured h3 { font-size: 1.5rem; margin: 0.6rem 0 0.8rem; }
.post-featured h3 a { color: var(--ink); }
.post-featured p { margin: 0; color: var(--ink-soft); }
.post-featured__diagram { border: 1px solid var(--line); padding: 1rem; }
.post-card--sm { border: 1px solid var(--line); padding: 1.4rem; }
.post-card--sm .post-card__meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.post-card--sm h3 { font-size: 1rem; margin: 0.5rem 0 0; }
.post-card--sm h3 a { color: var(--ink); }
.post-card--sm h3 a:hover { color: var(--accent); }
.post-card--sm p { margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 0.85rem; }
@media (max-width: 780px) {
  .post-grid--featured { grid-template-columns: 1fr; }
  .post-featured { grid-template-columns: 1fr; }
}

/* ============================================================
   Q3 — plain FAQ, no accordion at all (always-visible answers)
   ============================================================ */
.faq-plain { display: grid; gap: 1.6rem; max-width: 50rem; margin: 0 auto; }
.faq-plain__item h3 { font-size: 1.05rem; color: var(--ink); margin: 0 0 0.5rem; }
.faq-plain__item p { margin: 0; color: var(--ink-soft); line-height: 1.65; }

/* ============================================================
   C5 — tabs over one shared form
   ============================================================ */
.contact-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; }
.contact-tabs [role=tab] { background: none; border: 0; padding: 0.8rem 1.2rem; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.contact-tabs [role=tab][aria-selected=true] { color: var(--ink); border-bottom-color: var(--accent); }
.contact-tabs__panel { color: var(--ink-soft); margin-bottom: 1.4rem; }
.contact-tabs__panel p { margin: 0; }

/* ============================================================
   S5 — distorted word retype captcha
   ============================================================ */
.verify-word-wrap { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem; border: 1px solid var(--line); background: var(--surface-2); margin-bottom: 1rem; }
.verify-word-row { display: flex; align-items: center; gap: 1rem; }
.verify-word {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  color: var(--ink);
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, var(--line) 3px, var(--line) 4px);
  padding: 0.5rem 0.9rem;
  user-select: none;
}
.verify-word-label { font-size: 0.82rem; color: var(--muted); }

/* ============================================================
   LP6 — definition-list legal pages (dt/dd instead of h2+p). NOT
   centered (no margin:0 auto) — page-hero above it is left-aligned,
   and centering this block would misalign against it, same bug as
   brickvanta's .prose/.legal-panel lesson (see lessons-learned.md).
   ============================================================ */
.legal-dl { max-width: 46rem; margin: 0; }
.legal-dl dt { font-weight: 700; color: var(--ink); font-size: 1.02rem; margin-top: 1.7rem; }
.legal-dl dt:first-child { margin-top: 0; }
.legal-dl dd { margin: 0.5rem 0 0; color: var(--ink-soft); line-height: 1.7; }

/* ============================================================
   Section-head SH2/SH3 (from _chrome-library/section-head.md) —
   applied on two of index.php's sections so they don't all share the
   default eyebrow+centered wrapper (same fix pattern as brickvanta).
   ============================================================ */
.section__head--indexed { display: flex; align-items: baseline; gap: 1rem; text-align: left; max-width: none; margin-bottom: 2rem; }
.section__head--indexed .section__head-index { font-family: var(--font-mono); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--accent); font-weight: 700; flex-shrink: 0; }
.section__head--split { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem; max-width: none; text-align: left; }
.section__head--split .section__title { margin: 0; }
.section__head-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.section__head-link:hover { color: var(--accent-soft); }

/* ============================================================
   leistungen.php body copy — deliberately NOT `.prose` (which
   auto-centers via margin:0 auto) because it sits under a left-aligned
   `.section__head--indexed`; centering it would misalign against that
   heading the same way brickvanta's legal-panel/.prose bug did.
   ============================================================ */
.leist-copy { max-width: 46rem; color: var(--ink-soft); line-height: 1.75; }
.leist-copy p + p { margin-top: 1rem; }

.article__diagram { max-width: 22rem; border: 1px solid var(--line); padding: 1rem; margin: 1.6rem 0 2rem; }

/* ============================================================
   Glossary (R4) — letter filter bar, reuses initGlossary() as-is
   ============================================================ */
.glossary-letters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2rem; }
.gl-letter { border: 1px solid var(--line); background: var(--surface); padding: 0.4rem 0.75rem; font-family: var(--font-mono); font-size: 0.85rem; cursor: pointer; color: var(--ink-soft); }
.gl-letter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.glossary-grid { display: grid; gap: 1.2rem; }
/* grid defaults to align-items:stretch — without it, .term__tag (a bare
   letter with no fixed height) stretched to the full row height instead
   of sitting at the top next to the heading. */
/* border-bottom-only + padding:1.4rem 0 (top/bottom only, no left/right)
   left this looking like an edge-to-edge list row, not the bordered card
   every other card component on this site uses (reveal-row__item,
   post-card--sm, term shares the same "read as a card" expectation). */
.term { display: grid; grid-template-columns: 2.2rem 1fr; align-items: start; gap: 1rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line); background: var(--surface); }
.term.is-hidden { display: none; }
.term__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--brand-tint);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent);
}
.term h3 { margin: 0; font-size: 1rem; color: var(--ink); }
.term h3 small { color: var(--muted); font-weight: 400; font-size: 0.82rem; }
.term p { margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 0.92rem; }
.glossary-empty.is-hidden { display: none; }

/* ============================================================
   TM3 (from _chrome-library/thanks-modal.md) — sharp-cornered "stamp"
   mark instead of the base soft gradient-circle icon. Fits this site's
   near-zero-radius identity (a circle+gradient reads as generic-SaaS,
   not Swiss-grid); also incidentally the base circle's checkmark was
   unreadable here — `.modal__dialog .licon` (animations.css, generic
   icon-tone-inside-any-modal rule) matched `.thanks__icon .licon` at
   equal specificity and won by being later in source order, overriding
   the intended white icon back to `--brand-soft` (dark grey on a
   dark-to-red gradient — effectively invisible). Redesigning the mark
   as plain CSS (no `.licon` at all) sidesteps that collision entirely
   rather than chasing specificity.
   ============================================================ */
.thanks__icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 0;
  background: none;
  border: 2px solid var(--accent);
  display: grid;
  place-items: center;
  margin: 0 auto 1.2rem;
}
.thanks__icon::before {
  content: "";
  width: 1rem;
  height: 1.6rem;
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(45deg) translate(-1px, -3px);
}

/* ============================================================
   Generic tightened-up bits used across pages
   ============================================================ */
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); }