/* 14 preisliste — invented, seeded from a formal constraint: the page is one
   continuous ruled ledger. Label left, value flush right, one hairline rhythm
   throughout. The greys become the paper, the navy becomes the ink, and the
   site's link blue is spent on values and nothing else. */
@layer tokens, base, layout, components;

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

    --paper: light-dark(#f0f2f5, #101419);
    --ink:   light-dark(#16202c, #e8edf3);
    --muted: light-dark(#5b6878, #9daabb);
    --blue:  light-dark(#005389, #6ab0e8);
    --on-blue: light-dark(#ffffff, #0b1016);
    /* The rule *is* the design; it cannot thin out on dark. */
    --rule:  light-dark(#d2d8e0, #2a323d);
    --rule-strong: light-dark(#16202c, #e8edf3);

    --radius: 0;
    /* Tight: a board you scan, not a page you settle into. */
    --row-pad: 0.55rem;
    --grotesk: "Archivo Narrow", "Roboto Condensed", "Arial Narrow",
               "Helvetica Neue", system-ui, sans-serif;
    --mono: ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  }
  :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(--paper);
    color: var(--ink);
    font: 0.9375rem/1.5 var(--grotesk);
  }
  h1, h2, h3 { margin: 0; font-weight: 700; text-transform: uppercase;
               letter-spacing: 0.04em; }
  p { margin: 0; }
  table { border-collapse: collapse; inline-size: 100%; }
  figure { margin: 0; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  a { color: var(--blue); text-underline-offset: 0.18em; }
  a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  .sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
  }
}

@layer layout {
  /* The scheme anchors are body children, so `body > *` would give them the
     page padding and render an empty padded box (plus a focus ring, since a
     fragment jump focuses them). They still match :target when hidden. */
  #light, #dark { display: none; }
  body > * {
    max-inline-size: 80rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
  }
  /* The one layout primitive. */
  .row {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 0.5rem 2rem;
    padding-block: var(--row-pad);
    border-block-end: 1px solid var(--rule);
  }
}

@layer components {
  .masthead { padding-block-start: 1.25rem; }
  .masthead .row:first-child { border-block-end-width: 3px;
                               border-block-end-color: var(--rule-strong); }
  .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none;
           color: var(--ink); }
  .brand img { inline-size: 2.25rem; }
  .name { font-size: 1.125rem; font-weight: 700; text-transform: uppercase;
          letter-spacing: 0.14em; }
  .val { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted);
         text-align: end; font-variant-numeric: tabular-nums; }
  .nav { display: flex; flex-wrap: wrap; gap: 0 1.125rem; font-size: 0.8125rem;
         text-transform: uppercase; letter-spacing: 0.08em; }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a:hover { color: var(--blue); }
  .schemes { display: flex; gap: 0.75rem; font-family: var(--mono); font-size: 0.75rem;
             text-transform: uppercase; letter-spacing: 0.08em; }
  .schemes a { text-decoration: none; }
  .schemes a:hover { text-decoration: underline; }

  .eyebrow { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase;
             letter-spacing: 0.12em; color: var(--blue); }
  .row-title { border-block-end-width: 3px; border-block-end-color: var(--rule-strong);
               padding-block: 1.25rem 0.9rem; }
  .hero h1 { font-size: clamp(1.875rem, 6vw, 4.25rem); line-height: 0.98;
             letter-spacing: -0.01em; text-wrap: balance; }
  .lede { max-inline-size: 60ch; font-size: 1rem; line-height: 1.55;
          text-transform: none; letter-spacing: 0; }
  .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .btn {
    display: inline-block; padding: 0.45rem 1.125rem;
    border: 2px solid var(--ink); border-radius: var(--radius);
    color: var(--ink); background: transparent;
    font-family: var(--grotesk); font-weight: 700; font-size: 0.8125rem;
    text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none;
  }
  .btn:hover { background: var(--ink); color: var(--paper); }
  .btn-primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
  .btn-primary:hover { background: transparent; color: var(--blue); }

  /* A full-bleed band, flush to the ledger's own margins. */
  .band { margin-block-start: 1.25rem; border-block-end: 3px solid var(--rule-strong); }
  .band img { inline-size: 100%; aspect-ratio: 5 / 1; object-fit: cover;
              object-position: 50% 58%; filter: grayscale(0.35) contrast(1.04); }

  .angebot, .kontakt { padding-block-start: clamp(2rem, 5vw, 3.5rem); }
  caption { text-align: start; padding-block-end: 0.6rem; }
  h2 { font-size: 0.8125rem; letter-spacing: 0.18em; color: var(--muted); }

  .ledger th, .ledger td {
    text-align: start; vertical-align: top;
    padding-block: var(--row-pad);
    border-block-end: 1px solid var(--rule);
  }
  .ledger thead th {
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--muted); border-block-end: 3px solid var(--rule-strong);
    padding-block-end: 0.4rem;
  }
  .thumb-col, .thumb { inline-size: 5.5rem; padding-inline-end: 1.25rem; }
  .thumb img { inline-size: 4.25rem; aspect-ratio: 1; object-fit: cover;
               filter: grayscale(0.35) contrast(1.04); }
  .ledger tbody th {
    inline-size: 20%; font-size: 0.9375rem; letter-spacing: 0.06em;
    padding-inline-end: 1.5rem;
  }
  .ledger td { font-family: system-ui, sans-serif; text-transform: none;
               letter-spacing: 0; color: var(--muted); line-height: 1.55; }
  /* Values right-aligned in a tabular mono column — the ledger's spine. */
  .ledger-contact .val { text-align: end; font-family: var(--mono);
                         color: var(--blue); }
  @media (max-width: 760px) {
    .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; }
    .ledger thead { display: none; }
    .ledger tr { border-block-end: 3px solid var(--rule-strong); padding-block: 0.5rem; }
    .ledger th, .ledger td { border-block-end: 0; inline-size: auto !important; }
    .thumb img { inline-size: 100%; aspect-ratio: 3 / 1; }
    .ledger-contact .val { text-align: start; }
  }

  .colophon {
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    padding-block: 0 3rem;
    border-block-start: 3px solid var(--rule-strong);
  }
  .colophon h2 { font-size: 0.6875rem; letter-spacing: 0.18em; }
  .colophon .val a { text-decoration: none; }
  .colophon .val a:hover { text-decoration: underline; }
}