/* 04 soft-focus — the palest slice: blue-greys with almost no step between
   surfaces, 24px radii, a single centred card stack. Photographs are the only
   saturated thing on the page, which is the whole trick here. */
@layer tokens, base, layout, components;

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

    /* Low contrast between *surfaces*, never between text and background. */
    --surface: light-dark(#eef2f7, #131a24);
    --sunk:    light-dark(#e2e9f2, #1a2230);
    --card:    light-dark(#ffffff, #1e2836);
    --ink:     light-dark(#1c2836, #e8eef6);
    --muted:   light-dark(#54637a, #a7b6c9);
    --accent:  light-dark(#3f6494, #90b6e2);
    --on-accent: light-dark(#ffffff, #131a24);
    /* Soft drop shadows do nothing against dark; there elevation comes from a
       light inner border and a lifted surface instead. */
    --lift:   light-dark(0 1px 2px rgb(30 55 95 / 0.07), none);
    --lift-2: light-dark(0 18px 40px -20px rgb(30 55 95 / 0.30), none);
    --edge:   light-dark(transparent, #2b3749);

    --radius: 24px;
    --radius-pill: 999px;
    --sans: "Nunito", "Avenir Next", "Segoe UI", 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(--surface);
    color: var(--ink);
    font: 1rem/1.7 var(--sans);
    background-image:
      radial-gradient(60rem 34rem at 50% -8rem,
        light-dark(#dce6f3, #1d2836) 0%, transparent 70%);
    background-repeat: no-repeat;
  }
  h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
  p { margin: 0; }
  ul { 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(--accent); }
  a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px;
                    border-radius: 8px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
  }
}

@layer layout {
  main {
    display: grid;
    justify-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 0;
  }
  main > section { inline-size: min(58rem, 100%); }
  .items { display: grid; gap: 1rem; justify-items: center; inline-size: 100%; }
}

@layer components {
  .card {
    background: var(--card);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    box-shadow: var(--lift), var(--lift-2);
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }

  .masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    max-inline-size: min(58rem, 100%);
    margin: clamp(1rem, 3vw, 2rem) auto 0;
    padding-inline: clamp(1rem, 4vw, 2rem);
  }
  .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none;
           color: var(--ink); }
  .brand img { inline-size: 2.75rem; }
  .brand-text { display: grid; }
  .name { font-weight: 700; font-size: 1.0625rem; }
  .tag { font-size: 0.8125rem; color: var(--muted); }
  .nav { display: flex; flex-wrap: wrap; gap: 0 1.125rem; margin-inline: auto;
         font-size: 0.875rem; }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a:hover { color: var(--accent); }
  .schemes { display: flex; gap: 0.375rem; }
  .schemes a {
    font-size: 0.75rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--sunk);
    color: var(--muted);
    text-decoration: none;
  }
  .schemes a:hover { color: var(--accent); }

  .hero { text-align: center; }
  .eyebrow {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--sunk);
    color: var(--muted);
    font-size: 0.8125rem;
    margin-block-end: 1.25rem;
  }
  .hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.12;
             text-wrap: balance; }
  .lede { margin-block-start: 1.125rem; color: var(--muted); max-inline-size: 46ch;
          margin-inline: auto; text-wrap: pretty; }
  .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
             margin-block-start: 1.75rem; }
  .btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--edge);
    background: var(--sunk);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    box-shadow: var(--lift);
  }
  .btn:hover { background: var(--card); color: var(--accent); }
  .btn-primary { background: var(--accent); border-color: var(--accent);
                 color: var(--on-accent); box-shadow: var(--lift-2); }
  .btn-primary:hover { filter: brightness(1.08); color: var(--on-accent); }
  .hero-figure { margin-block-start: 2rem; }
  .hero-figure img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 58%;
    border-radius: 18px;
  }

  .angebot > h2 {
    text-align: center;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin-block-end: 1.25rem;
  }
  .items li {
    inline-size: min(50rem, 100%);
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    padding: 1.25rem;
  }
  .items .plain { grid-template-columns: 1fr; }
  .items figure img {
    inline-size: 10rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
  }
  .items h3 { font-size: 1.125rem; margin-block-end: 0.25rem; }
  .items p { color: var(--muted); font-size: 0.9375rem; }
  @media (max-width: 620px) {
    .items li { grid-template-columns: 1fr; }
    .items figure img { inline-size: 100%; }
  }

  .kontakt { text-align: center; }
  .kontakt h2 { font-size: 0.8125rem; text-transform: uppercase;
                letter-spacing: 0.14em; color: var(--muted); margin-block-end: 1.5rem; }
  .contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
             gap: 1rem; }
  .contact > div { background: var(--sunk); border-radius: 18px; padding: 1.25rem 1rem; }
  .contact dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
                color: var(--muted); margin-block-end: 0.5rem; }
  .contact dd { line-height: 1.8; font-size: 0.9375rem; }
  @media (max-width: 620px) { .contact { grid-template-columns: 1fr; } }

  .colophon {
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) 3rem;
    background: var(--sunk);
    border-start-start-radius: var(--radius);
    border-start-end-radius: var(--radius);
    text-align: center;
    font-size: 0.9375rem;
  }
  .sections { display: flex; flex-wrap: wrap; justify-content: center;
              gap: 0.5rem 1.25rem; max-inline-size: 46rem; margin-inline: auto; }
  .sections a { color: var(--ink); text-decoration: none; }
  .sections a:hover { color: var(--accent); }
  .up { margin-block-start: 1.25rem; color: var(--muted); }
}