/* AItention — die Farben und die Haltung stammen aus der App selbst: dunkler
   Grund, Indigo als Akzent, und die drei Statusfarben ausschließlich dort, wo
   sie auch etwas bedeuten. Kein Framework: die Seite ist ein Stapel Text. */

:root {
  --ground:      #0E1017;
  --surface:     #171A24;
  --sunk:        #12141C;
  --ink:         #E7E8F0;
  --muted:       #A0A4B8;
  --faint:       #6E7488;
  --rule:        #262A37;
  --accent:      #8E96F0;
  --accent-deep: #3E45B0;
  --wait:        #F0A94A;
  --go:          #5CC98C;
  --done:        #6FA8F5;
  --fail:        #F4756B;
  --measure:     42rem;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.62;
}

.wrap { width: min(64rem, 100% - 2.5rem); margin-inline: auto; }

h1, h2, h3 {
  font-family: ui-serif, "New York", Charter, Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(1.9rem, 4.2vw, 2.55rem); line-height: 1.12; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.6rem); line-height: 1.25; }
h3 { font-size: 1.02rem; font-weight: 650; }
p, li { text-wrap: pretty; }
p { margin: 0; max-width: var(--measure); }

a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}

code, .num {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}
code { background: var(--sunk); border-radius: 4px; padding: .12em .38em; }
pre {
  background: var(--sunk); border: 1px solid var(--rule); border-radius: 8px;
  padding: .9rem 1.1rem; overflow-x: auto; font-size: .88rem;
}
pre code { background: none; padding: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--accent-deep);
  color: #fff; padding: .6rem 1rem; z-index: 10;
}
.skip:focus { left: 0; }

/* ---- Kopf ---- */

.top { border-bottom: 1px solid var(--rule); background: rgba(14,16,23,.86);
       backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 5; }
@supports not (backdrop-filter: blur(10px)) { .top { background: var(--ground); } }

.bar { display: flex; align-items: center; gap: 1.4rem; padding: .85rem 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .55rem; color: var(--ink);
         text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.mark { width: 20px; height: 20px; fill: var(--wait); }
.mark .follow { fill: var(--ink); }
.bar nav { display: flex; gap: 1.1rem; margin-inline-start: auto; flex-wrap: wrap; }
.bar nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--ink); }
.lang { color: var(--faint); text-decoration: none; font-size: .85rem; }

/* ---- Abschnitte ---- */

section { padding: clamp(2.4rem, 5.5vw, 4rem) 0; }
section + section { border-top: 1px solid var(--rule); }
.stack { display: flex; flex-direction: column; gap: 1.2rem; }
.lede { color: var(--muted); font-size: 1.05rem; max-width: 40rem; }
.eyebrow {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}

.hero { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 60rem) { .hero { grid-template-columns: 1fr 1.05fr; } }

.cta { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.button {
  display: inline-block; background: var(--accent-deep); color: #fff;
  text-decoration: none; font-weight: 600; padding: .72rem 1.35rem; border-radius: 8px;
}
.button:hover { background: #4a52c8; }
.button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.button.ghost:hover { border-color: var(--faint); }
.note { color: var(--faint); font-size: .87rem; }

/* ---- Nachbau der Liste. Erfundene Sessionnamen: ein echtes Bildschirmfoto
       trüge Kundennamen nach draußen. ---- */

.panel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 11px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.panel-bar { display: flex; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--rule); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.readout { display: flex; gap: .55rem; padding: .7rem .9rem; border-bottom: 1px solid var(--rule);
           flex-wrap: wrap; }
.tile { display: flex; align-items: center; gap: .4rem; font-size: .74rem; letter-spacing: .08em;
        text-transform: uppercase; color: var(--faint); border: 1px solid var(--rule);
        border-radius: 7px; padding: .25rem .55rem; }
.tile b { font-size: .98rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tile .led { width: 7px; height: 7px; border-radius: 50%; }

.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 3px 1fr auto; gap: .75rem; align-items: center;
       padding: .5rem .9rem .5rem .5rem; }
.row + .row { border-top: 1px solid rgba(255,255,255,.04); }
.row .bar-l { width: 3px; height: 30px; border-radius: 2px; background: transparent; }
/* Die mittlere Spalte muss schrumpfen dürfen: ohne `min-width: 0` weigert sich
   ein Grid-Feld, unter seinen Inhalt zu gehen — der Text bricht dann um und läuft
   in die Zustandsspalte. */
.row > span:nth-child(2) { min-width: 0; }
.row .name { font-size: .9rem; font-weight: 500; display: flex; align-items: center;
             gap: .4rem; white-space: nowrap; overflow: hidden; }
.row .name > .pill { flex: 0 0 auto; }
.row .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .meta { font-size: .76rem; color: var(--muted); }
.row .state { text-align: right; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.row .age { display: block; font-size: .72rem; color: var(--faint);
            font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.pill { font-size: .62rem; font-weight: 600; padding: .05rem .3rem; border-radius: 99px; }

/* Wie in der App: Der Name bleibt neutral, Farbe tragen der Zustand rechts, die
   Leiste links und die eine Zeile, die sagt, was die Session will. */
.row .name { color: var(--ink); }
.row .meta { color: var(--muted); }
.is-wait  .state, .is-wait  .said { color: var(--wait); }
.is-wait  .bar-l { background: var(--wait); }
.is-go    .state { color: var(--go); }
.is-done  .state { color: var(--done); }  .is-done .bar-l { background: var(--done); }
.is-fail  .state, .is-fail  .said { color: var(--fail); }
.is-fail  .bar-l { background: var(--fail); }
.said { font-weight: 500; }
.led.wait { background: var(--wait); } .led.go { background: var(--go); }
.led.idle { background: var(--faint); }
.pill.auto { color: var(--wait); background: rgba(240,169,74,.16); }
.pill.edits { color: #b98af5; background: rgba(185,138,245,.16); }

/* ---- Karten, Tabellen, Listen ---- */

.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 9px;
        padding: 1.15rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.card h3 { margin: 0; }
.card p { color: var(--muted); font-size: .95rem; }

.price { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.plan { background: var(--surface); border: 1px solid var(--rule); border-radius: 11px;
        padding: 1.5rem; display: flex; flex-direction: column; gap: .9rem; }
.plan.lead { border-color: var(--accent-deep); }
.amount { font-size: 1.95rem; font-weight: 650; letter-spacing: -.02em;
          font-variant-numeric: tabular-nums; }
.amount small { font-size: .95rem; font-weight: 400; color: var(--muted); }
.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.ticks li { padding-left: 1.35rem; position: relative; font-size: .95rem; color: var(--muted); }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--go); }

.scroller { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 28rem; font-size: .95rem; }
th, td { text-align: left; padding: .6rem .9rem .6rem 0; border-bottom: 1px solid var(--rule);
         vertical-align: top; }
th { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
     font-weight: 400; }

.prose { display: flex; flex-direction: column; gap: 1rem; max-width: var(--measure); }
.prose ul { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.placeholder { border: 1px dashed var(--wait); border-radius: 8px; padding: 1rem 1.2rem;
               background: rgba(240,169,74,.06); color: var(--muted); font-size: .93rem; }

/* ---- Formular ---- */

form.signup { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 30rem; }
input[type=email] {
  flex: 1 1 15rem; background: var(--sunk); border: 1px solid var(--rule); border-radius: 8px;
  color: var(--ink); padding: .7rem .9rem; font: inherit; font-size: .95rem;
}
input[type=email]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.button { border: 0; font: inherit; cursor: pointer; }

/* ---- Fuß ---- */

.foot { border-top: 1px solid var(--rule); padding: 2.5rem 0 3.5rem; margin-top: 2rem; }
.footgrid { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: space-between;
            align-items: start; }
.footgrid nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.footgrid a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.footgrid a:hover { color: var(--ink); }

/* ---- Schmale Bildschirme ----
   Der Kopf ist auf einem Telefon dreizeilig geworden und hat ein Drittel der
   Höhe belegt. Er bleibt vollständig — eine ausklappbare Navigation für vier
   Verweise wäre mehr Mechanik als Nutzen —, wird aber kompakter, und die
   Klebrigkeit entfällt: oben festgenagelt kostet sie hier mehr, als sie bringt. */
@media (max-width: 40rem) {
  .top { position: static; }
  .bar { gap: .5rem .9rem; padding: .7rem 0; }
  .bar nav { margin-inline-start: 0; gap: .85rem; width: 100%; order: 3; }
  .bar nav a { font-size: .88rem; }
  .lang { margin-inline-start: auto; }
  body { font-size: 16px; }
  section { padding: 2.6rem 0; }
  .row { grid-template-columns: 3px 1fr auto; }
  .row .meta { font-size: .72rem; }
}

/* ---- Kaufabschnitt ---- */
.checkout {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  flex-wrap: wrap; background: var(--surface); border: 1px solid var(--accent-deep);
  border-radius: 11px; padding: 1.3rem 1.5rem; max-width: 34rem;
}
.checkout-price { display: flex; flex-direction: column; gap: .1rem; }
.checkout .amount { font-size: 2rem; }

/* Sprungziele müssen unter der klebenden Kopfzeile hervorkommen — sonst
   verschwindet die Überschrift, auf die man gerade gesprungen ist, dahinter. */
[id] { scroll-margin-top: 4.5rem; }
@media (max-width: 40rem) { [id] { scroll-margin-top: 1rem; } }

/* Fußzeile: Herkunftszeile. Die Zeichen sitzen auf der Schriftlinie statt auf
   der Grundlinie, sonst haengen sie unter dem Text. */
.icon-inline { vertical-align: -1px; }
.made-in { display: inline-flex; align-items: center; gap: .3em; margin-top: 4px; }

/* Kaufknopf vor dem Verkaufsstart: sichtbar, aber ohne Wirkung. */
.button.is-disabled { opacity: .45; pointer-events: none; cursor: default; }

/* ── Rundgang durch die Oberfläche ──────────────────────────────────────────
   Kein Bildschirmfoto, sondern derselbe Nachbau in HTML: übersetzbar, auf
   jedem Bildschirm scharf, ohne Kundennamen — und die Zustandsfarben sind
   dieselben wie im Programm, weil sie aus derselben Palette kommen.
   Die Erklärungen klappen über <details> auf; ein Skript wäre durch die CSP
   ohnehin gesperrt. */

.tour { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); align-items: start; }
@media (min-width: 62rem) { .tour { grid-template-columns: 1.35fr 1fr; } }

.tour-window {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  overflow: hidden; box-shadow: 0 18px 40px rgb(0 0 0 / .35);
}
.tour-window .win-title {
  margin-left: .5rem; font-size: .72rem; color: var(--faint); letter-spacing: .04em;
}
.tour-window .readout, .tour-window .usage, .tour-window .rows { position: relative; }

.tour-window .usage {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .8rem; border-bottom: 1px solid var(--rule);
  font-size: .68rem; color: var(--faint); letter-spacing: .06em;
}
.usage .gauge {
  width: 3.4rem; height: 3px; border-radius: 99px; background: var(--rule);
  display: inline-block; overflow: hidden;
}
.usage .gauge i { display: block; height: 100%; background: var(--go); }
.usage-val { color: var(--go); font-variant-numeric: tabular-nums; }

.tour-window .group {
  padding: .55rem .8rem .3rem; font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.tour-window .branch { color: var(--faint); }
.row.is-stale .bar-l { background: transparent; }
.row.is-stale .state { color: var(--faint); }

/* Die Nummern verweisen auf die Erklärungen daneben. Sie sitzen am rechten
   Rand des jeweiligen Elements, damit sie die Zeile nicht auseinanderziehen. */
/* Nicht `.mark` — der Name gehört bereits dem Markenzeichen im Seitenkopf. */
/* Merkmalszeichen in der Zeile — dieselben, die das Programm zeigt. */
.chip {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .68rem; font-variant-numeric: tabular-nums;
  padding: 0 .3rem; border-radius: 4px; margin-right: .25rem;
}
.chip.job    { color: var(--go);     background: color-mix(in srgb, var(--go) 14%, transparent); }
.chip.task   { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.chip.agents { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.chip.reply  { color: var(--faint);  padding: 0 .25rem; }

/* Marken, die mitten in einer Zeile sitzen, statt am Rand: Sie zeigen dann auf
   genau das Element, das die Erklärung meint. */
.hotspot.inline {
  position: static; transform: none; display: inline-block;
  vertical-align: baseline; margin: 0 .1rem 0 .3rem;
  width: 1.05rem; height: 1.05rem; line-height: 1.05rem; font-size: .62rem;
  box-shadow: none;
}

/* Innerhalb des Fensters, nicht daneben: `.tour-window` beschneidet seinen
   Inhalt wegen der runden Ecken, aussen sitzende Marken wurden halbiert. Die
   Zeilen bekommen dafür rechts Platz, damit die Nummer nicht auf der Uhrzeit
   liegt. */
.tour-window .readout,
.tour-window .usage,
.tour-window .row { padding-right: 2.2rem; }

.hotspot {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  width: 1.35rem; height: 1.35rem; border-radius: 99px;
  background: var(--accent-deep); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1.35rem; text-align: center;
  box-shadow: 0 0 0 3px var(--surface);
}
.row .hotspot { right: .45rem; }

.tour-notes { display: grid; gap: .5rem; }
.callout {
  border: 1px solid var(--rule); border-radius: 9px; background: var(--sunk);
}
.callout > summary {
  cursor: pointer; list-style: none; padding: .7rem .9rem;
  font-size: .95rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: .6rem;
}
.callout > summary::-webkit-details-marker { display: none; }
.callout > summary::after {
  content: "+"; margin-left: auto; color: var(--faint); font-weight: 400;
}
.callout[open] > summary::after { content: "–"; }
.callout[open] > summary { color: var(--accent); }
.callout .num {
  flex: none; width: 1.35rem; height: 1.35rem; border-radius: 99px;
  background: var(--accent-deep); color: #fff;
  font-size: .72rem; line-height: 1.35rem; text-align: center;
}
.callout p {
  margin: 0; padding: 0 .9rem .85rem 2.95rem;
  font-size: .9rem; color: var(--muted);
}
.callout > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Ladeknopf in der Kopfzeile: die eine Handlung, die auf jeder Seite erreichbar
   sein muss. */
.bar nav a.nav-cta {
  color: var(--ink); background: var(--accent-deep);
  padding: .32rem .8rem; border-radius: 7px; font-weight: 600;
}
.bar nav a.nav-cta:hover { background: var(--accent); color: var(--ground); }

/* Was nicht in den Rundgang passt, aber genannt gehört. Bewusst als schlichte
   Liste statt als weitere Kachelwand — die Merkmale tragen sich selbst. */
.extras { grid-column: 1 / -1; margin-top: .6rem; }
.extras h3 {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: .8rem;
}
.extras .ticks { display: grid; gap: .55rem; }
@media (min-width: 52rem) { .extras .ticks { grid-template-columns: 1fr 1fr; gap: .55rem 2rem; } }
.extras .ticks li { font-size: .9rem; }
.extras .ticks b { color: var(--ink); font-weight: 600; }

/* Zielplattform. Bewusst **ohne** Apple-Logo: Apple erlaubt Dritten dessen
   Verwendung nur in den offiziellen App-Store-Abzeichen, und wir liefern
   außerhalb des App Store aus. Ein eigenes Mac-Symbol sagt dasselbe, ohne
   fremde Marken zu benutzen. */
.platform {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 .6rem; padding: .34rem .7rem;
  border: 1px solid var(--rule); border-radius: 99px;
  background: var(--sunk); color: var(--muted);
  font-size: .82rem; font-weight: 500;
}
.platform svg { flex: none; color: var(--accent); }

/* Angaben zur veröffentlichten Fassung. Die Prüfsumme steht vollständig da —
   halbiert wäre sie nutzlos, und wer sie vergleicht, kopiert sie ohnehin. */
.release {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.2rem;
  margin: 1.2rem 0; font-size: .9rem;
}
.release dt { color: var(--faint); }
.release dd { margin: 0; color: var(--ink); }
.release dd.hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; word-break: break-all; color: var(--muted);
}