/* 10 high-contrast — the family reduced to its endpoints: pure black and white
   with the site's #0050C8 as the single hue. Two type sizes and nothing
   between, no borders or cards anywhere, separation by very large air. The
   photographs run edge to edge and uncropped — they are the only colour. */
@layer tokens, base, layout, components;

@layer tokens {
  :root {
    color-scheme: light dark;

    --ground: light-dark(#ffffff, #000000);
    --ink:    light-dark(#000000, #ffffff);
    /* One colour decision, so getting it wrong is the whole failure: no
       single mid-saturation blue clears 4.5:1 against both #fff and #000. */
    --hue:    light-dark(#0043a8, #7fb0ff);

    --radius: 0;
    --air: clamp(4rem, 12vh, 9rem);
    --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  }
  :root:has(#light:target) { color-scheme: light; }
  :root:has(#dark:target)  { color-scheme: dark; }
}

@layer base {
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    /* Two sizes only. Everything that is not the headline is this one. */
    font: 1.125rem/1.6 var(--sans);
  }
  h1, h2, h3 { margin: 0; font-weight: 700; font-size: inherit; }
  p { margin: 0; }
  ol { margin: 0; padding: 0; list-style: none; }
  dl, dd { margin: 0; }
  figure { margin: 0; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  a { color: var(--hue); text-underline-offset: 0.2em; }
  /* A 3px ring with a wide offset is a design feature here. */
  a:focus-visible { outline: 3px solid var(--hue); outline-offset: 5px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
  }
}

@layer layout {
  .masthead, main > section, .colophon {
    max-inline-size: 78rem;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 4rem);
  }
  main > section { padding-block-end: var(--air); }
}

@layer components {
  .masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.5rem;
    padding-block: clamp(1.5rem, 4vw, 2.5rem) 0;
  }
  .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none;
           color: var(--ink); }
  .brand img { inline-size: 2.5rem; }
  .name { font-weight: 700; }
  .nav { display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
  .nav a { text-decoration: none; }
  .nav a:hover { text-decoration: underline; }
  .schemes { display: flex; gap: 1rem; margin-inline-start: auto; }
  .schemes a { text-decoration: underline; }

  .hero { padding-block: var(--air) 0; }
  .eyebrow { margin-block-end: 2rem; }
  .hero h1 {
    /* The only other size on the page. */
    font-size: clamp(2.75rem, 8.5vw, 5.75rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    max-inline-size: 16ch;
    text-wrap: balance;
  }
  .lede { margin-block-start: 2.5rem; max-inline-size: 42ch; }
  .actions { display: flex; flex-wrap: wrap; gap: 2rem; margin-block-start: 2.5rem; }
  .btn { color: var(--hue); text-decoration: underline; text-decoration-thickness: 2px;
         text-underline-offset: 0.25em; }
  .btn-primary { text-decoration-thickness: 6px; }
  .btn:hover { color: var(--ink); }

  /* Full-bleed and uncropped: no frame, no radius, no caption. */
  .full { margin-block: 0 var(--air); }
  .full img { inline-size: 100%; }

  .angebot > h2, .kontakt > h2 { margin-block-end: 3rem; }

  /* A numbered list. Space is the only separator. */
  .items { counter-reset: b; display: grid; gap: 3.5rem; max-inline-size: 46rem; }
  .items li { counter-increment: b; display: grid; gap: 0.5rem; }
  .items h3::before {
    content: counter(b, decimal-leading-zero) "  ";
    color: var(--hue);
    font-variant-numeric: tabular-nums;
  }

  .contact { display: grid; gap: 3rem; max-inline-size: 46rem; }
  .contact dt { color: var(--hue); margin-block-end: 0.5rem; }
  .contact dd { line-height: 1.8; }

  .colophon { padding-block: 0 var(--air); }
  .sections { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
  .sections a { text-decoration: none; }
  .sections a:hover { text-decoration: underline; }
  .up { margin-block-start: 2rem; }
}