:root {
    --bg: #ffffff;
    --surface: #faf7f5;
    --surface-2: #f3ece8;
    --text: #17171a;
    --muted: #6c6c73;
    --line: #e8e1dd;
    --tomato: #de3b2e;
    --tomato-deep: #b32c21;
    --tomato-dark: #8d2118;
    --dial-face: #fefcfb;
    /* Zifferblatt wie in der App: die Fuge ist heller als die Lamelle, das
       macht die Teilung weich statt scharf (NSColor.dialGap / trackWork). */
    --dial-gap: #ffffff;
    --dial-track: #f4f0ee;
    --radius: 20px;
    --shadow: 0 22px 60px -18px rgba(60, 20, 14, .28);
    --shadow-alpha: 0 16px 36px rgba(60, 20, 14, .24);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #131316;
      --surface: #1c1c21;
      --surface-2: #23232a;
      --text: #f4f4f7;
      --muted: #9d9da6;
      --line: #2c2c33;
      --dial-face: #24242a;
      --dial-gap: #3a3a40;
      --dial-track: #2a2a2d;
      --shadow: 0 22px 60px -18px rgba(0, 0, 0, .6);
      --shadow-alpha: 0 16px 36px rgba(0, 0, 0, .55);
    }
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--bg); color: var(--text);
    font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
  .narrow { max-width: 680px; }
  a { color: var(--tomato); text-underline-offset: 2px; }
  h1, h2, h3 { letter-spacing: -.021em; font-weight: 600; margin: 0; }
  p { margin: 0 0 18px; }
  p:last-child { margin-bottom: 0; }
  strong { font-weight: 600; }

  /* ── Hero: rot ─────────────────────────────────────────── */
  .hero {
    background: linear-gradient(158deg, var(--tomato) 0%, var(--tomato-deep) 58%, var(--tomato-dark) 100%);
    color: #fff; padding: 20px 0 100px; position: relative; overflow: hidden;
  }
  .hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 78% 8%, rgba(255,255,255,.20), transparent 62%);
  }
  .hero-grid {
    display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center;
    position: relative; z-index: 1; margin-top: 52px;
  }

  /* ── Kopfzeile ─────────────────────────────────────────── */
  /* Wortmarke links, Sprachumschalter rechts. Der `z-index` ist nötig:
     `.hero::after` legt einen Verlauf über den ganzen Hero, und `.hero-grid`
     hebt sich mit `z-index: 1` darüber – ohne eigenen Wert läge die Kopfzeile
     darunter. */
  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    position: relative; z-index: 2;
  }
  .brand { display: inline-flex; align-items: center; gap: 10px; }
  /* Das Symbol trägt rundum 10 % durchsichtigen Rand, die sichtbare Fliese ist
     also kleiner als der Kasten – daher 34 px für rund 30 px Fliese. Kein
     Schatten: auf dem roten Grund wäre er nur Schmutz. */
  .brand img { display: block; }
  /* Kein Heading-Tag: `h1, h2, h3` tragen ein negatives Tracking von -.021em,
     und die `h1` bleibt der Anspruch, nicht der Name. */
  .brand span { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
  .badge {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24);
    padding: 6px 14px; border-radius: 980px; margin-bottom: 26px;
    backdrop-filter: blur(8px);
  }
  .hero h1 { font-size: 56px; line-height: 1.04; margin-bottom: 22px; }
  .hero .tagline { font-size: 21px; line-height: 1.5; color: rgba(255,255,255,.9); max-width: 34ch; }
  .hero-dial { display: block; margin: 0 auto; filter: drop-shadow(0 18px 44px rgba(80,16,10,.4)); }
  .lit { opacity: 0; animation: fill .45s ease-out forwards; }
  @keyframes fill { to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .lit { opacity: 1; animation: none; } }

  .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
  .btn {
    display: inline-block; background: #fff; color: var(--tomato-deep); text-decoration: none;
    font-weight: 600; font-size: 17px; padding: 15px 32px; border-radius: 980px;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 10px 26px -8px rgba(60,10,6,.45);
  }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -8px rgba(60,10,6,.5); }
  .btn-ghost {
    background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4);
    box-shadow: none; font-weight: 500;
  }
  .btn-ghost:hover { background: rgba(255,255,255,.1); transform: none; box-shadow: none; }
  .req { font-size: 14px; color: rgba(255,255,255,.78); margin: 18px 0 0; }

  /* ── Menüleisten-Streifen ──────────────────────────────── */
  .barstrip {
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 20px 0; overflow: hidden;
  }
  .bar { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; }
  .cap {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 5px 11px; border-radius: 980px; white-space: nowrap;
  }
  .cap-run { background: var(--tomato); color: #fff; }
  .cap-pause { border: 1px solid var(--tomato); color: var(--tomato); }
  .cap-break { background: #0f8c79; color: #fff; }
  .cap-idle { border: 1px solid var(--muted); color: var(--muted); }
  /* Das Symbol erbt die Textfarbe der Kapsel über `currentColor`; `flex: none`
     hält es bei seiner Attributgrösse. */
  .cap svg { flex: none; }
  .cap + .lbl { font-size: 13.5px; color: var(--muted); }
  .barpair { display: inline-flex; align-items: center; gap: 9px; }

  /* ── Abwechselnde Blöcke ───────────────────────────────── */
  .row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center;
    padding: 84px 0;
  }
  .row + .row { border-top: 1px solid var(--line); }
  .row.flip .art { order: 2; }
  .row h2 { font-size: 31px; line-height: 1.22; margin-bottom: 18px; }
  .kicker {
    font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--tomato); margin-bottom: 12px;
  }
  .art { display: flex; justify-content: center; }

  /* Zifferblatt-Reihe */
  .states { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
  .state { text-align: center; }
  .state span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 10px; }

  /* Icon. `drop-shadow` statt `box-shadow`, und kein `border-radius`: das PNG
     hat rundum 10 % durchsichtigen Rand, die Fliese sitzt also eingezogen im
     Element. Ein `box-shadow` folgt dem Elementkasten und lag damit als
     abgesetzter Rahmen um leere Fläche – derselbe Kasten-im-Kasten wie beim
     Screenshot. `drop-shadow` folgt der Alphaform, wie beim Hero-Zifferblatt. */
  .iconshot {
    width: 190px; height: 190px; flex: none;
    filter: drop-shadow(var(--shadow-alpha));
  }

  /* ── Textblöcke ────────────────────────────────────────── */
  .story { padding: 84px 0; border-top: 1px solid var(--line); background: var(--surface); }
  .story h2 { font-size: 31px; margin-bottom: 20px; }
  .lead { font-size: 21px; line-height: 1.5; color: var(--text); margin-bottom: 20px; }
  /* Bewusst leiser als der Absatz darüber: die Stelle wirkt nur, solange sie
     nicht verkauft. */
  .support { margin-top: 26px; font-size: 15.5px; color: var(--muted); }
  .note {
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 22px; font-size: 15.5px; color: var(--muted); margin-top: 22px;
  }
  ul { margin: 0 0 18px; padding-left: 22px; }
  /* Schrittliste der Einrichtung */
  ol.steps { margin: 0 0 18px; padding-left: 22px; }
  ol.steps li { margin-bottom: 11px; }
  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .92em; background: var(--surface-2);
    padding: 2px 6px; border-radius: 6px; white-space: nowrap;
  }

  li { margin-bottom: 11px; }
  .plain { list-style: none; padding: 0; }
  .plain li { padding-left: 26px; position: relative; }
  .plain li::before {
    content: ""; position: absolute; left: 0; top: .58em;
    width: 9px; height: 9px; border-radius: 50%; background: var(--tomato);
  }
  section.block { padding: 84px 0; border-top: 1px solid var(--line); }
  h3 { font-size: 19.5px; margin: 34px 0 8px; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
  .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
  /* Die Notiz unter dem Raster nimmt sonst die vollen 1080 px und wird mit
     ihren 15.5 px zu einer viel zu langen Zeile. */
  .features + .note { max-width: 680px; }
  .card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 22px 24px;
  }
  .card b { display: block; color: var(--tomato); margin-bottom: 6px; font-size: 15px; }
  .cards-after { margin-top: 24px; }
  pre {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 17px 20px; overflow-x: auto; margin: 0;
    font: 500 14.5px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  /* ── Abschluss ─────────────────────────────────────────── */
  .final {
    background: linear-gradient(158deg, var(--tomato) 0%, var(--tomato-deep) 100%);
    color: #fff; padding: 88px 0; text-align: center;
  }
  .final h2 { font-size: 36px; margin-bottom: 16px; }
  .final p { color: rgba(255,255,255,.88); max-width: 46ch; margin: 0 auto 30px; }
  .final pre {
    background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.2); color: #fff;
    max-width: 380px; margin: 26px auto 0; text-align: left;
  }
  footer { padding: 40px 0 60px; font-size: 14.5px; color: var(--muted); text-align: center; }
  footer a { color: var(--muted); }

  @media (max-width: 900px) {
    .hero-grid, .row { grid-template-columns: 1fr; gap: 44px; }
    .row.flip .art { order: 0; }
    .hero h1 { font-size: 42px; }
    .cards { grid-template-columns: 1fr; }
    .features { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .hero { padding: 16px 0 72px; }
    .hero-grid { margin-top: 40px; }
    .hero h1 { font-size: 35px; }
    .hero .tagline { font-size: 19px; }
    .row, .story, section.block { padding: 56px 0; }
    .row h2, .story h2 { font-size: 26px; }
    .features { grid-template-columns: 1fr; }
  }

  /* ── Sprachumschalter ──────────────────────────────────── */
  /* Keine Positionierung mehr: der Umschalter ist ein Flex-Kind der
     Kopfzeile. Vorher hing er absolut oben rechts und hatte links von sich
     nichts – der Platz, an dem jetzt die Wortmarke steht. */
  .langswitch {
    display: inline-flex; gap: 2px; padding: 3px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24);
    border-radius: 980px; backdrop-filter: blur(10px);
    font-size: 13px; font-weight: 600;
  }
  /* Ein Link für die andere Sprache, ein `span` für die aktuelle. Vorher stand
     hier `button`: aus der JavaScript-Fassung, die es nicht mehr gibt. Ohne
     Treffer blieb der Umschalter winzig und der Link trug die rote Linkfarbe –
     rot auf dem roten Hero. */
  .langswitch a,
  .langswitch span {
    padding: 5px 12px; border-radius: 980px; color: #fff; opacity: .74;
    text-decoration: none; font: inherit; letter-spacing: .02em;
  }
  .langswitch a:hover { opacity: 1; background: rgba(255,255,255,.14); }
  .langswitch a:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px; opacity: 1;
  }
  .langswitch [aria-current="true"] {
    background: rgba(255,255,255,.92); color: var(--tomato); opacity: 1;
  }

  /* Screenshot des Popovers. Kein Radius und kein Schatten: der Grund im PNG
     hat genau die Hintergrundfarbe der Seite, sein Rand ist also unsichtbar,
     und den Schatten bringt das Fenster selbst mit. Radius und Schatten im
     CSS ergaben einen Kasten im Kasten – der Radius rundete die Ecken des
     mitfotografierten Grundes, nicht die des Popovers. */
  .popshot {
    width: 100%; max-width: 434px; height: auto; display: block;
  }