/*
 * Designtokens als CSS-Variablen.
 * Erzeugt aus A/design-tokens.json mit node A/scripts/build-tokens-css.mjs.
 * Diese Datei nicht von Hand aendern.
 * Stand: 2026-09-29, Version 1.1.1.
 */

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben */
  --yk-color-brand-deep: #310001;
  --yk-color-brand-deep-hover: #4A0A0E;
  --yk-color-brand: #6B1219;
  --yk-color-brand-tint: #F3E6E3;
  --yk-color-sand: #F0E4B9;
  --yk-color-text: #1B1B1B;
  --yk-color-text-muted: #4A4744;
  --yk-color-text-on-dark: #F6F3ED;
  --yk-color-text-on-dark-muted: #D8C6B8;
  --yk-color-surface: #F6F3ED;
  --yk-color-surface-alt: #EFEAE1;
  --yk-color-surface-card: #FFFFFF;
  --yk-color-surface-dark: #310001;
  --yk-color-line: #DED8CE;
  --yk-color-line-strong: #8F887C;
  --yk-color-line-on-dark: rgba(240, 228, 185, 0.28);
  --yk-color-focus: #6B1219;
  --yk-color-focus-on-dark: #F0E4B9;
  --yk-color-selection: #F0E4B9;
  --yk-color-success: #1F5B3A;
  --yk-color-error: #8C1D1D;
  --yk-color-overlay-image: rgba(27, 27, 27, 0.46);

  /* Schrift */
  --yk-font-sans: 'Manrope', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --yk-font-display: var(--yk-font-sans);
  --yk-weight-regular: 400;
  --yk-weight-medium: 500;
  --yk-weight-semibold: 600;
  --yk-weight-bold: 700;
  --yk-tracking-display: -0.02em;
  --yk-tracking-body: 0em;
  --yk-tracking-label: 0.01em;

  /* Schriftgroessen, fliessend zwischen 360 und 1440 Pixel Breite */
  --yk-size-display: clamp(36px, calc(36px + 0.01481 * (100vw - 360px)), 52px);
  --yk-leading-display: 1.05;
  --yk-size-h1: clamp(32px, calc(32px + 0.01852 * (100vw - 360px)), 52px);
  --yk-leading-h1: 1.08;
  --yk-size-h2: clamp(27px, calc(27px + 0.01204 * (100vw - 360px)), 40px);
  --yk-leading-h2: 1.14;
  --yk-size-h3: clamp(20px, calc(20px + 0.0037 * (100vw - 360px)), 24px);
  --yk-leading-h3: 1.25;
  --yk-size-h4: clamp(18px, calc(18px + 0.00185 * (100vw - 360px)), 20px);
  --yk-leading-h4: 1.3;
  --yk-size-lead: clamp(18px, calc(18px + 0.00278 * (100vw - 360px)), 21px);
  --yk-leading-lead: 1.55;
  --yk-size-body: clamp(16px, calc(16px + 0.00093 * (100vw - 360px)), 17px);
  --yk-leading-body: 1.65;
  --yk-size-small: clamp(14px, calc(14px + 0.00093 * (100vw - 360px)), 15px);
  --yk-leading-small: 1.5;
  --yk-size-label: clamp(13px, calc(13px + 0.00093 * (100vw - 360px)), 14px);
  --yk-leading-label: 1.4;

  /* Textbreiten */
  --yk-measure-text: 68ch;
  --yk-measure-lead: 54ch;
  --yk-measure-heading: 22ch;

  /* Abstaende */
  --yk-space-none: 0px;
  --yk-space-hair: 4px;
  --yk-space-xs: 8px;
  --yk-space-sm: 16px;
  --yk-space-md: 24px;
  --yk-space-lg: 32px;
  --yk-space-xl: 48px;
  --yk-space-xxl: 72px;
  --yk-space-xxxl: 104px;

  /* Abschnittsabstaende, Startwert Mobil, weiter unten angehoben */
  --yk-section-top: 48px;
  --yk-section-bottom: 48px;
  --yk-section-tight: 32px;

  /* Raster und Breiten */
  --yk-content-width: 1240px;
  --yk-stage-width: 1440px;
  --yk-narrow-width: 820px;
  --yk-gutter: 20px;
  --yk-grid-gap: 16px;

  /* Kanten, Raender, Schatten */
  --yk-radius-none: 0px;
  --yk-radius-sm: 2px;
  --yk-radius-md: 4px;
  --yk-radius-image: 0px;
  --yk-radius-pill: 999px;
  --yk-border-hairline: 1px;
  --yk-border-strong: 2px;
  --yk-border-focus: 3px;
  --yk-border-focus-offset: 2px;
  --yk-shadow-none: none;
  --yk-shadow-raised: 0 1px 2px rgba(36, 38, 38, 0.06), 0 8px 24px rgba(36, 38, 38, 0.08);
  --yk-shadow-dock: 0 10px 30px rgba(36, 38, 38, 0.18);

  /* Bewegung */
  --yk-duration-fast: 140ms;
  --yk-duration-base: 200ms;
  --yk-duration-slow: 380ms;
  --yk-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --yk-press-scale: 0.97;

  /* Kopf und Logo */
  --yk-header-h: 68px;
  --yk-logo-h: 48px;

  /* Ebenen und Bedienflaechen */
  --yk-z-content: 1;
  --yk-z-header: 100;
  --yk-z-dock: 120;
  --yk-z-dock-panel: 121;
  --yk-z-menu-mobile: 130;
  --yk-z-skip-link: 200;
  --yk-target-min: 44px;

  /* Seitenverhaeltnisse */
  --yk-aspect-portrait: 9 / 16;
  --yk-aspect-portrait-soft: 3 / 4;
  --yk-aspect-landscape: 16 / 9;
  --yk-aspect-square: 1 / 1;
  --yk-aspect-stage: 3 / 2;
}

@media (min-width: 768px) {
  :root {
    --yk-section-top: 72px;
    --yk-section-bottom: 72px;
    --yk-section-tight: 48px;
    --yk-gutter: 28px;
    --yk-grid-gap: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --yk-header-h: 96px;
    --yk-logo-h: 72px;
    --yk-section-top: 104px;
    --yk-section-bottom: 104px;
    --yk-section-tight: 72px;
    --yk-gutter: 32px;
    --yk-grid-gap: 32px;
  }
}