/* opsweave.de – Stil der Produktseite.
   Tokens nach opsweave/docs/gestaltung.md §3 (Hell und Dunkel gleichwertig, folgt dem System). Systemschrift, keine
   externen Quellen. Keine Inline-Styles in den Seiten: Die CSP erlaubt Styles nur aus dieser Datei.
   Kontraste (WCAG AA, geprüft mit axe): text 17:1, text-2 7,5:1 / 7,7:1, text-3 5,1:1 / 5,9:1, akzent-text 5,8:1 / 5,9:1,
   weiß auf akzent-knopf 5,0:1 / 5,1:1. */

:root {
  color-scheme: light dark;
  --grund: #f2f2f7;
  --flaeche: #ffffff;
  --flaeche-2: #f2f2f7;
  --linie: rgba(60, 60, 67, 0.2);
  --feldrand: #8e8e93;
  --text: #1c1c1e;
  --text-2: #545458;
  --text-3: #6e6e73;
  --akzent-text: #0062cc;
  --akzent-knopf: #0a6cdb;
  --fokus: #007aff;
  --breite: 68rem;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #111113;
    --flaeche: #1c1c1e;
    --flaeche-2: #2c2c2e;
    --linie: rgba(84, 84, 88, 0.65);
    --text: #ffffff;
    --text-2: #aeaeb2;
    --text-3: #98989d;
    --akzent-text: #3d9bff;
    --akzent-knopf: #0a6cd6;
    --fokus: #3d9bff;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.5rem, 7vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 650; }
p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: var(--akzent-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: var(--rand); top: -4rem; z-index: 10;
  padding: 0.5rem 0.875rem; background: var(--text); color: var(--grund); border-radius: 6px;
}
.skip:focus { top: 0.75rem; }

.rahmen { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

/* Kopf */
.kopf { border-bottom: 1px solid var(--linie); background: var(--grund); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-block: 1rem; }
.marke { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--text); text-decoration: none; font-weight: 650; font-size: 1.125rem; }
.marke svg { width: 1.75rem; height: 1.75rem; flex: none; }
.marke-grund { fill: var(--akzent-knopf); }
.marke-gitter { fill: none; stroke: #ffffff; stroke-opacity: 0.38; stroke-width: 2.5; }
.marke-weg { fill: none; stroke: #ffffff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.kopf nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.9375rem; }
.kopf nav a { color: var(--text-2); text-decoration: none; padding-block: 0.375rem; }
.kopf nav a:hover { color: var(--akzent-text); text-decoration: underline; }

/* Abschnitte: eine Ebene, weiße Gruppen auf grauem Grund, Haarlinien */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.hero .rahmen, .abschnitt .rahmen { display: grid; gap: 1.5rem; }
.vorspann { color: var(--text-2); font-size: 1.125rem; }
.abschnitt { padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--linie); }
.abschnitt p { max-width: 42rem; color: var(--text-2); }

@media (min-width: 56rem) {
  .abschnitt .rahmen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; column-gap: 3rem; }
  .abschnitt h2 { grid-column: 1 / -1; }
  #demo .rahmen > *, #bedienung .text { grid-column: 1 / -1; }
}

/* Knöpfe: ein Primärknopf je Ansicht, Zweitaktion als Linie */
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.knopf {
  display: inline-block; min-height: 2.75rem; padding: 0.625rem 1.25rem; border-radius: 10px;
  background: var(--akzent-knopf); color: #ffffff; text-decoration: none; font-weight: 600; line-height: 1.5;
}
.knopf:hover { text-decoration: underline; }
.knopf.zweit { background: transparent; color: var(--akzent-text); border: 1px solid var(--feldrand); }
.mail { font-size: 1.25rem; font-weight: 600; }

/* Abschnittstext */
.text { color: var(--text); font-size: 1rem; }
.text .etikett { color: var(--text-2); font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.5rem; }
.text ul { margin-top: 0.75rem; padding-left: 1.1rem; list-style: disc; display: grid; gap: 0.25rem; }
.bild { display: grid; gap: 0.5rem; min-width: 0; }
.bild img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.folgt {
  display: inline-block; padding: 0.05em 0.45em; border: 1px solid var(--feldrand); border-radius: 4px;
  background: var(--flaeche-2); color: var(--text-2); font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
}
.bild figcaption { color: var(--text-3); font-size: 0.8125rem; }
.hero .bild { margin-top: 0.5rem; }

/* Fuß */
.fuss { border-top: 1px solid var(--linie); padding-block: 1.5rem; color: var(--text-3); font-size: 0.9375rem; }
.fuss-innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
.fuss a { color: var(--text-2); }
.by { color: var(--text-3); }

/* Rechtstexte, 404 */
.text-seite { padding-block: clamp(2rem, 6vw, 4rem); max-width: 46rem; }
.text-seite h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 0.5rem; }
.text-seite h2 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: 0.5rem; }
.text-seite p { margin-top: 0.75rem; }
.text-seite address { font-style: normal; }
.stand { color: var(--text-3); font-size: 0.9375rem; }
.zurueck { margin-top: 2.5rem; }
.leer { min-height: 40vh; }

@media (prefers-contrast: more) {
  :root { --linie: var(--feldrand); }
}

@media print {
  .kopf nav, .skip { display: none; }
  body { background: #ffffff; color: #000000; }
}