/* ============================================================================
   Uncle Savvy — Vorschau „nach dem Hero"

   Vorschlag, kein Ersatz: diese Datei trägt nur die neuen Bausteine der
   Vorschauseite. Grundlage bleiben tokens.css (Farben, Maße), app.css (Raster,
   Leiste, Knöpfe, Akkordeon, Panels, FAQ, Fuß) und mock.css (die gebauten
   Oberflächen). Alles Neue trägt das Präfix v-, damit nichts kollidiert.

   Der Gedanke hinter allem: nach dem Hero soll die Seite weiter *vorführen*,
   nicht erklären. Jede Sektion stellt einer Behauptung eine arbeitende
   Fläche gegenüber — ein Protokoll, einen Stapel, einen Ablauf, einen Tisch,
   der sich umsortiert. Text steht nie mehr allein auf halber Breite.
   ========================================================================== */

:root {
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
  /* Die drei Zustände eines Vorgangs. Auf der ganzen Seite dieselben Farben,
     damit „wartet auf dich" überall gleich aussieht. Der Ton (-ton) ist die
     Fassung für Schrift und wechselt mit dem Theme. */
  --ok:    #2FA36B;  --ok-ton:    #1E7A4E;
  --warte: #E0A02A;  --warte-ton: #9A6B10;
  --stopp: #D2543F;  --stopp-ton: #A63A28;
}
[data-theme="dark"]  { --ok-ton: #4CC48A; --warte-ton: #E8B24A; --stopp-ton: #EC7A64; }
[data-theme="light"] { --ok-ton: #1E7A4E; --warte-ton: #9A6B10; --stopp-ton: #A63A28; }

/* ---- Typografische Skala der Vorschau ------------------------------------
   Die Abschnittszeile darf wieder groß sein. Die 32 Pixel der jetzigen Seite
   sind Mercurys Maß *neben* einer Medienfläche; steht die Zeile allein über
   dem Inhalt, wirkt sie in dieser Größe zaghaft. */
.v-h {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 1.35rem + 2vw, 3rem);
  line-height: 1.06; letter-spacing: -.018em; text-wrap: balance;
}
.v-h--xl { font-size: clamp(2.75rem, 1.8rem + 4.2vw, 5.75rem); line-height: 1; letter-spacing: -.028em; }
.v-head { display: grid; gap: 14px; align-content: start; }
.v-head .lede { margin-top: 8px; }
.v-head .lede b { color: var(--text-default); font-weight: 500; }
.v-mono {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-subdued);
}
.v-sect { padding-top: clamp(72px, 8vw, 120px); }
.v-sect--last { padding-bottom: clamp(72px, 8vw, 120px); }

/* Zwei Spalten, 5 zu 7. Die schmale trägt die Zeile, die breite die Fläche.
   --flip dreht es um, damit sich Sektionen abwechseln und nie zwei
   hintereinander gleich aussehen. */
.v-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.v-split--flip { grid-template-columns: 7fr 5fr; }
.v-split--top { align-items: start; }
.v-split--flip > .v-head { order: 2; }
@media (max-width: 900px) {
  .v-split, .v-split--flip { grid-template-columns: 1fr; gap: var(--gap-xl); }
  .v-split--flip > .v-head { order: 0; }
}

/* ═══════════════════════════════════════════ LEINWAND (Editorgrund) ════
   Derselbe Grund wie der Zerfall im Hero: dunkel, Punktraster, unscharfer
   Abendraum in der Mitte. Eigene, lokale Palette wie in dash.css — die
   Fläche folgt dem Theme nicht, sie *ist* ein Bildschirm. */
.v-canvas {
  --leinwand: #14181A; --raster: #343A3D; --linie: #667277; --auf-dunkel: #9AA8AD;
  --papier: #FFFFFF; --ink: #16202B; --rule: #E4EAEC; --ki: #35C4D2;
  position: relative; overflow: hidden;
  border-radius: var(--radius-3xl);
  background: var(--leinwand);
  border: 1px solid rgb(236 240 241 / .12);
  color: var(--ink);
}
.v-canvas__grund {
  position: absolute; inset: -8%;
  background: url("assets/ambient.webp") center / cover;
  opacity: .30;
  animation: vDrift 52s ease-in-out infinite alternate;
}
.v-canvas__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 98% at 50% 56%,
              rgb(20 24 26 / .34) 0%, rgb(20 24 26 / .72) 44%, var(--leinwand) 80%);
}
.v-canvas__raster {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--raster) 1.1px, transparent 1.2px);
  background-size: 22px 22px;
}
@keyframes vDrift {
  from { transform: translate3d(-1.6%, .8%, 0) scale(1.04); }
  to   { transform: translate3d( 1.6%, -.8%, 0) scale(1.10); }
}
.v-canvas svg.v-kanten { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v-kante { fill: none; stroke: var(--linie); stroke-width: 1.3; stroke-linecap: round; }
.v-kante--warte { stroke: var(--warte); stroke-dasharray: 4 5; opacity: .85; }
.v-bahn { fill: none; stroke: none; }

/* Der Knoten: dieselbe weiße Karte wie im Hero, damit man sie als dasselbe
   Ding liest. Lage in Prozent der Leinwand, Mitte als Bezugspunkt. */
.v-node {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  min-width: 112px; height: 44px; padding: 0 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--papier); border: 1px solid var(--rule); border-radius: 9px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  white-space: nowrap; z-index: 2;
}
.v-node i { width: 9px; height: 9px; border-radius: 3px; background: var(--ok); flex: none; display: block; }
.v-node[data-wait] i { background: var(--warte); }
.v-node[data-ki] { box-shadow: 0 0 0 1.5px var(--ki), 0 0 24px -4px rgb(53 196 210 / .55); }
.v-node[data-ki] i { background: var(--ki); border-radius: 50%; }
.v-node em {
  position: absolute; top: calc(100% + 6px); left: -48px; right: -48px;
  font: 400 11px/1.25 var(--font-sans); font-style: normal; text-align: center;
  color: var(--auf-dunkel); white-space: nowrap;
}
/* Kleines Etikett oben rechts am Knoten: KI oder du */
.v-node b {
  position: absolute; top: -9px; right: -6px;
  font: 500 9.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 999px;
  background: var(--ki); color: var(--leinwand);
}
.v-node[data-wait] b { background: var(--warte); }

/* Der wandernde Vorgang: ein Punkt mit Lichthof, der die Kette entlangläuft */
.v-token circle:first-child { fill: url(#v-halo); }
.v-token circle:last-child  { fill: var(--ki); filter: drop-shadow(0 0 5px rgb(53 196 210 / .9)); }

/* ═══════════════════════════════════════════ 0 · HERO-AUSKLANG ════════ */
.v-stage { padding: 12px var(--grid-margins) 0; }
/* Unter 960 Pixeln Breite überlagern sich die Knoten. Dann darf die Leinwand
   seitlich rollen, wie die Kette weiter unten; auf dem Telefon ist sie
   ohnehin nur ein Standbild zum Anschluss. */
.v-stage__scroll { overflow-x: auto; border-radius: var(--radius-3xl); }
.v-canvas--stage { height: clamp(420px, 66vh, 640px); min-width: 960px; }
.v-tag {
  position: absolute; z-index: 5; top: 16px; left: 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--auf-dunkel); background: rgb(20 24 26 / .72); border: 1px solid rgb(236 240 241 / .14);
  padding: 6px 10px; border-radius: 999px;
}
.v-tag b { color: var(--ki); font-weight: 500; }

/* ═══════════════════════════════════════════ 1 · BILANZ + PROTOKOLL ═══
   Der Anschluss an den Hero. Nichts Neues wird behauptet: die drei Zahlen
   sind die aus dem Dashboard, nur jetzt typografisch, und das Protokoll
   darunter sind die Zeilen aus der Liste. Die Seite löst ein, was der
   Bildschirm eben gezeigt hat. */
.v-bilanz { padding-top: clamp(56px, 6vw, 96px); }
.v-bilanz__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); align-items: start; }
.v-bilanz__row li + li { border-left: 1px solid var(--border-subdued); padding-left: var(--gap-md); }
.v-zahl {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(4rem, 2.6rem + 6.4vw, 8.5rem);
  line-height: .95; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.v-bilanz__k { margin-top: 12px; font-size: var(--text-md); color: var(--text-subdued); max-width: 22ch; line-height: var(--leading-135); }
.v-bilanz__k b { display: block; color: var(--text-default); font-weight: 500; }
.v-bilanz__row li[data-wait] .v-zahl { color: var(--warte-ton); }
.v-bilanz__satz { margin-top: var(--gap-xl); max-width: 62ch; }
@media (max-width: 720px) {
  .v-bilanz__row { grid-template-columns: 1fr; gap: 20px; }
  .v-bilanz__row li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-subdued); padding-top: 20px; }
}

.v-ticker {
  margin-top: clamp(40px, 5vw, 72px);
  border-block: 1px solid var(--border-subdued);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.v-ticker__track { display: flex; width: max-content; animation: vTicker 80s linear infinite; }
.v-ticker:hover .v-ticker__track { animation-play-state: paused; }
.v-ticker__item {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-right: 1px solid var(--border-subdued);
  font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; color: var(--text-subdued);
}
.v-ticker__item b { color: var(--text-default); font-weight: 500; }
.v-ticker__item i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; display: block; }
.v-ticker__item[data-wait] i { background: var(--warte); }
.v-ticker__item[data-wait] { color: var(--warte-ton); }
@keyframes vTicker { to { transform: translateX(-50%); } }

/* ═══════════════════════════════════════════ 2 · DER STAPEL ═══════════
   Der Schmerz, sichtbar gemacht: sieben Blätter, die nacheinander auf den
   Tisch fallen. Reine CSS-Bewegung, einmalig beim Einblenden. */
.v-pile { position: relative; height: clamp(400px, 46vw, 500px); --sx: 1; }
.v-sheet {
  position: absolute; left: 50%; top: 50%;
  width: min(360px, 90%);
  padding: 15px 18px 16px;
  border-radius: 12px;
  background: var(--surface-elevated); border: 1px solid var(--border-subdued);
  box-shadow: var(--shadow-2), var(--edge);
  /* --sx staucht den seitlichen Versatz auf schmalen Fenstern, sonst ragen
     die äußeren Blätter über den Rand. */
  transform: translate(-50%, -50%) translate(calc(var(--dx, 0px) * var(--sx)), var(--dy, 0px)) rotate(var(--r, 0deg));
  display: grid; gap: 5px;
}
@media (max-width: 640px) { .v-pile { --sx: .3; height: 560px; } }
.v-sheet__k {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-subdued);
}
.v-sheet__k b { color: var(--warte-ton); font-weight: 500; letter-spacing: .02em; text-transform: none; }
.v-sheet__k b[data-stopp] { color: var(--stopp-ton); }
.v-sheet__t { font-size: var(--text-base); font-weight: 500; line-height: 1.3; }
.v-sheet__s { font-size: var(--text-sm); color: var(--text-subdued); }
.reveal[data-in] .v-sheet {
  animation: vDrop 720ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 150ms + 250ms);
}
@keyframes vDrop {
  from { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx, 0px) * var(--sx)), calc(var(--dy, 0px) - 70px)) rotate(calc(var(--r, 0deg) - 7deg)); }
}
.v-pile__cap {
  position: absolute; left: 0; right: 0; bottom: -8px; text-align: center;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--text-subdued);
}

/* ═══════════════════════════════════════════ 3 · FÜNF ABLÄUFE ═════════
   Das Akkordeon bleibt, es ist das Beste an der jetzigen Seite. Drei Dinge
   kommen dazu: ein Takt, der die Kacheln von allein weiterschaltet (mit
   Laufbalken, damit man sieht, dass die Seite lebt), ein Mauszeiger in der
   Fläche (das Ersatzstück für die Bildschirmaufnahme, bis es echte gibt),
   und unter jedem Ablauf die Programme, die er berührt. */
.acc__item { position: relative; }
.v-prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); }
.acc__item[data-open] .v-prog { animation: vProg var(--v-takt, 7000ms) linear forwards; }
.acc[data-manuell] .v-prog { animation: none; width: 0; }
@keyframes vProg { to { width: 100%; } }
.v-systeme { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 20px 20px; }
.v-systeme span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--border-subdued); color: var(--text-subdued);
}
.v-systeme .v-mono { padding: 4px 0; border: 0; letter-spacing: .08em; }

/* Der Zeiger. Bewegt sich vom unteren Rand zur Zielstelle (--x1/--y1), drückt
   kurz, und die Folge des Klicks blendet ein. Läuft je Panel einmal. */
/* Siehe --m-ok in mock.css: auf 4,5:1 gebracht, hier gegen das rosa
   Zeilenfeld #FBEDEA gemessen (5,0:1 statt 4,4:1). */
.mock { --m-stopp: #B53D28; }
/* Zeiger und Ring liegen im Zielobjekt selbst (Karte oder Zeile), deshalb
   muss das den Bezug stellen. */
.mock__draft, .mock__row[data-wait] { position: relative; }
.v-cursor {
  position: absolute; z-index: 5; width: 18px; height: 22px;
  left: var(--x0, 84%); top: var(--y0, 96%);
  opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35));
}
.panel[data-active] .v-cursor { animation: vCursor 3200ms cubic-bezier(.4, 0, .2, 1) 700ms forwards; }
@keyframes vCursor {
  0%   { opacity: 0; left: var(--x0, 84%); top: var(--y0, 96%); }
  14%  { opacity: 1; }
  68%  { left: var(--x1); top: var(--y1); transform: none; }
  76%  { transform: scale(.82); }
  84%  { transform: none; }
  100% { opacity: 1; left: var(--x1); top: var(--y1); }
}
.v-klick {
  position: absolute; z-index: 4; width: 28px; height: 28px; border-radius: 50%;
  left: calc(var(--x1) - 7px); top: calc(var(--y1) - 7px);
  border: 2px solid var(--m-du); opacity: 0; pointer-events: none;
}
.panel[data-active] .v-klick { animation: vKlick 600ms ease-out 3050ms both; }
@keyframes vKlick { 0% { opacity: .9; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.5); } }
.v-folge { opacity: 0; }
.panel[data-active] .v-folge { animation: mockIn 320ms var(--ease-out) 3300ms forwards; }
.mock__note {
  padding: 8px 10px; border-radius: 7px; margin-top: 2px;
  background: var(--m-wartefeld); border: 1px solid #F0E2BF;
  font-size: 11px; line-height: 1.4; color: var(--m-ink);
}
.mock__note b { font-weight: 600; }
/* Knopf, der nach dem Klick seinen Zustand wechselt */
.v-btn2 { display: inline-grid; align-items: center; }
.v-btn2 > span { grid-area: 1 / 1; }
.v-btn2 > span:last-child { opacity: 0; }
.panel[data-active] .v-btn2 { animation: vBtnBg 300ms var(--ease-out) 3300ms forwards; }
.panel[data-active] .v-btn2 > span:first-child { animation: vOut 200ms 3300ms forwards; }
.panel[data-active] .v-btn2 > span:last-child  { animation: vIn 300ms 3350ms forwards; }
@keyframes vBtnBg { to { background: var(--m-ok); } }
@keyframes vOut { to { opacity: 0; } }
@keyframes vIn  { to { opacity: 1; } }
.mock__state[data-stopp] { color: var(--m-stopp); }

/* ═══════════════════════════════════════════ 4 · DIE KETTE ════════════
   Die acht Kästchen im Vierer-Raster werden ein Ablauf im Editor: dieselbe
   Leinwand wie am Ende des Heros, ein Punkt läuft die Kette entlang. Der
   Umschalter daneben zeigt den echten Ablauf — das ist die ehrlichste
   Fläche auf der ganzen Seite. */
.v-kette__scroll { overflow-x: auto; margin-top: var(--gap-xl); padding-bottom: 6px; }
.v-canvas--kette { min-width: 1180px; aspect-ratio: 11 / 4.2; }
.v-kette__schema { position: absolute; inset: 0; transition: opacity 500ms var(--ease-out); }
/* In der Kette stehen die Knoten enger als im Standbild: die Unterzeile darf
   umbrechen, statt in die Nachbarin zu laufen. */
.v-canvas--kette .v-node em { white-space: normal; left: -22px; right: -22px; }
.v-kette__echt { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease-out); }

/* Der ganze Ablauf: kleine Kästen mit Sinnbild, Beschriftung darunter.
   Der Kasten selbst ist das Element, das die Kanten anbinden; Name und
   Zusatz hängen außerhalb, damit die Maße für die Kanten stimmen. */
.v-dicht { pointer-events: none; }
.v-dn {
  position: absolute; left: var(--x); top: var(--y);
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 11px;
  background: var(--papier); border: 1px solid var(--rule);
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 8px 18px -10px rgb(0 0 0 / .8);
  z-index: 2; opacity: 0;
}
.v-dn > svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Der Ausgang rechts, wie im Editor */
.v-dn::after {
  content: ""; position: absolute; right: -4px; top: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: var(--linie); border: 1px solid var(--leinwand);
  transform: translateY(-50%);
}
.v-dn b, .v-dn em { position: absolute; left: -64px; right: -64px; text-align: center; font-style: normal; white-space: nowrap; }
.v-dn b  { top: calc(100% + 7px);  font: 500 9.5px/1.2 var(--font-mono); color: rgb(236 240 241 / .9); }
.v-dn em { top: calc(100% + 21px); font: 400 8.5px/1.2 var(--font-sans); color: var(--auf-dunkel); }
.v-dn[data-typ="trigger"] { background: var(--ki); border-color: transparent; }
.v-dn[data-typ="trigger"] > svg { stroke: var(--leinwand); }
.v-dn[data-typ="if"] > svg, .v-dn[data-typ="switch"] > svg { stroke: var(--ok); }
.v-dn[data-typ="ki"] { box-shadow: 0 0 0 1.5px var(--ki), 0 0 18px -4px rgb(53 196 210 / .6); }
.v-dn[data-typ="ki"] > svg { stroke: var(--ki); }
.v-dn[data-typ="human"] { border-color: var(--warte); }
.v-dn[data-typ="human"] > svg { stroke: var(--warte); }
.v-dn[data-typ="skip"] > svg { stroke: var(--auf-dunkel); }
/* Das Häkchen des Laufs */
.v-dn > i {
  position: absolute; right: -6px; top: -6px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--leinwand);
  opacity: 0; transform: scale(.4);
  transition: opacity 180ms var(--ease-out), transform 320ms var(--ease-out);
}
.v-dn > i::after {
  content: ""; position: absolute; left: 3px; top: 0; width: 3px; height: 6px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.v-dn[data-run] > i { opacity: 1; transform: none; }
.v-dn[data-run] { box-shadow: 0 0 0 1.5px var(--ok), 0 0 16px -2px rgb(47 163 107 / .55); }
.v-dn[data-typ="human"][data-run] { box-shadow: 0 0 0 1.5px var(--warte), 0 0 16px -2px rgb(224 160 42 / .55); }
.v-dn[data-typ="human"][data-run] > i { background: var(--warte); }
/* Aufbau: Spalte für Spalte, Kanten ziehen nach */
.v-dicht[data-bau] .v-dn { animation: vDnIn 460ms var(--ease-out) both; animation-delay: calc(var(--d, 0) * 110ms + 150ms); }
@keyframes vDnIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%); } }
.v-dicht .v-kante { transition: stroke-dashoffset 560ms var(--ease-out), stroke 260ms var(--ease-out); }
.v-dicht .v-kante[data-live] { stroke: var(--ki); }
.v-kette[data-echt] .v-kette__echt { opacity: 1; }
.v-kette[data-echt] .v-kette__schema { opacity: 0; pointer-events: none; }
.v-kette__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap;
  margin-top: 18px;
}
.v-kette__cap { font-size: var(--text-sm); color: var(--text-subdued); max-width: 60ch; }
.v-kette__cap b { color: var(--text-default); font-weight: 500; }
.v-kette [data-nur="echt"], .v-kette[data-echt] [data-nur="schema"] { display: none; }
.v-kette[data-echt] [data-nur="echt"] { display: inline; }

/* Umschalter, zweifach benutzt: Schema/echt und die drei Betriebe */
.v-seg {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--surface-frosted); box-shadow: inset 0 0 0 1px var(--border-frosted);
}
.v-seg button {
  font: inherit; font-size: var(--text-sm); font-weight: 500;
  border: 0; background: transparent; color: var(--text-subdued);
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.v-seg button:hover { color: var(--text-default); }
.v-seg button[aria-pressed="true"] { background: var(--surface-elevated); color: var(--text-default); box-shadow: var(--shadow-1); }
.v-seg i { width: 8px; height: 8px; border-radius: 50%; flex: none; display: block; }
.v-seg i[data-g] { background: var(--ok); } .v-seg i[data-a] { background: var(--warte); } .v-seg i[data-r] { background: var(--stopp); }

.v-merk { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); margin-top: var(--gap-2xl); }
.v-merk > div { border-top: 1px solid var(--border-default); padding-top: 16px; }
.v-merk h3 { font-size: var(--text-md); font-weight: 500; }
.v-merk p { margin-top: 8px; font-size: var(--text-sm); line-height: var(--leading-140); color: var(--text-subdued); }
@media (max-width: 900px) { .v-merk { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════ 5 · DREI STUFEN ══════════
   Nicht drei Karten mit Text, sondern ein Regelwerk, an dem man dreht, und
   ein Tisch, der sich daraufhin umsortiert. Wer das einmal bewegt hat,
   braucht den Absatz darüber nicht mehr. */
.v-regelwerk { margin-top: var(--gap-lg); border-top: 1px solid var(--border-subdued); }
.v-regel { display: grid; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--border-subdued); }
.v-regel__k { font-size: var(--text-sm); font-weight: 500; }
.v-regel__s { font-size: var(--text-xs); color: var(--text-subdued); line-height: 1.4; }
.v-regel__fest { padding: 14px 0 0; font-size: var(--text-sm); color: var(--text-subdued); line-height: var(--leading-140); }
.v-regel__fest b { color: var(--text-default); font-weight: 500; }

.v-tisch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v-lane {
  border-radius: 16px; padding: 12px;
  background: var(--background-secondary); border: 1px solid var(--border-subdued);
  min-height: 420px; display: flex; flex-direction: column; gap: 8px;
}
.v-lane__k {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-subdued); padding: 2px 2px 10px; border-bottom: 1px solid var(--border-default);
}
.v-lane__k i { width: 8px; height: 8px; border-radius: 50%; flex: none; display: block; }
.v-lane[data-lane="gruen"] .v-lane__k i { background: var(--ok); }
.v-lane[data-lane="gelb"]  .v-lane__k i { background: var(--warte); }
.v-lane[data-lane="rot"]   .v-lane__k i { background: var(--stopp); }
.v-lane__k b { margin-left: auto; font-size: 13px; color: var(--text-default); font-variant-numeric: tabular-nums; }
.v-lane__list { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.v-lane__leer { font-size: var(--text-xs); color: var(--text-subdued); padding: 10px 4px; display: none; }
.v-lane__list:empty + .v-lane__leer { display: block; }
.v-fall {
  padding: 10px 12px; border-radius: 10px;
  background: var(--surface-elevated); border: 1px solid var(--border-subdued);
  box-shadow: var(--shadow-1), var(--edge);
  font-size: var(--text-sm); display: grid; gap: 3px;
  transition: transform 460ms var(--ease-in-out-cubic), border-color 300ms var(--ease-out);
  will-change: transform;
}
.v-fall__k {
  display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-subdued);
}
.v-fall__k em { font-style: normal; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-fall__t { font-weight: 500; line-height: 1.3; }
.v-fall__s { font-size: var(--text-xs); color: var(--text-subdued); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.v-fall__s span { padding: 1px 7px; border-radius: 999px; background: var(--surface-frosted); }
.v-fall[data-stufe="gelb"] { border-color: color-mix(in srgb, var(--warte) 55%, transparent); }
.v-fall[data-stufe="rot"]  { border-color: color-mix(in srgb, var(--stopp) 55%, transparent); }
.v-stufen__satz { margin-top: var(--gap-lg); max-width: 60ch; }
@media (max-width: 900px) {
  .v-tisch { grid-template-columns: 1fr; }
  .v-lane { min-height: 0; }
}

/* ═══════════════════════════════════════════ 6 · RECHNEN ══════════════
   Gebändert: der zweite Grundton über die volle Breite, damit die helle
   Strecke einen Takt bekommt (Entscheidung 3 in entscheidungen.html). */
.v-band {
  background: var(--background-secondary);
  border-block: 1px solid var(--border-subdued);
  padding-block: clamp(64px, 7vw, 104px);
  margin-top: clamp(72px, 8vw, 120px);
}
.v-schritte { margin-top: var(--gap-xl); }
.v-schritt { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px 0; }
.v-schritt::before {
  content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 1px;
  background: var(--border-default);
}
.v-schritt:first-child::before { top: 26px; }
.v-schritt:last-child::before  { bottom: calc(100% - 26px); }
.v-schritt i {
  width: 13px; height: 13px; border-radius: 50%; margin: 7px 0 0 7px; z-index: 1;
  border: 2px solid var(--accent); background: var(--background-secondary);
}
.v-schritt:last-child i { background: var(--accent); }
.v-schritt b { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-accent); }
.v-schritt h3 { margin-top: 4px; font-size: var(--text-md); font-weight: 500; }
.v-schritt p { margin-top: 5px; font-size: var(--text-sm); line-height: var(--leading-140); color: var(--text-subdued); max-width: 44ch; }

.v-calc {
  background: var(--surface-elevated); border: 1px solid var(--border-subdued);
  border-radius: var(--radius-3xl); box-shadow: var(--shadow-1), var(--edge);
  padding: clamp(22px, 3vw, 36px);
}
.v-calc h3 { font-size: var(--text-md); font-weight: 500; }
.v-calc__io { margin-top: var(--gap-md); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }
.v-calc label { display: block; font-size: var(--text-sm); color: var(--text-subdued); line-height: var(--leading-140); }
.v-calc input[type="range"] { display: block; width: 100%; margin-top: 12px; accent-color: var(--accent); }
.v-calc__val { display: block; margin-top: 6px; font-size: var(--text-sm); color: var(--text-default); }
.v-calc__val b { font-variant-numeric: tabular-nums; }
.v-calc__eur { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--text-default); }
.v-calc input[type="number"] {
  width: 104px; padding: 9px 12px; font: inherit; font-size: var(--text-sm);
  color: var(--text-default); background: var(--background-default);
  border: 1px solid var(--border-subdued); border-radius: 10px;
}
.v-calc__out { margin-top: var(--gap-lg); padding-top: var(--gap-md); border-top: 1px solid var(--border-subdued); }
.v-calc__zahl {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 4rem); line-height: 1; letter-spacing: -.03em;
}
.v-calc__zahl small { font-size: .42em; font-weight: 500; letter-spacing: -.01em; color: var(--text-subdued); margin-left: 6px; }
.v-calc__sub { margin-top: 10px; font-size: var(--text-base); color: var(--text-subdued); }
.v-calc__sub b { color: var(--text-default); font-weight: 500; font-variant-numeric: tabular-nums; }
/* 230 Arbeitstage als Kästchen, 23 je Zeile — ein halbes Jahr pro zwei
   Zeilen. Gefüllt ist, was fürs Abtippen draufgeht. */
.v-waffel { display: grid; grid-template-columns: repeat(23, 1fr); gap: 3px; margin-top: 18px; }
.v-waffel i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--border-subdued); transition: background-color 200ms var(--ease-out); }
.v-waffel i[data-on] { background: var(--accent); }
.v-waffel__k { margin-top: 8px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--text-subdued); text-transform: uppercase; }
.v-calc__note { margin: var(--gap-md) 0 var(--gap-sm); font-size: var(--text-sm); color: var(--text-subdued); }
@media (max-width: 720px) { .v-calc__io { grid-template-columns: 1fr; } }

/* Das Angebot als Blatt: der Festpreis, den man sehen kann */
.v-doc {
  margin-top: var(--gap-xl); max-width: 440px;
  background: var(--surface-elevated); border: 1px solid var(--border-subdued);
  border-radius: 14px; box-shadow: var(--shadow-1), var(--edge);
  padding: 20px 22px; font-size: var(--text-sm); display: grid; gap: 0;
}
.v-doc__k { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subdued); padding-bottom: 12px; border-bottom: 1px solid var(--border-subdued); }
.v-doc__t { padding: 12px 0 6px; font-size: var(--text-md); font-weight: 500; }
.v-doc__row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border-subdued); color: var(--text-subdued); }
.v-doc__row b { color: var(--text-default); font-weight: 500; font-variant-numeric: tabular-nums; }
.v-doc__row:last-of-type { border-bottom: 0; }
.v-doc__row b[data-null] { color: var(--ok-ton); }
.v-doc__foot { padding-top: 12px; font-size: var(--text-xs); color: var(--text-subdued); }

/* ═══════════════════════════════════════════ 7 · DREI TISCHE ══════════
   Ein Betrieb nach dem anderen statt drei Karten nebeneinander. Links der
   Tisch heute, rechts derselbe Tisch verkettet, beide als Oberfläche. */
.v-tabs { margin-top: var(--gap-xl); }
.v-tab { display: none; }
.v-tab[data-on] { display: block; animation: fadeIn 400ms var(--ease-out); }
.v-vorher { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); margin-top: var(--gap-lg); }
.v-vorher__k { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.v-vorher__k i { width: 8px; height: 8px; border-radius: 50%; display: block; background: var(--stopp); }
.v-vorher > div:last-child .v-vorher__k i { background: var(--ok); }
.v-vorher .mock { border-radius: 14px; border: 1px solid var(--border-subdued); box-shadow: var(--shadow-2); min-height: 236px; }
.v-vorher .mock__body { gap: 8px; }
/* mock.css hält Zeilen unsichtbar, bis ihr Panel aktiv wird. Diese Flächen
   liegen in keinem Panel, sondern in einem Reiter: sichtbar von Haus aus,
   und beim Umschalten laufen sie kurz ein. */
.v-vorher .mock .mock__row { opacity: 1; translate: none; }
.v-tab[data-on] .mock .mock__row { animation: vRowIn 420ms var(--ease-out) backwards; }
.v-tab[data-on] .mock .mock__row:nth-child(2) { animation-delay: 70ms; }
.v-tab[data-on] .mock .mock__row:nth-child(3) { animation-delay: 140ms; }
.v-tab[data-on] .mock .mock__row:nth-child(4) { animation-delay: 210ms; }
@keyframes vRowIn { from { opacity: 0; translate: 0 6px; } }
.v-vorher .mock__row[data-stopp] { background: #FBEDEA; border-color: #EFC9C2; }
.v-vorher .mock__row em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--m-soft); white-space: nowrap; }
.v-vorher .mock__row[data-stopp] em { color: var(--m-stopp); font-weight: 600; }
.v-vorher .mock__row[data-wait] em { color: var(--m-warteton); font-weight: 600; }
.v-fazit { margin-top: var(--gap-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); align-items: end; }
.v-fazit p { font-size: var(--text-sm); color: var(--text-subdued); line-height: var(--leading-140); }
.v-fazit p b { color: var(--text-default); font-weight: 500; display: block; margin-bottom: 4px; }
.v-fakt { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.1; letter-spacing: -.02em; }
.v-fakt span { display: block; margin-top: 8px; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; color: var(--text-subdued); letter-spacing: 0; }
@media (max-width: 900px) { .v-vorher, .v-fazit { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════ 8 · PERSON ═══════════════ */
.v-person { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.v-portrait { margin: 0; display: grid; gap: 12px; }
.v-portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%;
  border-radius: var(--radius-3xl); background: var(--surface-default);
}
.v-portrait figcaption { display: flex; justify-content: space-between; gap: 12px; }
.v-zitat {
  margin-top: var(--gap-lg); padding-left: 20px; border-left: 2px solid var(--accent);
  font-family: var(--font-display); font-weight: 450;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); line-height: 1.25; letter-spacing: -.01em;
  text-wrap: balance;
}
.v-zitat span { display: block; margin-top: 10px; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; color: var(--text-subdued); letter-spacing: 0; }
.v-versprechen {
  margin-top: var(--gap-xl); display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-subdued); border-left: 1px solid var(--border-subdued);
}
.v-versprechen li { padding: 14px 16px; border-right: 1px solid var(--border-subdued); border-bottom: 1px solid var(--border-subdued); font-size: var(--text-sm); line-height: 1.4; }
.v-versprechen li b { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-accent); font-weight: 500; }
.v-werkzeug { margin-top: var(--gap-lg); padding-top: var(--gap-md); border-top: 1px solid var(--border-subdued); display: grid; gap: 10px; }
.v-werkzeug p { font-size: var(--text-base); line-height: var(--leading-140); color: var(--text-subdued); max-width: 58ch; }
.v-werkzeug p b { color: var(--text-default); font-weight: 500; }
/* Das Bild: Hauch von Vignette unten, Lichtsaum, Schatten wie ein Abzug */
.v-portrait__bild { position: relative; display: block; border-radius: var(--radius-3xl); overflow: hidden; box-shadow: var(--shadow-2), var(--edge); }
.v-portrait__bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgb(20 24 26 / .38));
}
@media (max-width: 900px) { .v-person { grid-template-columns: 1fr; } .v-portrait img { aspect-ratio: 1; } }

/* ═══════════════════════════════════════════ 9 · FRAGEN + ABGRENZUNG ══ */
.v-faq { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.v-faq__side { position: sticky; top: calc(var(--navbar-height) + 28px); }
.v-nicht { margin-top: var(--gap-xl); border-top: 1px solid var(--border-subdued); }
.v-nicht li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--border-subdued);
  font-size: var(--text-sm); color: var(--text-subdued); line-height: 1.45;
}
.v-nicht li b { display: block; color: var(--text-default); font-weight: 500; }
.v-nicht li i { font-family: var(--font-mono); font-style: normal; color: var(--stopp-ton); font-size: 15px; line-height: 1.35; }
@media (max-width: 900px) { .v-faq { grid-template-columns: 1fr; } .v-faq__side { position: static; } }

/* ═══════════════════════════════════════════ 10 · SCHLUSS ═════════════ */
.v-schluss { text-align: center; padding-block: clamp(96px, 12vw, 180px) clamp(72px, 9vw, 140px); }
.v-schluss .v-h--xl { max-width: 15ch; margin-inline: auto; }
.v-schluss__lede { margin: var(--gap-md) auto 0; max-width: 46ch; color: var(--text-subdued); }
.v-schluss__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: var(--gap-xl); }
.v-schluss__note { margin-top: var(--gap-sm); font-size: var(--text-sm); color: var(--text-subdued); }

/* ═══════════════════════════════════════════ FUSS ═════════════════════
   Kein zweiter Aufruf. Marke mit Ort und Uhrzeit, die Spalten, dann die
   Wortmarke als Signatur, riesig und angeschnitten, kaum heller als der
   Grund. Sie will nicht gelesen werden, sie will da sein. */
.v-foot { padding-block: clamp(64px, 7vw, 96px) 0; border-top: 1px solid var(--border-subdued); overflow: hidden; }
.v-foot__top { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.v-foot__brand { display: grid; gap: 18px; justify-items: start; }
.v-foot__brand .nav__mark { pointer-events: none; }
.v-foot__claim { max-width: 34ch; font-size: var(--text-md); line-height: var(--leading-140); color: var(--text-subdued); }
.v-foot__ort { display: flex; align-items: center; gap: 10px; }
.v-foot__ort i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  animation: vPuls 2.6s ease-in-out infinite;
}
@keyframes vPuls {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 6%, transparent); }
}
.v-foot .foot__cols { grid-template-columns: repeat(3, 1fr); }
.v-foot .foot__cols li { font-size: var(--text-sm); line-height: 1.5; }
.v-foot__mark {
  margin-top: clamp(56px, 7vw, 104px);
  height: .74em; overflow: hidden;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(5rem, 17.5vw, 17rem); line-height: .8; letter-spacing: -.045em;
  white-space: nowrap; user-select: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--text-default) 24%, transparent),
    color-mix(in srgb, var(--text-default) 3%, transparent) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v-foot__legal { margin-top: 0; padding-block: 22px 30px; align-items: center; }
.v-foot__ki { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.v-foot__ki i { width: 6px; height: 6px; border-radius: 1.5px; background: var(--accent); flex: none; transform: rotate(45deg); }
@media (max-width: 900px) {
  .v-foot__top { grid-template-columns: 1fr; }
  .v-foot .foot__cols { grid-template-columns: 1fr 1fr; }
  .v-foot__ki { margin-left: 0; }
}

/* ═══════════════════════════════════════════ FEINSCHLIFF ══════════════
   Was den Unterschied zwischen sauber und hochwertig macht, sieht man nicht
   einzeln: eine Körnung im Grund, ein Schimmer hinter dem, was groß ist,
   nummerierte Abschnitte, Knöpfe, die auf den Zeiger antworten, ein
   Lichtsaum am Bild. Jedes für sich unauffällig, zusammen Material. */

/* Körnung im Grund, wie Mercurys Filmkorn. Liegt in der Hintergrundebene
   des Wrappers, nicht als Schicht über allem: kostet beim Rollen nichts. */
#theme-scroller {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Ein Schimmer in der Akzentfarbe hinter den großen Zahlen und der
   Schlusszeile. Nicht als Fläche zu sehen, nur als Wärme. */
.v-bilanz, .v-schluss { position: relative; }
.v-bilanz::before, .v-schluss::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 42%; width: min(1100px, 90vw); height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
}
.v-bilanz > .grid, .v-schluss > .grid, .v-ticker { position: relative; z-index: 1; }

/* Nummerierte Abschnitte: Ziffer in Mono, Haarstrich, dann die Zeile */
.v-num { font-family: var(--font-mono); color: var(--text-subdued); letter-spacing: .1em; margin-right: 14px; }
.v-num::after { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--border-default); vertical-align: middle; margin-left: 14px; }

/* Knöpfe: Lichtsaum oben, Aufstieg unter dem Zeiger, Schein in der Akzentfarbe */
.btn { transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.btn--primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 1px 2px rgb(0 0 0 / .18); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 12px 28px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn--ghost:hover { transform: translateY(-1px); }

/* Große Zahlen und Zeilen: eine Spur enger gesetzt, wie gedruckt */
.v-h { letter-spacing: -.022em; }
.v-zahl { text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Regler und Reiter: der gedrückte Zustand liegt als Kachel obenauf */
.v-seg button[aria-pressed="true"] { box-shadow: var(--shadow-1), var(--edge); }

/* ═══════════════════════════════════════════ BEWEGUNGSARM ═════════════ */
@media (prefers-reduced-motion: reduce) {
  .v-dn { opacity: 1; animation: none !important; }
  .v-dicht .v-kante { transition: none; }
  .v-foot__ort i { animation: none; }
  .btn--primary:hover, .btn--ghost:hover { transform: none; }
  .v-canvas__grund, .v-ticker__track, .v-cursor, .v-klick { animation: none !important; }
  .v-cursor { display: none; }
  .v-folge { opacity: 1; }
  .v-btn2 > span:last-child { opacity: 0 !important; }
  .v-btn2 { animation: none !important; }
  .v-btn2 > span:first-child { animation: none !important; opacity: 1 !important; }
  .reveal[data-in] .v-sheet { animation: none; }
  .v-prog { display: none; }
  .v-fall { transition: none; }
  .v-tab[data-on] { animation: none; }
}

/* Die Hero-Bühne trägt einen eigenen Grund ohne Körnung; am Ende der Bühne
   stünde sonst eine feine Kante gegen den gekörnten Seitengrund. Dieselbe
   Körnung auf der Bühne, und die Naht ist weg. */
.hero__stage {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}