/* [next]/internal/font/google/geist_a71539c9.module.css [app-client] (css) */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/fef07dbb0973bf53-s.3p2_lha1f2xer.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/8a480f0b521d4e75-s.1qq4vpdcun5oj.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/53b9e256198e5412-s.390ncx5urfkfu.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/7178b3e590c64307-s.21jp631_3pja2.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Fallback;
  src: local(Arial);
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0.0%;
  size-adjust: 104.76%;
}

.geist_a71539c9-module__T19VSG__className {
  font-family: Geist, Geist Fallback;
  font-style: normal;
}

.geist_a71539c9-module__T19VSG__variable {
  --font-geist-sans: "Geist", "Geist Fallback";
}

/* [next]/internal/font/google/geist_mono_8d43a2aa.module.css [app-client] (css) */
@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/5ce348bf30bf5439-s.31988l_ccedte.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/4fa387ec64143e14-s.2tuy5pz7dlieh.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/6306c77e7c8268e4-s.2dbetqa9o8jxf.woff2") format("woff2");
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/7d817b4c03b0c5f1-s.1uyisp29ctx0d.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/bbc41e54d2fcbd21-s.1rgnod-3esatf.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/797e433ab948586e-s.p.0r6juujl39pe6.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Geist Mono Fallback;
  src: local(Arial);
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%;
}

.geist_mono_8d43a2aa-module__8Li5zG__className {
  font-family: Geist Mono, Geist Mono Fallback;
  font-style: normal;
}

.geist_mono_8d43a2aa-module__8Li5zG__variable {
  --font-geist-mono: "Geist Mono", "Geist Mono Fallback";
}

/* [project]/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: var(--font-geist-sans);
    --font-mono: var(--font-geist-mono);
    --color-neutral-600: #525252;
    --color-white: #fff;
    --spacing: .25rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-tight: -.025em;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
    --blur-sm: 8px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-grund-1000: #03060f;
    --color-grund-900: #060a16;
    --color-grund-800: #0a1020;
    --color-grund-700: #10182b;
    --color-grund-600: #1a2439;
    --color-grund-500: #273449;
    --color-signal-300: #7db3ff;
    --color-signal-400: #4f9dff;
    --color-signal-500: #2b80ff;
    --color-signal-600: #1663e6;
    --color-signal-700: #0e4bb8;
    --color-text-1: #e9eff9;
    --color-text-2: #a4b3c9;
    --color-text-3: #6b7c94;
    --color-agent-punkt: #8cafe2;
    --color-agent-kante: #a8c9ff;
    --color-agent-tief: #0b1220;
    --text-titel: clamp(2.25rem, 7.4vw, 4.5rem);
    --text-titel--line-height: 1.02;
    --text-titel--letter-spacing: -.035em;
    --text-abschnitt: clamp(2rem, 4.5vw, 3.25rem);
    --text-abschnitt--line-height: 1.08;
    --text-abschnitt--letter-spacing: -.03em;
    --text-vorspann: clamp(1.0625rem, 1.6vw, 1.3125rem);
    --text-vorspann--line-height: 1.55;
    --text-vorspann--letter-spacing: -.011em;
    --text-fliess: 1rem;
    --text-fliess--line-height: 1.65;
    --text-klein: .875rem;
    --text-klein--line-height: 1.5;
    --text-marke: .75rem;
    --text-marke--line-height: 1;
    --text-marke--letter-spacing: .09em;
    --ease-ruhig: cubic-bezier(.22, 1, .36, 1);
    --ease-weit: cubic-bezier(.33, 1, .68, 1);
    --ease-wechsel: cubic-bezier(.25, 1, .5, 1);
    --ease-raus: cubic-bezier(0, 0, .5, 1);
  }

  @supports (color: lab(0% 0 0)) {
    :root, :host {
      --color-neutral-600: lab(34.924% 0 0);
    }
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  html {
    background-color: var(--color-grund-1000);
  }

  body {
    background-color: var(--color-grund-1000);
    color: var(--color-text-2);
    font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background-color: var(--color-signal-500);
    color: #fff;
  }

  :focus-visible {
    outline: 2px solid var(--color-signal-400);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: 0;
  }

  .inset-x-0 {
    inset-inline: 0;
  }

  .top-0 {
    top: 0;
  }

  .bottom-0 {
    bottom: 0;
  }

  .isolate {
    isolation: isolate;
  }

  .z-50 {
    z-index: 50;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-16 {
    margin-top: calc(var(--spacing) * 16);
  }

  .mt-\[clamp\(0\.5rem\,1\.5vh\,1\.15rem\)\] {
    margin-top: clamp(.5rem, 1.5vh, 1.15rem);
  }

  .mt-\[clamp\(1\.25rem\,3\.2vh\,2\.5rem\)\] {
    margin-top: clamp(1.25rem, 3.2vh, 2.5rem);
  }

  .mt-\[clamp\(1rem\,2\.4vh\,2rem\)\] {
    margin-top: clamp(1rem, 2.4vh, 2rem);
  }

  .mt-\[clamp\(1rem\,2\.5vh\,1\.75rem\)\] {
    margin-top: clamp(1rem, 2.5vh, 1.75rem);
  }

  .mt-\[clamp\(1rem\,3vh\,2\.5rem\)\] {
    margin-top: clamp(1rem, 3vh, 2.5rem);
  }

  .mr-2\.5 {
    margin-right: calc(var(--spacing) * 2.5);
  }

  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }

  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-\[2px\] {
    height: 2px;
  }

  .h-\[100lvh\] {
    height: 100lvh;
  }

  .h-\[var\(--kopf-hoehe\)\] {
    height: var(--kopf-hoehe);
  }

  .h-full {
    height: 100%;
  }

  .min-h-\[100svh\] {
    min-height: 100svh;
  }

  .min-h-full {
    min-height: 100%;
  }

  .w-full {
    width: 100%;
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-\[42rem\] {
    max-width: 42rem;
  }

  .max-w-\[620px\] {
    max-width: 620px;
  }

  .max-w-full {
    max-width: 100%;
  }

  .flex-1 {
    flex: 1;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-ping {
    animation: var(--animate-ping);
  }

  .resize {
    resize: both;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-items-center {
    place-items: center;
  }

  .items-center {
    align-items: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .overflow-clip {
    overflow: clip;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-grund-500 {
    border-color: var(--color-grund-500);
  }

  .border-grund-500\/70 {
    border-color: #273449b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-grund-500\/70 {
      border-color: color-mix(in oklab, var(--color-grund-500) 70%, transparent);
    }
  }

  .border-grund-600 {
    border-color: var(--color-grund-600);
  }

  .bg-grund-700 {
    background-color: var(--color-grund-700);
  }

  .bg-grund-800\/70 {
    background-color: #0a1020b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-grund-800\/70 {
      background-color: color-mix(in oklab, var(--color-grund-800) 70%, transparent);
    }
  }

  .bg-grund-900 {
    background-color: var(--color-grund-900);
  }

  .bg-grund-1000 {
    background-color: var(--color-grund-1000);
  }

  .bg-signal-500 {
    background-color: var(--color-signal-500);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-32 {
    padding-block: calc(var(--spacing) * 32);
  }

  .text-center {
    text-align: center;
  }

  .align-middle {
    vertical-align: middle;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .text-abschnitt {
    font-size: var(--text-abschnitt);
    line-height: var(--tw-leading, var(--text-abschnitt--line-height));
    letter-spacing: var(--tw-tracking, var(--text-abschnitt--letter-spacing));
  }

  .text-titel {
    font-size: var(--text-titel);
    line-height: var(--tw-leading, var(--text-titel--line-height));
    letter-spacing: var(--tw-tracking, var(--text-titel--letter-spacing));
  }

  .text-vorspann {
    font-size: var(--text-vorspann);
    line-height: var(--tw-leading, var(--text-vorspann--line-height));
    letter-spacing: var(--tw-tracking, var(--text-vorspann--letter-spacing));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-fliess {
    font-size: var(--text-fliess);
    line-height: var(--tw-leading, var(--text-fliess--line-height));
  }

  .text-klein {
    font-size: var(--text-klein);
    line-height: var(--tw-leading, var(--text-klein--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-\[0\.7rem\] {
    font-size: .7rem;
  }

  .text-\[0\.6875rem\] {
    font-size: .6875rem;
  }

  .text-\[0\.8125rem\] {
    font-size: .8125rem;
  }

  .text-\[1\.6375rem\] {
    font-size: 1.6375rem;
  }

  .leading-\[1\.55\] {
    --tw-leading: 1.55;
    line-height: 1.55;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[0\.04em\] {
    --tw-tracking: .04em;
    letter-spacing: .04em;
  }

  .tracking-\[0\.07em\] {
    --tw-tracking: .07em;
    letter-spacing: .07em;
  }

  .tracking-\[0\.15em\] {
    --tw-tracking: .15em;
    letter-spacing: .15em;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-wrap {
    text-wrap: wrap;
  }

  .text-neutral-600 {
    color: var(--color-neutral-600);
  }

  .text-signal-400 {
    color: var(--color-signal-400);
  }

  .text-signal-500 {
    color: var(--color-signal-500);
  }

  .text-text-1 {
    color: var(--color-text-1);
  }

  .text-text-2 {
    color: var(--color-text-2);
  }

  .text-text-3 {
    color: var(--color-text-3);
  }

  .text-white {
    color: var(--color-white);
  }

  .uppercase {
    text-transform: uppercase;
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .opacity-75 {
    opacity: .75;
  }

  .shadow-\[0_1px_0_0_rgb\(255_255_255\/0\.16\)_inset\,0_10px_34px_-10px_rgb\(43_128_255\/0\.7\)\] {
    --tw-shadow: 0 1px 0 0 var(--tw-shadow-color, #ffffff29) inset, 0 10px 34px -10px var(--tw-shadow-color, #2b80ffb3);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,background-color\,border-color\,box-shadow\] {
    transition-property: color, background-color, border-color, box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[color\,background-color\,border-color\] {
    transition-property: color, background-color, border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .ease-ruhig {
    --tw-ease: var(--ease-ruhig);
    transition-timing-function: var(--ease-ruhig);
  }

  @media (hover: hover) {
    .hover\:border-grund-500\/0:hover {
      border-color: #0000;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-grund-500\/0:hover {
        border-color: color-mix(in oklab, var(--color-grund-500) 0%, transparent);
      }
    }

    .hover\:border-signal-500:hover {
      border-color: var(--color-signal-500);
    }

    .hover\:bg-grund-600:hover {
      background-color: var(--color-grund-600);
    }

    .hover\:bg-grund-700:hover {
      background-color: var(--color-grund-700);
    }

    .hover\:bg-signal-400:hover {
      background-color: var(--color-signal-400);
    }

    .hover\:text-text-1:hover {
      color: var(--color-text-1);
    }

    .hover\:shadow-\[0_1px_0_0_rgb\(255_255_255\/0\.16\)_inset\,0_12px_40px_-10px_rgb\(43_128_255\/0\.85\)\]:hover {
      --tw-shadow: 0 1px 0 0 var(--tw-shadow-color, #ffffff29) inset, 0 12px 40px -10px var(--tw-shadow-color, #2b80ffd9);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .focus\:not-sr-only:focus {
    clip-path: none;
    white-space: normal;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    position: static;
    overflow: visible;
  }

  .focus\:absolute:focus {
    position: absolute;
  }

  .focus\:top-1\/2:focus {
    top: 50%;
  }

  .focus\:left-6:focus {
    left: calc(var(--spacing) * 6);
  }

  .focus\:z-10:focus {
    z-index: 10;
  }

  .focus\:-translate-y-1\/2:focus {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .focus\:rounded-full:focus {
    border-radius: 3.40282e38px;
  }

  .focus\:bg-grund-700:focus {
    background-color: var(--color-grund-700);
  }

  .focus\:px-4:focus {
    padding-inline: calc(var(--spacing) * 4);
  }

  .focus\:py-2:focus {
    padding-block: calc(var(--spacing) * 2);
  }

  .focus\:text-klein:focus {
    font-size: var(--text-klein);
    line-height: var(--tw-leading, var(--text-klein--line-height));
  }

  .focus\:text-text-1:focus {
    color: var(--color-text-1);
  }

  .active\:bg-signal-600:active {
    background-color: var(--color-signal-600);
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:animate-none {
      animation: none;
    }
  }

  @media (min-width: 481px) {
    .min-\[481px\]\:block {
      display: block;
    }
  }

  @media (min-width: 40rem) {
    .sm\:w-auto {
      width: auto;
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .sm\:gap-x-6 {
      column-gap: calc(var(--spacing) * 6);
    }

    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .sm\:text-marke {
      font-size: var(--text-marke);
      line-height: var(--tw-leading, var(--text-marke--line-height));
      letter-spacing: var(--tw-tracking, var(--text-marke--letter-spacing));
    }

    .sm\:text-klein {
      font-size: var(--text-klein);
      line-height: var(--tw-leading, var(--text-klein--line-height));
    }

    .sm\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }

    .sm\:tracking-\[0\.085em\] {
      --tw-tracking: .085em;
      letter-spacing: .085em;
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:max-w-5xl {
      max-width: var(--container-5xl);
    }

    .\32 xl\:max-w-\[48rem\] {
      max-width: 48rem;
    }
  }
}

:root {
  --schein-farbe: 43 128 255;
  --schein-kraft: .3;
  --einblenden-weg: 30px;
  --einblenden-deckkraft-dauer: .9s;
  --einblenden-bewegung-dauer: .7s;
  --einblenden-versatz: .15s;
  --kopf-hoehe: 3.5rem;
}

@media (min-width: 640px) {
  :root {
    --kopf-hoehe: 4.25rem;
  }
}

.unter-kopf {
  padding-top: var(--kopf-hoehe);
}

.kopf-grund {
  z-index: -1;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--color-grund-600);
  background-color: #03060fb8;
  position: absolute;
  inset: 0;
}

@keyframes kopf-grund {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@supports (animation-timeline: scroll()) {
  .kopf-grund {
    animation: linear both kopf-grund;
    animation-timeline: scroll(root);
    animation-range: 0px calc(var(--kopf-hoehe) * 2);
  }
}

.kopf-fortschritt {
  transform-origin: 0;
  will-change: transform;
  transform: scaleX(0);
}

@keyframes kopf-fortschritt {
  to {
    transform: scaleX(1);
  }
}

@supports (animation-timeline: scroll()) {
  .kopf-fortschritt {
    animation: linear both kopf-fortschritt;
    animation-timeline: scroll(root);
  }
}

html[data-rastung] .kopf-fortschritt {
  transform: scaleX(var(--fortschritt, 0));
  animation: none;
}

.marke-ring {
  transform-box: view-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes marke-kreisen {
    to {
      transform: rotate(1turn);
    }
  }

  .marke:hover .marke-ring, .marke:focus-visible .marke-ring {
    animation: 6s linear infinite marke-kreisen;
  }
}

@keyframes auftritt-deckkraft {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes auftritt-hoch {
  from {
    transform: translateY(var(--einblenden-weg));
  }

  to {
    transform: translateY(0);
  }
}

.auftritt {
  --i: 0;
  animation: auftritt-deckkraft var(--einblenden-deckkraft-dauer) var(--ease-ruhig) both,
    auftritt-hoch var(--einblenden-bewegung-dauer) var(--ease-ruhig) both;
  animation-delay: calc(var(--i) * var(--einblenden-versatz));
}

@keyframes auftritt-gehirn {
  from {
    opacity: 0;
    transform: scale(.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.auftritt-gehirn {
  --i: 0;
  animation: auftritt-gehirn 1.2s var(--ease-ruhig) both;
  animation-delay: calc(var(--i) * var(--einblenden-versatz));
}

@media (prefers-reduced-motion: reduce) {
  .auftritt, .auftritt-gehirn {
    animation: none;
  }
}

@keyframes enthuellen {
  from {
    opacity: 0;
    transform: translateY(var(--einblenden-weg));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .enthuellen {
      animation: linear both enthuellen;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }

    .enthuellen-reihe > * {
      --i: 0;
      animation: linear both enthuellen;
      animation-timeline: view();
      animation-range: entry calc(10% + var(--i) * 4%)
        cover calc(35% + var(--i) * 4%);
    }
  }
}

.gehirn {
  --gehirn-breite: clamp(140px, min(15vw, 23vh), 215px);
  --gehirn-wach: .3;
  width: var(--gehirn-breite);
  height: auto;
  overflow: visible;
}

.gehirn-knoten {
  opacity: var(--gehirn-wach);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes knoten-puls {
    0%, 100% {
      opacity: var(--gehirn-wach);
    }

    50% {
      opacity: calc(var(--gehirn-wach) * 2.8);
    }
  }

  .gehirn-knoten--puls {
    animation: knoten-puls 3.4s var(--ease-wechsel) infinite;
    animation-delay: calc(var(--p, 0) * 1.1s);
  }
}

.schein {
  background: radial-gradient(circle at center,
    rgb(var(--schein-farbe) / var(--schein-kraft)) 0%,
    rgb(var(--schein-farbe) / calc(var(--schein-kraft) * .35)) 35%,
    transparent 68%);
}

.buehne-licht, .buehne-raster, .buehne-vignette, .buehne-korn {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.buehne-licht {
  z-index: -40;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#0000 0%, #000 15% 85%, #0000 100%);
  mask-image: linear-gradient(#0000 0%, #000 15% 85%, #0000 100%);
}

.buehne-licht:before, .buehne-licht:after {
  content: "";
  border-radius: 50%;
  position: absolute;
}

.buehne-licht:before {
  aspect-ratio: 1.35;
  background: radial-gradient(circle at center,
    rgb(var(--schein-farbe) / .17) 0%,
    rgb(var(--schein-farbe) / .055) 40%,
    transparent 68%);
  width: min(1250px, 145vw);
  transform: translate(-50%, 0) translate(calc(var(--zeiger-x, 0) * 26px), calc(var(--zeiger-y, 0) * 16px));
  top: -22%;
  left: 50%;
}

.buehne-licht:after {
  aspect-ratio: 1.1;
  background: radial-gradient(circle at center,
    rgb(var(--schein-farbe) / .09) 0%,
    transparent 68%);
  width: min(760px, 90vw);
  transform: translate(calc(var(--zeiger-x, 0) * -34px), calc(var(--zeiger-y, 0) * -18px));
  bottom: -30%;
  left: 8%;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes buehne-driften {
    0%, 100% {
      translate: 0;
      scale: 1;
    }

    50% {
      translate: 3% -2%;
      scale: 1.08;
    }
  }

  .buehne-licht:before {
    animation: buehne-driften 26s var(--ease-wechsel) infinite;
  }

  .buehne-licht:after {
    animation: buehne-driften 34s var(--ease-wechsel) infinite reverse;
  }
}

.buehne-raster {
  z-index: -30;
  transform: translate(calc(var(--zeiger-x, 0) * 9px), calc(var(--zeiger-y, 0) * 6px));
  background-image: radial-gradient(circle, #aec8f017 1px, #0000 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(62% 52% at 50% 30%, #000 20%, #0000 76%);
  mask-image: radial-gradient(62% 52% at 50% 30%, #000 20%, #0000 76%);
}

.buehne-vignette {
  z-index: -15;
  background: radial-gradient(ellipse 74% 58% at 50% 30%,
      transparent 26%,
      #03060f80 68%,
      #03060fd9 100%),
    linear-gradient(to bottom, transparent 60%, var(--color-grund-1000) 100%);
}

.buehne-korn {
  z-index: -10;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23k)'/%3E%3C/svg%3E");
}

.agent-halter {
  --agent-hoehe: clamp(172px, min(32vh, 50vw), 340px);
  height: var(--agent-hoehe);
  width: calc(var(--agent-hoehe) * 1.181);
  position: relative;
}

.agent {
  --breite: calc(var(--agent-hoehe) * 3.226);
  z-index: -20;
  width: var(--breite);
  pointer-events: none;
  height: auto;
  transform: translate(calc(-50% + var(--zeiger-x, 0) * 15px),
      calc(-50% + var(--breite) * .053 + var(--zeiger-y, 0) * 10px))
    perspective(1400px)
    rotateY(calc(var(--zeiger-x, 0) * 3.4deg))
    rotateX(calc(var(--zeiger-y, 0) * -2.6deg));
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: visible;
}

.agent-kante-schein {
  filter: blur(5px);
  opacity: .6;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes agent-bahn-zeichnen {
    from {
      stroke-dashoffset: 1px;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  .agent-bahn {
    stroke-dasharray: 1;
    animation: agent-bahn-zeichnen 2.2s var(--ease-weit) both;
  }

  .agent-bahnen > g:first-child .agent-bahn {
    animation-delay: .2s;
  }

  .agent-bahnen > g:nth-child(2) .agent-bahn {
    animation-delay: .42s;
  }

  .agent-bahnen > g:nth-child(3) .agent-bahn {
    animation-delay: .64s;
  }

  @keyframes agent-kreisen {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes agent-auftauchen {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .agent-kreisen, .agent-kreisen-gegen {
    transform-box: view-box;
    transform-origin: 500px 200px;
    animation: agent-kreisen var(--dauer, 60s) linear infinite,
      agent-auftauchen 1.4s var(--ease-ruhig) 1.6s both;
  }

  .agent-kreisen-gegen {
    animation-direction: reverse, normal;
  }

  @keyframes agent-lauf {
    from {
      stroke-dashoffset: calc(var(--versatz, 0));
    }

    to {
      stroke-dashoffset: calc(var(--versatz, 0) - 1);
    }
  }

  .agent-lauf {
    animation: agent-lauf var(--dauer, 30s) linear infinite,
      agent-auftauchen 1.4s var(--ease-ruhig) 1.7s both;
  }

  .agent-lauf-gegen {
    animation-direction: reverse, normal;
  }

  @keyframes agent-halo {
    0%, 100% {
      opacity: .82;
      scale: 1;
    }

    50% {
      opacity: 1;
      scale: 1.055;
    }
  }

  .agent-halo {
    transform-box: view-box;
    transform-origin: 500px 196px;
    animation: agent-halo 9s var(--ease-wechsel) infinite;
  }

  @keyframes agent-buste-auftritt {
    from {
      opacity: 0;
      scale: .94;
    }

    to {
      opacity: 1;
      scale: 1;
    }
  }

  .agent-buste {
    transform-box: view-box;
    transform-origin: 500px 250px;
    animation: agent-buste-auftritt 1.5s var(--ease-ruhig) .3s both;
  }

  @keyframes agent-punkt-wach {
    0%, 100% {
      opacity: .3;
    }

    50% {
      opacity: 1;
    }
  }

  .agent-punkt-wach {
    opacity: .3;
    animation: agent-punkt-wach 3.8s var(--ease-wechsel) infinite;
    animation-delay: calc(var(--p, 0) * 1s);
  }

  @keyframes agent-sockel {
    to {
      transform: rotate(1turn);
    }
  }

  .agent-sockel {
    transform-box: view-box;
    transform-origin: 500px 194px;
    animation: 26s linear infinite agent-sockel;
  }

  @keyframes agent-streifen {
    0% {
      opacity: 0;
      transform: translateY(46px);
    }

    7% {
      opacity: .85;
    }

    44% {
      opacity: .85;
    }

    55%, 100% {
      opacity: 0;
      transform: translateY(486px);
    }
  }

  .agent-streifen {
    transform-box: view-box;
    animation: agent-streifen 9s var(--ease-wechsel) 2.6s infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-punkt-wach {
    opacity: .75;
  }

  .agent-streifen {
    opacity: 0;
  }
}

.hero-buehne {
  padding-top: calc(var(--kopf-hoehe) + clamp(.25rem, 1.5vh, 1rem));
  padding-bottom: clamp(.75rem, 2.5vh, 1.75rem);
}

.hero-cursor {
  background-color: var(--color-signal-500);
  width: .5em;
  height: 1em;
  display: inline-block;
  translate: 0 .13em;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-cursor {
    0%, 46% {
      opacity: 1;
    }

    54%, 100% {
      opacity: 0;
    }
  }

  .hero-cursor {
    animation: 1.15s step-end infinite hero-cursor;
  }
}

@keyframes hero-raus {
  to {
    opacity: 0;
    transform: translateY(-52px)scale(.972);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-raus {
      animation: linear both hero-raus;
      animation-timeline: view();
      animation-range: exit exit 72%;
    }
  }
}

.auftritt-agent {
  --i: 0;
  animation: auftritt-deckkraft 1.1s var(--ease-ruhig) both;
  animation-delay: calc(var(--i) * var(--einblenden-versatz));
}

@media (prefers-reduced-motion: reduce) {
  .auftritt-agent {
    animation: none;
  }
}

.titel-verlauf {
  color: var(--color-text-1);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .titel-verlauf {
    background: linear-gradient(180deg,
      #fff 14%,
      var(--color-text-1) 58%,
      #cfe0f5 100%);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.agent-platzhalter {
  opacity: .2;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes agent-platzhalter {
    0%, 100% {
      opacity: .13;
    }

    50% {
      opacity: .3;
    }
  }

  .agent-platzhalter {
    animation: agent-platzhalter 5.5s var(--ease-wechsel) infinite;
  }
}

.agent-innenlicht {
  opacity: .5;
  filter: blur(9px);
}

@media (min-width: 640px) and (max-height: 820px) {
  :root {
    --text-titel: clamp(2.25rem, 4.6vw, 3.5rem);
    --text-vorspann: clamp(1rem, 1.3vw, 1.1875rem);
  }

  .agent-halter {
    --agent-hoehe: clamp(150px, 27vh, 232px);
  }
}

@media (max-width: 480px) {
  :root {
    --text-titel: clamp(2rem, 8.4vw, 2.5rem);
    --text-vorspann: 1rem;
  }

  .agent-halter {
    --agent-hoehe: min(20vh, 52vw);
  }

  .hero-buehne {
    padding-top: calc(var(--kopf-hoehe) + .25rem);
    padding-bottom: .5rem;
  }
}

.hero-status {
  --sperrung: .02em;
  letter-spacing: var(--sperrung);
}

.hero-tippen {
  --zeichen: 28;
  white-space: nowrap;
  vertical-align: bottom;
  display: inline-block;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-tippen {
    from {
      width: 0;
    }

    to {
      width: calc(var(--zeichen) * 1ch + var(--zeichen) * var(--sperrung, 0em));
    }
  }

  .hero-tippen {
    animation: hero-tippen 1.5s steps(var(--zeichen), end) .85s both;
  }

  @keyframes agent-schweben {
    0%, 100% {
      translate: 0;
    }

    50% {
      translate: 0 -13px;
    }
  }

  .agent-buste {
    animation: agent-buste-auftritt 1.5s var(--ease-ruhig) .3s both,
      agent-schweben 9.5s var(--ease-wechsel) 1.5s infinite;
  }
}

.agent-staub circle {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes agent-staub {
    0% {
      opacity: 0;
      translate: 0;
    }

    18% {
      opacity: var(--kraft, .3);
    }

    68% {
      opacity: var(--kraft, .3);
    }

    100% {
      opacity: 0;
      translate: 0 -104px;
    }
  }

  .agent-staub circle {
    transform-box: view-box;
    animation: agent-staub var(--dauer, 16s) linear infinite;
    animation-delay: calc(var(--v, 0) * -1s);
  }
}

@media (min-width: 1600px) and (min-height: 1000px) {
  :root {
    --text-titel: clamp(4.5rem, 4.4vw, 5.5rem);
    --text-vorspann: clamp(1.3125rem, 1.1vw, 1.4375rem);
  }

  .agent-halter {
    --agent-hoehe: min(30vh, 428px);
  }
}

.einzug-spur {
  min-height: 100svh;
  position: relative;
}

.einzug-buehne {
  min-height: 100svh;
  padding-top: calc(var(--kopf-hoehe) + clamp(.5rem, 2vh, 2rem));
  align-items: center;
  padding-bottom: clamp(.75rem, 3vh, 3.5rem);
  display: flex;
  position: relative;
}

.einzug-schleier {
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 44% 56% at 28% 52%,
    rgb(var(--schein-farbe) / .14) 0%,
    rgb(var(--schein-farbe) / .035) 46%,
    transparent 74%);
  position: absolute;
  inset: 0;
}

.einzug-raster {
  z-index: 1;
  align-items: center;
  gap: clamp(.9rem, 2.4vh, 2.5rem);
  display: grid;
  position: relative;
}

.einzug-bild {
  translate: calc(var(--zeiger-x, 0) * 7px) calc(var(--zeiger-y, 0) * 5px);
  justify-content: center;
  display: flex;
}

.einzug-kopf {
  width: min(15rem, 48vw);
  height: auto;
  display: block;
  overflow: visible;
}

.einzug-titel {
  text-wrap: balance;
  max-width: 15ch;
}

.einzug-vorspann {
  max-width: 33rem;
  margin-top: clamp(.6rem, 1.5vh, 1.15rem);
}

.einzug-liste {
  gap: clamp(.6rem, 1.7vh, 1.3rem);
  max-width: 33rem;
  margin-top: clamp(.9rem, 2.4vh, 2.1rem);
  display: grid;
}

.einzug-punkt {
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: baseline;
  row-gap: .2rem;
  display: grid;
}

.einzug-marker {
  background: var(--color-signal-400);
  width: .4375rem;
  height: .4375rem;
  box-shadow: 0 0 0 .3rem rgb(var(--schein-farbe) / .12);
  border-radius: 50%;
  grid-area: 1 / 1;
  margin-top: .5rem;
  display: block;
  position: relative;
}

.einzug-satz {
  color: var(--color-text-1);
  grid-area: 1 / 2;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
}

.einzug-dazu {
  color: var(--color-text-3);
  grid-area: 2 / 2;
  font-size: .9375rem;
  line-height: 1.55;
}

.einzug-schluss {
  border-top: 1px solid var(--color-grund-600);
  max-width: 33rem;
  color: var(--color-text-3);
  margin-top: clamp(.8rem, 2.2vh, 1.9rem);
  padding-top: clamp(.6rem, 1.6vh, 1.15rem);
  font-size: .9375rem;
  line-height: 1.6;
}

.einzug-knoten-schein {
  transform-box: fill-box;
  transform-origin: center;
}

@media (min-width: 640px) {
  .einzug-kopf {
    width: min(21rem, 46vw);
  }
}

@media (min-width: 900px) {
  .einzug-raster {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(1.5rem, 4vw, 3.75rem);
  }

  .einzug-kopf {
    width: min(38rem, 46vw);
  }
}

@media (min-width: 1400px) {
  .einzug-kopf {
    width: 41rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes einzug-flug {
    0% {
      opacity: 0;
      translate: 104px -136px;
      scale: .34;
    }

    24% {
      opacity: 1;
    }

    74% {
      opacity: 1;
      translate: 0;
      scale: 1.09;
    }

    100% {
      opacity: 1;
      translate: 0;
      scale: 1;
    }
  }

  @keyframes einzug-ring {
    0% {
      opacity: 0;
      scale: .96;
    }

    30% {
      opacity: .85;
    }

    100% {
      opacity: 0;
      scale: 1.28;
    }
  }

  @keyframes einzug-weg {
    to {
      opacity: 0;
    }
  }

  @keyframes einzug-hoehle-an {
    from {
      opacity: .28;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes einzug-knoten-an {
    0% {
      opacity: 0;
      scale: .3;
    }

    58% {
      opacity: 1;
      scale: 1.3;
    }

    100% {
      opacity: 1;
      scale: 1;
    }
  }

  @keyframes einzug-knoten-puls {
    0%, 100% {
      opacity: .5;
      scale: .9;
    }

    50% {
      opacity: 1;
      scale: 1.12;
    }
  }

  @keyframes einzug-von-rechts {
    from {
      opacity: 0;
      filter: blur(7px);
      translate: 72px;
    }

    to {
      opacity: 1;
      filter: blur();
      translate: 0;
    }
  }

  @keyframes einzug-von-unten {
    from {
      opacity: 0;
      translate: 0 26px;
    }

    to {
      opacity: 1;
      translate: 0;
    }
  }

  .bereit .einzug-titel, .bereit .einzug-vorspann, .bereit .einzug-punkt, .bereit .einzug-schluss, .bereit .einzug-gehirn, .bereit .einzug-knoten, .bereit .einzug-ring {
    opacity: 0;
  }

  .bereit .einzug-schein {
    opacity: .28;
  }

  .bereit.laeuft .einzug-gehirn {
    transform-box: view-box;
    transform-origin: 500px 194px;
    animation: .94s cubic-bezier(.22, .86, .3, 1) .14s both einzug-flug;
  }

  .bereit.laeuft .einzug-platzhalter {
    animation: .26s linear .82s both einzug-weg;
  }

  .bereit.laeuft .einzug-ring {
    transform-box: view-box;
    transform-origin: 500px 194px;
    animation: einzug-ring .76s var(--ease-ruhig) .9s both;
  }

  .bereit.laeuft .einzug-schein {
    animation: einzug-hoehle-an .9s var(--ease-ruhig) .9s both;
  }

  .bereit.laeuft .einzug-knoten {
    transform-box: fill-box;
    transform-origin: center;
    animation: einzug-knoten-an .62s var(--ease-ruhig) both;
    animation-delay: calc(1s + var(--k) * .14s);
  }

  .bereit.laeuft .einzug-knoten-schein {
    animation: 3.6s ease-in-out infinite einzug-knoten-puls;
    animation-delay: calc(1.6s + var(--k) * .42s);
  }

  .bereit.laeuft .einzug-titel {
    animation: einzug-von-rechts .82s var(--ease-wechsel) .34s both;
  }

  .bereit.laeuft .einzug-vorspann {
    animation: einzug-von-unten .62s var(--ease-ruhig) .64s both;
  }

  .bereit.laeuft .einzug-punkt {
    animation: einzug-von-unten .58s var(--ease-ruhig) both;
    animation-delay: calc(.92s + var(--k) * .14s);
  }

  .bereit.laeuft .einzug-schluss {
    animation: einzug-von-unten .56s var(--ease-ruhig) 1.42s both;
  }

  @keyframes einzug-flug-raus {
    from {
      opacity: 1;
      translate: 0;
      scale: 1;
    }

    to {
      opacity: 0;
      translate: 104px -136px;
      scale: .34;
    }
  }

  @keyframes einzug-nach-unten {
    from {
      opacity: 1;
      translate: 0;
    }

    to {
      opacity: 0;
      translate: 0 18px;
    }
  }

  @keyframes einzug-nach-rechts {
    from {
      opacity: 1;
      filter: blur();
      translate: 0;
    }

    to {
      opacity: 0;
      filter: blur(6px);
      translate: 52px;
    }
  }

  @keyframes einzug-knoten-aus {
    from {
      opacity: 1;
      scale: 1;
    }

    to {
      opacity: 0;
      scale: .3;
    }
  }

  @keyframes einzug-platzhalter-an {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes einzug-hoehle-aus {
    from {
      opacity: 1;
    }

    to {
      opacity: .28;
    }
  }

  .bereit.zurueck .einzug-schluss {
    animation: einzug-nach-unten .24s var(--ease-raus) both;
  }

  .bereit.zurueck .einzug-punkt {
    animation: einzug-nach-unten .26s var(--ease-raus) both;
    animation-delay: calc(60ms + (2 - var(--k)) * 50ms);
  }

  .bereit.zurueck .einzug-vorspann {
    animation: einzug-nach-unten .26s var(--ease-raus) .12s both;
  }

  .bereit.zurueck .einzug-titel {
    animation: einzug-nach-rechts .3s var(--ease-raus) .17s both;
  }

  .bereit.zurueck .einzug-knoten {
    transform-box: fill-box;
    transform-origin: center;
    animation: einzug-knoten-aus .22s var(--ease-raus) both;
    animation-delay: calc(40ms + (2 - var(--k)) * 40ms);
  }

  .bereit.zurueck .einzug-gehirn {
    transform-box: view-box;
    transform-origin: 500px 194px;
    animation: .46s cubic-bezier(.5, 0, .75, .2) .2s both einzug-flug-raus;
  }

  .bereit.zurueck .einzug-platzhalter {
    animation: .3s linear .48s both einzug-platzhalter-an;
  }

  .bereit.zurueck .einzug-schein {
    animation: einzug-hoehle-aus .42s var(--ease-raus) .2s both;
  }
}

@media (max-width: 899px) {
  .einzug-buehne {
    padding-top: calc(var(--kopf-hoehe) + clamp(.3rem, 1vh, 1.25rem));
    padding-bottom: clamp(.5rem, 1.4vh, 2rem);
  }

  .einzug-kopf {
    width: min(15rem, 48vw, 20vh);
  }

  .einzug-vorspann {
    margin-top: clamp(.45rem, 1.1vh, 1.15rem);
  }

  .einzug-liste {
    gap: clamp(.45rem, 1.2vh, 1.3rem);
    margin-top: clamp(.7rem, 1.8vh, 2.1rem);
  }

  .einzug-schluss {
    margin-top: clamp(.6rem, 1.5vh, 1.9rem);
    padding-top: clamp(.45rem, 1.2vh, 1.15rem);
  }
}

@media (max-width: 899px) and (max-height: 690px) {
  :root {
    --text-abschnitt: 1.75rem;
    --text-vorspann: 1rem;
  }

  .einzug-kopf {
    width: min(15rem, 44vw, 17vh);
  }

  .einzug-satz {
    font-size: 1rem;
  }

  .einzug-dazu {
    font-size: .875rem;
  }

  .agent-halter {
    --agent-hoehe: min(13vh, 38vw);
  }

  .hero-buehne {
    padding-bottom: .35rem;
  }
}

@media (max-width: 560px) and (max-height: 700px) {
  .hero-aufgaben {
    display: none;
  }
}

.speicher-halo {
  transform-box: view-box;
  transform-origin: center;
}

.speicher-kern {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes speicher-atmen {
    0%, 100% {
      opacity: .75;
      transform: scale(1);
    }

    50% {
      opacity: 1;
      transform: scale(1.045);
    }
  }

  @keyframes speicher-puls {
    0%, 100% {
      opacity: .55;
      transform: scale(1);
    }

    50% {
      opacity: 1;
      transform: scale(1.24);
    }
  }

  @keyframes speicher-wandern {
    to {
      stroke-dashoffset: -44px;
    }
  }

  .speicher-halo {
    animation: speicher-atmen 9s var(--ease-wechsel) infinite;
  }

  .speicher-puls {
    transform-box: fill-box;
    transform-origin: center;
    animation: speicher-puls 3.4s var(--ease-wechsel) infinite;
  }

  .speicher-tunnel {
    animation: 2.4s linear infinite speicher-wandern;
  }

  .speicher-kern {
    animation: speicher-atmen 4.2s var(--ease-wechsel) infinite;
  }
}

@keyframes cloud-story-key {
  0%, 10% {
    opacity: 1;
    transform: translateY(0)rotate(0);
  }

  25% {
    opacity: 1;
    transform: translateY(-104px)rotate(0);
  }

  35% {
    opacity: 1;
    transform: translateY(-104px)rotate(90deg);
  }

  45%, 70% {
    opacity: 0;
    transform: translateY(-104px)rotate(90deg);
  }

  80% {
    opacity: 0;
    transform: translateY(20px)rotate(0);
  }

  90%, 100% {
    opacity: 1;
    transform: translateY(0)rotate(0);
  }
}

@keyframes cloud-story-glow {
  0%, 30% {
    opacity: .12;
    transform: scale(1);
  }

  45%, 65% {
    opacity: .5;
    transform: scale(1.12);
  }

  80%, 100% {
    opacity: .12;
    transform: scale(1);
  }
}

@keyframes box-key-top {
  0%, 15% {
    opacity: 1;
    transform: translateY(0);
  }

  35%, 75% {
    opacity: .3;
    transform: translateY(-42px)scale(1.05);
  }

  90%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes box-key-bottom {
  0%, 15% {
    opacity: .75;
    transform: translateY(0)scale(1);
  }

  35%, 75% {
    opacity: 1;
    transform: translateY(24px)scale(1.05);
  }

  90%, 100% {
    opacity: .75;
    transform: translateY(0)scale(1);
  }
}

@keyframes schrank-laser {
  0% {
    stroke-dashoffset: 100px;
    opacity: 0;
  }

  10% {
    stroke-dashoffset: 100px;
    opacity: 1;
  }

  25% {
    stroke-dashoffset: 35px;
    opacity: 1;
  }

  30%, 100% {
    stroke-dashoffset: 35px;
    opacity: 0;
  }
}

@keyframes schrank-shield {
  0%, 15% {
    opacity: 0;
    transform: scale(.95);
  }

  25% {
    opacity: 1;
    transform: scale(1.1);
  }

  45%, 75% {
    opacity: .9;
    transform: scale(1);
  }

  90%, 100% {
    opacity: 0;
    transform: scale(.95);
  }
}

.anim-cloud-key, .anim-cloud-glow {
  transform-origin: center;
}

.anim-cloud-glow {
  fill: var(--color-signal-500);
  opacity: .12;
}

.anim-box-bot {
  stroke: var(--color-signal-400);
}

.anim-schrank-shield {
  stroke: var(--color-signal-300);
}

.anim-schrank-laser {
  stroke-dasharray: 100;
  stroke-dashoffset: 100px;
}

.anim-schrank-shield {
  transform-origin: 160px 106px;
}

@media (prefers-reduced-motion: no-preference) {
  .anim-cloud-key {
    animation: cloud-story-key 7s var(--ease-wechsel) infinite;
  }

  .anim-cloud-glow {
    animation: cloud-story-glow 7s var(--ease-wechsel) infinite;
  }

  .anim-box-top {
    animation: box-key-top 6s var(--ease-wechsel) infinite;
  }

  .anim-box-bot {
    animation: box-key-bottom 6s var(--ease-wechsel) infinite;
  }

  .anim-schrank-laser {
    animation: 5s ease-out infinite schrank-laser;
  }

  .anim-schrank-shield {
    animation: schrank-shield 5s var(--ease-wechsel) infinite;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sicher-bild .anim-cloud-key, .sicher-bild .anim-cloud-glow, .sicher-bild .anim-box-top, .sicher-bild .anim-box-bot, .sicher-bild .anim-schrank-laser, .sicher-bild .anim-schrank-shield {
      animation-duration: auto;
      animation-timing-function: linear;
      animation-iteration-count: 1;
      animation-fill-mode: both;
      animation-timeline: --sicher;
      animation-range: contain calc(var(--von) + 4%)
        contain calc(var(--bis) - 4%);
    }
  }
}

.speicher-bild {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.sicher-spur {
  position: relative;
}

.sicher-buehne {
  isolation: isolate;
  position: relative;
  overflow: clip;
}

.sicher-tafel {
  --von: 0%;
  --bis: 100%;
  min-height: 100svh;
  padding-top: calc(var(--kopf-hoehe) + clamp(1rem, 4vh, 3rem));
  align-items: center;
  padding-bottom: clamp(3.5rem, 9vh, 6rem);
  display: grid;
  position: relative;
}

.sicher-auftakt {
  text-align: center;
}

.sicher-titel {
  text-wrap: balance;
  max-width: 17ch;
  margin-inline: auto;
}

.sicher-auftakt-zeile {
  margin-top: clamp(.75rem, 2vh, 1.5rem);
  text-wrap: balance;
  max-width: 34ch;
  margin-inline: auto;
}

.sicher-raster {
  align-items: center;
  gap: clamp(1.25rem, 4vh, 3rem);
  display: grid;
}

.sicher-bild {
  width: min(20rem, 62vw, 30vh);
  translate: calc(var(--zeiger-x, 0) * 8px) calc(var(--zeiger-y, 0) * 6px);
  justify-content: center;
  margin-inline: auto;
  display: flex;
}

.sicher-karte-titel {
  text-wrap: balance;
  max-width: 16ch;
}

.sicher-vorspann {
  max-width: 38ch;
  margin-top: clamp(.65rem, 1.8vh, 1.35rem);
}

.sicher-liste {
  gap: clamp(.6rem, 1.8vh, 1.15rem);
  max-width: 42ch;
  margin-top: clamp(1rem, 3vh, 2.25rem);
  display: grid;
}

.sicher-punkt {
  font-size: var(--text-fliess);
  color: var(--color-text-2);
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: start;
  line-height: 1.55;
  display: grid;
}

.sicher-haken {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-signal-400);
  margin-top: .3rem;
}

.sicher-fuer {
  border: 1px solid var(--color-grund-600);
  width: fit-content;
  font-size: var(--text-klein);
  color: var(--color-text-3);
  -webkit-backdrop-filter: blur(6px);
  background: #0a102099;
  border-radius: 999px;
  margin-top: clamp(1rem, 3vh, 2.25rem);
  padding: .55rem 1.15rem;
}

.sicher-schiene {
  display: none;
}

@media (max-width: 899px) {
  .sicher-tafel {
    padding-top: calc(var(--kopf-hoehe) + clamp(.5rem, 2.5vh, 2rem));
    padding-bottom: clamp(3rem, 7vh, 4.5rem);
  }

  .sicher-raster {
    gap: clamp(.75rem, 2.5vh, 2rem);
  }

  .sicher-bild {
    width: min(15rem, 46vw, 23vh);
  }

  .sicher-vorspann {
    margin-top: clamp(.5rem, 1.4vh, 1.1rem);
  }

  .sicher-liste {
    gap: clamp(.5rem, 1.4vh, 1rem);
    margin-top: clamp(.7rem, 2vh, 1.6rem);
  }

  .sicher-punkt {
    grid-template-columns: 1.45rem minmax(0, 1fr);
    font-size: .9375rem;
  }

  .sicher-fuer {
    margin-top: clamp(.7rem, 2vh, 1.6rem);
  }
}

@media (max-width: 899px) and (max-height: 720px) {
  .sicher-bild {
    width: min(12rem, 40vw, 19vh);
  }

  .sicher-vorspann {
    font-size: .9375rem;
    line-height: 1.5;
  }

  .sicher-punkt {
    font-size: .875rem;
    line-height: 1.45;
  }

  .sicher-haken {
    width: .95rem;
    height: .95rem;
    margin-top: .2rem;
  }

  .sicher-fuer {
    padding: .4rem .9rem;
    font-size: .8125rem;
  }
}

@media (min-width: 900px) {
  .sicher-raster {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 5rem);
  }

  .sicher-raster--gedreht > .sicher-bild {
    order: 2;
  }

  .sicher-bild {
    width: min(30rem, 40vw, 48vh);
  }
}

@media (min-width: 1600px) and (min-height: 1000px) {
  .sicher-bild {
    width: min(36rem, 36vw, 46vh);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sicher-spur {
      view-timeline-name: --sicher;
      view-timeline-axis: block;
      height: 520svh;
    }

    .sicher-buehne {
      height: 100svh;
      animation: linear both sicher-abgang;
      animation-timeline: --sicher;
      animation-range: cover 85% cover 97%;
      position: sticky;
      top: 0;
    }

    .sicher-tafel {
      opacity: 0;
      min-height: 0;
      animation: linear both sicher-tafel;
      animation-timeline: --sicher;
      animation-range: contain var(--von) contain var(--bis);
      will-change: opacity, transform;
      position: absolute;
      inset: 0;
    }

    .sicher-tafel--auftakt {
      animation-name: sicher-auftakt;
    }

    .sicher-tafel--letzte {
      animation-name: sicher-tafel-letzte;
    }

    .sicher-bild {
      animation: linear both sicher-bild;
      animation-timeline: --sicher;
      animation-range: contain var(--von) contain var(--bis);
      will-change: transform;
    }

    .sicher-tafel--letzte .sicher-bild {
      animation-name: sicher-bild-letzte;
    }

    .sicher-rein {
      opacity: 0;
      animation: linear both sicher-rein;
      animation-timeline: --sicher;
      animation-range: contain calc(var(--von) + 1.5% + var(--k) * 0.8%)
        contain calc(var(--von) + 6.5% + var(--k) * 0.8%);
    }

    .sicher-schiene {
      z-index: 2;
      opacity: 0;
      pointer-events: none;
      grid-auto-flow: column;
      gap: clamp(.75rem, 2.5vw, 1.75rem);
      animation: linear both sicher-schiene-an;
      animation-timeline: --sicher;
      animation-range: contain 9% contain 19%;
      display: grid;
      position: absolute;
      bottom: clamp(1.1rem, 3.5vh, 2.5rem);
      left: 50%;
      translate: -50%;
    }

    .sicher-glied {
      opacity: .32;
      min-width: clamp(4.25rem, 21vw, 9rem);
      animation: linear both sicher-glied-wach;
      animation-timeline: --sicher;
      animation-range: contain var(--von) contain var(--bis);
      justify-items: start;
      gap: .45rem;
      display: grid;
    }

    .sicher-glied-bahn {
      background: var(--color-grund-600);
      border-radius: 999px;
      width: 100%;
      height: 2px;
      display: block;
      overflow: clip;
    }

    .sicher-glied-fuellung {
      background: var(--color-signal-500);
      transform-origin: 0;
      width: 100%;
      height: 100%;
      animation: linear both sicher-fuellen;
      animation-timeline: --sicher;
      animation-range: contain var(--von) contain var(--bis);
      border-radius: 999px;
      display: block;
      scale: 0 1;
    }

    .sicher-glied-wort {
      letter-spacing: -.01em;
      color: var(--color-text-1);
      font-size: clamp(.6875rem, 2.6vw, .75rem);
      line-height: 1.2;
    }
  }
}

@keyframes sicher-auftakt {
  0%, 52% {
    opacity: 1;
    animation-timing-function: var(--ease-ruhig);
    transform: translateY(0)scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-7vh)scale(.955);
  }
}

@keyframes sicher-tafel {
  0% {
    opacity: 0;
    animation-timing-function: var(--ease-ruhig);
    transform: translateY(6vh)scale(.965);
  }

  22%, 78% {
    opacity: 1;
    animation-timing-function: var(--ease-ruhig);
    transform: translateY(0)scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-6vh)scale(.965);
  }
}

@keyframes sicher-tafel-letzte {
  0% {
    opacity: 0;
    animation-timing-function: var(--ease-ruhig);
    transform: translateY(6vh)scale(.965);
  }

  34%, 100% {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

@keyframes sicher-bild {
  0% {
    animation-timing-function: var(--ease-ruhig);
    transform: translateY(9vh)scale(.86);
  }

  22%, 78% {
    animation-timing-function: var(--ease-ruhig);
    transform: translateY(0)scale(1);
  }

  100% {
    transform: translateY(-9vh)scale(.86);
  }
}

@keyframes sicher-bild-letzte {
  0% {
    animation-timing-function: var(--ease-ruhig);
    transform: translateY(9vh)scale(.86);
  }

  34%, 100% {
    transform: translateY(0)scale(1);
  }
}

@keyframes sicher-rein {
  0% {
    opacity: 0;
    translate: 0 var(--einblenden-weg);
    animation-timing-function: var(--ease-ruhig);
  }

  74% {
    translate: 0;
  }

  100% {
    opacity: 1;
    translate: 0;
  }
}

@keyframes sicher-abgang {
  0% {
    opacity: 1;
    animation-timing-function: var(--ease-ruhig);
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(.965);
  }
}

@keyframes sicher-schiene-an {
  from {
    opacity: 0;
    translate: -50% 1rem;
  }

  to {
    opacity: 1;
    translate: -50%;
  }
}

@keyframes sicher-fuellen {
  0% {
    animation-timing-function: var(--ease-ruhig);
    scale: 0 1;
  }

  26%, 100% {
    scale: 1;
  }
}

@keyframes sicher-glied-wach {
  0% {
    opacity: .32;
    animation-timing-function: var(--ease-ruhig);
  }

  26%, 84% {
    opacity: 1;
    animation-timing-function: var(--ease-ruhig);
  }

  100% {
    opacity: .5;
  }
}

.abschluss-spur {
  position: relative;
}

.abschluss-buehne {
  isolation: isolate;
  min-height: 100svh;
  padding-top: calc(var(--kopf-hoehe) + clamp(2rem, 8vh, 6rem));
  align-items: center;
  padding-bottom: clamp(3rem, 10vh, 7rem);
  display: grid;
  position: relative;
  overflow: clip;
}

.abschluss-inhalt {
  z-index: 1;
  text-align: center;
  position: relative;
}

.abschluss-titel {
  text-wrap: balance;
  max-width: 18ch;
  margin-inline: auto;
}

.abschluss-zeile {
  margin-top: clamp(.9rem, 2.4vh, 1.75rem);
  text-wrap: balance;
  max-width: 44ch;
  margin-inline: auto;
}

.abschluss-knopf {
  justify-content: center;
  margin-top: clamp(1.75rem, 5vh, 3.25rem);
  display: flex;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@keyframes einzug-abgang {
  0% {
    opacity: 1;
    animation-timing-function: var(--ease-ruhig);
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(.975);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .einzug-spur {
      animation: linear both einzug-abgang;
      animation-timeline: view();
      animation-range: exit 8% exit 85%;
    }
  }
}

.zugang-buehne {
  isolation: isolate;
  place-items: center;
  min-height: 100svh;
  padding: clamp(1.5rem, 6vh, 4rem) 1.5rem;
  display: grid;
  position: relative;
  overflow: clip;
}

.zugang-tafel {
  z-index: 1;
  text-align: center;
  border: 1px solid var(--color-grund-600);
  -webkit-backdrop-filter: blur(16px);
  background: #060a16b8;
  border-radius: 1.25rem;
  justify-items: center;
  width: 100%;
  max-width: 27rem;
  padding: clamp(1.75rem, 5vh, 2.75rem) clamp(1.25rem, 5vw, 2.25rem);
  display: grid;
  position: relative;
  box-shadow: 0 30px 80px -40px #000000e6;
}

.zugang-marke {
  letter-spacing: .22em;
  color: var(--color-text-2);
  font-size: .8125rem;
  font-weight: 600;
}

.zugang-titel {
  letter-spacing: -.025em;
  text-wrap: balance;
  max-width: 16ch;
  color: var(--color-text-1);
  margin-top: clamp(1rem, 3vh, 1.75rem);
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  font-weight: 600;
  line-height: 1.15;
}

.zugang-zeile {
  text-wrap: balance;
  max-width: 34ch;
  color: var(--color-text-3);
  margin-top: .75rem;
  font-size: .9375rem;
  line-height: 1.6;
}

.zugang-feld {
  width: 100%;
  margin-top: clamp(1.5rem, 4vh, 2.25rem);
  display: block;
}

.zugang-feld input {
  border: 1px solid var(--color-grund-500);
  background: var(--color-grund-900);
  width: 100%;
  color: var(--color-text-1);
  transition: border-color .2s var(--ease-ruhig),
    box-shadow .2s var(--ease-ruhig);
  border-radius: 999px;
  padding: .8rem 1.25rem;
  font-size: 1rem;
}

.zugang-feld input::placeholder {
  color: var(--color-text-3);
}

.zugang-feld input:focus {
  border-color: var(--color-signal-500);
  box-shadow: 0 0 0 4px rgb(var(--schein-farbe) / .18);
  outline: none;
}

.zugang-feld input[aria-invalid="true"] {
  border-color: #c2504b;
}

.zugang-fehler {
  color: #e08b86;
  margin-top: .75rem;
  font-size: .875rem;
}

.zugang-knopf {
  background: var(--color-signal-500);
  color: #fff;
  cursor: pointer;
  width: 100%;
  transition: background-color .2s var(--ease-ruhig);
  border-radius: 999px;
  margin-top: 1rem;
  padding: .8rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: inset 0 1px #ffffff29, 0 10px 34px -10px #2b80ffb3;
}

.zugang-knopf:hover {
  background: var(--color-signal-400);
}

.zugang-knopf:active {
  background: var(--color-signal-600);
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@keyframes ping {
  75%, 100% {
    opacity: 0;
    transform: scale(2);
  }
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__0cbk-n2._.css.map*/