/**
 * Copyright 2026 Zentrum für Digitale Souveränität der Öffentlichen Verwaltung (ZenDiS) GmbH.
 * SPDX-License-Identifier: MIT
 */

@import 'tailwindcss';
@import 'tw-animate-css';
@import 'react-medium-image-zoom/dist/styles.css';
@import '@mdxeditor/editor/style.css';
@import '@kern-ux/native/dist/kern.min.css';
@import './theme-bridge.css';
@import "./fira-sans.css";

@source "./**/*.css";
@source "../src/**/*.tsx";
@source "../dist/**/*.tsx";

@custom-variant dark (&:where([data-kern-theme="dark"], [data-kern-theme="dark"] *));

@theme inline {
  /* Font Family (extends defaults) */
  --font-display: var(--font-display);
}

@theme {
  /* Spacing (extends defaults) */
  --spacing-xxs: var(--kern-metric-space-2x-small);
  --spacing-xs: var(--kern-metric-space-x-small);
  --spacing-sm: var(--kern-metric-space-small);
  --spacing-md: var(--kern-metric-space-default);
  --spacing-lg: var(--kern-metric-space-large);
  --spacing-xl: var(--kern-metric-space-x-large);

  /* Font Size (replaces defaults) */
  --text-*: initial;
  --text-xs: var(--kern-typography-font-size-static-small);
  --text-xs--line-height: var(--kern-typography-line-height-static-medium);
  --text-sm: var(--kern-typography-font-size-static-small);
  --text-sm--line-height: var(--kern-typography-line-height-static-medium);
  --text-base: var(--kern-typography-font-size-static-medium);
  --text-base--line-height: var(--kern-typography-line-height-static-medium);
  --text-lg: var(--kern-typography-font-size-static-large);
  --text-lg--line-height: var(--kern-typography-line-height-static-large);
  --text-xl: var(--kern-typography-font-size-adaptive-x-large);
  --text-xl--line-height: var(--kern-typography-line-height-adaptive-x-large);
  --text-2xl: var(--kern-typography-font-size-adaptive-2x-large);
  --text-2xl--line-height: var(--kern-typography-line-height-adaptive-2x-large);
  --text-3xl: var(--kern-typography-font-size-adaptive-3x-large);
  --text-3xl--line-height: var(--kern-typography-line-height-adaptive-3x-large);

  /* Letter Spacing (replaces defaults) */
  --tracking-*: initial;
  --tracking-tight: -0.015em;

  /* Border Radius (replaces defaults) */
  --radius-*: initial;
  --radius-lg: var(--kern-metric-border-radius-large);
  --radius-md: var(--kern-metric-border-radius-medium);
  --radius-sm: var(--kern-metric-border-radius-small);
  --radius: var(--kern-metric-border-radius-default);
  --radius-full: 100%;

  /* Colors (replaces defaults) */
  --color-*: initial;
  --color-transparent: transparent;
  --color-current: currentColor;
  --color-black: #000;
  --color-white: #fff;

  /* Layout colors */
  --color-kern-layout-text: var(--kern-color-layout-text-default);
  --color-kern-layout-text-muted: var(--kern-color-layout-text-muted);
  --color-kern-layout-text-inverse: var(--kern-color-layout-text-inverse);
  --color-kern-layout-border: var(--kern-color-layout-border);
  --color-kern-layout-background-default: var(--kern-color-layout-background-default);
  --color-kern-layout-background-hued: var(--kern-color-layout-background-hued);

  /* Form colors */
  --color-kern-form-inputs-background: var(--kern-color-form-inputs-background);
  --color-kern-form-inputs-background-inverted: var(--kern-color-form-inputs-background-inverted);

  /* Action colors */
  --color-kern-action-default: var(--kern-color-action-default);
  --color-kern-action-on-default: var(--kern-color-action-on-default);
  --color-kern-action-visited: var(--kern-color-action-visited);
  --color-kern-action-focus-background: var(--kern-color-action-focus-background);
  --color-kern-action-focus-border-inside: var(--kern-color-action-focus-border-inside);
  --color-kern-action-focus-border-outside: var(--kern-color-action-focus-border-outside);
  --color-kern-action-state-indicator-default: var(--kern-color-action-state-indicator-default);
  --color-kern-action-state-indicator-tint: var(--kern-color-action-state-indicator-tint);
  --color-kern-action-state-indicator-shade: var(--kern-color-action-state-indicator-shade);
  --color-kern-action-state-opacity-hover: var(--kern-color-action-state-opacity-hover);
  --color-kern-action-state-opacity-pressed: var(--kern-color-action-state-opacity-pressed);
  --color-kern-action-state-opacity-selected: var(--kern-color-action-state-opacity-selected);
  --color-kern-action-state-opacity-active: var(--kern-color-action-state-opacity-active);
  --color-kern-action-state-opacity-disabled: var(--kern-color-action-state-opacity-disabled);
  --color-kern-action-state-opacity-overlay: var(--kern-color-action-state-opacity-overlay);
  --color-kern-action-state-indicator-shade-hover: var(--kern-color-action-state-indicator-shade-hover);
  --color-kern-action-state-indicator-shade-active: var(--kern-color-action-state-indicator-shade-active);
  --color-kern-action-state-indicator-tint-hover: var(--kern-color-action-state-indicator-tint-hover);
  --color-kern-action-state-indicator-tint-active: var(--kern-color-action-state-indicator-tint-active);
  --color-kern-action-state-indicator-tint-hover-opacity: var(--kern-color-action-state-indicator-tint-hover-opacity);

  /* Feedback colors */
  --color-kern-feedback-success: var(--kern-color-feedback-success);
  --color-kern-feedback-success-background: var(--kern-color-feedback-success-background);
  --color-kern-feedback-info: var(--kern-color-feedback-info);
  --color-kern-feedback-info-background: var(--kern-color-feedback-info-background);
  --color-kern-feedback-danger: var(--kern-color-feedback-danger);
  --color-kern-feedback-danger-background: var(--kern-color-feedback-danger-background);
  --color-kern-feedback-warning: var(--kern-color-feedback-warning);
  --color-kern-feedback-warning-background: var(--kern-color-feedback-warning-background);
  --color-kern-feedback-loader: var(--kern-color-feedback-loader);
  --color-kern-feedback-loader-background: var(--kern-color-feedback-loader-background);

  /* Darkblue palette */
  --color-kern-darkblue-025: oklch(var(--kern-darkblue-025-lightness) var(--kern-darkblue-025-chroma) var(--kern-darkblue-025-hue));
  --color-kern-darkblue-050: oklch(var(--kern-darkblue-050-lightness) var(--kern-darkblue-050-chroma) var(--kern-darkblue-050-hue));
  --color-kern-darkblue-100: oklch(var(--kern-darkblue-100-lightness) var(--kern-darkblue-100-chroma) var(--kern-darkblue-100-hue));
  --color-kern-darkblue-150: oklch(var(--kern-darkblue-150-lightness) var(--kern-darkblue-150-chroma) var(--kern-darkblue-150-hue));
  --color-kern-darkblue-200: oklch(var(--kern-darkblue-200-lightness) var(--kern-darkblue-200-chroma) var(--kern-darkblue-200-hue));
  --color-kern-darkblue-250: oklch(var(--kern-darkblue-250-lightness) var(--kern-darkblue-250-chroma) var(--kern-darkblue-250-hue));
  --color-kern-darkblue-300: oklch(var(--kern-darkblue-300-lightness) var(--kern-darkblue-300-chroma) var(--kern-darkblue-300-hue));
  --color-kern-darkblue-350: oklch(var(--kern-darkblue-350-lightness) var(--kern-darkblue-350-chroma) var(--kern-darkblue-350-hue));
  --color-kern-darkblue-400: oklch(var(--kern-darkblue-400-lightness) var(--kern-darkblue-400-chroma) var(--kern-darkblue-400-hue));
  --color-kern-darkblue-450: oklch(var(--kern-darkblue-450-lightness) var(--kern-darkblue-450-chroma) var(--kern-darkblue-450-hue));
  --color-kern-darkblue-500: oklch(var(--kern-darkblue-500-lightness) var(--kern-darkblue-500-chroma) var(--kern-darkblue-500-hue));
  --color-kern-darkblue-550: oklch(var(--kern-darkblue-550-lightness) var(--kern-darkblue-550-chroma) var(--kern-darkblue-550-hue));
  --color-kern-darkblue-600: oklch(var(--kern-darkblue-600-lightness) var(--kern-darkblue-600-chroma) var(--kern-darkblue-600-hue));
  --color-kern-darkblue-650: oklch(var(--kern-darkblue-650-lightness) var(--kern-darkblue-650-chroma) var(--kern-darkblue-650-hue));
  --color-kern-darkblue-700: oklch(var(--kern-darkblue-700-lightness) var(--kern-darkblue-700-chroma) var(--kern-darkblue-700-hue));
  --color-kern-darkblue-750: oklch(var(--kern-darkblue-750-lightness) var(--kern-darkblue-750-chroma) var(--kern-darkblue-750-hue));
  --color-kern-darkblue-800: oklch(var(--kern-darkblue-800-lightness) var(--kern-darkblue-800-chroma) var(--kern-darkblue-800-hue));
  --color-kern-darkblue-850: oklch(var(--kern-darkblue-850-lightness) var(--kern-darkblue-850-chroma) var(--kern-darkblue-850-hue));
  --color-kern-darkblue-900: oklch(var(--kern-darkblue-900-lightness) var(--kern-darkblue-900-chroma) var(--kern-darkblue-900-hue));
  --color-kern-darkblue-950: oklch(var(--kern-darkblue-950-lightness) var(--kern-darkblue-950-chroma) var(--kern-darkblue-950-hue));

  /* Lightblue palette */
  --color-kern-lightblue-025: oklch(var(--kern-lightblue-025-lightness) var(--kern-lightblue-025-chroma) var(--kern-lightblue-025-hue));
  --color-kern-lightblue-050: oklch(var(--kern-lightblue-050-lightness) var(--kern-lightblue-050-chroma) var(--kern-lightblue-050-hue));
  --color-kern-lightblue-100: oklch(var(--kern-lightblue-100-lightness) var(--kern-lightblue-100-chroma) var(--kern-lightblue-100-hue));
  --color-kern-lightblue-150: oklch(var(--kern-lightblue-150-lightness) var(--kern-lightblue-150-chroma) var(--kern-lightblue-150-hue));
  --color-kern-lightblue-200: oklch(var(--kern-lightblue-200-lightness) var(--kern-lightblue-200-chroma) var(--kern-lightblue-200-hue));
  --color-kern-lightblue-250: oklch(var(--kern-lightblue-250-lightness) var(--kern-lightblue-250-chroma) var(--kern-lightblue-250-hue));
  --color-kern-lightblue-300: oklch(var(--kern-lightblue-300-lightness) var(--kern-lightblue-300-chroma) var(--kern-lightblue-300-hue));
  --color-kern-lightblue-350: oklch(var(--kern-lightblue-350-lightness) var(--kern-lightblue-350-chroma) var(--kern-lightblue-350-hue));
  --color-kern-lightblue-400: oklch(var(--kern-lightblue-400-lightness) var(--kern-lightblue-400-chroma) var(--kern-lightblue-400-hue));
  --color-kern-lightblue-450: oklch(var(--kern-lightblue-450-lightness) var(--kern-lightblue-450-chroma) var(--kern-lightblue-450-hue));
  --color-kern-lightblue-500: oklch(var(--kern-lightblue-500-lightness) var(--kern-lightblue-500-chroma) var(--kern-lightblue-500-hue));
  --color-kern-lightblue-550: oklch(var(--kern-lightblue-550-lightness) var(--kern-lightblue-550-chroma) var(--kern-lightblue-550-hue));
  --color-kern-lightblue-600: oklch(var(--kern-lightblue-600-lightness) var(--kern-lightblue-600-chroma) var(--kern-lightblue-600-hue));
  --color-kern-lightblue-650: oklch(var(--kern-lightblue-650-lightness) var(--kern-lightblue-650-chroma) var(--kern-lightblue-650-hue));
  --color-kern-lightblue-700: oklch(var(--kern-lightblue-700-lightness) var(--kern-lightblue-700-chroma) var(--kern-lightblue-700-hue));
  --color-kern-lightblue-750: oklch(var(--kern-lightblue-750-lightness) var(--kern-lightblue-750-chroma) var(--kern-lightblue-750-hue));
  --color-kern-lightblue-800: oklch(var(--kern-lightblue-800-lightness) var(--kern-lightblue-800-chroma) var(--kern-lightblue-800-hue));
  --color-kern-lightblue-850: oklch(var(--kern-lightblue-850-lightness) var(--kern-lightblue-850-chroma) var(--kern-lightblue-850-hue));
  --color-kern-lightblue-900: oklch(var(--kern-lightblue-900-lightness) var(--kern-lightblue-900-chroma) var(--kern-lightblue-900-hue));
  --color-kern-lightblue-950: oklch(var(--kern-lightblue-950-lightness) var(--kern-lightblue-950-chroma) var(--kern-lightblue-950-hue));

  /* Turquoise palette */
  --color-kern-turquoise-025: oklch(var(--kern-turquoise-025-lightness) var(--kern-turquoise-025-chroma) var(--kern-turquoise-025-hue));
  --color-kern-turquoise-050: oklch(var(--kern-turquoise-050-lightness) var(--kern-turquoise-050-chroma) var(--kern-turquoise-050-hue));
  --color-kern-turquoise-100: oklch(var(--kern-turquoise-100-lightness) var(--kern-turquoise-100-chroma) var(--kern-turquoise-100-hue));
  --color-kern-turquoise-150: oklch(var(--kern-turquoise-150-lightness) var(--kern-turquoise-150-chroma) var(--kern-turquoise-150-hue));
  --color-kern-turquoise-200: oklch(var(--kern-turquoise-200-lightness) var(--kern-turquoise-200-chroma) var(--kern-turquoise-200-hue));
  --color-kern-turquoise-250: oklch(var(--kern-turquoise-250-lightness) var(--kern-turquoise-250-chroma) var(--kern-turquoise-250-hue));
  --color-kern-turquoise-300: oklch(var(--kern-turquoise-300-lightness) var(--kern-turquoise-300-chroma) var(--kern-turquoise-300-hue));
  --color-kern-turquoise-350: oklch(var(--kern-turquoise-350-lightness) var(--kern-turquoise-350-chroma) var(--kern-turquoise-350-hue));
  --color-kern-turquoise-400: oklch(var(--kern-turquoise-400-lightness) var(--kern-turquoise-400-chroma) var(--kern-turquoise-400-hue));
  --color-kern-turquoise-450: oklch(var(--kern-turquoise-450-lightness) var(--kern-turquoise-450-chroma) var(--kern-turquoise-450-hue));
  --color-kern-turquoise-500: oklch(var(--kern-turquoise-500-lightness) var(--kern-turquoise-500-chroma) var(--kern-turquoise-500-hue));
  --color-kern-turquoise-550: oklch(var(--kern-turquoise-550-lightness) var(--kern-turquoise-550-chroma) var(--kern-turquoise-550-hue));
  --color-kern-turquoise-600: oklch(var(--kern-turquoise-600-lightness) var(--kern-turquoise-600-chroma) var(--kern-turquoise-600-hue));
  --color-kern-turquoise-650: oklch(var(--kern-turquoise-650-lightness) var(--kern-turquoise-650-chroma) var(--kern-turquoise-650-hue));
  --color-kern-turquoise-700: oklch(var(--kern-turquoise-700-lightness) var(--kern-turquoise-700-chroma) var(--kern-turquoise-700-hue));
  --color-kern-turquoise-750: oklch(var(--kern-turquoise-750-lightness) var(--kern-turquoise-750-chroma) var(--kern-turquoise-750-hue));
  --color-kern-turquoise-800: oklch(var(--kern-turquoise-800-lightness) var(--kern-turquoise-800-chroma) var(--kern-turquoise-800-hue));
  --color-kern-turquoise-850: oklch(var(--kern-turquoise-850-lightness) var(--kern-turquoise-850-chroma) var(--kern-turquoise-850-hue));
  --color-kern-turquoise-900: oklch(var(--kern-turquoise-900-lightness) var(--kern-turquoise-900-chroma) var(--kern-turquoise-900-hue));
  --color-kern-turquoise-950: oklch(var(--kern-turquoise-950-lightness) var(--kern-turquoise-950-chroma) var(--kern-turquoise-950-hue));

  /* Green palette */
  --color-kern-green-025: oklch(var(--kern-green-025-lightness) var(--kern-green-025-chroma) var(--kern-green-025-hue));
  --color-kern-green-050: oklch(var(--kern-green-050-lightness) var(--kern-green-050-chroma) var(--kern-green-050-hue));
  --color-kern-green-100: oklch(var(--kern-green-100-lightness) var(--kern-green-100-chroma) var(--kern-green-100-hue));
  --color-kern-green-150: oklch(var(--kern-green-150-lightness) var(--kern-green-150-chroma) var(--kern-green-150-hue));
  --color-kern-green-200: oklch(var(--kern-green-200-lightness) var(--kern-green-200-chroma) var(--kern-green-200-hue));
  --color-kern-green-250: oklch(var(--kern-green-250-lightness) var(--kern-green-250-chroma) var(--kern-green-250-hue));
  --color-kern-green-300: oklch(var(--kern-green-300-lightness) var(--kern-green-300-chroma) var(--kern-green-300-hue));
  --color-kern-green-350: oklch(var(--kern-green-350-lightness) var(--kern-green-350-chroma) var(--kern-green-350-hue));
  --color-kern-green-400: oklch(var(--kern-green-400-lightness) var(--kern-green-400-chroma) var(--kern-green-400-hue));
  --color-kern-green-450: oklch(var(--kern-green-450-lightness) var(--kern-green-450-chroma) var(--kern-green-450-hue));
  --color-kern-green-500: oklch(var(--kern-green-500-lightness) var(--kern-green-500-chroma) var(--kern-green-500-hue));
  --color-kern-green-550: oklch(var(--kern-green-550-lightness) var(--kern-green-550-chroma) var(--kern-green-550-hue));
  --color-kern-green-600: oklch(var(--kern-green-600-lightness) var(--kern-green-600-chroma) var(--kern-green-600-hue));
  --color-kern-green-650: oklch(var(--kern-green-650-lightness) var(--kern-green-650-chroma) var(--kern-green-650-hue));
  --color-kern-green-700: oklch(var(--kern-green-700-lightness) var(--kern-green-700-chroma) var(--kern-green-700-hue));
  --color-kern-green-750: oklch(var(--kern-green-750-lightness) var(--kern-green-750-chroma) var(--kern-green-750-hue));
  --color-kern-green-800: oklch(var(--kern-green-800-lightness) var(--kern-green-800-chroma) var(--kern-green-800-hue));
  --color-kern-green-850: oklch(var(--kern-green-850-lightness) var(--kern-green-850-chroma) var(--kern-green-850-hue));
  --color-kern-green-900: oklch(var(--kern-green-900-lightness) var(--kern-green-900-chroma) var(--kern-green-900-hue));
  --color-kern-green-950: oklch(var(--kern-green-950-lightness) var(--kern-green-950-chroma) var(--kern-green-950-hue));

  /* Limette palette */
  --color-kern-limette-025: oklch(var(--kern-limette-025-lightness) var(--kern-limette-025-chroma) var(--kern-limette-025-hue));
  --color-kern-limette-050: oklch(var(--kern-limette-050-lightness) var(--kern-limette-050-chroma) var(--kern-limette-050-hue));
  --color-kern-limette-100: oklch(var(--kern-limette-100-lightness) var(--kern-limette-100-chroma) var(--kern-limette-100-hue));
  --color-kern-limette-150: oklch(var(--kern-limette-150-lightness) var(--kern-limette-150-chroma) var(--kern-limette-150-hue));
  --color-kern-limette-200: oklch(var(--kern-limette-200-lightness) var(--kern-limette-200-chroma) var(--kern-limette-200-hue));
  --color-kern-limette-250: oklch(var(--kern-limette-250-lightness) var(--kern-limette-250-chroma) var(--kern-limette-250-hue));
  --color-kern-limette-300: oklch(var(--kern-limette-300-lightness) var(--kern-limette-300-chroma) var(--kern-limette-300-hue));
  --color-kern-limette-350: oklch(var(--kern-limette-350-lightness) var(--kern-limette-350-chroma) var(--kern-limette-350-hue));
  --color-kern-limette-400: oklch(var(--kern-limette-400-lightness) var(--kern-limette-400-chroma) var(--kern-limette-400-hue));
  --color-kern-limette-450: oklch(var(--kern-limette-450-lightness) var(--kern-limette-450-chroma) var(--kern-limette-450-hue));
  --color-kern-limette-500: oklch(var(--kern-limette-500-lightness) var(--kern-limette-500-chroma) var(--kern-limette-500-hue));
  --color-kern-limette-550: oklch(var(--kern-limette-550-lightness) var(--kern-limette-550-chroma) var(--kern-limette-550-hue));
  --color-kern-limette-600: oklch(var(--kern-limette-600-lightness) var(--kern-limette-600-chroma) var(--kern-limette-600-hue));
  --color-kern-limette-650: oklch(var(--kern-limette-650-lightness) var(--kern-limette-650-chroma) var(--kern-limette-650-hue));
  --color-kern-limette-700: oklch(var(--kern-limette-700-lightness) var(--kern-limette-700-chroma) var(--kern-limette-700-hue));
  --color-kern-limette-750: oklch(var(--kern-limette-750-lightness) var(--kern-limette-750-chroma) var(--kern-limette-750-hue));
  --color-kern-limette-800: oklch(var(--kern-limette-800-lightness) var(--kern-limette-800-chroma) var(--kern-limette-800-hue));
  --color-kern-limette-850: oklch(var(--kern-limette-850-lightness) var(--kern-limette-850-chroma) var(--kern-limette-850-hue));
  --color-kern-limette-900: oklch(var(--kern-limette-900-lightness) var(--kern-limette-900-chroma) var(--kern-limette-900-hue));
  --color-kern-limette-950: oklch(var(--kern-limette-950-lightness) var(--kern-limette-950-chroma) var(--kern-limette-950-hue));

  /* Yellow palette */
  --color-kern-yellow-025: oklch(var(--kern-yellow-025-lightness) var(--kern-yellow-025-chroma) var(--kern-yellow-025-hue));
  --color-kern-yellow-050: oklch(var(--kern-yellow-050-lightness) var(--kern-yellow-050-chroma) var(--kern-yellow-050-hue));
  --color-kern-yellow-100: oklch(var(--kern-yellow-100-lightness) var(--kern-yellow-100-chroma) var(--kern-yellow-100-hue));
  --color-kern-yellow-150: oklch(var(--kern-yellow-150-lightness) var(--kern-yellow-150-chroma) var(--kern-yellow-150-hue));
  --color-kern-yellow-200: oklch(var(--kern-yellow-200-lightness) var(--kern-yellow-200-chroma) var(--kern-yellow-200-hue));
  --color-kern-yellow-250: oklch(var(--kern-yellow-250-lightness) var(--kern-yellow-250-chroma) var(--kern-yellow-250-hue));
  --color-kern-yellow-300: oklch(var(--kern-yellow-300-lightness) var(--kern-yellow-300-chroma) var(--kern-yellow-300-hue));
  --color-kern-yellow-350: oklch(var(--kern-yellow-350-lightness) var(--kern-yellow-350-chroma) var(--kern-yellow-350-hue));
  --color-kern-yellow-400: oklch(var(--kern-yellow-400-lightness) var(--kern-yellow-400-chroma) var(--kern-yellow-400-hue));
  --color-kern-yellow-450: oklch(var(--kern-yellow-450-lightness) var(--kern-yellow-450-chroma) var(--kern-yellow-450-hue));
  --color-kern-yellow-500: oklch(var(--kern-yellow-500-lightness) var(--kern-yellow-500-chroma) var(--kern-yellow-500-hue));
  --color-kern-yellow-550: oklch(var(--kern-yellow-550-lightness) var(--kern-yellow-550-chroma) var(--kern-yellow-550-hue));
  --color-kern-yellow-600: oklch(var(--kern-yellow-600-lightness) var(--kern-yellow-600-chroma) var(--kern-yellow-600-hue));
  --color-kern-yellow-650: oklch(var(--kern-yellow-650-lightness) var(--kern-yellow-650-chroma) var(--kern-yellow-650-hue));
  --color-kern-yellow-700: oklch(var(--kern-yellow-700-lightness) var(--kern-yellow-700-chroma) var(--kern-yellow-700-hue));
  --color-kern-yellow-750: oklch(var(--kern-yellow-750-lightness) var(--kern-yellow-750-chroma) var(--kern-yellow-750-hue));
  --color-kern-yellow-800: oklch(var(--kern-yellow-800-lightness) var(--kern-yellow-800-chroma) var(--kern-yellow-800-hue));
  --color-kern-yellow-850: oklch(var(--kern-yellow-850-lightness) var(--kern-yellow-850-chroma) var(--kern-yellow-850-hue));
  --color-kern-yellow-900: oklch(var(--kern-yellow-900-lightness) var(--kern-yellow-900-chroma) var(--kern-yellow-900-hue));
  --color-kern-yellow-950: oklch(var(--kern-yellow-950-lightness) var(--kern-yellow-950-chroma) var(--kern-yellow-950-hue));

  /* Orange palette */
  --color-kern-orange-025: oklch(var(--kern-orange-025-lightness) var(--kern-orange-025-chroma) var(--kern-orange-025-hue));
  --color-kern-orange-050: oklch(var(--kern-orange-050-lightness) var(--kern-orange-050-chroma) var(--kern-orange-050-hue));
  --color-kern-orange-100: oklch(var(--kern-orange-100-lightness) var(--kern-orange-100-chroma) var(--kern-orange-100-hue));
  --color-kern-orange-150: oklch(var(--kern-orange-150-lightness) var(--kern-orange-150-chroma) var(--kern-orange-150-hue));
  --color-kern-orange-200: oklch(var(--kern-orange-200-lightness) var(--kern-orange-200-chroma) var(--kern-orange-200-hue));
  --color-kern-orange-250: oklch(var(--kern-orange-250-lightness) var(--kern-orange-250-chroma) var(--kern-orange-250-hue));
  --color-kern-orange-300: oklch(var(--kern-orange-300-lightness) var(--kern-orange-300-chroma) var(--kern-orange-300-hue));
  --color-kern-orange-350: oklch(var(--kern-orange-350-lightness) var(--kern-orange-350-chroma) var(--kern-orange-350-hue));
  --color-kern-orange-400: oklch(var(--kern-orange-400-lightness) var(--kern-orange-400-chroma) var(--kern-orange-400-hue));
  --color-kern-orange-450: oklch(var(--kern-orange-450-lightness) var(--kern-orange-450-chroma) var(--kern-orange-450-hue));
  --color-kern-orange-500: oklch(var(--kern-orange-500-lightness) var(--kern-orange-500-chroma) var(--kern-orange-500-hue));
  --color-kern-orange-550: oklch(var(--kern-orange-550-lightness) var(--kern-orange-550-chroma) var(--kern-orange-550-hue));
  --color-kern-orange-600: oklch(var(--kern-orange-600-lightness) var(--kern-orange-600-chroma) var(--kern-orange-600-hue));
  --color-kern-orange-650: oklch(var(--kern-orange-650-lightness) var(--kern-orange-650-chroma) var(--kern-orange-650-hue));
  --color-kern-orange-700: oklch(var(--kern-orange-700-lightness) var(--kern-orange-700-chroma) var(--kern-orange-700-hue));
  --color-kern-orange-750: oklch(var(--kern-orange-750-lightness) var(--kern-orange-750-chroma) var(--kern-orange-750-hue));
  --color-kern-orange-800: oklch(var(--kern-orange-800-lightness) var(--kern-orange-800-chroma) var(--kern-orange-800-hue));
  --color-kern-orange-850: oklch(var(--kern-orange-850-lightness) var(--kern-orange-850-chroma) var(--kern-orange-850-hue));
  --color-kern-orange-900: oklch(var(--kern-orange-900-lightness) var(--kern-orange-900-chroma) var(--kern-orange-900-hue));
  --color-kern-orange-950: oklch(var(--kern-orange-950-lightness) var(--kern-orange-950-chroma) var(--kern-orange-950-hue));

  /* Red palette */
  --color-kern-red-025: oklch(var(--kern-red-025-lightness) var(--kern-red-025-chroma) var(--kern-red-025-hue));
  --color-kern-red-050: oklch(var(--kern-red-050-lightness) var(--kern-red-050-chroma) var(--kern-red-050-hue));
  --color-kern-red-100: oklch(var(--kern-red-100-lightness) var(--kern-red-100-chroma) var(--kern-red-100-hue));
  --color-kern-red-150: oklch(var(--kern-red-150-lightness) var(--kern-red-150-chroma) var(--kern-red-150-hue));
  --color-kern-red-200: oklch(var(--kern-red-200-lightness) var(--kern-red-200-chroma) var(--kern-red-200-hue));
  --color-kern-red-250: oklch(var(--kern-red-250-lightness) var(--kern-red-250-chroma) var(--kern-red-250-hue));
  --color-kern-red-300: oklch(var(--kern-red-300-lightness) var(--kern-red-300-chroma) var(--kern-red-300-hue));
  --color-kern-red-350: oklch(var(--kern-red-350-lightness) var(--kern-red-350-chroma) var(--kern-red-350-hue));
  --color-kern-red-400: oklch(var(--kern-red-400-lightness) var(--kern-red-400-chroma) var(--kern-red-400-hue));
  --color-kern-red-450: oklch(var(--kern-red-450-lightness) var(--kern-red-450-chroma) var(--kern-red-450-hue));
  --color-kern-red-500: oklch(var(--kern-red-500-lightness) var(--kern-red-500-chroma) var(--kern-red-500-hue));
  --color-kern-red-550: oklch(var(--kern-red-550-lightness) var(--kern-red-550-chroma) var(--kern-red-550-hue));
  --color-kern-red-600: oklch(var(--kern-red-600-lightness) var(--kern-red-600-chroma) var(--kern-red-600-hue));
  --color-kern-red-650: oklch(var(--kern-red-650-lightness) var(--kern-red-650-chroma) var(--kern-red-650-hue));
  --color-kern-red-700: oklch(var(--kern-red-700-lightness) var(--kern-red-700-chroma) var(--kern-red-700-hue));
  --color-kern-red-750: oklch(var(--kern-red-750-lightness) var(--kern-red-750-chroma) var(--kern-red-750-hue));
  --color-kern-red-800: oklch(var(--kern-red-800-lightness) var(--kern-red-800-chroma) var(--kern-red-800-hue));
  --color-kern-red-850: oklch(var(--kern-red-850-lightness) var(--kern-red-850-chroma) var(--kern-red-850-hue));
  --color-kern-red-900: oklch(var(--kern-red-900-lightness) var(--kern-red-900-chroma) var(--kern-red-900-hue));
  --color-kern-red-950: oklch(var(--kern-red-950-lightness) var(--kern-red-950-chroma) var(--kern-red-950-hue));

  /* Violet palette */
  --color-kern-violet-025: oklch(var(--kern-violet-025-lightness) var(--kern-violet-025-chroma) var(--kern-violet-025-hue));
  --color-kern-violet-050: oklch(var(--kern-violet-050-lightness) var(--kern-violet-050-chroma) var(--kern-violet-050-hue));
  --color-kern-violet-100: oklch(var(--kern-violet-100-lightness) var(--kern-violet-100-chroma) var(--kern-violet-100-hue));
  --color-kern-violet-150: oklch(var(--kern-violet-150-lightness) var(--kern-violet-150-chroma) var(--kern-violet-150-hue));
  --color-kern-violet-200: oklch(var(--kern-violet-200-lightness) var(--kern-violet-200-chroma) var(--kern-violet-200-hue));
  --color-kern-violet-250: oklch(var(--kern-violet-250-lightness) var(--kern-violet-250-chroma) var(--kern-violet-250-hue));
  --color-kern-violet-300: oklch(var(--kern-violet-300-lightness) var(--kern-violet-300-chroma) var(--kern-violet-300-hue));
  --color-kern-violet-350: oklch(var(--kern-violet-350-lightness) var(--kern-violet-350-chroma) var(--kern-violet-350-hue));
  --color-kern-violet-400: oklch(var(--kern-violet-400-lightness) var(--kern-violet-400-chroma) var(--kern-violet-400-hue));
  --color-kern-violet-450: oklch(var(--kern-violet-450-lightness) var(--kern-violet-450-chroma) var(--kern-violet-450-hue));
  --color-kern-violet-500: oklch(var(--kern-violet-500-lightness) var(--kern-violet-500-chroma) var(--kern-violet-500-hue));
  --color-kern-violet-550: oklch(var(--kern-violet-550-lightness) var(--kern-violet-550-chroma) var(--kern-violet-550-hue));
  --color-kern-violet-600: oklch(var(--kern-violet-600-lightness) var(--kern-violet-600-chroma) var(--kern-violet-600-hue));
  --color-kern-violet-650: oklch(var(--kern-violet-650-lightness) var(--kern-violet-650-chroma) var(--kern-violet-650-hue));
  --color-kern-violet-700: oklch(var(--kern-violet-700-lightness) var(--kern-violet-700-chroma) var(--kern-violet-700-hue));
  --color-kern-violet-750: oklch(var(--kern-violet-750-lightness) var(--kern-violet-750-chroma) var(--kern-violet-750-hue));
  --color-kern-violet-800: oklch(var(--kern-violet-800-lightness) var(--kern-violet-800-chroma) var(--kern-violet-800-hue));
  --color-kern-violet-850: oklch(var(--kern-violet-850-lightness) var(--kern-violet-850-chroma) var(--kern-violet-850-hue));
  --color-kern-violet-900: oklch(var(--kern-violet-900-lightness) var(--kern-violet-900-chroma) var(--kern-violet-900-hue));
  --color-kern-violet-950: oklch(var(--kern-violet-950-lightness) var(--kern-violet-950-chroma) var(--kern-violet-950-hue));

  /* Neutral palette */
  --color-kern-neutral-025: oklch(var(--kern-neutral-025-lightness) var(--kern-neutral-025-chroma) var(--kern-neutral-025-hue));
  --color-kern-neutral-050: oklch(var(--kern-neutral-050-lightness) var(--kern-neutral-050-chroma) var(--kern-neutral-050-hue));
  --color-kern-neutral-100: oklch(var(--kern-neutral-100-lightness) var(--kern-neutral-100-chroma) var(--kern-neutral-100-hue));
  --color-kern-neutral-150: oklch(var(--kern-neutral-150-lightness) var(--kern-neutral-150-chroma) var(--kern-neutral-150-hue));
  --color-kern-neutral-200: oklch(var(--kern-neutral-200-lightness) var(--kern-neutral-200-chroma) var(--kern-neutral-200-hue));
  --color-kern-neutral-250: oklch(var(--kern-neutral-250-lightness) var(--kern-neutral-250-chroma) var(--kern-neutral-250-hue));
  --color-kern-neutral-300: oklch(var(--kern-neutral-300-lightness) var(--kern-neutral-300-chroma) var(--kern-neutral-300-hue));
  --color-kern-neutral-350: oklch(var(--kern-neutral-350-lightness) var(--kern-neutral-350-chroma) var(--kern-neutral-350-hue));
  --color-kern-neutral-400: oklch(var(--kern-neutral-400-lightness) var(--kern-neutral-400-chroma) var(--kern-neutral-400-hue));
  --color-kern-neutral-450: oklch(var(--kern-neutral-450-lightness) var(--kern-neutral-450-chroma) var(--kern-neutral-450-hue));
  --color-kern-neutral-500: oklch(var(--kern-neutral-500-lightness) var(--kern-neutral-500-chroma) var(--kern-neutral-500-hue));
  --color-kern-neutral-550: oklch(var(--kern-neutral-550-lightness) var(--kern-neutral-550-chroma) var(--kern-neutral-550-hue));
  --color-kern-neutral-600: oklch(var(--kern-neutral-600-lightness) var(--kern-neutral-600-chroma) var(--kern-neutral-600-hue));
  --color-kern-neutral-650: oklch(var(--kern-neutral-650-lightness) var(--kern-neutral-650-chroma) var(--kern-neutral-650-hue));
  --color-kern-neutral-700: oklch(var(--kern-neutral-700-lightness) var(--kern-neutral-700-chroma) var(--kern-neutral-700-hue));
  --color-kern-neutral-750: oklch(var(--kern-neutral-750-lightness) var(--kern-neutral-750-chroma) var(--kern-neutral-750-hue));
  --color-kern-neutral-800: oklch(var(--kern-neutral-800-lightness) var(--kern-neutral-800-chroma) var(--kern-neutral-800-hue));
  --color-kern-neutral-850: oklch(var(--kern-neutral-850-lightness) var(--kern-neutral-850-chroma) var(--kern-neutral-850-hue));
  --color-kern-neutral-900: oklch(var(--kern-neutral-900-lightness) var(--kern-neutral-900-chroma) var(--kern-neutral-900-hue));
  --color-kern-neutral-950: oklch(var(--kern-neutral-950-lightness) var(--kern-neutral-950-chroma) var(--kern-neutral-950-hue));

  /* Gray palette */
  --color-kern-gray-025: oklch(var(--kern-gray-025-lightness) var(--kern-gray-025-chroma) var(--kern-gray-025-hue));
  --color-kern-gray-050: oklch(var(--kern-gray-050-lightness) var(--kern-gray-050-chroma) var(--kern-gray-050-hue));
  --color-kern-gray-100: oklch(var(--kern-gray-100-lightness) var(--kern-gray-100-chroma) var(--kern-gray-100-hue));
  --color-kern-gray-150: oklch(var(--kern-gray-150-lightness) var(--kern-gray-150-chroma) var(--kern-gray-150-hue));
  --color-kern-gray-200: oklch(var(--kern-gray-200-lightness) var(--kern-gray-200-chroma) var(--kern-gray-200-hue));
  --color-kern-gray-250: oklch(var(--kern-gray-250-lightness) var(--kern-gray-250-chroma) var(--kern-gray-250-hue));
  --color-kern-gray-300: oklch(var(--kern-gray-300-lightness) var(--kern-gray-300-chroma) var(--kern-gray-300-hue));
  --color-kern-gray-350: oklch(var(--kern-gray-350-lightness) var(--kern-gray-350-chroma) var(--kern-gray-350-hue));
  --color-kern-gray-400: oklch(var(--kern-gray-400-lightness) var(--kern-gray-400-chroma) var(--kern-gray-400-hue));
  --color-kern-gray-450: oklch(var(--kern-gray-450-lightness) var(--kern-gray-450-chroma) var(--kern-gray-450-hue));
  --color-kern-gray-500: oklch(var(--kern-gray-500-lightness) var(--kern-gray-500-chroma) var(--kern-gray-500-hue));
  --color-kern-gray-550: oklch(var(--kern-gray-550-lightness) var(--kern-gray-550-chroma) var(--kern-gray-550-hue));
  --color-kern-gray-600: oklch(var(--kern-gray-600-lightness) var(--kern-gray-600-chroma) var(--kern-gray-600-hue));
  --color-kern-gray-650: oklch(var(--kern-gray-650-lightness) var(--kern-gray-650-chroma) var(--kern-gray-650-hue));
  --color-kern-gray-700: oklch(var(--kern-gray-700-lightness) var(--kern-gray-700-chroma) var(--kern-gray-700-hue));
  --color-kern-gray-750: oklch(var(--kern-gray-750-lightness) var(--kern-gray-750-chroma) var(--kern-gray-750-hue));
  --color-kern-gray-800: oklch(var(--kern-gray-800-lightness) var(--kern-gray-800-chroma) var(--kern-gray-800-hue));
  --color-kern-gray-850: oklch(var(--kern-gray-850-lightness) var(--kern-gray-850-chroma) var(--kern-gray-850-hue));
  --color-kern-gray-900: oklch(var(--kern-gray-900-lightness) var(--kern-gray-900-chroma) var(--kern-gray-900-hue));
  --color-kern-gray-950: oklch(var(--kern-gray-950-lightness) var(--kern-gray-950-chroma) var(--kern-gray-950-hue));

  /* UI component colors */
  --color-footer: var(--footer-background);
  --color-footer-foreground: var(--footer-foreground);
  --color-border: var(--border);
  --color-input: var(--input, var(--background));
  --color-input-foreground: var(--input-foreground, var(--foreground));
  --color-searchbar-border: var(--searchbar-color-border);
  --color-searchbar-background: var(--searchbar-color-background);
  --color-ring: var(--border);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary, var(--accent));
  --color-secondary-foreground: var(--secondary-foreground, var(--accent-foreground));
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground, var(--primary-foreground));
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-info: var(--info);
  --color-info-background: color-mix(in oklch, var(--info), white 85%);
  --color-success: var(--success);
  --color-success-background: color-mix(in oklch, var(--success), white 85%);
  --color-warning: var(--warning);
  --color-warning-background: color-mix(in oklch, var(--warning), white 85%);
  --color-popover: var(--popover, var(--muted));
  --color-popover-foreground: var(--popover-foreground, var(--foreground));
  --color-card: var(--card, var(--muted));
  --color-card-foreground: var(--card-foreground, var(--foreground));
  --color-sidebar: var(--sidebar-background, var(--muted));
  --color-sidebar-foreground: var(--sidebar-foreground, var(--foreground));
  --color-sidebar-primary: var(--sidebar-primary, var(--primary));
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground, var(--primary-foreground));
  --color-sidebar-accent: var(--sidebar-accent, var(--accent));
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground, var(--accent-foreground));
  --color-sidebar-border: var(--sidebar-border, var(--border));
  --color-sidebar-ring: var(--sidebar-ring, var(--border));

  /* Styleguide Bundesregierung */
  --color-font: #222;
  --color-bund: #17406E;
  --color-banner: #e9df2e;
  --color-silver: #85878b;
  --color-textblack: #111314;
  --color-deepblue-50: #383f6a;
  --color-deepblue-100: #2e3560;
  --color-deepblue-200: #242b56;
  --color-deepblue-300: #1a214c;
  --color-deepblue-400: #101742;
  --color-deepblue-500: #060d38;
  --color-deepblue-600: #00032e;
  --color-deepblue-700: #000024;
  --color-deepblue-800: #00001a;
  --color-deepblue-900: #000010;
  --color-lightning-50: #deffff;
  --color-lightning-100: #d4fff7;
  --color-lightning-200: #caffed;
  --color-lightning-300: #c0ffe3;
  --color-lightning-400: #b6ffd9;
  --color-lightning-500: #acfccf;
  --color-lightning-600: #a2f2c5;
  --color-lightning-700: #98e8bb;
  --color-lightning-800: #8edeb1;
  --color-lightning-900: #84d4a7;
  --color-blau-20: #CCE4F0;
  --color-blau-40: #99C9E2;
  --color-blau-60: #66ADD3;
  --color-blau-80: #3392C5;
  --color-blau-100: #0077B6;
  --color-dunkelblau-20: #CCDBE4;
  --color-dunkelblau-40: #99B7C8;
  --color-dunkelblau-60: #6693AD;
  --color-dunkelblau-80: #336F91;
  --color-dunkelblau-100: #004B76;
  --color-dunkelgrau-20: #DDDFE0;
  --color-dunkelgrau-40: #BCC0C1;
  --color-dunkelgrau-60: #9AA0A2;
  --color-dunkelgrau-80: #798183;
  --color-dunkelgrau-100: #576164;
  --color-hellgrau-20: #F2F3F4;
  --color-hellgrau-40: #E5E8E9;
  --color-hellgrau-60: #D8DCDF;
  --color-hellgrau-80: #CBD1D4;
  --color-hellgrau-100: #BEC5C9;
  --color-dunkelgruen-20: #CCDEDA;
  --color-dunkelgruen-40: #99BEB5;
  --color-dunkelgruen-60: #669D8F;
  --color-dunkelgruen-80: #337D6A;
  --color-dunkelgruen-100: #005C45;
  --color-gruen-20: #CCE7DB;
  --color-gruen-40: #99CEB7;
  --color-gruen-60: #66B692;
  --color-gruen-80: #339D6E;
  --color-gruen-100: #00854A;
  --color-hellorange-20: #FDF1D8;
  --color-hellorange-40: #FCE4B1;
  --color-hellorange-60: #FAD68B;
  --color-hellorange-80: #F9C964;
  --color-hellorange-100: #F7BB3D;
  --color-rot-20: #F2CCD8;
  --color-rot-40: #E699B1;
  --color-rot-60: #D9668A;
  --color-rot-80: #CD3363;
  --color-rot-100: #C0003C;
  --color-dunkelrot-20: #933F57;
  --color-dunkelrot-40: #933F57;
  --color-dunkelrot-60: #933F57;
  --color-dunkelrot-80: #933F57;
  --color-dunkelrot-100: #780F2D;
  --color-violett-20: #DFD6DE;
  --color-violett-40: #BFADBC;
  --color-violett-60: #9F839B;
  --color-violett-80: #7F5A79;
  --color-violett-100: #5F316E;
  --color-orange-20: #F5DCD7;
  --color-orange-40: #EBB9AF;
  --color-orange-60: #E19688;
  --color-orange-80: #D77360;
  --color-orange-100: #CD5038;
  --color-gelb-20: #FEF9D8;
  --color-gelb-40: #FDF3B0;
  --color-gelb-60: #FBEC89;
  --color-gelb-80: #FAE661;
  --color-gelb-100: #F9E03A;
  --color-hellgruen-20: #F3F4D6;
  --color-hellgruen-40: #E6EAAD;
  --color-hellgruen-60: #DADF83;
  --color-hellgruen-80: #CDD55A;
  --color-hellgruen-100: #C1CA31;
  --color-oliv-20: #9BB088;
  --color-oliv-40: #9BB088;
  --color-oliv-60: #9BB088;
  --color-oliv-80: #7A9661;
  --color-oliv-100: #597C39;
  --color-tuerkis-20: #CCE6E8;
  --color-tuerkis-40: #99CDD1;
  --color-tuerkis-60: #66B3B9;
  --color-tuerkis-80: #339AA2;
  --color-tuerkis-100: #00818B;
  --color-hellblau-20: #E6F5FB;
  --color-hellblau-40: #CCEBF7;
  --color-hellblau-60: #B3E1F4;
  --color-hellblau-80: #99D7F0;
  --color-hellblau-100: #80CDEC;
}

[data-kern-theme="dark"] {
    --primary:            #6b8fd6;
    --primary-foreground: #ffffff;
    --background:         #0d1526;
    --foreground:         #f0f1f3;
    --muted:              #1a2a45;
    --muted-foreground:   #b0b8cc;
    --border:             #2a3a55;
    --accent:             #6b8fd6;
    --accent-foreground:  #ffffff;
    --destructive:        #e05050;
    --success:            #4a9970;
    --warning:            #c49020;
    --info:               #4a80c0;
    --footer-background:  #070e1c;
    --footer-foreground:  #f0f1f3;
    --searchbar-border:     #2a3a55;
    --searchbar-background: #1a2a45;
}


@layer base {
  * {
    @apply border-border outline-ring;
  }
  body {
    @apply bg-background text-foreground;
  }
}

:root {
  --sticky-header-offset: 115px;
  --anchor-scroll-offset: calc(var(--sticky-header-offset) + 1rem);
}


html {
  @apply antialiased;
  font-feature-settings:
    'rlig' 1,
    'calt' 1,
    'ss01' 1;
  -webkit-tap-highlight-color: transparent;
  @apply overflow-y-scroll;
}

/* adding `:not` with `:has` otherwise page jumps while focusing or while tapping in input https://github.com/shuding/nextra/issues/2840 */
html:not(:has(*:focus)) {
  scroll-padding-top: var(--anchor-scroll-offset);
}

/* Default offset mechanism for anchor scrolling */
/* Keep this as the cross-browser baseline to avoid additive offsets. */

/* Firefox fallback: apply only to the active fragment target.
   Scoping this to Firefox avoids double offset in browsers that already
   honor html scroll-padding-top for fragment navigation. */
@supports (-moz-appearance: none) {
  :target {
    scroll-margin-top: var(--anchor-scroll-offset);
  }
}

body {
  @apply w-full text-base;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* @media (min-width: 768px) {
  .nextra-toc>.div,
  .nextra-sidebar-container {
    mask-image: linear-gradient(to bottom, transparent, #000 20px),
      linear-gradient(to left, #000 10px, transparent 10px);
  }
} */

.contains-task-list {
  @apply ml-0 list-none;

  input[type='checkbox'] {
    @apply mr-1;
  }
}

/* .nextra-sidebar-container {
  [data-toggle-animation='show'] button {
    opacity: 0;
    animation: nextra-fadein 1s ease 0.2s forwards;
  }

  [data-toggle-animation='hide'] button {
    opacity: 0;
    animation: nextra-fadein2 1s ease 0.2s forwards;
  }
} */

[data-rmiz-modal-overlay="visible"] {
  background-color: var(--background) !important;
}


.footnotes a[data-footnote-backref] {
  font-family: initial;
}

@keyframes nextra-fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes nextra-fadein2 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



[id="footnote-label"] {
  display: none;
}

section.footnotes {
  @apply my-xl border-t border-border text-xs!;
}

section.footnotes > ol > li > p {
  @apply text-xs!;
}

sup > a {
  @apply text-sm! p-0!;
}

.container {
  @apply px-md lg:px-xl;
  width: 100%;
  max-width: 100%;
  margin: var(--center-container, "");
}

.content-wrapper {
  @apply px-lg lg:px-0;
  width: 100%;
  margin: var(--center-container, "");
}

.content-wrapper main {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Sticky sidebar — desktop layout (collapsible="none") */
#sidebar {
  align-self: flex-start;
  position: sticky;
  top: var(--sticky-header-offset);
  height: calc(100svh - var(--sticky-header-offset));
}

.github-light {
  background-color: var(--muted) !important;
}


/**
Code blocks
*/
pre code span {
  color: var(--shiki-light)
}

[data-kern-theme='dark'] pre code span {
  color: var(--shiki-dark);
}

p>code,
ul>code,
li>code,
strong>code {
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
  background-color: var(--muted);
  font-size: 0.9em;
}

p>a {
  display: inline !important;
}

p>em>a {
  display: inline !important;
  font-style: italic !important;
}

p>strong>a {
  display: inline !important;
  font-weight: bolder !important;
}

p>em>strong>a,
p>strong>em>a {
  display: inline !important;
  font-style: italic !important;
  font-weight: bolder !important;
}

pre {
  @apply text-base!;
  white-space: pre!important;
  word-break: normal !important;
  hyphens: none !important;
}

.kern-kopfzeile__label {
  font-size: 16px;
}

.kern-kopfzeile__flagge {
  width: 24px;
  height: 20px;
}
[contentEditable="true"] {
    outline: none!important;
    box-shadow: none!important;
}

.mdxeditor-diff-source-wrapper {
    font-size: 14px;
    @apply font-mono;
}

.mdxeditor .cm-sourceView .cm-line, .cm-gutterElement {
    font-size: 14px!important;
    @apply font-mono;
    > span {
        font-size: 14px!important;
        @apply font-mono;
    }
}

.kern-table {
    @apply block overflow-x-auto;
}

/* ── DocTabs: tab component ────────────────── */
.doc-tabs {
    margin-top: 1rem;
}

.doc-tabs-list {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    display: flex;
    width: 100%;
    gap: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1px;
}

.doc-tabs-trigger {
    white-space: nowrap;
    border-radius: 0.25rem 0.25rem 0 0;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    transition: color 0.15s;
    margin-bottom: -2px;
    user-select: none;
    border-bottom: 2px solid transparent;
    color: var(--color-muted-foreground);
    background: transparent;
    cursor: pointer;
}

.doc-tabs-trigger:hover {
    color: var(--color-foreground);
    border-bottom-color: var(--color-border);
}

.doc-tabs-trigger[data-state="active"] {
    color: var(--color-primary);
    border-bottom-color: currentColor;
    outline: none;
}

.doc-tabs-trigger[data-disabled] {
    opacity: 0.5;
    pointer-events: none;
}

.doc-tabs-content {
    margin-top: 1.5rem;
    border-radius: 0.25rem;
}

.doc-tabs-content:focus-visible {
    outline: none;
}

/* ── DocSteps: CSS-counter steps ───────────── */
.doc-steps {
    h2,
    h3,
    h4 {
        counter-increment: var(--counter-id);
        @apply border-0 pb-0 font-semibold tracking-tight mt-8 text-2xl;

        /* Numbered circle centered on the container's border-start edge.
           margin offset = padding (ps-8) + half of size-10 (5 units) */
        &::before {
            @apply absolute flex items-center justify-center
                   size-10 rounded-full
                   border-4 border-background bg-muted
                   text-muted-foreground text-base font-normal;
            margin-inline-start: calc(var(--spacing) * -13);
            content: counter(var(--counter-id));
        }
    }
}

pre:not(i),
pre:not(i) *,
code:not(i),
code:not(i) * {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

html body[data-scroll-locked="1"] {
  overflow: unset!important;
}

/* Override Next.js error-page styles that inject `body { background: black }`
   via a @media (prefers-color-scheme: dark) rule after our stylesheet. The
   higher specificity of `html body` beats their plain `body` selector. */
/* html body {
  background-color: var(--kern-color-layout-background-default);
} */

#accessibility-languages a {
  @apply text-sm;
}

/* ── Nav: project link button ───────────────── */
a[id="nav-to-opencode"] {
  @apply w-12;
}

/* ── Shiki code blocks ──────────────────────── */
.shiki {
  background-color: var(--muted) !important;
}

[data-kern-theme="dark"] .shiki,
[data-kern-theme="dark"] .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
}

#breadcrumb .kern-link {
  @apply p-0;
}

#toc .kern-link {
  @apply text-sm!;
}

.kern-alert__body {
  border-bottom-left-radius: var(--radius-sm) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}


/* heroicons -> arrow-top-right-on-square */
/* TODO: issue #125 reopened, need to revisit this solution */
/* a[href^="http"]::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  align-self: center;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
} */