/**
 * autowire — base layer
 *
 * The document itself: reset, typography, page shell, header, footer,
 * sections and layout primitives. Nothing here is a component with variants —
 * those live in components.css.
 *
 * Load order:  tokens.css → tokens-app.css → base.css → components.css → <page>.css
 *
 * Two things about tokens.css shape every rule below:
 *   1. It styles bare elements (body, h1–h3, p, label, .mono/time/code) at
 *      specificity 0,0,1 — so any class here wins without !important.
 *   2. It zeroes the margin on every heading and paragraph. There is no
 *      default vertical rhythm anywhere: spacing comes from flex/grid gap.
 *
 * Naming:  blocks are flat nouns (.card, .banner), variants are hyphenated
 * sibling classes (.btn .btn-primary), state is .is-*, utilities are .u-*.
 *
 * SHARED FILE — a byte-identical copy lives in the autowire-account repo.
 * Edit it here and run ./sync-design-system.sh from there; ./scripts-check.sh
 * fails on a hand-edited copy. See css/README.md.
 */


/* ═══════════════════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* German compounds get long — "Verbraucherstreitbeilegung",
     "Abrechnungszeitraum". Hyphenate at real syllable boundaries using the
     browser's German dictionary, which is why every page declares lang="de".
     Only words of 10+ characters, never leaving fewer than 4 on either line. */
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  overflow-wrap: break-word;   /* last resort, for tokens with no syllables */
}

/* Display type reads badly with a hyphen in it, and headlines are short and
   author-controlled — they use <br> where they need a break. Deliberately
   display type only: an <h2> inside legal prose ("Verbraucherstreitbeilegung")
   is long enough to overflow its column and still needs the dictionary. */
h1, .hero-title, .page-title, .section-title { hyphens: manual; -webkit-hyphens: manual; }

img, svg { max-width: 100%; }

/* tokens.css zeroes the margins of body, h1–h3 and p only. These elements
   still carry user-agent margins — <dd> notably gets margin-inline-start:40px,
   which would push every value out of its grid column — and all vertical
   rhythm here comes from gap, never from margins. <dialog> is deliberately
   excluded: its UA `margin: auto` is what centres the modal. */
dl, dt, dd, hr, form, fieldset, figure, ul, ol, blockquote { margin: 0; }
input, button, select, textarea { margin: 0; font: inherit; }

/* Nothing with syllables to find: mono/technical strings, addresses, URLs. */
.mono, .u-mono, code,
a[href^="mailto:"],
a[href^="http"] { hyphens: none; -webkit-hyphens: none; }

a { color: inherit; }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.section-dark :focus-visible,
.site-foot :focus-visible { outline: var(--focus-ring-on-dark); }

/* The placeholder carries a real requirement ("Mindestens 8 Zeichen"), so it
   has to clear AA: --fg-tertiary (#858585) is 3.75:1, --fg-secondary-strong 5.49:1. */
input::placeholder, textarea::placeholder { color: var(--fg-secondary-strong); }


/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   Parameterised by a local custom property, never by a new class per gap.
   ═══════════════════════════════════════════════════════════════════════ */

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));
}

.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--row-gap, var(--space-4));
}
.row-wrap    { flex-wrap: wrap; }
.row-between { justify-content: space-between; }
.row-start   { align-items: flex-start; }

.grid { display: grid; gap: var(--grid-gap, var(--space-6)); }
.g2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-foot { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }


/* ═══════════════════════════════════════════════════════════════════════
   PAGE SHELL
   ═══════════════════════════════════════════════════════════════════════ */

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* 1 0 auto, not 1: main must fill the viewport but never be compressed below
   its content when the footer is tall. */
.site-main { flex: 1 0 auto; }


/* ── Header ─────────────────────────────────────────────────────────── */

.site-head {
  background: var(--bg-screen);
  border-bottom: 1px solid var(--border-default);
}
.site-head-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg-primary);
}
.site-logo-dot {
  width: 12px; height: 12px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  flex: none;
}
.site-logo-word {
  font-size: 22px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-snug);
}

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav > a {
  font-size: var(--text-body-m);
  color: var(--fg-primary);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav > a:hover { text-decoration: underline; text-underline-offset: 6px; }
.site-nav > a.is-current {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.site-nav > a.btn:hover { text-decoration: none; }


/* ── Footer ─────────────────────────────────────────────────────────── */

.site-foot {
  background: var(--color-dark);
  color: var(--fg-on-dark);
  margin-top: auto;
}
/* Columns come from .grid.g-foot in the markup, not from a grid declared
   here — the footer is the same three-column block on both sites. */
.site-foot-inner {
  padding-top: var(--section-py-band);
  padding-bottom: var(--section-py-band);
  gap: var(--space-10);
}
.site-foot a {
  color: var(--fg-on-dark);
  font-size: var(--text-body-s);
  text-decoration: none;
}
.site-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-foot .site-logo-word { color: var(--fg-on-dark); font-size: 20px; }
/* tokens.css colours .mono at --fg-secondary (#777), which is 3.46:1 on
   --color-dark and fails. gray-600 is 7.8:1. */
.site-foot .mono { color: var(--fg-on-dark-muted); }

.site-foot-heading {
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-faint);
  hyphens: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTIONS
   Full-bleed <section> carries the background, an inner .wrap the padding.
   Backgrounds alternate white → brand → white → gray-200 → dark.
   ═══════════════════════════════════════════════════════════════════════ */

.section       { background: var(--bg-screen); }
.section-alt   { background: var(--bg-screen-alt); }
.section-brand { background: var(--color-brand); color: var(--fg-on-brand); }
.section-dark  { background: var(--color-dark);  color: var(--fg-on-dark); }

/* Two adjacent same-coloured bands need a divider — separation on this site
   is borders and background changes, never shadows. */
.section-bordered     { border-bottom: 1px solid var(--border-default); }
.section-bordered-top { border-top: 1px solid var(--border-default); }

.section-inner         { padding-top: var(--section-py);         padding-bottom: var(--section-py); }
.section-inner-compact { padding-top: var(--section-py-compact); padding-bottom: var(--section-py-compact); }
.section-inner-band    { padding-top: var(--section-py-band);    padding-bottom: var(--section-py-band); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-secondary-strong);
  hyphens: none;
}
.section-brand .eyebrow { color: var(--color-dark); }
.section-dark  .eyebrow { color: var(--color-brand); }


/* ═══════════════════════════════════════════════════════════════════════
   HEADINGS

   tokens.css gives h1/h2/h3 and p an explicit `color: var(--fg-primary)` at
   element specificity, which beats the colour a dark or brand section sets on
   its own box. Every heading class therefore has to opt back into inheritance
   or it renders black on --color-dark.
   ═══════════════════════════════════════════════════════════════════════ */

.page-title {
  font-size: var(--text-h-page);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: inherit;
}
.section-title {
  font-size: var(--text-h-section);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-normal);
  color: inherit;
}
/* --fg-secondary (#777) is 4.48:1 on white and 4.20:1 on --bg-screen-alt;
   both miss AA at this size. --fg-secondary-strong is 5.49:1 / 5.15:1. */
.page-sub {
  font-size: var(--text-body-web);
  line-height: var(--lh-loose);
  color: var(--fg-secondary-strong);
  max-width: 68ch;
}
.section-brand .page-sub { color: var(--color-dark); }
.section-dark  .page-sub { color: var(--fg-on-dark-muted); }


/* ═══════════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */

.u-mono   { font-family: var(--font-mono); }
.u-nowrap { white-space: nowrap; }
.u-fit    { width: fit-content; }
.u-center { text-align: center; }
.u-hidden { display: none !important; }

/* Visible only to screen readers. clip-path is the modern property; clip is
   the fallback for browsers that still need it. */
.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — visible on focus, sits above the sticky-free header. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  background: var(--color-brand);
  color: var(--fg-on-brand);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-4); }


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
  .g3, .g-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .wrap { padding-left: var(--wrap-pad-sm); padding-right: var(--wrap-pad-sm); }

  /* Flex and grid children default to min-width:auto, which refuses to shrink
     below their content and is the usual cause of a row overflowing instead
     of wrapping its text. Only relaxed here, where it is what we want. */
  .stack > *, .row > *, .grid > * { min-width: 0; }

  .site-head-inner {
    height: auto;
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 14px;
  }
  /* The nav drops to its own full-width row rather than squeezing beside the
     wordmark; its items then shrink instead of wrapping among themselves. */
  .site-nav {
    width: 100%;
    gap: var(--space-3);
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .site-nav > a { font-size: 15px; }
}

@media (max-width: 680px) {
  .g2, .g3, .g-foot { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  .site-nav { gap: var(--space-2); }
  .site-nav > a { font-size: 14px; }
  .site-nav > a.btn-sm { padding: 0 var(--space-4); }
  .site-logo-word { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}