/* Erzeugt von site/build.mjs – nicht von Hand bearbeiten. Farben: Radix Colors (MIT), wie die Web-App. */
:root, .light, .light-theme {
  --gray-1: #fcfcfc;
  --gray-2: #f9f9f9;
  --gray-3: #f0f0f0;
  --gray-4: #e8e8e8;
  --gray-5: #e0e0e0;
  --gray-6: #d9d9d9;
  --gray-7: #cecece;
  --gray-8: #bbbbbb;
  --gray-9: #8d8d8d;
  --gray-10: #838383;
  --gray-11: #646464;
  --gray-12: #202020;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --gray-1: color(display-p3 0.988 0.988 0.988);
      --gray-2: color(display-p3 0.975 0.975 0.975);
      --gray-3: color(display-p3 0.939 0.939 0.939);
      --gray-4: color(display-p3 0.908 0.908 0.908);
      --gray-5: color(display-p3 0.88 0.88 0.88);
      --gray-6: color(display-p3 0.849 0.849 0.849);
      --gray-7: color(display-p3 0.807 0.807 0.807);
      --gray-8: color(display-p3 0.732 0.732 0.732);
      --gray-9: color(display-p3 0.553 0.553 0.553);
      --gray-10: color(display-p3 0.512 0.512 0.512);
      --gray-11: color(display-p3 0.392 0.392 0.392);
      --gray-12: color(display-p3 0.125 0.125 0.125);
    }
  }
}
@media (prefers-color-scheme: dark) {
:root { color-scheme: dark; }
:root {
  --gray-1: #111111;
  --gray-2: #191919;
  --gray-3: #222222;
  --gray-4: #2a2a2a;
  --gray-5: #313131;
  --gray-6: #3a3a3a;
  --gray-7: #484848;
  --gray-8: #606060;
  --gray-9: #6e6e6e;
  --gray-10: #7b7b7b;
  --gray-11: #b4b4b4;
  --gray-12: #eeeeee;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --gray-1: color(display-p3 0.067 0.067 0.067);
      --gray-2: color(display-p3 0.098 0.098 0.098);
      --gray-3: color(display-p3 0.135 0.135 0.135);
      --gray-4: color(display-p3 0.163 0.163 0.163);
      --gray-5: color(display-p3 0.192 0.192 0.192);
      --gray-6: color(display-p3 0.228 0.228 0.228);
      --gray-7: color(display-p3 0.283 0.283 0.283);
      --gray-8: color(display-p3 0.375 0.375 0.375);
      --gray-9: color(display-p3 0.431 0.431 0.431);
      --gray-10: color(display-p3 0.484 0.484 0.484);
      --gray-11: color(display-p3 0.706 0.706 0.706);
      --gray-12: color(display-p3 0.933 0.933 0.933);
    }
  }
}
}
:root { color-scheme: light dark; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--gray-1); color: var(--gray-12);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.wrap { margin: 0 auto; display: flex; min-height: 100dvh; max-width: 44rem; flex-direction: column; padding: 0 1.25rem; }
@media (min-width: 40rem) { .wrap { padding: 0 1.5rem; } }
header { padding: 1.5rem 0; }
main { flex: 1; padding: 3rem 0; }
footer { padding: 2rem 0; font-size: .75rem; color: var(--gray-11); }
footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
footer p { margin: 0 0 .75rem; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gray-8); outline-offset: 2px; border-radius: 2px; }
.u { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--gray-7); }
.u:hover { color: var(--gray-12); text-decoration-color: var(--gray-12); }
.icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.logo-small { display: inline-block; height: 1.25rem; color: var(--gray-12); }
.logo-small:hover { color: var(--gray-11); }
.logo-small svg { display: block; height: 100%; width: auto; }

/* Startseite: Logo, Shop-Link, Kontakt */
.home { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; text-align: center; padding: 4rem 0; }
.home h1 { margin: 0; width: min(100%, 28rem); color: var(--gray-12); }
.home h1 svg { display: block; width: 100%; height: auto; }
.tagline { margin: 0; max-width: 30rem; color: var(--gray-11); font-size: 1.0625rem; }
.shop {
  display: inline-flex; align-items: center; gap: .75rem; height: 3.5rem; padding: 0 1.5rem;
  border: 1px solid var(--gray-12); border-radius: .375rem; background: var(--gray-12); color: var(--gray-1);
  font-size: 1.0625rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.shop:hover { background: var(--gray-11); border-color: var(--gray-11); }
.shop .icon { width: 1.5rem; height: 1.5rem; }
.shop .icon.small { width: 1.125rem; height: 1.125rem; opacity: .8; }
.contact { color: var(--gray-11); }
.contact p { margin: 0; }
.contact .mail { margin-top: .25rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.contact a { color: var(--gray-12); font-weight: 500; font-size: 1.0625rem; text-underline-offset: 3px; text-decoration-color: var(--gray-7); }
.contact a:hover { text-decoration-color: var(--gray-12); }
.home-page footer nav { justify-content: center; }

/* Rechtstexte wie /impressum und /datenschutz der Web-App */
.back { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; color: var(--gray-11); text-decoration: none; }
.back:hover { color: var(--gray-12); }
.back .icon { width: 1rem; height: 1rem; }
.page h1 { margin: 1rem 0 .5rem; font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; }
.page .intro { margin: 0 0 2.5rem; color: var(--gray-11); }
.legal { line-height: 1.625; }
.legal section { margin-bottom: 2rem; }
.legal h2 { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.025em; }
.legal p { margin: 0 0 .75rem; }
.legal ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
.legal li { margin-bottom: .25rem; }
.legal a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--gray-7); }
.legal a:hover { text-decoration-color: var(--gray-12); }
.stand { font-size: .875rem; color: var(--gray-11); }