/* hygnoshield.com — Platzhalterseite bis zur Beta. Farben und Typografie wie die HygnoShield-App:
   schwarz-weiss, Systemschriften, kein JavaScript, keine Datei von fremden Servern. */
:root {
  --bg: #ffffff; --fg: #171717; --fg-2: #404040; --muted: #5f5f5f;
  --line: #e5e5e5; --line-strong: #d4d4d4; --surface: #f7f7f7;
  --chip-patient: rgb(253 224 71 / .5);  --chip-patient-ink: #422006;
  --chip-provider: rgb(186 230 253 / .5); --chip-provider-ink: #082f49;
  --chip-date: rgb(253 230 138 / .5);     --chip-date-ink: #451a03;
  --chip-location: rgb(153 246 228 / .5); --chip-location-ink: #042f2e;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: 1.5rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a; --fg: #ededed; --fg-2: #c8c8c8; --muted: #a3a3a3;
    --line: #262626; --line-strong: #3a3a3a; --surface: #141414;
    --chip-patient: rgb(250 204 21 / .35);  --chip-patient-ink: #fef9c3;
    --chip-provider: rgb(56 189 248 / .35); --chip-provider-ink: #e0f2fe;
    --chip-date: rgb(217 119 6 / .35);      --chip-date-ink: #fef3c7;
    --chip-location: rgb(45 212 191 / .35); --chip-location-ink: #ccfbf1;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 1rem/1.5 var(--font); -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; display: flex; align-items: center; }
main:focus { outline: none; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--fg); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; border-radius: 3px; }
.wrap { width: min(100% - 2 * var(--gutter), 64rem); margin-inline: auto; }
.list { list-style: none; margin: 0; padding: 0; }
.nw { white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -6rem; z-index: 10; padding: .75rem 1.25rem; border-radius: 8px; background: var(--fg); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; color: var(--bg); }

/* Kopf: Wortmarke links, Sprachen rechts */
.head { border-bottom: 1px solid var(--line); }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 0; }
.wordmark { color: var(--fg); font-size: 1.3rem; letter-spacing: -.02em; text-decoration: none; }
.wordmark b { font-weight: 700; }
.wordmark span { font-weight: 300; }
.langs ul { display: flex; gap: .125rem; padding: .125rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.langs a { display: inline-block; min-width: 2.5rem; padding: .3rem .7rem; border-radius: 999px; color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-align: center; text-decoration: none; }
.langs a:hover { color: var(--fg); }
.langs a[aria-current="page"] { background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong); }

/* Inhalt: eine zentrierte Spalte */
.hero { width: min(100% - 2 * var(--gutter), 42rem); margin: 0 auto; padding: 4.5rem 0 4rem; text-align: center; }
.kicker { margin: 0; color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hero h1 { margin: 1rem 0 0; font-size: clamp(1.75rem, 7.5vw, 2.75rem); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; }
.lead { margin: 1.25rem auto 0; max-width: 36rem; color: var(--fg-2); font-size: 1.125rem; line-height: 1.625; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.chips li { padding: .15rem .45rem; border-radius: 4px; font: 500 .8125rem/1.5 var(--mono); }
.chip-patient { background: var(--chip-patient); color: var(--chip-patient-ink); }
.chip-provider { background: var(--chip-provider); color: var(--chip-provider-ink); }
.chip-date { background: var(--chip-date); color: var(--chip-date-ink); }
.chip-location { background: var(--chip-location); color: var(--chip-location-ink); }
.status { display: inline-flex; align-items: baseline; gap: .55rem; margin: 2rem 0 0; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg-2); font-size: .9375rem; text-align: left; }
.dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--fg); transform: translateY(-.05em); }
.kmp { max-width: 34rem; margin: 1rem auto 0; color: var(--muted); font-size: .875rem; line-height: 1.55; }
.actions { margin: 2rem 0 0; }
.btn { display: inline-block; padding: .65rem 1.25rem; border-radius: 6px; background: var(--fg); color: var(--bg); font-weight: 600; line-height: 1.4; text-decoration: none; }
.btn:hover { color: var(--bg); opacity: .9; }
.product-of { margin: 1.5rem 0 0; color: var(--muted); font-size: .9375rem; }
.product-of a { color: var(--fg-2); }

/* Fuss: Impressum und Datenschutz klein, zweispaltig */
.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; line-height: 1.6; }
.foot-in { padding: 2rem 0 2.25rem; }
.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem; }
.foot h2 { margin: 0 0 .35rem; color: var(--fg-2); font-size: .875rem; font-weight: 600; }
.foot p { margin: 0; }
.foot a { color: var(--fg-2); }
.translation { margin: 0 0 1.25rem !important; font-style: italic; }
.copy { margin-top: 1.5rem !important; }

@media (min-width: 48rem) {
  .legal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero { padding: 6rem 0 5rem; }
}
@media (max-width: 40rem) { :root { --gutter: 1rem; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
  .rise { animation: rise-in 380ms ease-out both; }
  .rise-1 { animation-delay: 70ms; } .rise-2 { animation-delay: 140ms; } .rise-3 { animation-delay: 210ms; }
}
@media print {
  :root { color-scheme: light; --bg: #fff; --fg: #000; --fg-2: #000; --muted: #333; --line: #999; --surface: #fff; }
  .skip, .langs, .actions { display: none; }
}
.err { text-align: left; }
.err section + section { margin-top: 1.75rem; }
.err h1, .err h2 { margin: 0 0 .35rem; font-size: 1.375rem; letter-spacing: -.02em; }