@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/schriften/urbanist-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Urbanist Rueckfall segoe';
  src: local('Segoe UI');
  size-adjust: 99.58%;
  ascent-override: 95.4%;
  descent-override: 25.11%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Urbanist Rueckfall helvetica';
  src: local('Helvetica Neue');
  size-adjust: 98.11%;
  ascent-override: 96.83%;
  descent-override: 25.48%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Urbanist Rueckfall roboto';
  src: local('Roboto');
  size-adjust: 99.25%;
  ascent-override: 95.72%;
  descent-override: 25.19%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Urbanist Rueckfall liberation';
  src: local('Liberation Sans');
  size-adjust: 99.04%;
  ascent-override: 95.93%;
  descent-override: 25.24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/schriften/public-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/schriften/public-sans-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Public Sans Rueckfall segoe';
  src: local('Segoe UI');
  size-adjust: 105.44%;
  ascent-override: 90.09%;
  descent-override: 21.34%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Public Sans Rueckfall helvetica';
  src: local('Helvetica Neue');
  size-adjust: 103.89%;
  ascent-override: 91.44%;
  descent-override: 21.66%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Public Sans Rueckfall roboto';
  src: local('Roboto');
  size-adjust: 105.1%;
  ascent-override: 90.39%;
  descent-override: 21.41%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Public Sans Rueckfall liberation';
  src: local('Liberation Sans');
  size-adjust: 104.87%;
  ascent-override: 90.59%;
  descent-override: 21.46%;
  line-gap-override: 0%;
}

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary-50: #eef8ff;
  --color-primary-100: #daeeff;
  --color-primary-200: #b8e2ff;
  --color-primary-300: #81ceff;
  --color-primary-400: #2ab1ff;
  --color-primary-500: #0097ee;
  --color-primary-600: #007bd0;
  --color-primary-700: #0067b3;
  --color-primary-800: #005699;
  --color-primary-900: #004984;
  --color-primary-950: #05305a;
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f4f5f6;
  --color-neutral-200: #e3e5e9;
  --color-neutral-300: #d1d4d9;
  --color-neutral-400: #9da4ac;
  --color-neutral-500: #6b7480;
  --color-neutral-600: #4c535c;
  --color-neutral-700: #3a4149;
  --color-neutral-800: #23272c;
  --color-neutral-900: #14171b;
  --color-neutral-950: #090a0c;
  --color-background: var(--color-neutral-200);
  --color-background-white: var(--color-white);
  --color-card: var(--color-neutral-100);
  --color-card-hover: var(--color-neutral-50);
  --color-card-glass: rgba(227, 229, 233, 0.6);
  --color-foreground: var(--color-black);
  --color-heading-muted: var(--color-neutral-400);
  --color-muted-foreground: var(--color-neutral-500);
  --color-eyebrow: var(--color-primary-700);
  --color-eyebrow-background: var(--color-primary-50);
  --color-icon: var(--color-black);
  --color-icon-muted: var(--color-neutral-500);
  --color-border: var(--color-neutral-300);
  --color-button: var(--color-primary-100);
  --color-button-hover: var(--color-primary-200);
  --color-button-border: var(--color-primary-400);
  --color-button-foreground: var(--color-black);
  --color-link: var(--color-primary-600);
  --color-link-hover: var(--color-primary-700);
  --color-contact: var(--color-neutral-900);
  --color-contact-hover: var(--color-primary-700);
  --color-contact-foreground: var(--color-white);
  --color-contact-foreground-hover: var(--color-white);
  --color-accent: var(--color-neutral-200);
  --color-header: var(--color-white);
  --color-inverse: var(--color-neutral-950);
  --color-inverse-foreground: var(--color-white);
  --color-ring: var(--color-primary-500);
  --color-placeholder: var(--color-neutral-400);
  --color-star-empty: var(--color-neutral-300);
  --color-star: #fbbf24;
  --wordmark-highlight: var(--color-neutral-400);
  --radius: 10px;
  --radius-image: var(--radius);
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-button: calc(var(--radius) * 0.25);
  --radius-full: 9999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --duration: 300ms;
  --duration-slide: 650ms;
  --ease: ease-out;
  --container: 87rem;
  --container-narrow: 55rem;
  --font-heading: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading-weight: 700;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body-weight: 500;
  --shadow: none;
  --tracking-label: 1.28px;
  --measure: 65ch;
  --text-h1: clamp(2.4938rem, 1.9896rem + 2.2408vw, 4.0063rem);
  --text-h2: clamp(2rem, 1.7459rem + 1.1297vw, 2.7625rem);
  --text-h3: clamp(1.5rem, 1.3125rem + 0.8334vw, 2.0625rem);
  --text-h4: clamp(1.2688rem, 1.2125rem + 0.25vw, 1.4375rem);
  --text-h5: clamp(1.1375rem, 1.1105rem + 0.1204vw, 1.2188rem);
  --text-h6: 1rem;
  --text-body: 0.875rem;
  --text-eyebrow: 0.75rem;
  --text-xs: 0.75rem;
  --leading-h1: clamp(2.8063rem, 2.3355rem + 2.0926vw, 4.2188rem);
  --leading-h2: clamp(2.1875rem, 1.9042rem + 1.2593vw, 3.0375rem);
  --leading-h3: clamp(1.75rem, 1.5313rem + 0.9723vw, 2.4063rem);
  --leading-h4: clamp(1.525rem, 1.4334rem + 0.4075vw, 1.8rem);
  --leading-h5: clamp(1.2625rem, 1.175rem + 0.3889vw, 1.525rem);
  --leading-h6: clamp(1.1875rem, 1.0834rem + 0.463vw, 1.5rem);
  --leading-body: 1.3572;
  --leading-eyebrow: 1.4167;
  --leading-xs: 1.3334;
  --tracking-h1: -1px;
  --tracking-h2: -1px;
  --spacing: 0.25rem;
  --section-padding-none: 0rem;
  --section-padding-sm: clamp(1rem, 0.8334rem + 0.7408vw, 1.5rem);
  --section-padding-md: clamp(1.5rem, 0.6667rem + 3.7038vw, 4rem);
  --section-padding-lg: clamp(4rem, 2.3334rem + 7.4075vw, 9rem);
  --section-padding-inline: clamp(1rem, 0.8334rem + 0.7408vw, 1.5rem);
  --gap-none: 0rem;
  --gap-sm: 0.5rem;
  --gap-eyebrow: 0.75rem;
  --gap-md: clamp(0.5rem, 0.3334rem + 0.7408vw, 1rem);
  --gap-lg: clamp(1.5rem, 1.3334rem + 0.7408vw, 2rem);
  --gap-xl: 3.75rem;
  --gap-2xl: 5rem;
  --card-gap: 2.5rem;
  --card-padding-xs: clamp(0.5rem, 0.3334rem + 0.7408vw, 1rem);
  --card-padding-sm: 1.5rem;
  --card-padding-xl: clamp(1.5rem, 1.1667rem + 1.4815vw, 2.5rem);
  --margin-xs: 0.5rem;
  --margin-sm: 1rem;
  --margin-md: clamp(1.5rem, 1.3334rem + 0.7408vw, 2rem);
  --margin-lg: clamp(4rem, 3.25rem + 3.3334vw, 6.25rem);
  --margin-h1: clamp(2rem, 1.6667rem + 1.4815vw, 3rem);
  --margin-h2: clamp(1.5rem, 1.1667rem + 1.4815vw, 2.5rem);
  --margin-h3: clamp(1.5rem, 1.1667rem + 1.4815vw, 2.5rem);
  --margin-h4: clamp(1rem, 0.8334rem + 0.7408vw, 1.5rem);
  --margin-h5: clamp(1rem, 0.8334rem + 0.7408vw, 1.5rem);
  --margin-h6: clamp(0.625rem, 0.5834rem + 0.1852vw, 0.75rem);
  --margin-body: 1.5rem;
  --margin-eyebrow: clamp(2rem, 1.8334rem + 0.7408vw, 2.5rem);
  --button-padding-block: 0.625rem;
  --button-padding-inline: 1.125rem;
}

[data-theme=dark] {
  --color-background: var(--color-neutral-950);
  --color-card: var(--color-neutral-900);
  --color-card-hover: var(--color-neutral-800);
  --color-card-glass: rgba(20, 23, 27, 0.6);
  --color-foreground: var(--color-white);
  --color-heading-muted: var(--color-neutral-500);
  --color-muted-foreground: var(--color-neutral-400);
  --color-eyebrow: var(--color-primary-600);
  --color-eyebrow-background: var(--color-neutral-900);
  --color-icon: var(--color-white);
  --color-border: var(--color-neutral-700);
  --color-button: var(--color-primary-800);
  --color-button-hover: var(--color-primary-700);
  --color-button-border: var(--color-primary-500);
  --color-button-foreground: var(--color-white);
  --color-link: var(--color-primary-400);
  --color-link-hover: var(--color-primary-600);
  --color-contact: var(--color-white);
  --color-contact-foreground: var(--color-black);
  --color-accent: var(--color-neutral-800);
  --color-header: var(--color-neutral-900);
  --color-inverse: var(--color-neutral-200);
  --color-inverse-foreground: var(--color-black);
  --color-placeholder: var(--color-neutral-500);
  --color-star-empty: var(--color-neutral-200);
}

[data-theme=light] {
  --color-background: var(--color-neutral-200);
  --color-card: var(--color-neutral-100);
  --color-card-hover: var(--color-neutral-50);
  --color-card-glass: rgba(227, 229, 233, 0.6);
  --color-foreground: var(--color-black);
  --color-heading-muted: var(--color-neutral-400);
  --color-muted-foreground: var(--color-neutral-500);
  --color-eyebrow: var(--color-primary-700);
  --color-eyebrow-background: var(--color-primary-50);
  --color-icon: var(--color-black);
  --color-border: var(--color-neutral-300);
  --color-button: var(--color-primary-100);
  --color-button-hover: var(--color-primary-200);
  --color-button-border: var(--color-primary-400);
  --color-button-foreground: var(--color-black);
  --color-link: var(--color-primary-600);
  --color-link-hover: var(--color-primary-700);
  --color-contact: var(--color-neutral-900);
  --color-contact-foreground: var(--color-white);
  --color-accent: var(--color-neutral-200);
  --color-header: var(--color-white);
  --color-inverse: var(--color-neutral-950);
  --color-inverse-foreground: var(--color-white);
  --color-placeholder: var(--color-neutral-400);
  --color-star-empty: var(--color-neutral-300);
}

:root {
  --font-heading: 'Urbanist', 'Urbanist Rueckfall segoe', 'Urbanist Rueckfall helvetica', 'Urbanist Rueckfall roboto', 'Urbanist Rueckfall liberation', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading-weight: 700;
  --font-body: 'Public Sans', 'Public Sans Rueckfall segoe', 'Public Sans Rueckfall helvetica', 'Public Sans Rueckfall roboto', 'Public Sans Rueckfall liberation', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body-weight: 500;
}

/* Leistungen einspaltig: feste Basis statt (999rem - 100%) * 999 – mobile Chromium-Builds schrumpften die riesige Basis nicht ganz auf die Zeilenbreite, Überschrift und Kästen standen ~40 px über. */
@container (max-width: 62.499rem) {
  .kanon-services:is(.kanon-services--icon-card-grid, .kanon-services--icon-card-grid-ordered) .kanon-services__split > * {
    flex-basis: 100%;
    max-width: 100%;
  }
}