/* Panel & Pixel – Website (Entwurf 2)
   Schrift: DotGothic16, drei Größen 16 / 24 / 48.
   Raster: 12 Spalten, Abstand 24 px. Alle Bedienelemente 48 px hoch, Breite in 48er-Schritten.
   Pixelrahmen wie in der App: Block 3 px, Kontur 1 Block, Relief innen hell/dunkel.
   Kacheln und Masken erzeugt build.py. */

@font-face{font-family:'DotGothic16';src:url(../fonts/dotgothic16-latin-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;}

:root{
  --font:'DotGothic16',ui-monospace,monospace;
  --s1:16px; --s2:24px; --s3:32px;
  --u:48px; --b:36px; --gap:24px;

  --go:#087734; --danger:#c8362f; --done:#2042c9;
  --magenta:#ff0087; --teal-1:#008282; --teal-2:#00bebe; --teal-3:#29ffff;

  --m7:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%227%22%20viewBox%3D%220%200%207%207%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --m9:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%229%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%229%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%229%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%229%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%229%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --t-color:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%227%22%20viewBox%3D%220%200%207%207%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E");
  --t-phone:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E");
  --clip7:polygon(3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px),0 3px,3px 3px);
  --clip9:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px),0 6px,3px 6px,3px 3px,6px 3px);
  --i-sun:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --i-moon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%223%22%20y%3D%220%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --i-arrow:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%225%22%20viewBox%3D%220%200%207%205%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --i-tri:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%224%22%20viewBox%3D%220%200%207%204%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%227%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --i-play:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%227%22%20viewBox%3D%220%200%207%207%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --i-pause:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%227%22%20viewBox%3D%220%200%206%207%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --t-stage:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3C%2Fsvg%3E");

  --page:#f8f6f2; --plate:#ffffff; --ctl:#ffffff;
  --fill:#000000; --on-fill:#ffffff;
  --text:#111111; --dim:#666666; --deep:#0b0b0d;
  --show-std:block; --show-dark:none;
  --t-ctl:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%227%22%20viewBox%3D%220%200%207%207%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E");
  --t-box:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%222%22%20y%3D%220%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.45%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22rgba%2870%2C70%2C70%2C0.55%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E");
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --page:#1e1e21;
    --plate:#26262a;
    --ctl:#2a2a2e;
    --fill:#ffffff;
    --on-fill:#1e1e21;
    --text:#f2f2f2;
    --dim:#9a9a9a;
    --deep:#0b0b0d;
    --show-std:none;
    --show-dark:block;
    --t-ctl:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%227%22%20viewBox%3D%220%200%207%207%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E");
    --t-box:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3C%2Fsvg%3E");
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --page:#1e1e21;
    --plate:#26262a;
    --ctl:#2a2a2e;
    --fill:#ffffff;
    --on-fill:#1e1e21;
    --text:#f2f2f2;
    --dim:#9a9a9a;
    --deep:#0b0b0d;
    --show-std:none;
    --show-dark:block;
    --t-ctl:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227%22%20height%3D%227%22%20viewBox%3D%220%200%207%207%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E");
    --t-box:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%225%22%20height%3D%221%22%20fill%3D%22rgba%280%2C0%2C0%2C0.45%29%22%2F%3E%3C%2Fsvg%3E");
    color-scheme:dark;
}

/* ── Grundlagen ─────────────────────────────────────────────── */
*,*::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(--page);color:var(--text);font:400 var(--s1)/1.6 var(--font);-webkit-tap-highlight-color:transparent;}
img,video{display:block;max-width:100%;height:auto;}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;}
h1,h2{font-size:var(--s3);font-weight:400;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;}
h3{font-size:var(--s2);font-weight:400;line-height:1.3;letter-spacing:.02em;text-transform:uppercase;}
.lead{font-size:var(--s2);line-height:1.4;}
.dim{color:var(--dim);}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{position:absolute;left:16px;top:-80px;z-index:10;height:var(--u);padding:0 16px;line-height:var(--u);background:var(--fill);color:var(--on-fill);text-decoration:none;}
.skip:focus{top:12px;}

/* ── Raster ─────────────────────────────────────────────────── */
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:16px;}
@media (min-width:700px){.wrap{padding-inline:32px;}}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);}
.c3,.c4,.c6,.c7,.c12{grid-column:span 12;}
.c3{grid-column:span 6;}
@media (min-width:700px){.c3{grid-column:span 6;}.c4{grid-column:span 4;}.c6{grid-column:span 6;}.c7{grid-column:span 7;}}
@media (min-width:960px){.c3{grid-column:span 3;}}
@media (max-width:699px){.grid{gap:12px;}}

/* ── Pixelrahmen ────────────────────────────────────────────── */
.px{border:3px solid transparent;border-image:var(--t-ctl) 3 / 9px stretch;-webkit-mask-box-image:var(--m7) 3 fill / 9px stretch;}
.px-box{border:3px solid transparent;border-image:var(--t-box) 4 / 12px stretch;-webkit-mask-box-image:var(--m9) 4 fill / 12px stretch;background:var(--plate);}
@supports not (-webkit-mask-box-image:none){.px{clip-path:var(--clip7);}.px-box,.phone{clip-path:var(--clip9);}}

/* ── Icons ──────────────────────────────────────────────────── */
.i{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;}
.i-sun{--i:var(--i-sun);width:27px;height:27px;}
.i-moon{--i:var(--i-moon);width:27px;height:27px;}
.i-play{--i:var(--i-play);width:21px;height:21px;}
.i-pause{--i:var(--i-pause);width:18px;height:21px;}
.i-sun,.i-moon{width:21px;height:21px;}

/* ── Bedienelemente: 48er-Raster ────────────────────────────── */
.btn,.chip,.seg>a,.seg>button{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:var(--b);min-width:calc(var(--b) * 2);padding:0 16px;font:400 var(--s1)/1 var(--font);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--text);}
.btn{background:var(--ctl);}
.btn-go{color:#fff;background:var(--go);border-image-source:var(--t-color);}
.chip{background:var(--ctl);}
.chip.on{background:var(--fill);color:var(--on-fill);}
.chips{display:flex;flex-wrap:wrap;gap:12px;}
.seg{display:inline-flex;padding:3px;background:var(--ctl);}
.seg>a,.seg>button{appearance:none;border:0;margin:0;background:transparent;cursor:pointer;height:var(--b);min-width:var(--b);padding:0 12px;}
.seg>.sq{min-width:var(--b);padding:0;width:var(--b);}
.seg>[aria-current="page"],.seg>[aria-pressed="true"]{background:var(--fill);color:var(--on-fill);box-shadow:inset 3px 3px 0 rgba(255,255,255,.45),inset -3px -3px 0 rgba(70,70,70,.55);}
.seg>a:focus-visible,.seg>button:focus-visible,.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 4px var(--magenta);}

/* ── Kopf ───────────────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:var(--gap);}
.brand{display:block;flex:none;line-height:0;}
.brand img{height:40px;width:auto;}
@media (max-width:699px){.top .seg>a{padding:0;}}
@media (min-width:700px){.brand img{height:calc(var(--u) * 1.5);}}
.brand .lg-std{display:var(--show-std);}
.brand .lg-dark{display:var(--show-dark);}
.top-ctrls{display:flex;gap:12px;}

/* ── Abschnitte ─────────────────────────────────────────────── */
.sec{padding-block:var(--gap) var(--u);}
@media (min-width:700px){.sec{padding-block:var(--u) calc(var(--u) * 1.5);}}
.rule{height:3px;margin-bottom:var(--gap);background:repeating-linear-gradient(90deg,var(--text) 0 3px,transparent 3px 12px);opacity:.45;}
@media (min-width:700px){.rule{margin-bottom:var(--u);}}
.sec-h{display:flex;align-items:baseline;gap:var(--gap);margin-bottom:var(--gap);}
.sec-h::before{content:"";flex:none;width:6px;height:6px;align-self:center;background:var(--magenta);box-shadow:12px 0 0 var(--magenta),24px 0 0 var(--magenta);margin-right:24px;}
@media (max-width:699px){.sec-h{flex-direction:column;align-items:flex-start;gap:12px;}.sec-h::before{align-self:flex-start;margin:0;}}
.sec-lead{margin:0 0 var(--gap);max-width:48ch;}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{padding-block:var(--gap) var(--u);align-items:center;}
@media (min-width:700px){.hero{padding-block:var(--u) calc(var(--u) * 1.5);}}
.hero-txt{display:grid;gap:var(--gap);align-content:center;}
.hero-txt h1{line-height:0;}
.hero-txt h1 img{width:100%;max-width:560px;}
.hero-txt .lg-std{display:var(--show-std);}
.hero-txt .lg-dark{display:var(--show-dark);}
.hero-txt .lead{max-width:30ch;}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.stores .seg a{padding:0 16px;}
.status{letter-spacing:.04em;text-transform:uppercase;}
.hero-media{display:flex;justify-content:center;}
.vbox{display:flex;flex-direction:column;align-items:flex-end;gap:12px;width:100%;max-width:300px;}
.vctl{display:flex;}
@media (min-width:700px){.hero-media{grid-column:9 / span 4;justify-content:flex-end;}}

/* ── Telefon ────────────────────────────────────────────────── */
.phone{display:block;position:relative;width:100%;max-width:300px;padding:3px;background:var(--deep);border:3px solid transparent;border-image:var(--t-phone) 4 / 12px stretch;-webkit-mask-box-image:var(--m9) 4 fill / 12px stretch;}
.phone img,.phone video{width:100%;height:auto;display:block;background:#000;}
.ph-screen{aspect-ratio:720/1485;display:grid;place-items:center;text-align:center;padding:16px;color:#9a9a9a;letter-spacing:.04em;text-transform:uppercase;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 3px,transparent 3px 24px),repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 3px,transparent 3px 24px),#1e1e21;}

/* ── So geht's ──────────────────────────────────────────────── */
.step{position:relative;}
.steps-note{margin-top:var(--gap);max-width:64ch;}
.step-arrow{display:block;color:var(--text);}
.step-arrow svg{display:block;width:100%;height:100%;}
.step-box{height:100%;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--gap);row-gap:8px;padding:var(--gap);}
.step-no{grid-row:span 2;font-size:var(--s3);line-height:1;color:var(--magenta);}
.step h3{padding-top:4px;}
@media (min-width:700px){
  .step-box{grid-template-columns:minmax(0,1fr);align-content:start;}
  .step-no{grid-row:auto;}
  .step-arrow{position:absolute;top:50%;right:calc(var(--gap) * -1 - 10px);width:21px;height:15px;margin-top:-7px;}
}
@media (max-width:699px){
  .step:not(:last-child){margin-bottom:21px;}
  .step-arrow{position:absolute;left:50%;bottom:-24px;width:21px;height:15px;margin-left:-10px;transform:rotate(90deg);}
}

/* ── Vier Bereiche ──────────────────────────────────────────── */
.mod{display:grid;gap:var(--gap);padding:var(--gap);align-items:start;}
@media (min-width:700px){.mod{grid-template-columns:minmax(0,1fr) 192px;}}
.mod-txt{display:grid;gap:12px;}
.kw{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);}
.kw li{display:flex;align-items:center;}
.kw li:not(:last-child)::after{content:"";width:3px;height:3px;background:var(--magenta);box-shadow:6px 0 0 var(--magenta),12px 0 0 var(--magenta);margin:0 12px 0 12px;}
.hl{font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:var(--teal-2);}
.mod .phone{max-width:192px;margin-inline:auto;}
@media (max-width:699px){.mod .phone{max-width:216px;}}

/* ── Video-Bühne ────────────────────────────────────────────── */
.stage{display:grid;grid-auto-flow:column;justify-content:center;align-items:center;gap:var(--u);padding:var(--gap);background:var(--deep);border-image-source:var(--t-phone);}
@media (min-width:700px){.stage{aspect-ratio:16/9;}.stage .zoom{height:100%;width:auto;aspect-ratio:732/1292;}.stage .phone{height:100%;width:100%;}.stage .phone video{height:100%;object-fit:cover;}}
.stage .phone video,.hero .phone video{aspect-ratio:9/16;}
@media (max-width:699px){.stage{gap:12px;grid-auto-columns:minmax(0,1fr);}.stage .zoom{max-width:216px;}.stage .phone{width:100%;}}
.stage .phone{border-image-source:var(--t-stage);}
.stage .ph-screen{display:grid;place-items:center;}
.stage-foot{display:flex;align-items:flex-start;gap:var(--gap);margin-top:var(--gap);}
.stage-cap{max-width:64ch;padding-top:6px;}

/* ── Beispiele ──────────────────────────────────────────────── */
.ex{padding:9px;}
.ex img{width:100%;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;}
.lb img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;}
.ex-row{display:flex;gap:var(--gap);}
.ex-row+.ex-row{margin-top:var(--gap);}
.ex-row li{flex:calc(var(--ar) * 100) 1 0;min-width:0;}
.ex-row .zoom{height:100%;}
.ex-row img{height:100%;object-fit:contain;}
@media (max-width:699px){.ex-row{flex-wrap:wrap;gap:12px;}.ex-row+.ex-row{margin-top:12px;}.ex-row li{flex:1 1 calc(50% - 6px);}}

/* ── Free & Unlock ──────────────────────────────────────────── */
.plan{padding:var(--gap);display:grid;gap:var(--gap);align-content:start;height:100%;}
.plan-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.plan ul{display:grid;gap:12px;}
.plan li{position:relative;padding-left:24px;}
.plan li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:currentColor;}
.plan.inv{background:var(--fill);color:var(--on-fill);}
.plan.inv .dim{color:inherit;opacity:.7;}

/* ── Gut zu wissen ──────────────────────────────────────────── */
.say{display:grid;place-items:center;min-height:calc(var(--u) * 2);padding:16px var(--gap);text-align:center;text-transform:uppercase;letter-spacing:.02em;}
.fact{padding:var(--gap);height:100%;}
.fact dt{margin-bottom:8px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);}

/* ── Fuß ────────────────────────────────────────────────────── */
/* ── Vergrößern ─────────────────────────────────────────────── */
.zoom{display:block;padding:0;background:none;cursor:zoom-in;width:100%;}
.zoom:not(.ex){border:0;}
.zoom.ex{padding:9px;background:var(--plate);}
.zoom img{width:100%;}
:root{--vh:100vh;}
@supports (height:100dvh){:root{--vh:100dvh;}}
.lb{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:var(--vh);background:transparent;}
.lb::backdrop{background:rgba(11,11,13,.92);}
.lb-in{display:grid;place-items:center;width:100%;height:100%;padding:var(--gap);}
.lb-fig{position:relative;}
.lb .phone{width:min(92vw,calc((var(--vh) - 96px) * 732 / 1497));max-width:none;}
@media (min-width:700px){.lb .phone{width:min(90vw,300px,calc((var(--vh) - 96px) * 732 / 1497));}}
.lb .phone.phone-v{width:min(92vw,720px,calc((var(--vh) - 96px) * 726 / 1286));}
.lb .phone-v video{aspect-ratio:9/16;}
.lb .ex{width:min(92vw,calc((var(--vh) - 96px) * var(--ar, 0.75)));max-width:720px;}
.lb-close{position:absolute;top:0;right:0;z-index:2;width:var(--b);height:var(--b);padding:0;border:0;background:var(--fill);color:var(--on-fill);font:400 var(--s2)/1 var(--font);cursor:pointer;transform:translate(50%,-50%);}
.lb .ph-screen{aspect-ratio:720/1485;}
@media (max-width:699px){.lb-close{transform:none;top:3px;right:3px;}}
.lb-play{display:none;position:absolute;top:0;left:0;z-index:2;width:var(--b);height:var(--b);padding:0;border:0;background:var(--fill);color:var(--on-fill);cursor:pointer;place-items:center;transform:translate(-50%,-50%);}
.lb.has-video .lb-play{display:grid;}
.lb #lb-body video{cursor:pointer;}
@media (max-width:699px){.lb-play{transform:none;top:3px;left:3px;}}
/* ── Rechtsseiten ───────────────────────────────────────────── */
.legal{max-width:72ch;padding-block:var(--gap) var(--u);}
.legal h1{margin-bottom:var(--gap);}
.legal h2{font-size:var(--s2);margin:var(--u) 0 12px;}
.legal h3{font-size:var(--s1);margin:var(--gap) 0 8px;}
.legal p,.legal li{margin-bottom:12px;overflow-wrap:anywhere;}
.legal ul{padding-left:0;}
.legal li{position:relative;padding-left:24px;}
.legal li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:currentColor;}
.legal .note{color:var(--dim);}
.legal a{text-decoration-thickness:3px;text-underline-offset:4px;}
.foot{padding-block:var(--gap) var(--u);}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap);}
.foot nav ul{display:flex;flex-wrap:wrap;gap:12px var(--gap);}
.foot nav a{letter-spacing:.04em;text-transform:uppercase;text-decoration:none;}
.foot nav a:hover{text-decoration:underline;text-underline-offset:4px;}