/* Swiftly Web-Kit · tokens.css
   Every value of the finished homepage (webseite-r12) as a custom property.
   Nothing in kit.css may use a raw colour, size or time that is not named here. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/schrift/inter-latin.woff2) format("woff2")}
:root{
  /* ---------- colour: surfaces ---------- */
  --sw-bg:#101010;            /* page */
  --sw-surface:#161616;       /* tiles, cards */
  --sw-surface-2:#1E1E1E;     /* raised: popovers, inputs */
  --sw-surface-3:#262626;
  --sw-nav-bg:#161616;        /* navbar is solid, no lines */
  --sw-mark:#181818;          /* the quiet big logo in the footer */
  --sw-black:#000;
  --sw-white:#fff;

  /* ---------- colour: text ---------- */
  --sw-text:#FFFFFF;          /* level 1 */
  --sw-text-2:#CCCCCC;        /* level 2: body, lead */
  --sw-text-3:#989898;        /* level 3: meta, small */
  --sw-text-dim:#5c5c5c;      /* inactive list titles */
  --sw-text-chip:#EDEDED;     /* chip text on dark */

  /* ---------- colour: accent ---------- */
  --sw-accent:#50D5DA;
  --sw-ink:#101010;           /* text and icons ON the accent */
  --sw-ink-2:rgba(16,16,16,.74);
  --sw-ink-chip:rgba(16,16,16,.55);
  --sw-ink-line:rgba(16,16,16,.13);
  --sw-ink-grid:rgba(16,16,16,.12);   /* column lines on the accent band */
  --sw-ink-shape:rgba(16,16,16,.06);  /* big triangle on the accent band */
  --sw-accent-rgb:80,213,218;
  --sw-white-rgb:255,255,255;
  --sw-black-rgb:0,0,0;
  --sw-ink-rgb:16,16,16;

  /* ---------- colour: lines and chips ---------- */
  --sw-line:rgba(255,255,255,.075);        /* column lines, normal */
  --sw-line-edge:rgba(255,255,255,.095);   /* the two outer edge lines under the hero */
  --sw-line-strong:rgba(255,255,255,.16);  /* rules between rows, borders */
  --sw-line-tile:rgba(255,255,255,.12);    /* .5px tile edge */
  --sw-hover-fill:rgba(255,255,255,.06);
  --sw-press-fill:rgba(255,255,255,.04);
  --sw-chip-border:2px;                    /* chips: real, opaque 2px borders */
  --sw-chip-line:#8F8F8F;                  /* chip border on dark tiles */
  --sw-focus:#FFFFFF;                      /* focus ring on dark */

  /* ---------- type ---------- */
  --sw-font:"Inter",system-ui,-apple-system,sans-serif;
  --sw-font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sw-fs-display:100px;   /* hero line, closing band */
  --sw-fs-h2:76px;         /* section headlines (fitted to the column line by kit.js) */
  --sw-fs-h3:24px;         /* tile and card titles */
  --sw-fs-lead:20px;
  --sw-fs-body-lg:18px;
  --sw-fs-body:16px;
  --sw-fs-body-sm:15px;
  --sw-fs-ui-lg:17px;
  --sw-fs-ui:14px;
  --sw-fs-small:13px;
  --sw-fs-xs:12px;
  --sw-fs-mono:14px;
  --sw-fs-stat:92px;       /* the big word in the accent tile */
  --sw-fs-feature:36px;    /* feature list titles */
  --sw-fs-store:40px;      /* store names in the closing band */
  --sw-fs-price:76px;
  --sw-fs-badge:32px;
  --sw-fs-prose-h2:36px;   /* article headings (subpages) */
  --sw-fs-prose-h3:22px;
  --sw-fs-page-title:76px; /* subpage header headline */
  --sw-fw-regular:400;--sw-fw-medium:500;--sw-fw-semibold:600;--sw-fw-bold:700;--sw-fw-extrabold:800;--sw-fw-black:900;
  --sw-lh-prose:1.6;--sw-measure:44em;
  --sw-lh-tight:1;--sw-lh-snug:1.1;--sw-lh-body:1.45;
  --sw-track-display:-.055em;
  --sw-track-h3:-.03em;
  --sw-track-lead:-.012em;

  /* ---------- spacing ---------- */
  --sw-space-1:4px;--sw-space-2:8px;--sw-space-3:12px;--sw-space-4:16px;--sw-space-5:24px;
  --sw-space-6:32px;--sw-space-7:48px;--sw-space-8:64px;--sw-space-9:96px;

  /* ---------- radii ---------- */
  --sw-radius-s:7px;        /* chips */
  --sw-radius-btn-sm:10px;
  --sw-radius-m:14px;       /* buttons */
  --sw-radius-l:16px;
  --sw-radius-tile:0;       /* tiles are square, they sit on the grid */
  --sw-radius-pill:999px;
  --sw-radius-app-icon:22.5%;

  /* ---------- shadows ---------- */
  --sw-shadow-window:drop-shadow(0 50px 70px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(255,255,255,.28));
  --sw-shadow-phone:drop-shadow(0 40px 50px rgba(0,0,0,.5));
  --sw-shadow-phone-lg:drop-shadow(0 40px 50px rgba(0,0,0,.55));
  --sw-shadow-phone-sm:drop-shadow(0 24px 30px rgba(0,0,0,.55));
  --sw-shadow-icon:0 30px 60px rgba(0,0,0,.5);
  --sw-shadow-pop:0 18px 30px rgba(0,0,0,.6);
  --sw-ratio-media:16/10;
  --sw-ring-hair:0 0 0 1px rgba(255,255,255,.08);

  /* ---------- motion ---------- */
  --sw-ease:cubic-bezier(.65,0,.35,1);      /* rotating word, list, fades */
  --sw-ease-out:cubic-bezier(.16,1,.3,1);   /* hover, arrows, press */
  --sw-dur-120:.12s;--sw-dur-140:.14s;--sw-dur-200:.2s;--sw-dur-250:.25s;--sw-dur-300:.3s;
  --sw-dur-350:.35s;--sw-dur-450:.45s;--sw-dur-600:.6s;--sw-dur-700:.7s;--sw-dur-800:.8s;
  --sw-dur-rotor:7.5s;      /* one full turn of the rotating word (3 words) */

  /* ---------- grid ---------- */
  --sw-cols:12;
  --sw-gutter:0px;           /* none: the column lines ARE the gutters */
  --sw-max:1440px;
  --sw-pad-desktop:72px;     /* side padding, desktop */
  --sw-pad-mobile:20px;      /* side padding, mobile */
  --sw-cols-mobile:4;
  --sw-nav-h:72px;
  --sw-nav-h-mobile:64px;
  /* mobile switches at a page (container) width of 600px; container queries cannot read variables */

  /* ---------- line styles ---------- */
  --sw-line-w:1px;
  /* fade masks: where the column lines show (transparent -> visible -> transparent) */
  --sw-fade-hero:linear-gradient(transparent 0,#000 16%,#000 46%,transparent 74%);
  --sw-fade-hero-edge:linear-gradient(#000 0,#000 40%,transparent 70%);
  --sw-fade-section:linear-gradient(transparent 0,#000 20%,#000 45%,transparent 75%);
  --sw-fade-devices:linear-gradient(transparent 0,#000 15%,#000 40%,transparent 72%);
  --sw-fade-features:linear-gradient(transparent 0,#000 10%,#000 30%,transparent 62%);
  --sw-fade-looks:linear-gradient(transparent 0,#000 12%,#000 28%,transparent 52%);
  --sw-fade-faq:linear-gradient(transparent 0,#000 20%,#000 50%,transparent 85%);
  --sw-fade-band:linear-gradient(transparent 0,#000 25%,#000 55%,transparent 90%);
  --sw-fade-footer:linear-gradient(#000 0,#000 55%,transparent 100%);
  --sw-fade-mark:linear-gradient(#000 40%,transparent 92%);
  --sw-fade-page:linear-gradient(#000 0,#000 30%,transparent 100%);   /* subpage header */

  /* ---------- device art (CSS TV, Mac screen backdrop) ---------- */
  --sw-tv-body:#050505;--sw-tv-edge:#2c2c2c;--sw-tv-hi:#3a3a3a;
  --sw-tv-neck-a:#1b1b1b;--sw-tv-neck-b:#0b0b0b;--sw-tv-base-a:#2f2f2f;--sw-tv-base-b:#121212;
  --sw-mac-wallpaper:radial-gradient(120% 90% at 18% 0%,#163b3d 0%,#0d1c1e 45%,#08090a 100%);
}