@charset "UTF-8";
@layer reset, base, layout, components, pages, utilities, overrides;
/*
reset       : browser defaults als baseline setzen
layout      : strukturelles Grundgerüst, "Skelett"
components  : Wiederverwendbare UI-Elemente, wie FAQ, Buttons, hero-bereiche, Banner
pages       : "seitengebundene" Sonderregeln, keine eigenständigen Components aber deren Overwrites
utilities   : Wiederverwendbare kleine Helper, eher sparsam zu verwenden, aber "eyebrow", visually-hidden, hidden, text-center etc
overrides   : Eher "Notfall", für 3rd-Party-Code oder explizite/bewusstes Überschreiben. Möglichst klein
*/
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
         text-size-adjust: 100%;
  }
  body {
    margin: 0;
    min-height: 100vh;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  img,
  picture,
  svg,
  canvas {
    display: block;
    max-width: 100%;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  textarea {
    resize: vertical;
  }
  table {
    border-collapse: collapse;
  }
  ul,
  ol {
    padding-inline-start: 0;
    margin: 0;
  }
  a {
    text-decoration: none;
    color: var(--color-text);
  }
  fieldset {
    margin: 0;
    padding: 0;
  }
}
@layer base {
  html {
    font-size: 10px;
  }
  body {
    font-size: 1.6rem;
  }
  .font-icon {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
  }
  .primary {
    color: var(--color-brand-primary);
  }
  .soft {
    color: var(--color-text-soft);
  }
  .center {
    text-align: center;
  }
  .bp\:none {
    display: none;
  }
  @media (min-width: 450px) {
    .bp-xsm\:none {
      display: none;
    }
  }
  @media (min-width: 600px) {
    .bp-sm\:none {
      display: none;
    }
  }
  @media (min-width: 768px) {
    .bp-md\:none {
      display: none;
    }
  }
  @media (min-width: 1024px) {
    .bp-lg\:none {
      display: none;
    }
  }
  @media (min-width: 1280px) {
    .bp-xl\:none {
      display: none;
    }
  }
  @media (min-width: 1440px) {
    .bp-xxl\:none {
      display: none;
    }
  }
  @media (min-width: 450px) {
    .bp-xsm\:block {
      display: block;
    }
  }
  @media (min-width: 600px) {
    .bp-sm\:block {
      display: block;
    }
  }
  @media (min-width: 768px) {
    .bp-md\:block {
      display: block;
    }
  }
  @media (min-width: 1024px) {
    .bp-lg\:block {
      display: block;
    }
  }
  @media (min-width: 1280px) {
    .bp-xl\:block {
      display: block;
    }
  }
  @media (min-width: 1440px) {
    .bp-xxl\:block {
      display: block;
    }
  }
  @media (min-width: 450px) {
    .bp-xsm\:inline-block {
      display: inline-block;
    }
  }
  @media (min-width: 600px) {
    .bp-sm\:inline-block {
      display: inline-block;
    }
  }
  @media (min-width: 768px) {
    .bp-md\:inline-block {
      display: inline-block;
    }
  }
  @media (min-width: 1024px) {
    .bp-lg\:inline-block {
      display: inline-block;
    }
  }
  @media (min-width: 1280px) {
    .bp-xl\:inline-block {
      display: inline-block;
    }
  }
  @media (min-width: 1440px) {
    .bp-xxl\:inline-block {
      display: inline-block;
    }
  }
  img {
    -webkit-user-drag: none;
  }
  p {
    cursor: text;
  }
}
/*
  Unit Guidance
  rem -> globale Größen / Spacing / Typografie
  em  -> lokale Skalierung innerhalb einer Komponente
  %   -> relative Dimensionen
  px  ->  Dinge, die wirklich physisch klein bleiben sollen (wie border 1px)
*/
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-error: #c72914;
  --color-brand-primary: #1d4ed8;
  --color-brand-primary-dark: #3c4b77;
  --color-brand-secondary: #0ba690;
  --color-brand-tertiary: #8c52ff;
  --color-special: #ffc940;
  --color-brand-primary-soft: rgba(29, 78, 216, 0.2);
  --color-brand-primary-xsoft: #ebf1ff;
  --color-brand-secondary-soft: rgba(11, 166, 144, 0.2);
  --color-brand-tertiary-soft: rgba(140, 82, 255, 0.2);
  --color-special-soft: rgba(255, 201, 64, 0.2);
  --color-brand-primary-soft-opaque: #D1DBF7;
  --color-brand-secondary-soft-opaque: #CEEDE8;
  --color-brand-tertiary-soft-opaque: #E8DCFF;
  --color-text: #060b27;
  --color-text-accent: #1d4ed8;
  --color-text-soft: #585858;
  --color-surface: #ffffff;
  --color-surface-contrast: #f0f0f0;
  --color-surface-dark: rgba(34, 34, 34, 0.95);
  --color-surface-translucent: rgba(240, 240, 240, 0.93);
  --color-surface-light-translucent: rgba(255, 255, 255, 0.93);
  --color-surface-dark-soft: rgba(34, 34, 34, 0.1);
  --color-frame-light: #aaa;
  --gradient-brand-angle: 90deg;
  --gradient-brand: linear-gradient(var(--gradient-brand-angle),
      var(--color-brand-primary),
      var(--color-brand-secondary));
  --shadow-dark: 0 5px 15px rgba(6, 11, 39, 0.2);
}

@layer utilities {
  .text-default {
    color: var(--color-text);
  }
  .text-accent {
    color: var(--color-text-accent);
  }
  .bg-surface {
    background-color: var(--color-surface);
  }
  .bg-surface-contrast {
    background-color: var(--color-surface-contrast);
  }
  .bg-brand-gradient {
    background: var(--gradient-brand);
  }
}
@layer base {
  @font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("/assets/fonts/quicksand-variable.woff2") format("woff2");
  }
  @font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/assets/fonts/plus-jakarta-sans-variable.woff2") format("woff2");
  }
}
@layer base {
  body {
    font-family: "Quicksand", Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-weight: 500;
    color: var(--color-text);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Quicksand", Arial, sans-serif;
    font-weight: 700;
    color: var(--color-text);
  }
  h1 {
    font-size: 3rem;
    line-height: 3.6rem;
  }
  @media (min-width: 600px) {
    h1 {
      font-size: 4rem;
      line-height: 4.8rem;
    }
  }
  h2 {
    font-size: 3rem;
    line-height: 3.6rem;
  }
  h3 {
    font-size: 2.4rem;
    line-height: 3rem;
  }
  p,
  label {
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-weight: 500;
  }
  .small {
    font-size: 1.4rem;
    line-height: 1.6rem;
  }
  .mini {
    font-size: 1.2rem;
    line-height: 1.4rem;
  }
}
@layer tokens {
  :root {
    --speed-fast: 250ms;
    --speed-med: 500ms;
    --speed-slow: 1000ms;
  }
}
/*  LAYOUT #################################### */
:root {
  --section-padding: 3rem;
  --section-gap: 4rem;
}

@layer layout {
  .container {
    padding: var(--section-padding);
    max-width: min(100%, 1024px + var(--section-padding) * 2);
    margin-left: auto;
    margin-right: auto;
  }
  .visually-hidden,
  .selection__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .bg-contrast {
    background-color: var(--color-surface-contrast);
  }
  .section--contrast {
    background-color: var(--color-surface-contrast);
    padding-block: calc(var(--section-padding) * 2);
    margin-block: var(--section-padding);
  }
  .section--contrast .container {
    padding-block: 0;
  }
  .button--accent {
    max-width: 100%;
    width: var(--benefit-width);
    padding: 1rem 0;
  }
}
@counter-style lower-alpha-paren {
  system: extends lower-alpha;
  suffix: ") ";
}
@layer components {
  .rechtliches--chapters h1 {
    margin-block-end: 2rem;
  }
  .rechtliches--chapters h2 {
    margin-block-start: 2rem;
    margin-block-end: 1rem;
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-weight: 700;
  }
  .rechtliches--chapters h3 {
    margin-block-start: 2rem;
    margin-block-end: 1rem;
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-weight: 700;
  }
  .rechtliches--chapters p,
  .rechtliches--chapters li,
  .rechtliches--chapters h1,
  .rechtliches--chapters h2,
  .rechtliches--chapters h3 {
    text-wrap: balance;
    hyphens: auto;
  }
  .rechtliches--chapters p,
  .rechtliches--chapters li {
    font-weight: 400;
  }
  .rechtliches--chapters p {
    margin-block-start: 1rem;
  }
  .rechtliches--chapters .chapter {
    margin-block-start: 3rem;
  }
  .rechtliches--chapters {
    counter-reset: chapter;
  }
  .rechtliches--chapters .chapter {
    margin-block-start: clamp(2rem, 4vw, 3.5rem);
  }
  .rechtliches--chapters .chapter > h2::before {
    counter-increment: chapter;
    content: counter(chapter) ". ";
  }
  .rechtliches--chapters .chapter__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-block-start: 1.5rem;
    padding-inline-start: 2rem;
    list-style-type: decimal;
  }
  .rechtliches--chapters .chapter__list > li {
    padding-inline-start: 0.25rem;
  }
  .rechtliches--chapters .chapter__list > li::marker {
    font-weight: 700;
  }
  .rechtliches--chapters .chapter__list > li > h3 {
    display: inline;
  }
  .rechtliches--chapters .chapter__list > li > p,
  .rechtliches--chapters .chapter__list > li > ul {
    margin-block-start: 0.75rem;
  }
  .rechtliches--chapters .chapter__list.--marker-light li::marker {
    font-weight: 400;
  }
  .rechtliches--chapters .chapter__list--alpha {
    list-style-type: lower-alpha;
  }
  .rechtliches--chapters .chapter__list--alpha-paren {
    list-style-type: lower-alpha-paren;
  }
  .rechtliches--chapters .chapter__list--numeric {
    list-style-type: decimal;
  }
  .rechtliches--chapters .chapter__list--roman {
    list-style-type: lower-roman;
  }
  .rechtliches--chapters .chapter__list--none {
    padding-inline-start: 0;
    list-style-type: none;
  }
  .rechtliches--chapters .chapter__bullets {
    list-style-type: disc;
    padding-inline-start: 1.75rem;
  }
  .rechtliches--chapters .chapter__bullets > li + li {
    margin-block-start: 0.5rem;
  }
  .rechtliches--unnumbered .chapter > h2::before {
    content: none;
    counter-increment: none;
  }
}
/*  inline icons (generische styles) ###################################### */
@layer layout {
  .inline-icon {
    display: block;
  }
  .inline-icon .icon-fill {
    fill: currentColor;
  }
  .inline-icon .icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke-width, 1.5px);
    stroke-miterlimit: 10;
    vector-effect: non-scaling-stroke;
  }
  .inline-icon .icon-stroke--round {
    stroke-linecap: round;
  }
}
@layer layout {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    cursor: pointer;
    background-color: var(--color-brand-primary);
    color: var(--color-surface);
    font-weight: 700;
  }
  @media (min-width: 450px) {
    .button {
      padding-inline: 3rem;
    }
  }
  .button {
    border-radius: 0.5rem;
    align-self: center;
    border: none;
    text-decoration: none;
    overflow: clip;
  }
  .button.light {
    background-color: var(--color-surface);
    color: var(--color-text-accent);
  }
  .button__icon--arrow {
    position: relative;
    width: 2rem;
    height: 1rem;
    flex: 0 0 auto;
    transition: transform var(--speed-fast) ease-in-out;
  }
  .button__icon--arrow::before, .button__icon--arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.2rem;
  }
  .button__icon--arrow::before {
    width: 1.6rem;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
    transform: translateY(-50%);
    transform-origin: right center;
    transition: width var(--speed-fast) ease-in-out, transform var(--speed-fast) ease-in-out;
  }
  .button__icon--arrow::after {
    width: 0.8rem;
    height: 0.8rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 2px;
    transform: translateY(-50%) rotate(45deg);
    transition: transform var(--speed-fast) ease-in-out, width var(--speed-fast) ease-in-out, height var(--speed-fast) ease-in-out;
  }
  .button__icon {
    flex: 0 0 auto;
  }
  .button__icon--svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    transition: transform var(--speed-fast) ease-in-out;
  }
  .button__icon--svg svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .button:is(:hover, :focus-visible) .button__icon--svg {
    transform: scale(1.1);
  }
  .button:is(:hover, :focus-visible) .button__icon--arrow {
    transform: translateX(0.3rem);
  }
  .button:is(:hover, :focus-visible) .button__icon--arrow::before {
    width: 1.3rem;
  }
  .button:is(:hover, :focus-visible) .button__icon--arrow::after {
    transform: translateY(-50%) rotate(45deg);
    width: 0.9rem;
    height: 0.9rem;
  }
  .button:active .button__icon--arrow {
    transform: translateX(3rem);
    transition-duration: 200ms;
  }
}
/*  HEADER ###################################### */
/*  HEADER ###################################### */
:root {
  --header-height: 8rem;
}

@layer components {
  .header {
    inset: 0 0 auto;
    width: 100%;
    height: var(--header-height);
    z-index: 10;
  }
  .header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-block: 0;
    gap: 2rem;
  }
  @media (min-width: 600px) {
    .header .container {
      gap: 1rem;
    }
  }
  .header .logo {
    height: calc(var(--header-height) - 2.5rem);
    --logo-ring-speed: var(--speed-med);
  }
  .header__quick-links {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  @media (min-width: 600px) and (min-width: 767px) {
    .header__quick-links:not(.--slim) {
      gap: 1rem;
    }
    .header__quick-links.--slim .button--accent {
      padding-inline: 2rem;
    }
  }
  @media (min-width: 768px) {
    .header__quick-links {
      gap: 2rem;
    }
  }
  .header .icon-link {
    cursor: pointer;
    transition: transform var(--speed-fast) ease-in-out;
  }
  .header .icon-link:hover, .header .icon-link:active, .header .icon-link:focus-visible {
    transform: scale(1.05);
  }
  .header__icon {
    width: 3.8rem;
    height: 3.8rem;
    color: var(--color-brand-primary);
  }
  .header .button--accent {
    display: none;
    width: auto;
    padding-inline: 1rem;
  }
  @media (min-width: 600px) {
    .header .button--accent {
      display: inline-flex;
    }
  }
  @media (min-width: 768px) {
    .header .button--accent {
      padding-inline: 2rem;
    }
  }
}
@layer pages {
  h1 {
    font-weight: 300;
  }
  h1 span {
    display: block;
  }
  h1 strong {
    font-weight: 700;
  }
  .header .nav {
    display: none;
  }
  @media (min-width: 768px) {
    .header .nav {
      display: flex;
      flex-grow: 1;
    }
  }
  .header .nav__links {
    list-style: none;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
  }
}
/* footerslim ###################################### */
@layer layout {
  .footer {
    --gradient-brand-angle: -90deg;
    background: var(--gradient-brand);
    margin-top: var(--section-padding);
  }
  .footer__icon, .footer__icon-link,
  .footer h2 {
    color: var(--color-surface);
  }
  .footer h2, .footer__accent-text {
    line-height: 2.8rem;
    font-size: 2.4rem;
  }
  .footer__accent-text {
    font-weight: 700;
  }
  .footer h2 {
    text-wrap: balance;
  }
  .footer h2,
  .footer h3 {
    font-weight: 600;
  }
  .footer__links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--section-gap);
    padding-top: var(--section-gap);
  }
  @media (min-width: 600px) {
    .footer__links {
      flex-direction: row;
    }
  }
  .footer__us--social, .footer__us--contact, .footer__us, .footer__contact {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .footer__contact {
    width: -moz-fit-content;
    width: fit-content;
  }
  @media (min-width: 600px) {
    .footer__contact {
      margin-left: auto;
    }
  }
  .footer {
    --social-link-size: 2.4rem;
  }
  .footer__social {
    display: flex;
    gap: 1rem;
  }
  .footer__social-link {
    --social-link-color: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--social-link-size) * 1.4);
    height: calc(var(--social-link-size) * 1.4);
    color: var(--social-link-color);
    border: 1px solid currentColor;
    border-radius: 50%;
    transition: transform var(--speed-fast) ease-in-out;
  }
  .footer__social-link:is(:hover, :active, :focus-visible) {
    transform: scale(1.1);
  }
  .footer__social-link-icon {
    width: var(--social-link-size);
    height: var(--social-link-size);
    color: currentColor;
  }
  .footer__icon-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: -moz-fit-content;
    width: fit-content;
  }
  .footer__foot-note {
    display: flex;
    justify-content: space-between;
  }
  @media (min-width: 600px) {
    .footer__foot-note {
      justify-content: space-around;
    }
  }
  .footer__icon {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-surface);
  }
  .footer__site-link {
    color: var(--color-surface);
    transition: transform var(--speed-fast) ease-in-out;
  }
  .footer__site-link:is(:hover, :focus-visible, :active) {
    transform: scale(1.05);
  }
}/*# sourceMappingURL=agb.css.map */