/* 02 editorial-serif — the warmest slice available inside a blue-grey family:
   a cool grey paper, deep navy ink, the site's own link blue for links only.
   One narrow measure centred, rules and indents instead of fills. This is the
   direction that keeps the original's serif and drops everything else. */
@layer tokens, base, layout, components;

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

    /* Dark inverts the roles, not the values: the navy ink becomes the paper
       and keeps its blue, so it stays this family rather than going neutral. */
    --paper:  light-dark(#f2f4f7, #0d1620);
    --ink:    light-dark(#12233d, #dfe6ef);
    --muted:  light-dark(#4f5f74, #93a3b7);
    --link:   light-dark(#005389, #79b6e8);
    --rule:   light-dark(#c3ccd8, #24303f);

    --measure: 34rem;
    --radius: 0;
    --serif: Georgia, "Times New Roman", "Iowan Old Style", ui-serif, 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(--paper);
    color: var(--ink);
    font: 1.125rem/1.7 var(--serif);
  }
  h1, h2, h3 { margin: 0; font-weight: 400; }
  p { margin: 0; }
  dl, dd { margin: 0; }
  figure { margin: 0; }
  img { display: block; max-inline-size: 100%; block-size: auto; }
  a { color: var(--link); text-underline-offset: 0.18em; }
  a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
  }
}

@layer layout {
  main > article > section, .plate {
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline: 1.5rem;
  }
  /* The one element allowed past the measure. */
  .plate.wide {
    max-inline-size: min(56rem, calc(100vw - 3rem));
  }
}

@layer components {
  .masthead {
    max-inline-size: 60rem;
    margin-inline: auto;
    padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    border-block-end: 1px solid var(--rule);
  }
  .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none;
           color: var(--ink); }
  .brand img { inline-size: 2.75rem; }
  .name { font-size: 1.0625rem; letter-spacing: 0.03em; }
  .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.375rem;
    margin-inline: auto;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a:hover { color: var(--link); }
  .schemes { display: flex; gap: 0.4rem; font-size: 0.75rem;
             text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
  .schemes a { text-decoration: none; }
  .schemes a:hover { text-decoration: underline; }

  .hero { padding-block: clamp(3rem, 8vw, 6rem) 0; text-align: center; }
  .eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em;
             color: var(--muted); margin-block-end: 1.75rem; }
  .hero h1 {
    font-size: clamp(2.5rem, 6.5vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  .hero .lede { margin-block-start: 1.5rem; color: var(--muted); text-wrap: pretty; }
  .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;
             margin-block-start: 2rem; }
  .btn {
    font-family: var(--serif);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding-block-end: 0.3rem;
    border-block-end: 1px solid var(--link);
    border-radius: var(--radius);
    color: var(--link);
  }
  .btn-primary { border-block-end-width: 3px; color: var(--ink); }
  .btn:hover { border-block-end-color: var(--ink); color: var(--ink); }

  .plate { margin-block: clamp(2.5rem, 6vw, 4rem); }
  .plate img { inline-size: 100%; }
  .plate.wide img { aspect-ratio: 3 / 1; object-fit: cover; }
  figcaption {
    margin-block-start: 0.75rem;
    font-size: 0.875rem;
    font-style: italic;
    color: var(--muted);
    text-align: center;
  }

  .angebot > h2, .kontakt > h2 {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted);
    text-align: center;
    margin-block-end: 2rem;
  }

  /* A definition run. Boxing these turns the direction into something else. */
  .items dt {
    font-size: 1.3125rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--rule);
  }
  .items dd {
    padding-block: 0.5rem 0.25rem;
    padding-inline-start: 1.75rem;
    color: var(--muted);
    text-wrap: pretty;
  }
  .items dd:last-of-type { border-block-end: 1px solid var(--rule);
                           padding-block-end: 1.5rem; }

  .contact { display: grid; gap: 1.75rem; text-align: center; }
  .contact dt { font-size: 0.6875rem; text-transform: uppercase;
                letter-spacing: 0.16em; color: var(--muted); margin-block-end: 0.5rem; }
  .contact dd { line-height: 1.8; }

  .colophon {
    max-inline-size: 60rem;
    margin: clamp(4rem, 9vw, 7rem) auto 0;
    padding: 2rem 1.5rem 3rem;
    border-block-start: 1px solid var(--rule);
    text-align: center;
    font-size: 0.9375rem;
  }
  .sections { display: flex; flex-wrap: wrap; justify-content: center;
              gap: 0.5rem 1.25rem; }
  .sections a { color: var(--ink); text-decoration: none; }
  .sections a:hover { color: var(--link); text-decoration: underline; }
  .up { margin-block-start: 1.5rem; font-style: italic; }
}