:root {

  --fl: #f7f8f9;

  --fl-2: #eef2f2;
  --fl-inv: #0d1015;

  --tinte: #14171b;
  --tinte-2: #5b6169;
  --tinte-inv: #f0f1f2;
  --tinte-inv-2: #9aa0a6;

  --linie: #e0e2e4;
  --linie-inv: #272c33;

  --linie-stark: #7f858c;

  --akzent: #31b9b5;
  --akzent-tinte: #0f6b68;
  --auf-akzent: #0d1015;
  --fokus: #0f6b68;

  --diag-akzent: #31b9b5;
  --diag-neutral: #414952;
  --diag-linie: #cdd2d7;

  --diag-ab: #e0483a;

  --punktmuster: color-mix(in srgb, var(--tinte) 10%, transparent);
  --punktmuster-raster: 18px;

  --aurora-streifen: repeating-linear-gradient(100deg,
    var(--fl) 0%, var(--fl) 7%,
    transparent 10%, transparent 12%,
    var(--fl) 16%);
  --aurora: repeating-linear-gradient(100deg,
    var(--akzent-tief) 10%,
    var(--akzent-hell) 15%,
    var(--akzent) 20%,
    var(--akzent-dunkel) 25%,
    var(--akzent-tiefer) 30%);

  --aurora-deckkraft: 0.19;
  --aurora-weiche: 13px;
  --aurora-dauer: 85s;

  --aurora-umkehr: invert(1);

  --akzent-hell: #3dd3ce;
  --akzent-dunkel: #2cada6;

  --akzent-tief: #248986;
  --akzent-tiefer: #1e716e;
  --akzent-tiefst: #165150;

  --morph-hell: #3dd3ce;
  --morph-tief: #0f6b68;

  --glas-flaeche: linear-gradient(155deg,
                    color-mix(in srgb, var(--akzent) 13%, transparent) 0%,
                    color-mix(in srgb, var(--akzent) 3%, transparent) 42%,
                    transparent 78%);
  --glas-rand: color-mix(in srgb, var(--akzent) 26%, var(--linie));
  --glas-glanz: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --glas-schatten: 0 20px 44px -24px rgba(13, 16, 21, 0.32);
  --glas-schatten-hoch: 0 28px 56px -22px rgba(13, 16, 21, 0.4);

  --chip-glanz-flaeche: linear-gradient(168deg,
                          rgba(255, 255, 255, 0.9) 0%,
                          rgba(255, 255, 255, 0.25) 46%,
                          transparent 74%);
  --chip-rand: color-mix(in srgb, var(--akzent) 24%, var(--linie));
  --chip-kante: inset 0 1px 0 rgba(255, 255, 255, 0.85);

  --glas-deckung-rand: 5%;
  --glas-deckung-mitte: 20%;
  --glas-weichzeichnung: 2px;
  --glas-fuellung: linear-gradient(-75deg,
    color-mix(in srgb, var(--fl) var(--glas-deckung-rand), transparent),
    color-mix(in srgb, var(--fl) var(--glas-deckung-mitte), transparent),
    color-mix(in srgb, var(--fl) var(--glas-deckung-rand), transparent));

  --kibadge-schimmer: linear-gradient(-75deg,
    color-mix(in srgb, var(--akzent) 12%, transparent),
    color-mix(in srgb, var(--akzent) 3%, transparent) 45%,
    color-mix(in srgb, var(--akzent) 10%, transparent));

  --kibadge-glanz: linear-gradient(-75deg,
    transparent 42%,
    color-mix(in srgb, var(--akzent) 18%, transparent) 50%,
    transparent 58%);
  --kibadge-glanz-dauer: 7s;

  --glas-basis: 16px;
  --glas-lagen:
    inset 0 calc(0.125 * var(--glas-basis)) calc(0.125 * var(--glas-basis))
      color-mix(in srgb, var(--tinte) 5%, transparent),
    inset 0 calc(-0.125 * var(--glas-basis)) calc(0.125 * var(--glas-basis))
      color-mix(in srgb, var(--fl) 50%, transparent),
    inset 0 0 calc(0.1 * var(--glas-basis)) calc(0.25 * var(--glas-basis))
      color-mix(in srgb, var(--fl) 20%, transparent),
    0 calc(0.25 * var(--glas-basis)) calc(0.125 * var(--glas-basis))
      calc(-0.125 * var(--glas-basis)) color-mix(in srgb, var(--tinte) 20%, transparent);
  --glasrand-breite: clamp(1px, calc(0.0625 * var(--glas-basis)), 4px);

  --glaskarte-rand: 45%;
  --glaskarte-mitte: 72%;
  --glaskarte-fuellung: linear-gradient(-75deg,
    color-mix(in srgb, var(--fl) var(--glaskarte-rand), transparent),
    color-mix(in srgb, var(--fl) var(--glaskarte-mitte), transparent),
    color-mix(in srgb, var(--fl) var(--glaskarte-rand), transparent));

  --schatten-ton: var(--tinte);
  --glaskarte-lagen:
    inset 0 0 0 1px color-mix(in srgb, var(--tinte) 16%, transparent),
    0 3px 6px -3px color-mix(in srgb, var(--schatten-ton) 14%, transparent),
    0 18px 34px -20px color-mix(in srgb, var(--schatten-ton) 46%, transparent);

  --glasrand-staerke: 50%;
  --glasrand-bogen: color-mix(in srgb, var(--tinte) var(--glasrand-staerke), transparent);
  --glasrand-grund: color-mix(in srgb, var(--fl) 50%, transparent);

  --cta-winkel: 172deg;
  --cta-stopp: 18%;
  --cta-schrift: #ffffff;

  --cta-oben: #2ba4a1;
  --cta-mitte: #22817f;
  --cta-unten: #1f7371;
  --cta-licht: #3dd3ce;
  --cta-glanz: 0.5;
  --cta-glanz-ende: 55%;
  --cta-ruecklicht: 0.4;
  --cta-kante: 0.55;
  --cta-unterschatten: 0.3;
  --cta-wurf: 1;
  --cta-bogen: 0.55;
  --cta-bogen-grund: 0.14;
  --cta-textschatten: 0;

  --cta-hover-licht: 1.4;

  --glas-zeit: 0.4s;
  --glas-kurve: cubic-bezier(0.25, 1, 0.5, 1);

  --glas-lagen-hover:
    inset 0 calc(0.125 * var(--glas-basis)) calc(0.125 * var(--glas-basis))
      color-mix(in srgb, var(--tinte) 5%, transparent),
    inset 0 calc(-0.125 * var(--glas-basis)) calc(0.125 * var(--glas-basis))
      color-mix(in srgb, var(--fl) 50%, transparent),
    inset 0 0 calc(0.05 * var(--glas-basis)) calc(0.1 * var(--glas-basis))
      color-mix(in srgb, var(--fl) 50%, transparent),
    0 calc(0.15 * var(--glas-basis)) calc(0.05 * var(--glas-basis))
      calc(-0.1 * var(--glas-basis)) color-mix(in srgb, var(--tinte) 25%, transparent);

  --chip-fuellung: color-mix(in srgb, #ffffff 88%, transparent);

  --chip-saum:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 0 10px 0 rgba(255, 255, 255, 0.5),
    inset 0 -6px 10px -10px rgba(13, 16, 21, 0.1);

  --chip-schwebe:
    0 1px 2px rgba(13, 16, 21, 0.05),
    0 6px 14px -8px rgba(13, 16, 21, 0.18);

  --chip-lichtkante: linear-gradient(163deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.92) 24%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.9) 76%,
    #ffffff 100%);
  --chip-kantenbreite: 2px;

  --chip-halo: 0 0 12px -2px rgba(255, 255, 255, 0.9);

  --chip-tinte: var(--tinte-2);
  --chip-schatten: 0 6px 16px -10px rgba(13, 16, 21, 0.4);

  --chip-svg-oben: #ffffff;
  --chip-svg-unten: #eceef0;
  --chip-svg-akzent-oben: color-mix(in oklab, var(--akzent) 24%, var(--fl));
  --chip-svg-akzent-unten: color-mix(in oklab, var(--akzent) 11%, var(--fl));
  --chip-svg-schatten: #0d1015;

  --kglanz-1: rgba(255, 255, 255, 0.95);
  --kglanz-2: rgba(255, 255, 255, 0.4);
  --kglanz-kante: rgba(255, 255, 255, 0.95);
  --kglanz-ring: rgba(255, 255, 255, 0.55);
  --kglanz-schein: rgba(255, 255, 255, 0.8);

  --gew-normal: 400;
  --gew-mittel: 500;
  --gew-halbfett: 600;
  --gew-fett: 700;
  --gew-schwarz: 900;

  --font: MavenPro, "Maven Pro", Helvetica, Arial, sans-serif;
  --h1-weight: 500;

  --breite: 1114px;

  --kopfhoehe: 81px;
  --rand: clamp(24px, 4vw, 56px);
  --radius: 24px;
  --radius-pille: 50px;

  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5: 40px;  --s6: 48px;  --s7: 56px;  --s8: 64px;
  --s9: 72px;  --s10: 80px;

  --sektion: clamp(64px, 10vw, 160px);
  --sektion-eng: clamp(40px, 5vw, 64px);
}

html[data-mode="dark"] {
  --fl: #0d1015;
  --fl-2: #15191f;
  --fl-inv: #f4f5f5;

  --tinte: #f0f1f2;
  --tinte-2: #9aa0a6;
  --tinte-inv: #14171b;
  --tinte-inv-2: #5b6169;

  --linie: #272c33;
  --linie-inv: #dcdee0;
  --linie-stark: #636a72;

  --akzent: #31b9b5;
  --akzent-tinte: #31b9b5;

  --morph-hell: #3dd3ce;
  --morph-tief: #31b9b5;
  --auf-akzent: #0d1015;
  --fokus: #31b9b5;

  --diag-neutral: #6b747d;
  --diag-linie: #333a42;
  --diag-ab: #ff6d5e;
  --punktmuster: color-mix(in srgb, var(--tinte) 14%, transparent);

  --aurora-umkehr: none;

  --chip-glanz-flaeche: linear-gradient(168deg,
                          rgba(255, 255, 255, 0.14) 0%,
                          rgba(255, 255, 255, 0.05) 46%,
                          transparent 74%);
  --chip-rand: color-mix(in srgb, var(--akzent) 30%, var(--linie));
  --chip-kante: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --chip-tinte: var(--tinte-2);

  --chip-fuellung: rgba(255, 255, 255, 0.07);
  --chip-saum:
    inset 0 1px 1px rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 10px 0 rgba(255, 255, 255, 0.05),
    inset 0 -6px 10px -10px rgba(0, 0, 0, 0.35);
  --chip-schwebe:
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 6px 14px -8px rgba(0, 0, 0, 0.5);

  --chip-lichtkante: linear-gradient(163deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.16) 26%,
    rgba(255, 255, 255, 0.05) 52%,
    rgba(255, 255, 255, 0.3) 78%,
    rgba(255, 255, 255, 0.52) 100%);

  --chip-halo: 0 0 20px -6px rgba(255, 255, 255, 0.16);
  --chip-kantenbreite: 1px;
  --chip-schatten: 0 6px 16px -10px rgba(0, 0, 0, 0.6);
  --chip-svg-oben: #1d232b;
  --chip-svg-unten: #14181e;
  --chip-svg-schatten: #000000;

  --kglanz-1: rgba(255, 255, 255, 0.28);
  --kglanz-2: rgba(255, 255, 255, 0.1);
  --kglanz-kante: rgba(255, 255, 255, 0.38);
  --kglanz-ring: rgba(255, 255, 255, 0.18);
  --kglanz-schein: rgba(255, 255, 255, 0.28);

  --glas-flaeche: linear-gradient(155deg,
                    color-mix(in srgb, var(--akzent) 18%, transparent) 0%,
                    color-mix(in srgb, var(--akzent) 5%, transparent) 45%,
                    transparent 80%);
  --glas-rand: color-mix(in srgb, var(--akzent) 30%, var(--linie));
  --glas-glanz: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  --glas-schatten: 0 20px 44px -24px rgba(0, 0, 0, 0.6);
  --glas-schatten-hoch: 0 28px 56px -22px rgba(0, 0, 0, 0.7);

  --schatten-ton: #000000;
  --glaskarte-lagen:
    inset 0 0 0 1px color-mix(in srgb, var(--tinte) 12%, transparent),
    0 3px 6px -3px rgba(0, 0, 0, 0.45),
    0 18px 34px -20px rgba(0, 0, 0, 0.8);
}