@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/archivo-500.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/source-serif-4-400.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/source-serif-4-600.woff2") format("woff2"); }

/* Erzeugt aus packages/tokens – nicht von Hand ändern. */
:root {
  color-scheme: light dark;
  --color-bg: #F1F0EC;
  --color-surface: #F8F7F4;
  --color-surface-2: #E7E5DE;
  --color-ink: #22231F;
  --color-ink-2: #696A62;
  --color-ink-3: #8A8B82;
  --color-accent: #F2C233;
  --color-accent-ink: #22231F;
  --color-accent-line: #A8851F;
  --color-control: #22231F;
  --color-control-ink: #F8F7F4;
  --color-schatten: #000000;
  --color-licht: #FFFFFF;
  --color-panel: #22231F;
  --color-panel-ink: #F1F0EC;
  --color-panel-ink-2: #A9AAA0;
  --color-panel-kammer: #161714;
  --color-line: #DDDBD4;
  --color-state-ok: #3F7A55;
  --color-state-soon: #C08128;
  --color-state-alert: #B4442E;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1A1B18;
    --color-surface: #232420;
    --color-surface-2: #2E2F29;
    --color-ink: #F1F0EC;
    --color-ink-2: #A9AAA0;
    --color-ink-3: #8A8B82;
    --color-accent: #FFD23F;
    --color-accent-ink: #1A1B18;
    --color-accent-line: #FFD23F;
    --color-control: #A9AAA0;
    --color-control-ink: #232420;
    --color-panel: #33342D;
    --color-panel-ink: #F1F0EC;
    --color-panel-ink-2: #A9AAA0;
    --color-panel-kammer: #141511;
    --color-schatten: #000000;
    --color-licht: #FFFFFF;
    --color-line: #3A3B34;
    --color-state-ok: #7FB58F;
    --color-state-soon: #E0A94F;
    --color-state-alert: #E08A75;
  }
}

/*
 * casami.living (Plan Modul 7, D8): ruhig, ohne Marketing. Farben nur als Variablen aus den
 * Tokens (bau.ts schreibt sie davor, hell und dunkel), Schriften als Dateien von dieser Seite:
 * Archivo für Wortmarke und Überschriften, Source Serif 4 für den Text, wie Design System
 * Kapitel 12. Keine fremde Quelle zur Laufzeit.
 */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font: 400 16px/1.6 "Source Serif 4", Georgia, serif;
}

.marke, main, .fuss {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.marke { padding-top: 2rem; }

.wortmarke {
  font: 600 1.5rem/1 "Archivo", system-ui, sans-serif;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  text-decoration: none;
}

main { padding-top: 3rem; padding-bottom: 3rem; }

h1, h2 {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h1 { font-size: 2.125rem; margin: 0 0 1rem; }
h2 { font-size: 1.1875rem; margin: 2.5rem 0 0.5rem; }

.einleitung { font-size: 1.1875rem; }

.leise, .stand { color: var(--color-ink-2); }

.zeile { margin: 0; }

.code {
  font: 600 2.5rem/1.1 "Archivo", system-ui, sans-serif;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  margin: 1.5rem 0;
}

/* Die eine Handlung der Seite. Gelb, wie die Hauptaktion in der App (Knopf „accent“). */
.knopf {
  display: inline-block;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font: 600 1rem/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: none;
}

.knopf:hover, .knopf:focus-visible { background: var(--color-accent-line); }

.stores { list-style: none; padding: 0; display: flex; gap: 1.5rem; }

a { color: var(--color-ink); }

a:focus-visible { outline: 2px solid var(--color-accent-line); outline-offset: 2px; }

.fuss {
  border-top: 1px solid var(--color-line);
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  font: 400 0.875rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--color-ink-2);
}

.fuss nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.fuss a { color: var(--color-ink-2); }

.domain { font-family: ui-monospace, Menlo, monospace; margin-top: 1rem; }

[hidden] { display: none !important; }