/* Datei: ui/index.css */
/**
* UI Components System
*
* This file imports all UI components in the correct order.
* Components are organized by type in subdirectories.
*/

/* UI Elements */
/* Importierte Datei: ui/forms.css */
/*
* Forms Module - Complete Form System
*
* Comprehensive form elements and controls for user input and interaction.
* This module combines all form-related components and provides both simple
* utility classes and advanced form system features.
*
* CONTENTS:
*
* 1. BASIC FORM ELEMENTS (Simple utility classes):
*    - Buttons (interactive form controls)
*    - Input fields (text, email, password, etc.)
*    - Textarea (multi-line text input)
*    - Select dropdowns (single and multiple selection)
*    - Checkboxes (multiple selection)
*    - Radio buttons (single selection from group)
*    - Switches (toggle controls)
*    - Sliders (range input controls)
*
* 2. ADVANCED FORM SYSTEM (Bootstrap-style components):
*    - Form containers and layouts (.form, .form-group, .form-row)
*    - Form controls (.form-control, .form-select, .form-check)
*    - Labels and feedback (.form-label, .form-text, .feedback)
*    - Validation states and feedback mechanisms
*    - Input groups (.input-group, .input-group-text)
*    - Responsive and adaptive layouts
*    - RTL support and accessibility features
*
* @layer components.forms
*
* Accessibility Features:
* - Semantic HTML elements as foundation
* - Proper focus management and keyboard navigation
* - ARIA attributes where needed
* - High contrast focus indicators
* - Screen reader friendly labels and descriptions
*/

/**
* Form Elements Collection
*
* This file contains all form-related components:
* - Buttons (interactive form controls)
* - Input fields (text, email, password, etc.)
* - Textarea (multi-line text input)
* - Select dropdowns (single and multiple selection)
* - Checkboxes (multiple selection)
* - Radio buttons (single selection from group)
* - Switches (toggle controls)
* - Sliders (range input controls)
*
* @layer components.forms
*
* Accessibility Features:
* - Semantic HTML elements as foundation
* - Proper focus management and keyboard navigation
* - ARIA attributes where needed
* - High contrast focus indicators
* - Screen reader friendly labels and descriptions
*/

/* =================== ANIMATIONS =================== */

/* =================== BUTTONS =================== */

@layer components {
/* Base Button Style */
  .button {
    align-items: center;
    border: none;
    border-radius: var(--radius-md, 0.5rem);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    justify-content: center;
    line-height: 1.25;
    padding-block: var(--space-2, 0.5rem);
    padding-inline: var(--space-4, 1rem);
    position: relative;
    text-decoration: none;
    transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, cubic-bezier(0.4, 0, 0.2, 1));
  }

/* Button Variants */
  .button--primary {
    background-color: var(--color-primary, #06c);
    color: white;
  }

  .button--primary:hover {
    background-color: var(--color-primary-hover, #05a);
  }

  .button--secondary {
    background-color: var(--color-secondary);
    color: white;
  }

  .button--secondary:hover {
    background-color: var(--color-secondary-hover);
  }

  .button--tertiary {
    background-color: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    color: var(--color-text);
  }

  .button--tertiary:hover {
    background-color: var(--color-background-alt, #f9fafb);
  }

  .button--success {
    background-color: var(--color-success, #10b981);
    color: white;
  }

  .button--success:hover {
    background-color: var(--color-success-hover);
  }

  .button--warning {
    background-color: var(--color-warning, #f59e0b);
    color: var(--color-text);
  }

  .button--warning:hover {
    background-color: var(--color-warning-hover);
  }

  .button--danger {
    background-color: var(--color-error, #ef4444);
    color: white;
  }

  .button--danger:hover {
    background-color: var(--color-error-hover);
  }

  .button--info {
    background-color: var(--color-info, #3b82f6);
    color: white;
  }

  .button--info:hover {
    background-color: var(--color-info-hover);
  }

  .button--link {
    background-color: transparent;
    color: var(--color-primary, #3b82f6);
    padding: 0;
    text-decoration: underline;
  }

  .button--link:hover {
    color: var(--color-primary-hover, #2563eb);
    text-decoration: none;
  }

/* Button Sizes */
  .button--xs {
    font-size: var(--font-size-xs);
    padding-block: var(--space-1);
    padding-inline: var(--space-2);
  }

  .button--sm {
    font-size: var(--font-size-sm, 0.875rem);
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
  }

  .button--md {
    font-size: var(--font-size-base, 1rem);
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
  }

  .button--lg {
    font-size: var(--font-size-lg);
    padding-block: var(--space-3);
    padding-inline: var(--space-6);
  }

  .button--xl {
    font-size: var(--font-size-xl);
    padding-block: var(--space-4);
    padding-inline: var(--space-8);
  }

/* Button States */
  button:disabled,
  .button:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-50);
  }

  .button--loading {
    color: transparent;
    pointer-events: none;
  }

  .button--with-icon {
    gap: var(--space-2);
  }

  .button--with-icon .icon {
    flex-shrink: 0;
    height: 1em;
    width: 1em;
  }

  .button--icon-only {
    aspect-ratio: 1;
    padding: var(--space-2);
  }

  .button--icon-only .icon {
    height: 1.25em;
    width: 1.25em;
  }

  .button--loading::after {
    animation: spin 1s linear infinite;
    border: 2px solid transparent;
    border-radius: var(--radius-full, 9999px);
    border-top-color: currentColor;
    content: "";
    height: 1em;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1em;
  }
}

/* =================== INPUT FIELDS =================== */

@layer components {
  .input {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: var(--radius-md, 0.375rem);
    color: var(--color-gray-900, #111827);
    display: block;
    font-size: var(--font-size-base, 1rem);
    padding: var(--space-2) var(--space-3);
    transition: border-color var(--transition-fast, 150ms ease), background-color var(--transition-fast, 150ms ease);
    width: 100%;

    &:focus {
      border-color: var(--color-primary, #3b82f6);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #3b82f6) 50, transparent);
      outline: none;
    }

    &.invalid {
      background-color: color-mix(in srgb, var(--color-error, #ef4444) 5%, white);
      border-color: var(--color-error, #ef4444);
    }

    &:disabled {
      background-color: var(--color-gray-100, #f3f4f6);
      color: var(--color-gray-500);
      cursor: not-allowed;
    }

    &:read-only {
      background-color: var(--color-gray-50);
    }

/* Input Variants */
    &.primary {
      border-color: var(--color-primary, #3b82f6);
    }

    &.success {
      border-color: var(--color-success, #10b981);
    }

    &.warning {
      border-color: var(--color-warning, #f59e0b);
    }

    &.danger {
      border-color: var(--color-danger);
    }

/* Input Sizes */
    &.sm {
      font-size: var(--font-size-sm, 0.875rem);
      padding: var(--space-1) var(--space-2);
    }

    &.lg {
      font-size: var(--font-size-lg);
      padding: var(--space-3) var(--space-4);
    }
  }

/* Input with Icon */
  .input-wrapper {
    align-items: center;
    display: flex;
    position: relative;

    .input {
      padding-left: var(--space-8);
    }

    .input-icon {
      color: var(--color-gray-400);
      left: var(--space-3);
      pointer-events: none;
      position: absolute;
    }
  }
}

/* =================== TEXTAREA =================== */

@layer components {
  .textarea {
    background-color: var(--color-white, #fff);
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: var(--radius-md, 0.375rem);
    color: var(--color-gray-900, #111827);
    font-size: var(--font-size-base, 1rem);
    min-height: 6rem;
    padding: var(--space-3);
    resize: vertical;
    transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
    width: 100%;

    &:focus {
      border-color: var(--color-primary, #3b82f6);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #3b82f6) 50, transparent);
      outline: none;
    }

    &:disabled {
      background-color: var(--color-gray-100, #f3f4f6);
      color: var(--color-gray-500);
      cursor: not-allowed;
      opacity: 0.7;
    }

/* Textarea Sizes */
    &.sm {
      font-size: var(--font-size-sm, 0.875rem);
      min-height: 4rem;
      padding: var(--space-2);
    }

    &.lg {
      font-size: var(--font-size-lg);
      min-height: 8rem;
      padding: var(--space-4);
    }

/* Textarea States */
    &.error {
      background-color: color-mix(in srgb, var(--color-error, #ef4444) 3%, var(--color-white, #fff));
      border-color: var(--color-error, #ef4444);

      &:focus {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error, #ef4444) 30, transparent);
      }
    }

    &.success {
      background-color: color-mix(in srgb, var(--color-success, #10b981) 3%, var(--color-white, #fff));
      border-color: var(--color-success, #10b981);

      &:focus {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success, #10b981) 30, transparent);
      }
    }

    &.readonly {
      background-color: var(--color-gray-50);
      cursor: default;
    }

    &.auto-resize {
      overflow-y: hidden;
    }
  }

/* Textarea with Counter */
  .textarea-container {
    position: relative;
    width: 100%;

    .counter {
      bottom: var(--space-2);
      color: var(--color-gray-500);
      font-size: var(--font-size-xs);
      pointer-events: none;
      position: absolute;
      right: var(--space-3);
    }

    .textarea {
      padding-bottom: calc(var(--space-3) + 1.5rem);
    }
  }
}

/* =================== SELECT DROPDOWNS =================== */

@layer components {
  .select {
    appearance: none;
    background-color: var(--color-white, #fff);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' stroke='%23666' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right var(--space-3) center;
    background-repeat: no-repeat;
    background-size: 1rem;
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: var(--radius-md, 0.375rem);
    color: var(--color-gray-900, #111827);
    cursor: pointer;
    display: block;
    font-size: var(--font-size-base, 1rem);
    padding: var(--space-2) var(--space-3);
    transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
    width: 100%;

    &:focus {
      border-color: var(--color-primary, #3b82f6);
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #3b82f6) 50, transparent);
      outline: none;
    }

    &:disabled {
      background-color: var(--color-gray-100, #f3f4f6);
      color: var(--color-gray-500);
      cursor: not-allowed;
      opacity: 0.7;
    }

/* Select Sizes */
    &.sm {
      background-position: right var(--space-2) center;
      background-size: 0%.875rem;
      font-size: var(--font-size-sm, 0.875rem);
      padding: var(--space-1) var(--space-2);
    }

    &.lg {
      background-position: right var(--space-4) center;
      background-size: 1%.25rem;
      font-size: var(--font-size-lg);
      padding: var(--space-3) var(--space-4);
    }

/* Select States */
    &.error {
      background-color: color-mix(in srgb, var(--color-error, #ef4444) 3%, var(--color-white, #fff));
      border-color: var(--color-error, #ef4444);

      &:focus {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error, #ef4444) 30, transparent);
      }
    }

    &.success {
      background-color: color-mix(in srgb, var(--color-success, #10b981) 3%, var(--color-white, #fff));
      border-color: var(--color-success, #10b981);

      &:focus {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success, #10b981) 30, transparent);
      }
    }

/* Multiple Selection */
    &[multiple] {
      background-image: none;
      padding: var(--space-1);

      option {
        border-radius: var(--radius-sm, 0.125rem);
        padding: var(--space-1) var(--space-2);

        &:checked {
          background-color: color-mix(in srgb, var(--color-primary, #3b82f6) 15%, transparent);
        }
      }
    }

/* Option Groups */
    optgroup {
      color: var(--color-gray-700);
      font-weight: var(--font-weight-medium, 500);
    }
  }
}

/* =================== CHECKBOXES =================== */

@layer elements {
  .checkbox {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-sm, 0.875rem);
    gap: var(--space-2);
    position: relative;
  }

  .checkbox .input {
    appearance: none;
    background-color: white;
    border: 1px solid var(--color-neutral-400, #9ca3af);
    border-radius: var(--radius-sm, 0.125rem);
    cursor: pointer;
    height: 1rem;
    position: relative;
    transition: all 0.2s;
    width: 1rem;
  }

  .checkbox .input:checked {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
  }

  .checkbox .input:checked::after {
    border: solid white;
    border-width: 0% 2px 2px 0;
    content: "";
    height: 6px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg);
    width: 3px;
  }

  .checkbox .label {
    color: var(--color-text-700, #374151);
    font-size: var(--text-sm, 0.875rem);
  }

  .checkbox .input:focus-visible {
    outline: 2px solid var(--color-primary-300);
    outline-offset: 2px;
  }

  .checkbox .input:hover:not(:disabled) {
    border-color: var(--color-primary-500);
  }

  .checkbox .input:disabled {
    background-color: var(--color-neutral-100, #f3f4f6);
    border-color: var(--color-neutral-300, #d1d5db);
    cursor: not-allowed;
    opacity: var(--opacity-50);
  }

  .checkbox .input:disabled ~ .checkbox .label {
    color: var(--color-text-400);
    cursor: not-allowed;
  }

/* Checkbox Sizes */
  .checkbox--sm .input {
    height: 0%.875rem;
    width: 0%.875rem;
  }

  .checkbox--sm .input:checked::after {
    height: 5px;
    left: 3px;
    top: 1px;
    width: 2px;
  }

  .checkbox--sm .label {
    font-size: var(--text-xs, 0.75rem);
  }

  .checkbox--lg .input {
    height: 1%.25rem;
    width: 1%.25rem;
  }

  .checkbox--lg .input:checked::after {
    height: 8px;
    left: 5px;
    top: 2px;
    width: 4px;
  }

  .checkbox--lg .label {
    font-size: var(--text-base);
  }

/* Checkbox Groups */
  .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .checkbox-group--horizontal {
    flex-flow: row wrap;
    gap: var(--space-4);
  }
}

/* =================== RADIO BUTTONS =================== */

@layer components {
  .radio {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-sm, 0.875rem);
    gap: var(--space-2);

    input[type="radio"] {
      appearance: none;
      background-color: var(--color-white, #fff);
      border: 2px solid var(--color-gray-400);
      border-radius: 9px;
      height: 1rem;
      position: relative;
      transition: all var(--transition-fast, 150ms ease);
      width: 1rem;

      &:checked {
        background-color: var(--color-primary, #3b82f6);
        border-color: var(--color-primary, #3b82f6);

        &::after {
          background-color: white;
          border-radius: 9px;
          content: "";
          height: 0%.375rem;
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 0%.375rem;
        }
      }

      &:focus-visible {
        outline: 2px solid var(--color-primary, #3b82f6);
        outline-offset: 2px;
      }

      &:disabled {
        background-color: var(--color-gray-100, #f3f4f6);
        border-color: var(--color-gray-300, #d1d5db);
        cursor: not-allowed;

        & ~ .label {
          color: var(--color-gray-400);
          cursor: not-allowed;
        }
      }
    }

/* Radio Sizes */
    &.sm {
      font-size: var(--font-size-xs);

      input[type="radio"] {
        height: 0%.875rem;
        width: 0%.875rem;
      }
    }

    &.lg {
      font-size: var(--font-size-base, 1rem);

      input[type="radio"] {
        height: 1%.25rem;
        width: 1%.25rem;

        &:checked::after {
          height: 0%.5rem;
          width: 0%.5rem;
        }
      }
    }
  }

  .radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    &.horizontal {
      align-items: center;
      flex-flow: row wrap;
    }
  }
}

/* =================== SWITCHES =================== */

@layer elements {
  .switch {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: var(--space-2);
    position: relative;
  }

  .switch .input {
    height: 0%;
    opacity: 0%;
    position: absolute;
    width: 0%;
  }

  .switch .track {
    background-color: var(--color-neutral-300, #d1d5db);
    border-radius: var(--radius-full, 9999px);
    display: inline-block;
    height: var(--switch-height, 1.25rem);
    position: relative;
    transition: background-color 0.2s;
    width: var(--switch-width, 2.5rem);
  }

  .switch .thumb {
    background-color: white;
    border-radius: var(--radius-full, 9999px);
    box-shadow: 0 1px 2px rgb(0 0 0 / 1000%);
    height: calc(var(--switch-height, 1.25rem) * 0.8);
    left: calc(var(--switch-height, 1.25rem) * 0.1);
    position: absolute;
    top: calc(var(--switch-height, 1.25rem) * 0.1);
    transition: transform 0.2s;
    width: calc(var(--switch-height, 1.25rem) * 0.8);
  }

  .switch .label {
    color: var(--color-text-700, #374151);
    font-size: var(--text-sm, 0.875rem);
  }

  .switch .input:checked + .switch .track {
    background-color: var(--color-primary-500);
  }

  .switch .input:checked + .switch .track .switch .thumb {
    transform: translateX(calc(var(--switch-width, 2.5rem) - var(--switch-height, 1.25rem)));
  }

  .switch .input:focus-visible + .switch .track {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
  }

  .switch .input:disabled + .switch .track {
    background-color: var(--color-neutral-200, #e5e7eb);
    cursor: not-allowed;
    opacity: 0.7;
  }

  .switch .input:disabled + .switch .track .switch .thumb {
    background-color: var(--color-neutral-400, #9ca3af);
  }

  .switch .input:disabled ~ .switch .label {
    color: var(--color-text-400);
    cursor: not-allowed;
  }

/* Switch Sizes */
  .switch--sm {
    --switch-width: 2rem;
    --switch-height: 1rem;
  }

  .switch--sm .label {
    font-size: var(--text-xs, 0.75rem);
  }

  .switch--md {
    --switch-width: 2.5rem;
    --switch-height: 1%.25rem;
  }

  .switch--lg {
    --switch-width: 3%.5rem;
    --switch-height: 1%.75rem;
  }

  .switch--lg .label {
    font-size: var(--text-base);
  }

/* Switch Color Variants */
  .switch--primary .input:checked + .switch .track {
    background-color: var(--color-primary-500);
  }

  .switch--secondary .input:checked + .switch .track {
    background-color: var(--color-secondary-500);
  }

  .switch--success .input:checked + .switch .track {
    background-color: var(--color-success-500);
  }

  .switch--warning .input:checked + .switch .track {
    background-color: var(--color-warning-500);
  }

  .switch--danger .input:checked + .switch .track {
    background-color: var(--color-error-500);
  }
}

/* =================== SLIDERS =================== */

@layer elements {
  .slider {
    appearance: none;
    background-color: var(--color-neutral-200, #e5e7eb);
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    height: 0%.25rem;
    margin: var(--space-2) 0;
    width: 100%;
  }

/* Slider Thumb - WebKit */
  .slider::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--color-primary-500);
    border-radius: var(--radius-full, 9999px);
    box-shadow: 0 1px 3px rgb(0 0 0 / 1000%);
    cursor: pointer;
    height: 1rem;
    transition: transform 0.2s, background-color 0.2s;
    width: 1rem;
  }

/* Slider Thumb - Firefox */
  .slider::-moz-range-thumb {
    background-color: var(--color-primary-500);
    border: none;
    border-radius: var(--radius-full, 9999px);
    box-shadow: 0 1px 3px rgb(0 0 0 / 1000%);
    cursor: pointer;
    height: 1rem;
    transition: transform 0.2s, background-color 0.2s;
    width: 1rem;
  }

/* Slider Hover */
  .slider:hover::-webkit-slider-thumb {
    transform: scale(1.1%);
  }

  .slider:hover::-moz-range-thumb {
    transform: scale(1.1%);
  }

/* Slider Focus */
  .slider:focus {
    outline: none;
  }

  .slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--color-primary-200);
  }

  .slider:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--color-primary-200);
  }

/* Slider Sizes */
  .slider--sm {
    height: 0%.125rem;
  }

  .slider--sm::-webkit-slider-thumb {
    height: 0%.75rem;
    width: 0%.75rem;
  }

  .slider--sm::-moz-range-thumb {
    height: 0%.75rem;
    width: 0%.75rem;
  }

  .slider--lg {
    height: 0%.375rem;
  }

  .slider--lg::-webkit-slider-thumb {
    height: 1%.25rem;
    width: 1%.25rem;
  }

  .slider--lg::-moz-range-thumb {
    height: 1%.25rem;
    width: 1%.25rem;
  }

/* Slider Color Variants */
  .slider--primary::-webkit-slider-thumb {
    background-color: var(--color-primary-500);
  }

  .slider--primary::-moz-range-thumb {
    background-color: var(--color-primary-500);
  }

  .slider--secondary::-webkit-slider-thumb {
    background-color: var(--color-secondary-500);
  }

  .slider--secondary::-moz-range-thumb {
    background-color: var(--color-secondary-500);
  }

  .slider--success::-webkit-slider-thumb {
    background-color: var(--color-success-500);
  }

  .slider--success::-moz-range-thumb {
    background-color: var(--color-success-500);
  }

  .slider--danger::-webkit-slider-thumb {
    background-color: var(--color-error-500);
  }

  .slider--danger::-moz-range-thumb {
    background-color: var(--color-error-500);
  }

  .slider--warning::-webkit-slider-thumb {
    background-color: var(--color-warning-500);
  }

  .slider--warning::-moz-range-thumb {
    background-color: var(--color-warning-500);
  }

/* Slider Container */
  .slider-container {
    display: flex;
    flex-direction: column;
    margin: var(--space-3) 0;
    width: 100%;
  }

  .slider-container .labels {
    color: var(--color-text-500, #6b7280);
    display: flex;
    font-size: var(--text-xs, 0.75rem);
    justify-content: space-between;
    margin-top: var(--space-1);
  }

  .slider-container .value {
    align-self: flex-end;
    color: var(--color-text-700, #374151);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    margin-top: var(--space-1);
  }

/* Range Slider (dual thumbs) */
  .slider-range {
    height: 2rem;
    margin: var(--space-3) 0;
    position: relative;
    width: 100%;
  }

  .slider-range .slider {
    background: none;
    pointer-events: none;
    position: absolute;
    top: 0%;
    width: 100%;
    z-index: 1;
  }

  .slider-range .slider::-webkit-slider-thumb {
    pointer-events: auto;
  }

  .slider-range .slider::-moz-range-thumb {
    pointer-events: auto;
  }

  .slider-range .fill {
    background-color: var(--color-primary-500);
    border-radius: var(--radius-full, 9999px);
    height: 0%.25rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  } /**
  * Formular-Styling-System
  *
  * Diese Datei bietet ein umfassendes System für das Styling von Formularelementen,
  * einschließlich Textfeldern, Auswahlfeldern, Checkboxen, Radios und mehr.
  * Das System ist darauf ausgelegt, konsistente, zugängliche und responsive Formulare zu erzeugen.
  *
  * Hauptmerkmale:
  * - Variablensystem für konsistentes Styling und einfache Anpassung
  * - Flexible Layout-Optionen (vertikal, horizontal, mehrspaltig)
  * - Validierungszustände und Feedback-Mechanismen
  * - Umfangreiche Barrierefreiheit und Tastatur-Navigation
  * - Responsive Anpassung für verschiedene Bildschirmgrößen
  * - Kompatibilität mit dem Container-Query-System aus layout.css
  * - Unterstützung für interpolate-size: allow-keywords mit fluid und adaptive Klassen
  * - Optionale field-sizing: content für natürlichere Eingabefelder
  * - Umfassende Unterstützung für alle HTML5 Input-Typen
  * - RTL-Unterstützung für mehrsprachige Anwendungen
  *
  * @layer components
  */

  @layer components {
/**
    * Form Variables
    *
    * CSS-Variablen die das Formular-Styling steuern.
    * Diese Variablen ermöglichen eine konsistente Darstellung und einfache Anpassung.
    * Die Variablen basieren auf den globalen Design-Tokens aus tokens.css.
    */
    :root {
/* Grundlegende Formular-Variablen */
      --form-gap: var(--spacing-4);        /* Abstand zwischen Formularelementen */
      --form-padding: var(--spacing-4);    /* Innenabstand des Formulars */
      --form-padding-y: var(--spacing-2);  /* Vertikaler Innenabstand */
      --form-padding-x: var(--spacing-3);  /* Horizontaler Innenabstand */
      --form-font-size: var(--font-size-base, 1rem); /* Basisschriftgröße */
      --form-line-height: var(--line-height-base, 1.5); /* Basiszeilenhöhe */
      --form-color: var(--color-text-primary); /* Textfarbe */
      --form-background: var(--color-background); /* Hintergrundfarbe */
      --form-border-color: var(--color-border, #e5e7eb); /* Rahmenfarbe */
      --form-border-radius: var(--border-radius-md); /* Rahmenradius */
      --form-box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)); /* Schatten */
      --form-transition: all var(--transition-normal); /* Übergangsanimation */

/* Input-spezifische Variablen */
      --input-padding-y: var(--spacing-2);  /* Vertikaler Innenabstand für Inputs */
      --input-padding-x: var(--spacing-3);  /* Horizontaler Innenabstand für Inputs */
      --input-height: 2.5rem;               /* Höhe von Eingabefeldern */
      --input-font-size: var(--font-size-base, 1rem); /* Schriftgröße von Eingabefeldern */
      --input-bg: var(--color-background);  /* Hintergrundfarbe von Eingabefeldern */
      --input-color: var(--color-text-primary); /* Textfarbe von Eingabefeldern */
      --input-border-color: var(--color-border, #e5e7eb); /* Rahmenfarbe von Eingabefeldern */
      --input-border-width: 1px;            /* Rahmenstärke von Eingabefeldern */
      --input-border-radius: var(--border-radius-md); /* Rahmenradius von Eingabefeldern */

/* Select-spezifische Variablen */
      --select-padding-right: 2.5rem;       /* Rechter Innenabstand für Dropdown-Pfeil */
      --select-indicator-padding: 1.75rem;  /* Abstand des Dropdown-Pfeils vom Rand */
      --select-indicator-size: 0.75rem;     /* Größe des Dropdown-Pfeils */
      --select-indicator-color: var(--color-text-secondary); /* Farbe des Dropdown-Pfeils */

/* Checkbox/Radio-spezifische Variablen */
      --control-indicator-size: 1.25rem;    /* Größe von Checkboxen und Radios */
      --control-indicator-bg: var(--color-background); /* Hintergrundfarbe */
      --control-indicator-border-color: var(--color-border, #e5e7eb); /* Rahmenfarbe */
      --control-indicator-checked-bg: var(--color-primary-500); /* Hintergrundfarbe bei Auswahl */
      --control-indicator-checked-border-color: var(--color-primary-500); /* Rahmenfarbe bei Auswahl */
      --control-indicator-checked-color: var(--color-white, #fff); /* Symbol-Farbe bei Auswahl */

/* Dark Mode Unterstützung */
      color-scheme: light dark;

/* Dark Mode Fallback-Variablen */
      --form-disabled-bg: var(--color-gray-100, #f3f4f6);
      --form-group-text-bg: var(--color-gray-100, #f3f4f6);
      --form-range-bg: var(--color-gray-200);
      --form-file-button-bg: var(--color-gray-200);
      --form-file-button-hover-bg: var(--color-gray-300, #d1d5db);
      --form-button-bg: var(--color-gray-200);
      --form-button-border: var(--color-gray-300, #d1d5db);
      --form-button-hover-bg: var(--color-gray-300, #d1d5db);

      @media (prefers-color-scheme: dark) {
        --form-disabled-bg: var(--color-gray-800);
        --form-group-text-bg: var(--color-gray-700);
        --form-range-bg: var(--color-gray-700);
        --form-file-button-bg: var(--color-gray-700);
        --form-file-button-hover-bg: var(--color-gray-600);
        --form-button-bg: var(--color-gray-700);
        --form-button-border: var(--color-gray-600);
        --form-button-hover-bg: var(--color-gray-600);
      }
    }

/**
    * Modulare Komponenten-Hinweis
    *
    * Dieses Kommentar informiert über die verfügbaren spezialisierten Module,
    * die erweiterte Funktionen für bestimmte Formularelemente bieten.
    * Diese Module können zusammen mit dieser Basisdatei verwendet werden.
    */

/**
    * Hinweis zu modularen Komponenten:
    * Einige Formularkomponenten sind auch als separate Module verfügbar:
    * - input.module.css - Für Input-Felder mit erweiterten Funktionen und Varianten
    * - select.module.css - Für Select-Felder mit Suchfunktion, Mehrfachauswahl und mehr
    * - checkbox.module.css - Für Checkboxen mit verschiedenen Stilen und Animationen
    * - radio.module.css - Für Radio-Buttons mit anpassbaren Stilen
    * - textarea.module.css - Für mehrzeilige Texteingaben mit automatischer Größenanpassung
    * - switch.module.css - Für Toggle-Schalter mit verschiedenen Größen und Stilen
    * - file.module.css - Für Datei-Upload-Felder mit Drag & Drop und Vorschau
    * - input-group.module.css - Für Eingabegruppen mit Buttons/Icons und mehr
    *
    * Die Module bieten umfangreichere Funktionen und Varianten,
    * während diese globalen Klassen für einfache Formulare ausreichen.
    */

/**
    * Basis-Formularstile
    *
    * Definiert grundlegende Container und Layout-Optionen für Formulare.
    * Verschiedene Klassen ermöglichen flexible Formularstrukturen.
    */

/* Form Base - Vertikales Layout */
    .form {
      background-color: var(--form-background);
      color: var(--form-color);
      display: flex;
      flex-direction: column;
      gap: var(--form-gap);
      padding: var(--form-padding);
    }

/* Form Inline - Horizontales Layout */
    .form-layout-inline {
      align-items: flex-end;
      display: flex;
      flex-flow: row wrap;
      gap: var(--spacing-4);
    }

    .form-layout-inline .form-group {
      flex: 1 0 auto;
      margin-bottom: 0%;
      min-width: 25%0px;
    }

/* Form Group - Gruppierung zusammengehöriger Elemente */
    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      margin-bottom: var(--spacing-4);
    }

    .form-group:last-child {
      margin-bottom: 0%;
    }

/* Form Row - Mehrspaltiges Layout innerhalb eines Formulars */
    .form-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-4);
    }

    .form-row > * {
      flex: 1;
      min-width: 20%0px;
    }

/**
    * Formular-Labels und Hilfstexte
    *
    * Definiert Stile für Beschriftungen, Pflichtfeldmarkierungen und Hilfstexte.
    * Diese Elemente verbessern die Benutzererfahrung und Barrierefreiheit.
    */

/* Standard-Label */
    .form-label {
      color: var(--color-text-primary);
      display: block;
      font-size: var(--font-size-sm, 0.875rem);
      font-weight: var(--font-weight-medium, 500);
      margin-bottom: var(--spacing-1);
    }

/* Pflichtfeld-Markierung mit Sternchen */
    .form-label.required::after {
      color: var(--color-error, #ef4444);
      content: "*";
      margin-left: var(--spacing-1);
    }

    [dir="rtl"] .form-label.required::after {
      margin-left: 0%;
      margin-right: var(--spacing-1);
    }

/* Hilfetext unterhalb von Formularfeldern */
    .form-text {
      color: var(--color-text-secondary);
      display: block;
      font-size: var(--font-size-sm, 0.875rem);
      margin-top: var(--spacing-1);
    }

/* Feedback für Validierung */
    .feedback {
      font-size: var(--font-size-xs);
      margin-top: var(--space-1);
    }

/**
    * Basis-Eingabefelder
    *
    * .form-control ist die Hauptklasse für Eingabefelder wie Input, Select, Textarea.
    * Definiert Grundstil und verschiedene Zustände (Fokus, Deaktiviert, etc.).
    */

/* Basis-Eingabefeld */
    .form-control {
      background-color: var(--input-bg, #fff);
      border: var(--input-border-width, 1px) solid var(--input-border-color, #d1d5db);
      border-radius: var(--input-border-radius, 0.375rem);
      box-shadow: var(--form-box-shadow);
      color: var(--input-color);
      display: block;

/* Experimentelle Eigenschaft für natürlichere Feldgrößen */
      field-sizing: content; /* Optionale Eigenschaft */
      font-size: var(--input-font-size, 0.875rem);
      line-height: var(--form-line-height, 1.5);
      padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);
      transition: var(--form-transition);
      width: 100%;
    }

/* Fokus-Zustand mit hervorgehobener Umrandung */
    .form-control:focus {
      border-color: var(--color-primary-500);
      box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);
      outline: none;
    }

/* Platzhaltertext in Eingabefeldern */
    .form-control::placeholder {
      color: var(--color-text-tertiary);
      opacity: 1;
    }

/* Deaktivierte und schreibgeschützte Eingabefelder */
    .form-control:disabled,
    .form-control[readonly] {
      background-color: var(--form-disabled-bg); /* Fallback */
      cursor: not-allowed;
      opacity: 0.7;
    }

/**
    * Formular-Validierung
    *
    * Definiert Stile für gültige und ungültige Eingabefelder,
    * sowie die zugehörigen Feedback-Meldungen.
    * Kann sowohl manuell als auch mit .was-validated aktiviert werden.
    */

/* Gültiger Zustand */
    .form-control.is-valid, .form-group.valid .form-control {
      border-color: var(--color-success, #10b981);
    }

    .form-control.is-valid:focus, .form-group.valid .form-control:focus {
      border-color: var(--color-success, #10b981);
      box-shadow: 0 0 0 0.2rem rgb(var(--color-success-rgb), 0.25);
    }

/* Ungültiger Zustand */
    .form-control.is-invalid, .form-group.invalid .form-control {
      border-color: var(--color-error, #ef4444);
    }

    .form-control.is-invalid:focus, .form-group.invalid .form-control:focus {
      border-color: var(--color-error, #ef4444);
      box-shadow: 0 0 0 0.2rem rgb(var(--color-error-rgb), 0.25);
    }

/**
    * Moderne Validierungsstile mit :has()
    *
    * Nutzt den modernen :has()-Selektor, um Validierungszustände
    * auf Elternebene basierend auf dem Zustand der Kind-Inputs anzuzeigen.
    * Bietet visuelle Indikatoren für Valid/Invalid ohne zusätzliche Klassen.
    */
    .form-group:has(.form-control:invalid) {
      border-left: 4px solid var(--color-error, #ef4444);
      padding-left: var(--spacing-3);
    }

    [dir="rtl"] .form-group:has(.form-control:invalid) {
      border-left: none;
      border-right: 4px solid var(--color-error, #ef4444);
      padding-left: 0%;
      padding-right: var(--spacing-3);
    }

    .form-group:has(.form-control:valid:not(:placeholder-shown)) {
      border-left: 4px solid var(--color-success, #10b981);
      padding-left: var(--spacing-3);
    }

    [dir="rtl"] .form-group:has(.form-control:valid:not(:placeholder-shown)) {
      border-left: none;
      border-right: 4px solid var(--color-success, #10b981);
      padding-left: 0%;
      padding-right: var(--spacing-3);
    }

/* Visuelle Indikatoren neben den Eingabefeldern */
    .form-group:has(.form-control:invalid) .form-label::after {
      content: "⚠️";
      display: inline-block;
      margin-left: var(--spacing-2);
      vertical-align: middle;
    }

    [dir="rtl"] .form-group:has(.form-control:invalid) .form-label::after {
      margin-left: 0%;
      margin-right: var(--spacing-2);
    }

    .form-group:has(.form-control:valid:not(:placeholder-shown)) .form-label::after {
      color: var(--color-success, #10b981);
      content: "✓";
      display: inline-block;
      margin-left: var(--spacing-2);
      vertical-align: middle;
    }

    [dir="rtl"] .form-group:has(.form-control:valid:not(:placeholder-shown)) .form-label::after {
      margin-left: 0%;
      margin-right: var(--spacing-2);
    }

/* Fallback für Browser ohne :has() Unterstützung */
    @supports not (selector(:has(*))) {
      .form-group.invalid {
        border-left: 4px solid var(--color-error, #ef4444);
        padding-left: var(--spacing-3);
      }

      [dir="rtl"] .form-group.invalid {
        border-left: none;
        border-right: 4px solid var(--color-error, #ef4444);
        padding-left: 0%;
        padding-right: var(--spacing-3);
      }

      .form-group.valid {
        border-left: 4px solid var(--color-success, #10b981);
        padding-left: var(--spacing-3);
      }

      [dir="rtl"] .form-group.valid {
        border-left: none;
        border-right: 4px solid var(--color-success, #10b981);
        padding-left: 0%;
        padding-right: var(--spacing-3);
      }
    }

/* Feedback-Container für Validierungsmeldungen */
    .valid-feedback {
      color: var(--color-success, #10b981);
      display: none;
      font-size: var(--font-size-sm, 0.875rem);
      margin-top: var(--spacing-1);
      width: 100%;
    }

    .invalid-feedback {
      color: var(--color-error, #ef4444);
      display: none;
      font-size: var(--font-size-sm, 0.875rem);
      margin-top: var(--spacing-1);
      width: 100%;
    }

/* Feedback in der modularen Formularstruktur */
    .form-group.valid .feedback {
      color: var(--color-success, #10b981);
    }

    .form-group.invalid .feedback {
      color: var(--color-error, #ef4444);
    }

/* Anzeigen von Feedback-Meldungen bei Validierung */
    .was-validated .form-control:valid ~ .valid-feedback,
    .was-validated .form-control:invalid ~ .invalid-feedback,
    .form-control.is-valid ~ .valid-feedback,
    .form-control.is-invalid ~ .invalid-feedback {
      display: block;
    }

/**
    * Größenvarianten für Eingabefelder
    *
    * Bietet verschiedene Größen für Eingabefelder:
    * - Small (sm): kompakte Größe für platzsparende Layouts
    * - Large (lg): größere Variante für bessere Lesbarkeit oder Touch-Bedienung
    */

/* Kleine Eingabefelder */
    .form-control-sm {
      border-radius: var(--border-radius-sm);
      font-size: var(--font-size-sm, 0.875rem);
      height: calc(var(--input-height, 2.5rem) * 0.85);
      padding: var(--spacing-1) var(--spacing-2);
    }

/* Große Eingabefelder */
    .form-control-lg {
      border-radius: var(--border-radius-lg);
      font-size: var(--font-size-lg);
      height: calc(var(--input-height, 2.5rem) * 1.15);
      padding: var(--spacing-3) var(--spacing-4);
    }

/**
    * Select-Felder
    *
    * Angepasste Styles für Dropdown-Auswahlfelder mit eigenem Dropdown-Pfeil.
    * Basiert auf .form-control mit zusätzlichen Select-spezifischen Anpassungen.
    */

/* Basis-Select mit angepasstem Dropdown-Pfeil */
    .form-select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
      background-position: right var(--input-padding-x, 0.75rem) center;
      background-repeat: no-repeat;
      background-size: var(--select-indicator-size);
      display: block;
      padding-right: var(--select-indicator-padding);
      width: 100%;
    }

    [dir="rtl"] .form-select {
      background-position: left var(--input-padding-x, 0.75rem) center;
      padding-left: var(--select-indicator-padding);
      padding-right: var(--input-padding-x, 0.75rem);
    }

/* Kleine Select-Variante */
    .form-select-sm {
      background-position: right var(--spacing-2) center;
      padding-right: calc(var(--select-indicator-padding) * 0.85);
    }

/* Große Select-Variante */
    .form-select-lg {
      background-position: right var(--spacing-4) center;
      padding-right: calc(var(--select-indicator-padding) * 1.15);
    }

/**
    * Textarea-Felder
    *
    * Mehrzeilige Textfelder mit angepassten Eigenschaften.
    * Basiert auf .form-control mit spezifischen Textarea-Anpassungen.
    */

/* Mehrzeiliges Textfeld mit vertikaler Größenanpassung */
    textarea.form-control {
      min-height: 6rem;
      resize: vertical;
    }

/**
    * Checkboxen und Radio-Buttons
    *
    * Angepasstes Styling für Checkboxen und Radio-Buttons mit SVG-Icons.
    * Ermöglicht konsistentes Aussehen über verschiedene Browser hinweg.
    */

/* Container für Checkbox/Radio */
    .form-check {
      display: block;
      margin-bottom: var(--spacing-2);
      min-height: var(--control-indicator-size, 1rem);
      padding-left: calc(var(--control-indicator-size, 1rem) + var(--spacing-2));
      position: relative;
    }

    .form-check:last-child {
      margin-bottom: 0%;
    }

/* Inline-Variante für horizontale Anordnung */
    .form-check-inline {
      align-items: center;
      display: inline-flex;
      margin-right: var(--spacing-4);
    }

/* Checkbox/Radio Input-Element */
    .form-check-input {
      appearance: none;
      background-color: var(--control-indicator-bg);
      border: var(--input-border-width, 1px) solid var(--control-indicator-border-color);
      height: var(--control-indicator-size, 1rem);
      margin-left: calc(-1 * (var(--control-indicator-size, 1rem) + var(--spacing-2)));
      margin-top: calc((var(--form-line-height, 1.5) * var(--form-font-size) - var(--control-indicator-size, 1rem)) / 2);
      position: absolute;
      print-color-adjust: exact;
      transition: var(--form-transition);
      width: var(--control-indicator-size, 1rem);
    }

    [dir="rtl"] .form-check-input {
      margin-left: 0%;
      margin-right: calc(-1 * (var(--control-indicator-size, 1rem) + var(--spacing-2)));
    }

/* Checkbox-spezifische Styles */
    .form-check-input[type="checkbox"] {
      border-radius: var(--border-radius-sm);
    }

/* Radio-Button-spezifische Styles */
    .form-check-input[type="radio"] {
      border-radius: var(--radius-full, 9999px);
    }

/* Aktiver Zustand (bei Mausklick) */
    .form-check-input:active {
      filter: brightness(90);
    }

/* Fokus-Zustand */
    .form-check-input:focus {
      border-color: var(--color-primary-500);
      box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);
      outline: 0;
    }

/* Ausgewählter Zustand */
    .form-check-input:checked {
      background-color: var(--control-indicator-checked-bg);
      border-color: var(--control-indicator-checked-border-color);
    }

/* SVG-Icon für ausgewählte Checkbox */
    .form-check-input:checked[type="checkbox"] {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: var(--select-indicator-size);
    }

/* SVG-Icon für ausgewählten Radio-Button */
    .form-check-input:checked[type="radio"] {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle r='4' fill='white' cx='8' cy='8'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: var(--select-indicator-size);
    }

/* Deaktivierter Zustand */
    .form-check-input:disabled {
      filter: none;
      opacity: var(--opacity-50);
      pointer-events: none;
    }

    .form-check-input:disabled ~ .form-check-label {
      cursor: default;
      opacity: var(--opacity-50);
    }

/* Beschriftung für Checkbox/Radio */
    .form-check-label {
      cursor: pointer;
      display: inline-block;
    }

/**
    * Toggle-Schalter (Switch)
    *
    * Moderne Alternative zu Checkboxen für Ein/Aus-Optionen.
    * Basiert auf .form-check, mit angepasstem Styling für Schalteroptik.
    */

/* Container für Toggle-Schalter */
    .form-switch {
      padding-left: calc(var(--control-indicator-size, 1rem) * 2);
    }

    [dir="rtl"] .form-switch {
      padding-left: 0%;
      padding-right: calc(var(--control-indicator-size, 1rem) * 2);
    }

/* Toggle-Schalter-Input mit Schieberegler */
    .form-switch .form-check-input {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle r='3' fill='rgb(0 0 0 / 0.25)' cx='3' cy='8'/%3E%3C/svg%3E");
      background-position: left center;
      background-repeat: no-repeat;
      border-radius: calc(var(--control-indicator-size, 1rem) * 0.85);
      height: calc(var(--control-indicator-size, 1rem) * 0.85);
      transition: background-position var(--transition-normal);
      width: calc(var(--control-indicator-size, 1rem) * 1.75);
    }

/* Ausgewählter Zustand des Toggle-Schalters */
    .form-switch .form-check-input:checked {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle r='3' fill='%23fff' cx='13' cy='8'/%3E%3C/svg%3E");
      background-position: right center;
    }

/**
    * Datei-Upload
    *
    * Angepasste Darstellung für Datei-Upload-Felder mit benutzerdefiniertem Styling.
    */

/* Container für Datei-Upload */
    .form-file {
      position: relative;
    }

/* Verstecktes natürliches File-Input */
    .form-file-input {
      height: var(--input-height, 2.5rem);
      margin: 0;
      opacity: 0%;
      position: relative;
      width: 100%;
      z-index: 2;
    }

/* Sichtbares Label für Datei-Upload */
    .form-file-label {
      background-color: var(--input-bg, #fff);
      border: var(--input-border-width, 1px) solid var(--input-border-color, #d1d5db);
      border-radius: var(--input-border-radius, 0.375rem);
      display: flex;
      height: var(--input-height, 2.5rem);
      left: 0%;
      position: absolute;
      right: 0%;
      top: 0%;
      z-index: 1;
    }

/* Textbereich für Dateipfad-Anzeige */
    .form-file-text {
      background-color: var(--input-bg, #fff);
      border-right: none;
      color: var(--color-text-tertiary);
      flex: 1;
      overflow: hidden;
      padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    [dir="rtl"] .form-file-text {
      border-left: none;
      border-right: initial;
    }

/* Button für Dateiauswahl */
    .form-file-button {
      background-color: var(--color-gray-200);
      border-bottom-right-radius: var(--input-border-radius, 0.375rem);
      border-left: inherit;
      border-top-right-radius: var(--input-border-radius, 0.375rem);
      color: var(--color-text-primary);
      display: block;
      padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);
      z-index: 3;
    }

    [dir="rtl"] .form-file-button {
      border-left: none;
      border-radius: var(--input-border-radius, 0.375rem) 0 0 var(--input-border-radius, 0.375rem);
      border-right: inherit;
    }

/**
    * Formular-Aktionen
    *
    * Container für Formular-Schaltflächen (Absenden, Abbrechen, etc.)
    * Mit flexiblen Layout-Optionen für verschiedene Anordnungen.
    */

/* Container für Formular-Aktionsschaltflächen */
    .form-actions {
      display: flex;
      gap: var(--spacing-3);
      justify-content: flex-end;
      margin-top: var(--spacing-6);
    }

    [dir="rtl"] .form-actions {
      justify-content: flex-start;
    }

    .form-actions > * {
      flex: 0 0 auto;
    }

/**
    * Input-Gruppen
    *
    * Ermöglicht die Kombination von Eingabefeldern mit Text oder Buttons.
    * Nützlich für Währungsangaben, Suchfelder mit Buttons, etc.
    */

/**
    * Input Groups - Enhanced Version
    *
    * Gruppierte Eingabeelemente für zusammengehörende Formularfelder.
    * Input-Groups ermöglichen die Kombination von Eingabefeldern mit Addons, Buttons oder Labels.
    *
    * Grundlegende Verwendung:
    * <div class="input-group">
    *   <span class="addon">https://</span>
    *   <input type="text" class="input" placeholder="example.com">
    * </div>
    *
    * Mit Button:
    * <div class="input-group">
    *   <input type="text" class="input" placeholder="Suchen...">
    *   <button class="button">Suchen</button>
    * </div>
    *
    * Mit Icon:
    * <div class="input-group">
    *   <span class="icon"><!-- Icon hier --></span>
    *   <input type="text" class="input" placeholder="Benutzername">
    * </div>
    *
    * Größenvarianten:
    * <div class="input-group sm">...</div>
    * <div class="input-group md">...</div>
    * <div class="input-group lg">...</div>
    */

/* Container für Input-Gruppe */
    .input-group {
      align-items: stretch;
      border: var(--input-border-width, 1px) solid var(--color-border, var(--color-neutral-300, #d1d5db));
      border-radius: var(--radius-input, var(--radius-md, 0.375rem));
      display: flex;
      overflow: hidden;
      width: 100%;

/* Allgemeine Styles für alle Kinder-Elemente */
      > * {
        border: none;
        font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
        outline: none;
        padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
      }

/* Addon-Elemente */
      .addon {
        align-items: center;
        background-color: var(--color-neutral-100, #f3f4f6);
        color: var(--color-neutral-700, #374151);
        display: flex;
        font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
        justify-content: center;
        padding: 0 var(--space-3, 0.75rem);
        white-space: nowrap;
      }

/* Icon-Elemente */
      .icon {
        align-items: center;
        background-color: transparent;
        color: var(--color-neutral-500, #6b7280);
        display: flex;
        justify-content: center;
        width: 2.5rem;

        &:hover {
          color: var(--color-neutral-700, #374151);
          transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
        }
      }

/* Input innerhalb der Gruppe */
      .input {
        background-color: var(--color-background, #fff);
        color: var(--color-text, var(--color-neutral-900, #111827));
        flex: 1;
        height: var(--input-height, 2.5rem);
        min-width: 0%;
        padding: var(--input-padding, var(--space-3, 0.75rem));

        &:focus {
          box-shadow: none;
        }

        &::placeholder {
          color: var(--color-neutral-400, #9ca3af);
        }
      }

/* Select innerhalb der Gruppe */
      .select {
        background-color: var(--color-background, #fff);
        color: var(--color-text, var(--color-neutral-900, #111827));
        flex: 1;
        height: var(--input-height, 2.5rem);
        min-width: 0%;
        padding: var(--input-padding, var(--space-3, 0.75rem));
      }

/* Button innerhalb der Gruppe */
      .button {
        align-items: center;
        border-radius: 0;
        display: flex;
        justify-content: center;
        padding: var(--space-2, 0.5rem) var(--space-4, 1rem);

        &:first-child {
          border-bottom-left-radius: var(--radius-input, var(--radius-md, 0.375rem));
          border-top-left-radius: var(--radius-input, var(--radius-md, 0.375rem));
        }

        &:last-child {
          border-bottom-right-radius: var(--radius-input, var(--radius-md, 0.375rem));
          border-top-right-radius: var(--radius-input, var(--radius-md, 0.375rem));
        }
      }

/* Größenvarianten */
      &.sm {
        > * {
          font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
          padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
        }

        .input, .select {
          height: 2rem;
          padding: var(--space-2, 0.5rem);
        }

        .button {
          padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
        }
      }

      &.lg {
        > * {
          font-size: var(--text-base, var(--font-size-base, 1rem));
          padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
        }

        .input, .select {
          height: 3rem;
          padding: var(--space-4, 1rem);
        }

        .button {
          padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
        }
      }

/* Zustände */
      &:focus-within {
        border-color: var(--color-primary-500, #3b82f6);
        box-shadow: 0 0 0 2px var(--color-primary-200, #bfdbfe);
      }

/* Error State */
      &.error {
        border-color: var(--color-error-500, #ef4444);

        &:focus-within {
          border-color: var(--color-error-500, #ef4444);
          box-shadow: 0 0 0 2px var(--color-error-200, #fecaca);
        }
      }

/* Success State */
      &.success {
        border-color: var(--color-success-500, #10b981);

        &:focus-within {
          border-color: var(--color-success-500, #10b981);
          box-shadow: 0 0 0 2px var(--color-success-200, #a7f3d0);
        }
      }

/* Warning State */
      &.warning {
        border-color: var(--color-warning-500, #f59e0b);

        &:focus-within {
          border-color: var(--color-warning-500, #f59e0b);
          box-shadow: 0 0 0 2px var(--color-warning-200, #fde68a);
        }
      }

/* Disabled State */
      &.disabled {
        background-color: var(--color-neutral-100, #f3f4f6);
        border-color: var(--color-neutral-200, #e5e7eb);
        color: var(--color-neutral-400, #9ca3af);
        cursor: not-allowed;

        .input, .select, .button {
          background-color: transparent;
          color: var(--color-neutral-400, #9ca3af);
          cursor: not-allowed;
        }
      }
    }

/* Legacy compatibility for existing .input-group-text */
    .input-group-text {
      align-items: center;
      background-color: var(--color-neutral-100, #f3f4f6);
      color: var(--color-neutral-700, #374151);
      display: flex;
      font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
      justify-content: center;
      padding: 0 var(--space-3, 0.75rem);
      white-space: nowrap;
    }

/**
    * Horizontales Layout für Formulare
    *
    * Ermöglicht eine horizontale Anordnung von Labels und Eingabefeldern.
    */

/* Horizontales Layout */
    .form.horizontal .form-group,
    .form-horizontal .form-group {
      align-items: center;
      flex-direction: row;
    }

    .form.horizontal .form-label,
    .form-horizontal .form-label {
      margin-bottom: 0%;
      margin-right: var(--space-4);
      width: 30%;
    }

    [dir="rtl"] .form.horizontal .form-label,
    [dir="rtl"] .form-horizontal .form-label {
      margin-left: var(--space-4);
      margin-right: 0%;
    }

    .form.horizontal .form-control {
      flex: 1;
    }

    .form.horizontal .form-text,
    .form.horizontal .feedback,
    .form-horizontal .form-text,
    .form-horizontal .valid-feedback,
    .form-horizontal .invalid-feedback {
      margin-left: calc(30 + var(--space-4));
    }

    [dir="rtl"] .form.horizontal .form-text,
    [dir="rtl"] .form.horizontal .feedback,
    [dir="rtl"] .form-horizontal .form-text,
    [dir="rtl"] .form-horizontal .valid-feedback,
    [dir="rtl"] .form-horizontal .invalid-feedback {
      margin-left: 0%;
      margin-right: calc(30 + var(--space-4));
    }

/**
    * Spezifische Input-Typen
    *
    * Angepasste Styles für verschiedene HTML5 Input-Typen.
    * Stellt sicher, dass alle Input-Typen ein konsistentes und ansprechendes Aussehen haben.
    */

/* Color-Picker Input */
    input[type="color"] {
      cursor: pointer;
      min-height: 2.5rem;
      padding: 0.25rem;
    }

    input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    input[type="color"]::-webkit-color-swatch {
      border: none;
      border-radius: var(--border-radius-sm);
    }

/* Range Slider */
    input[type="range"] {
      appearance: none;
      background-color: var(--form-range-bg); /* Fallback */
      border-radius: 1rem;
      height: 0%.5rem;
      margin: 0.5rem 0;
      outline: none;
      width: 100%;
    }

    input[type="range"]::-webkit-slider-thumb {
      appearance: none;
      background-color: var(--color-primary-500);
      border: none;
      border-radius: var(--radius-full, 9999px);
      cursor: pointer;
      height: 1%.25rem;
      width: 1%.25rem;
    }

    input[type="range"]::-moz-range-thumb {
      background-color: var(--color-primary-500);
      border: none;
      border-radius: var(--radius-full, 9999px);
      cursor: pointer;
      height: 1%.25rem;
      width: 1%.25rem;
    }

    input[type="range"]:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);
    }

    input[type="range"]:focus::-moz-range-thumb {
      box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);
    }

/* Date, Time, DateTime Inputs */
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"] {
      padding-right: 0%.5rem;
    }

/* Search Input */
    input[type="search"] {
      appearance: none;
    }

    input[type="search"]::-webkit-search-cancel-button {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
      cursor: pointer;
      height: 1rem;
      margin-left: 0%.5rem;
      width: 1rem;
    }

/* File Input - Erweitert die bestehende form-file Klasse */
    input[type="file"] {
      cursor: pointer;
    }

    input[type="file"]::file-selector-button {
      background-color: var(--form-file-button-bg); /* Fallback */
      border: none;
      border-radius: var(--border-radius-sm);
      color: var(--color-text-primary);
      cursor: pointer;
      margin-right: 1rem;
      padding: 0.25rem 0.75rem;
      transition: background-color 0.2s;
    }

    [dir="rtl"] input[type="file"]::file-selector-button {
      margin-left: 1rem;
      margin-right: 0%;
    }

/* URL, Email, Tel und andere Text-basierte Inputs */
    input[type="url"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="text"],
    input[type="number"] {
/* Diese erben bereits die Basis-Stile von .form-control */
    }

/* Number Input Spinner */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      height: auto;
      margin-left: 0%.5rem;
      opacity: 1;
    }

/* Button-artige Inputs */
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
      border-radius: var(--input-border-radius, 0.375rem);
      cursor: pointer;
      display: inline-block;
      font-weight: var(--font-weight-medium, 500);
      padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);
      text-align: center;
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      user-select: none;
      vertical-align: middle;
      white-space: nowrap;
    }

    input[type="button"],
    input[type="reset"] {
      background-color: var(--form-button-bg); /* Fallback */
      border: 1px solid var(--form-button-border); /* Fallback */
      color: var(--color-text-primary);
    }

    input[type="button"]:hover,
    input[type="reset"]:hover {
      background-color: var(--form-button-hover-bg); /* Fallback */
    }

    input[type="submit"] {
      background-color: var(--color-primary-500);
      border: 1px solid var(--color-primary-500);
      color: var(--color-white, #fff);
    }

    input[type="submit"]:hover {
      background-color: var(--color-primary-600, #2563eb);
      border-color: var(--color-primary-600, #2563eb);
    }

/* Image Input */
    input[type="image"] {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
    }

/* Hidden Input */
    input[type="hidden"] {
      display: none;
    }

/* Input Placeholder Styling */
    input::placeholder {
      color: var(--color-text-tertiary);
      opacity: 0.7;
    }

/* Fokus-Zustand für alle Input-Typen */
    input:focus {
      border-color: var(--color-primary-500);
      box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);
      outline: none;
    }
  }

/**
  * Form-Komponente - Legacy Unterstützung
  *
  * Unterstützt die bestehende modulare Struktur der .form-Komponente.
  * Diese Layer-Definition stellt die Kompatibilität mit bestehenden Komponenten sicher.
  */
  @layer form {
/* Vorhandene Stile aus components/form.css werden automatisch durch die oben definierten Klassen unterstützt */
  }

/**
  * Formular-Utilities
  *
  * Stellt Utility-Klassen für Formulare bereit, die verwendet werden können,
  * um das Verhalten und Aussehen von Formularen anzupassen.
  */
  @layer utilities {
/**
    * Inline Layout für Checkboxen/Radios
    *
    * Ermöglicht eine horizontale Anordnung von Checkboxen und Radios.
    */
    .form-inline-controls,
    .form-inline,
    .inline {
      align-items: center;
      flex-direction: row;
      gap: var(--space-3);
    }

    .form-inline-controls .form-label,
    .form-inline .form-label,
    .inline .form-label {
      margin-bottom: 0%;
      margin-left: var(--space-2);
    }

    [dir="rtl"] .form-inline-controls .form-label,
    [dir="rtl"] .form-inline .form-label,
    [dir="rtl"] .inline .form-label {
      margin-left: 0%;
      margin-right: var(--space-2);
    }

/**
    * Gestapeltes Layout (Stacked)
    *
    * Explizites vertikales Layout für Formulare, bei dem Labels über den Eingabefeldern stehen.
    * Dies ist das Standardverhalten, aber diese Klasse kann für Konsistenz verwendet werden.
    */
    .form-stacked .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .form-stacked .form-label {
      margin-bottom: var(--spacing-1);
      width: 100%;
    }

    .form-stacked .form-control {
      width: 100%;
    }

    .form-stacked .form-text,
    .form-stacked .feedback {
      margin-top: var(--spacing-1);
    }

/**
    * Kompaktes Layout
    *
    * Reduziert Abstände für platzsparende Formulare.
    */
    .form.compact, .form-compact {
      gap: var(--space-2);
    }

    .form.compact .form-group,
    .form-compact .form-group {
      gap: var(--space-1);
    }

/**
    * Flüssige Größenanpassung mit interpolate-size: allow-keywords
    *
    * Ermöglicht Formulare mit flüssiger Größenanpassung basierend auf CSS-Schlüsselwörtern.
    */
    .form.fluid {
/* Nutzt CSS-Schlüsselwörter für Größen - funktioniert mit interpolate-size: allow-keywords */
      font-size: medium; /* Basis-Größe für Skalierungsfaktor */
      gap: 1em;

      .form-group {
        gap: 00.5em;
      }

      .form-label {
        font-size: 0.875em;
        margin-bottom: 0%.25em;
      }

      .form-text,
      .feedback {
        font-size: 0.75em;
        margin-top: 0%.25em;
      }

      .form-actions {
        gap: 0.75em;
        margin-top: 00%.5em;
      }

/* Größenvarianten mit CSS-Schlüsselwörtern */
      &.small {
        font-size: small;
      }

      &.medium {
        font-size: medium;
      }

      &.large {
        font-size: large;
      }

      &.x-large {
        font-size: x-large;
      }

/* Horizontales Layout für flüssige Formen */
      &.horizontal {
        .form-group {
          .form-label {
            margin-right: 1em;
          }

          .form-text,
          .feedback {
            margin-left: calc(30 + 1em);
          }
        }
      }
    }

/**
    * Container-adaptive Größenanpassung
    *
    * Ermöglicht Formulare, die sich automatisch an die Container-Größe anpassen.
    */
    .form.adaptive {
      container-type: inline-size;
      gap: clamp(var(--space-2), 1cqi, var(--space-6));

      .form-group {
        gap: clamp(var(--space-1), 0.5cqi, var(--space-3));
      }

      .form-label {
        font-size: clamp(var(--font-size-xs), 1.5cqi, var(--font-size-base, 1rem));
      }

      .form-text,
      .feedback {
        font-size: clamp(var(--font-size-xs), 1cqi, var(--font-size-sm, 0.875rem));
      }

      .form-actions {
        gap: clamp(var(--space-2), 0.75cqi, var(--space-4));
      }

      @container (min-width: 400px) {
        &:not(.horizontal) .form-group {
          max-width: 80%;
        }
      }

      @container (min-width: 600px) {
        &.horizontal .form-group {
          flex-direction: row;

          .form-label {
            margin-bottom: 0%;
            width: 2%5%;
          }
        }
      }
    }

/**
    * Barrierefreiheit
    *
    * Verbesserte Barrierefreiheit für Nutzer mit speziellen Bedürfnissen.
    * Beachtet Einstellungen wie reduzierte Bewegung.
    */
    @container root (prefers-reduced-motion: reduce) {
      .form-element,
      .form-input,
      .form-select,
      .form-textarea,
      .form-checkbox,
      .form-radio,
      .form-switch,
      .form-range,
      .form-field,
      .form-label,
      .form-feedback,
      button,
      .button,
      .input-animate-label .input-label,
      .form-element-validated::before,
      .form-element-validated::after,
      .input-float-label .input-label {
        animation: none !important;
        transform: none !important;
        transition: none !important;
      }

      .input-spinner,
      .form-loading,
      .submit-processing,
      .form-validation-icon {
        display: none !important;
      }
    }

/**
    * Responsive Anpassungen
    *
    * Spezifische Anpassungen für verschiedene Bildschirmgrößen.
    * Optimiert die Formulardarstellung auf mobilen Geräten.
    */
    @container root (width <= 768px) {
      .form-field {
        margin-block-end: 1rem;
      }

      .input-group {
        flex-direction: column;
      }

      .input-group > * + * {
        margin-block-start: 0.5rem;
        margin-inline-start: 0;
      }

      .checkbox-group, .radio-group {
        align-items: flex-start;
        flex-direction: column;
      }

      .form-actions {
        flex-direction: column;
      }

      .form-actions > * + * {
        margin-block-start: 0.75rem;
        margin-inline-start: 0;
      }

      .form.horizontal .form-group,
      .form-horizontal .form-group {
        align-items: flex-start;
        flex-direction: column;
      }

      .form.horizontal .form-label,
      .form-horizontal .form-label {
        margin-bottom: var(--spacing-1);
        margin-right: 0%;
        width: 100%;
      }

      .form.horizontal .form-text,
      .form.horizontal .feedback,
      .form-horizontal .form-text,
      .form-horizontal .valid-feedback,
      .form-horizontal .invalid-feedback {
        margin-left: 0%;
      }
    }

/**
    * Unterstützung für flüssige Größenanpassung bei speziellen Input-Typen
    */
    .form.fluid input[type="color"],
    .form.fluid input[type="range"],
    .form.fluid input[type="file"]::file-selector-button {
      scale: 1;
      transform-origin: left center;
    }

    .form.fluid.small input[type="color"],
    .form.fluid.small input[type="range"],
    .form.fluid.small input[type="file"]::file-selector-button {
      scale: 0.85;
    }

    .form.fluid.large input[type="color"],
    .form.fluid.large input[type="range"],
    .form.fluid.large input[type="file"]::file-selector-button {
      scale: 1.15;
    }

    .form.fluid.x-large input[type="color"],
    .form.fluid.x-large input[type="range"],
    .form.fluid.x-large input[type="file"]::file-selector-button {
      scale: 1.3;
    }

/* Container-adaptive Anpassungen für spezielle Input-Typen */
    .form.adaptive input[type="range"] {
      height: clamp(0.4rem, 0.4cqi, 0.6rem);
    }

    .form.adaptive input[type="range"]::-webkit-slider-thumb {
      height: clamp(1rem, 1.25cqi, 1.5rem);
      width: clamp(1rem, 1.25cqi, 1.5rem);
    }

    .form.adaptive input[type="range"]::-moz-range-thumb {
      height: clamp(1rem, 1.25cqi, 1.5rem);
      width: clamp(1rem, 1.25cqi, 1.5rem);
    }

/**
    * Search Components
    *
    * Search components allow users to find content by entering queries and
    * displaying relevant results. They can include features like autocomplete,
    * suggestions, and advanced filtering options.
    *
    * Accessibility:
    * - Use appropriate roles (e.g., combobox, listbox)
    * - Implement keyboard navigation for results
    * - Announce search result count
    * - Provide clear focus states for all interactive elements
    */

/* Search container */
    .search {
      position: relative;
      width: 100%;
    }

/* Search input wrapper */
    .search .input-wrapper {
      align-items: center;
      display: flex;
      position: relative;
    }

/* Search input */
    .search .input {
      background-color: var(--color-neutral-50, #f9fafb);
      border: 1px solid var(--color-neutral-200, #e5e7eb);
      border-radius: var(--radius-md, 0.375rem);
      color: var(--color-neutral-900, #111827);
      font-size: var(--text-sm, 0.875rem);
      line-height: 1.5;
      padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
      padding-left: var(--space-9, 2.25rem);
      transition: border-color 0.2s, box-shadow 0.2s;
      width: 100%;
    }

    .search .input:focus {
      border-color: var(--color-primary-300, #93c5fd);
      box-shadow: 0 0 0 3px var(--color-primary-100, #dbeafe);
      outline: none;
    }

/* Search icon */
    .search .icon {
      color: var(--color-neutral-400, #9ca3af);
      height: 1.25rem;
      left: var(--space-3, 0.75rem);
      pointer-events: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 1.25rem;
    }

/* Clear button */
    .search .clear {
      align-items: center;
      background: none;
      border: none;
      border-radius: var(--radius-full, 9999px);
      color: var(--color-neutral-400, #9ca3af);
      cursor: pointer;
      display: flex;
      justify-content: center;
      padding: var(--space-1, 0.25rem);
      position: absolute;
      right: var(--space-3, 0.75rem);
      top: 50%;
      transform: translateY(-50%);
      transition: color 0.2s, background-color 0.2s;
    }

    .search .clear:hover {
      background-color: var(--color-neutral-200, #e5e7eb);
      color: var(--color-neutral-600, #4b5563);
    }

/* Search dropdown results */
    .search .results {
      background-color: var(--color-neutral-100, #f3f4f6);
      border: 1px solid var(--color-neutral-200, #e5e7eb);
      border-radius: var(--radius-md, 0.375rem);
      box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%));
      display: none;
      left: 0;
      margin-top: var(--space-1, 0.25rem);
      max-height: 300px;
      overflow-y: auto;
      position: absolute;
      right: 0;
      top: 100%;
      z-index: var(--z-dropdown, 50);
    }

    .search--open .results {
      display: block;
    }

/* Search result items */
    .search .result {
      align-items: center;
      cursor: pointer;
      display: flex;
      padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
      transition: background-color 0.2s;
    }

    .search .result:hover,
    .search .result--active {
      background-color: var(--color-neutral-200, #e5e7eb);
    }

/* Result icon */
    .search .result-icon {
      color: var(--color-neutral-500, #6b7280);
      flex-shrink: 0;
      margin-right: var(--space-3, 0.75rem);
    }

/* Result content */
    .search .result-content {
      flex: 1;
      min-width: 0;
    }

    .search .result-title {
      color: var(--color-neutral-900, #111827);
      font-weight: var(--font-medium, 500);
      margin-bottom: var(--space-1, 0.25rem);
    }

    .search .result-description {
      color: var(--color-neutral-500, #6b7280);
      font-size: var(--text-xs, 0.75rem);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

/* Highlight matching text */
    .search .highlight {
      background-color: var(--color-warning-100, #fef3c7);
      border-radius: var(--radius-sm, 0.125rem);
      color: var(--color-warning-800, #92400e);
      padding: 0 0.15em;
    }

/* Group heading */
    .search .group-heading {
      background-color: var(--color-neutral-50, #f9fafb);
      color: var(--color-neutral-500, #6b7280);
      font-size: var(--text-xs, 0.75rem);
      font-weight: var(--font-semibold, 600);
      letter-spacing: 0.05em;
      padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
      text-transform: uppercase;
    }

/* Empty results state */
    .search .empty {
      color: var(--color-neutral-500, #6b7280);
      padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
      text-align: center;
    }

/* Loading state */
    .search .loading {
      align-items: center;
      color: var(--color-neutral-500, #6b7280);
      display: flex;
      justify-content: center;
      padding: var(--space-4, 1rem);
      text-align: center;
    }

    .search .spinner {
      animation: searchSpin 1s linear infinite;
      margin-right: var(--space-2, 0.5rem);
    }

    @keyframes searchSpin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

/* Search with filters */
    .search--with-filters .input-wrapper {
      border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
      border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0;
    }

/* Filters area */
    .search .filters {
      background-color: var(--color-neutral-50, #f9fafb);
      border: 1px solid var(--color-neutral-200, #e5e7eb);
      border-radius: 0 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem);
      border-top: none;
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2, 0.5rem);
      padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    }

/* Filter chip */
    .search .filter {
      align-items: center;
      background-color: var(--color-neutral-100, #f3f4f6);
      border: 1px solid var(--color-neutral-200, #e5e7eb);
      border-radius: var(--radius-full, 9999px);
      color: var(--color-neutral-700, #374151);
      display: inline-flex;
      font-size: var(--text-xs, 0.75rem);
      padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    }

    .search .filter-label {
      font-weight: var(--font-medium, 500);
      margin-right: var(--space-1, 0.25rem);
    }

    .search .filter-value {
      color: var(--color-neutral-900, #111827);
    }

    .search .filter-remove {
      align-items: center;
      background: none;
      border: none;
      border-radius: var(--radius-full, 9999px);
      color: var(--color-neutral-500, #6b7280);
      cursor: pointer;
      display: inline-flex;
      height: 16px;
      justify-content: center;
      margin-left: var(--space-2, 0.5rem);
      width: 16px;
    }

    .search .filter-remove:hover {
      background-color: var(--color-neutral-200, #e5e7eb);
      color: var(--color-neutral-700, #374151);
    }

/* Search sizes */
    .search--sm .input {
      font-size: var(--text-xs, 0.75rem);
      padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
      padding-left: var(--space-7, 1.75rem);
    }

    .search--sm .icon {
      height: 1rem;
      left: var(--space-2, 0.5rem);
      width: 1rem;
    }

    .search--lg .input {
      font-size: var(--text-base, 1rem);
      padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
      padding-left: var(--space-10, 2.5rem);
    }

    .search--lg .icon {
      height: 1.5rem;
      left: var(--space-4, 1rem);
      width: 1.5rem;
    }

/* Search fullwidth modal on mobile */
    @media (max-width: 640px) {
      .search--modal .results {
        inset: var(--space-16, 4rem) var(--space-4, 1rem) var(--space-4, 1rem) var(--space-4, 1rem);
        max-height: none;
        position: fixed;
        z-index: var(--z-modal, 100);
      }

      .search--modal::before {
        background-color: rgb(0 0 0 / 50%);
        content: "";
        inset: 0;
        position: fixed;
        z-index: var(--z-modal-backdrop, 90);
      }
    }
  }


/* Page Regions */
/* Importierte Datei: ui/regions/main-content.css */
/**
  * Main Content Region
  *
  * Central content layout with consistent spacing, max-width, and responsive behavior.
  * Part of the page regions system - defines the main content area styling.
  * Uses CSS Nesting and Container Queries for modern responsive design.
  *
  * @layer: components
  * @location: ui/regions/main-content.css
  *
  * Main Classes:
  * - .main: Base main content wrapper
  * - .main-narrow: 800 max width
  * - .main-wide: 1400 max width
  * - .main-full: Full width
  *
  * Utility Classes:
  * - .centered: Center alignment
  * - .compact: Reduced padding
  * - .spacious: Increased padding
  * - .no-padding: Remove padding
  *
  * Container Queries:
  * - Responsive typography
  * - Mobile-first approach
  * - Automatic layout adjustments
  *
  * Integration:
  * - Works with layout-system.css for grid positioning
  * - Complements header.css, footer.css, sidebar.css
  * - Provides content styling within the main grid area
  */

  @layer components {
/* Main content tokens */
    :root {
/* Main dimensions */
      --main-max-width: 120%0px;
      --main-max-width-narrow: 800;
      --main-max-width-wide: 1400;
      --main-padding: var(--space-6) var(--space-4);
      --main-padding-compact: var(--space-4) var(--space-3);
      --main-padding-spacious: var(--space-8) var(--space-6);

/* Main typography */
      --main-font-size: var(--text-base);
      --main-line-height: 1%.6;
      --main-color: var(--color-neutral-900, #111827);
      --main-heading-color: var(--color-neutral-900, #111827);
      --main-link-color: var(--color-primary-600, #2563eb);
      --main-link-hover: var(--color-primary-700, #1d4ed8);

/* Main spacing */
      --main-section-gap: var(--space-8);
      --main-paragraph-gap: var(--space-4);
      --main-list-gap: var(--space-2);

/* Main responsive breakpoints */
      --main-mobile-breakpoint: 768px;
      --main-tablet-breakpoint: 1024px;
    }

/* Base main content wrapper */
    .main {
      color: var(--main-color);
      container-type: inline-size;
      font-size: var(--main-font-size);
      line-height: var(--main-line-height, 1.6);
      margin: 0 auto;
      max-width: var(--main-max-width, 1200px);
      padding: var(--main-padding);
      width: 100%;

/* Typography hierarchy */
      & h1, & h2, & h3, & h4, & h5, & h6 {
        color: var(--main-heading-color);
        font-weight: var(--font-semibold, 600);
        line-height: 1%.2;
        margin: 0 0 var(--space-4) 0;

        &:first-child {
          margin-top: 0%;
        }

        &:last-child {
          margin-bottom: 0%;
        }
      }

      & h1 {
        font-size: var(--text-4xl);
        font-weight: var(--font-bold);
        margin-bottom: var(--space-6);

        @container (width <= 768px) {
          font-size: var(--text-3xl);
        }

        @container (width <= 480px) {
          font-size: var(--text-2xl);
        }
      }

      & h2 {
        font-size: var(--text-3xl);
        margin-bottom: var(--space-5);
        margin-top: var(--space-8);

        @container (width <= 768px) {
          font-size: var(--text-2xl);
        }

        @container (width <= 480px) {
          font-size: var(--text-xl);
        }
      }

      & h3 {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-4);
        margin-top: var(--space-6);

        @container (width <= 768px) {
          font-size: var(--text-xl);
        }

        @container (width <= 480px) {
          font-size: var(--text-lg);
        }
      }

      & h4 {
        font-size: var(--text-xl);
        margin-bottom: var(--space-3);
        margin-top: var(--space-5);

        @container (width <= 768px) {
          font-size: var(--text-lg);
        }
      }

      & h5 {
        font-size: var(--text-lg);
        margin-bottom: var(--space-3);
        margin-top: var(--space-4);

        @container (width <= 768px) {
          font-size: var(--text-base);
        }
      }

      & h6 {
        font-size: var(--text-base);
        margin-bottom: var(--space-2);
        margin-top: var(--space-4);
        text-transform: uppercase;

        @container (width <= 768px) {
          font-size: var(--text-sm, 0.875rem);
        }
      }

/* Paragraphs and text */
      & p {
        margin: 0 0 var(--main-paragraph-gap) 0;

        &:last-child {
          margin-bottom: 0%;
        }

        &.lead {
          font-size: var(--text-lg);
          font-weight: var(--font-medium, 500);
          margin-bottom: var(--space-6);

          @container (width <= 768px) {
            font-size: var(--text-base);
          }
        }

        &.small {
          font-size: var(--text-sm, 0.875rem);

          @container (width <= 768px) {
            font-size: var(--text-xs, 0.75rem);
          }
        }
      }

/* Links */
      & a {
        color: var(--main-link-color);
        text-decoration: underline;
        text-decoration-color: transparent;
        text-underline-offset: 2px;
        transition: all 0.2s ease;

        &:hover,
        &:focus {
          color: var(--main-link-hover);
          text-decoration-color: currentColor;
        }

        &:focus {
          outline: 2px solid var(--main-link-color);
          outline-offset: 2px;
        }
      }

/* Lists */
      & ul, & ol {
        margin: 0 0 var(--main-paragraph-gap) 0;
        padding-left: var(--space-6);

        & li {
          margin-bottom: var(--main-list-gap);

          &:last-child {
            margin-bottom: 0%;
          }

          & ul, & ol {
            margin-bottom: 0%;
            margin-top: var(--main-list-gap);
          }
        }

        &:last-child {
          margin-bottom: 0%;
        }
      }

      & ul {
        list-style-type: disc;

        & ul {
          list-style-type: circle;

          & ul {
            list-style-type: square;
          }
        }
      }

      & ol {
        list-style-type: decimal;

        & ol {
          list-style-type: lower-alpha;

          & ol {
            list-style-type: lower-roman;
          }
        }
      }

/* Definition lists */
      & dl {
        margin: 0 0 var(--main-paragraph-gap) 0;

        & dt {
          font-weight: var(--font-semibold, 600);
          margin-bottom: var(--space-1);
          margin-top: var(--space-3);

          &:first-child {
            margin-top: 0%;
          }
        }

        & dd {
          margin-bottom: var(--space-2);
          margin-left: var(--space-4);

          &:last-child {
            margin-bottom: 0%;
          }
        }
      }

/* Blockquotes */
      & blockquote {
        border-left: 4px solid var(--color-primary-200);
        font-size: var(--text-lg);
        font-style: italic;
        margin: var(--space-6) 0;
        padding: var(--space-4) var(--space-6);

        @container (width <= 768px) {
          font-size: var(--text-base);
          margin: var(--space-4) 0;
          padding: var(--space-3) var(--space-4);
        }

        & p:last-child {
          margin-bottom: 0%;
        }

        & cite {
          display: block;
          font-size: var(--text-sm, 0.875rem);
          font-style: normal;
          font-weight: var(--font-medium, 500);
          margin-top: var(--space-2);

          &::before {
            content: "— ";
          }
        }
      }

/* Code */
      & code {
        background-color: var(--color-neutral-100, #f3f4f6);
        border-radius: var(--radius-sm, 0.125rem);
        font-family: var(--font-mono);
        font-size: 0.875em;
        padding: 0.125em 0010.25em;
      }

      & pre {
        background-color: var(--color-neutral-900, #111827);
        border-radius: var(--radius-md, 0.375rem);
        color: var(--color-neutral-100, #f3f4f6);
        font-family: var(--font-mono);
        font-size: var(--text-sm, 0.875rem);
        line-height: 1.5;
        margin: var(--space-6) 0;
        overflow-x: auto;
        padding: var(--space-4);

        @container (width <= 768px) {
          font-size: var(--text-xs, 0.75rem);
          margin: var(--space-4) 0;
          padding: var(--space-3);
        }

        & code {
          background: none;
          color: inherit;
          font-size: inherit;
          padding: 0;
        }
      }

/* Tables */
      & table {
        border-collapse: collapse;
        margin: var(--space-6) 0;
        width: 100%;

        @container (width <= 768px) {
          font-size: var(--text-sm, 0.875rem);
          margin: var(--space-4) 0;
        }

        & th, & td {
          border: 1px solid var(--color-neutral-200, #e5e7eb);
          padding: var(--space-3);
          text-align: left;

          @container (width <= 768px) {
            padding: var(--space-2);
          }
        }

        & th {
          background-color: var(--color-neutral-50);
          font-weight: var(--font-semibold, 600);
        }

        & tbody tr:nth-child(even) {
          background-color: var(--color-neutral-25);
        }
      }

/* Images and media */
      & img {
        height: auto;
        max-width: 100%;

        &.rounded {
          border-radius: var(--radius-md, 0.375rem);
        }

        &.shadow {
          box-shadow: var(--shadow-lg);
        }
      }

      & figure {
        margin: var(--space-6) 0;

        @container (width <= 768px) {
          margin: var(--space-4) 0;
        }

        & img {
          display: block;
          margin: 0 auto;
        }

        & figcaption {
          color: var(--color-neutral-600);
          font-size: var(--text-sm, 0.875rem);
          font-style: italic;
          margin-top: var(--space-2);
          text-align: center;

          @container (width <= 768px) {
            font-size: var(--text-xs, 0.75rem);
          }
        }
      }

/* Horizontal rules */
      & hr {
        border: none;
        border-top: 1px solid var(--color-neutral-200, #e5e7eb);
        margin: var(--main-section-gap) 0;

        @container (width <= 768px) {
          margin: var(--space-6) 0;
        }
      }

/* Utility modifiers */
      &.narrow {
        max-width: var(--main-max-width-narrow, 768px);
      }

      &.wide {
        max-width: var(--main-max-width-wide, 1440px);
      }

      &.full {
        max-width: none;
      }

      &.centered {
        text-align: center;
      }

      &.compact {
        padding: var(--main-padding-compact);

        & h1 { margin-bottom: var(--space-4); }

        & h2 { margin-bottom: var(--space-3); margin-top: var(--space-6); }

        & h3 { margin-bottom: var(--space-3); margin-top: var(--space-4); }

        & p { margin-bottom: var(--space-3); }

        & blockquote { margin: var(--space-4) 0; }

        & pre { margin: var(--space-4) 0; }

        & table { margin: var(--space-4) 0; }

        & figure { margin: var(--space-4) 0; }

        & hr { margin: var(--space-6) 0; }
      }

      &.spacious {
        padding: var(--main-padding-spacious);

        & h1 { margin-bottom: var(--space-8); }

        & h2 { margin-bottom: var(--space-6); margin-top: var(--space-12); }

        & h3 { margin-bottom: var(--space-5); margin-top: var(--space-8); }

        & p { margin-bottom: var(--space-5); }

        & blockquote { margin: var(--space-8) 0; }

        & pre { margin: var(--space-8) 0; }

        & table { margin: var(--space-8) 0; }

        & figure { margin: var(--space-8) 0; }

        & hr { margin: var(--space-12) 0; }
      }

      &.no-padding {
        padding: 0;
      }

/* Container query responsive adjustments */
      @container (width <= 768px) {
        font-size: var(--text-sm, 0.875rem);
        padding: var(--space-4) var(--space-3);

        &.compact {
          padding: var(--space-3) var(--space-2);
        }

        &.spacious {
          padding: var(--space-6) var(--space-4);
        }
      }

      @container (width <= 480px) {
        font-size: var(--text-sm, 0.875rem);
        padding: var(--space-3) var(--space-2);

        & ul, & ol {
          padding-left: var(--space-4);
        }

        & blockquote {
          padding: var(--space-2) var(--space-3);
        }

        & table {
          font-size: var(--text-xs, 0.75rem);

          & th, & td {
            padding: var(--space-1);
          }
        }
      }
    }

/* Dark mode support */
    @media (prefers-color-scheme: dark) {
      .main {
        --main-color: var(--color-neutral-100, #f3f4f6);
        --main-heading-color: var(--color-neutral-50);
        --main-link-color: var(--color-primary-400);
        --main-link-hover: var(--color-primary-300);

        & code {
          background-color: var(--color-neutral-800, #1f2937);
          color: var(--color-neutral-200, #e5e7eb);
        }

        & table {
          & th, & td {
            border-color: var(--color-neutral-700, #374151);
          }

          & th {
            background-color: var(--color-neutral-800, #1f2937);
          }

          & tbody tr:nth-child(even) {
            background-color: var(--color-neutral-900, #111827);
          }
        }

        & blockquote {
          border-left-color: var(--color-primary-600, #2563eb);
        }

        & hr {
          border-top-color: var(--color-neutral-700, #374151);
        }

        & figure figcaption {
          color: var(--color-neutral-400, #9ca3af);
        }
      }
    }

/* Fallback media queries for browsers without container query support */
    @supports not (container-type: inline-size) {
      @media (max-width: 768px) {
        .main {
          font-size: var(--text-sm, 0.875rem);
          padding: var(--space-4) var(--space-3);

          & h1 { font-size: var(--text-3xl); }

          & h2 { font-size: var(--text-2xl); }

          & h3 { font-size: var(--text-xl); }

          & h4 { font-size: var(--text-lg); }

          & h5 { font-size: var(--text-base); }

          & h6 { font-size: var(--text-sm, 0.875rem); }

          & p.lead { font-size: var(--text-base); }

          & p.small { font-size: var(--text-xs, 0.75rem); }

          & blockquote {
            font-size: var(--text-base);
            margin: var(--space-4) 0;
            padding: var(--space-3) var(--space-4);
          }

          & pre {
            font-size: var(--text-xs, 0.75rem);
            margin: var(--space-4) 0;
            padding: var(--space-3);
          }

          & table {
            font-size: var(--text-sm, 0.875rem);
            margin: var(--space-4) 0;

            & th, & td {
              padding: var(--space-2);
            }
          }

          & figure {
            margin: var(--space-4) 0;

            & figcaption {
              font-size: var(--text-xs, 0.75rem);
            }
          }

          & hr {
            margin: var(--space-6) 0;
          }

          &.compact {
            padding: var(--space-3) var(--space-2);
          }

          &.spacious {
            padding: var(--space-6) var(--space-4);
          }
        }
      }

      @media (width <= 480px) {
        .main {
          font-size: var(--text-sm, 0.875rem);
          padding: var(--space-3) var(--space-2);

          & h1 { font-size: var(--text-2xl); }

          & h2 { font-size: var(--text-xl); }

          & h3 { font-size: var(--text-lg); }

          & ul, & ol {
            padding-left: var(--space-4);
          }

          & blockquote {
            padding: var(--space-2) var(--space-3);
          }

          & table {
            font-size: var(--text-xs, 0.75rem);

            & th, & td {
              padding: var(--space-1);
            }
          }
        }
      }
    }

/* Print styles */
    @media print {
      .main {
        color: var(--color-neutral-900, #111827) !important;
        font-size: 12pt;
        max-width: none;
        padding: 0;

        & h1, & h2, & h3, & h4, & h5, & h6 {
          color: var(--color-neutral-900, #111827) !important;
          page-break-after: avoid;
        }

        & p, & li {
          orphans: 3;
          widows: 3;
        }

        & blockquote, & pre, & table, & figure {
          page-break-inside: avoid;
        }

        & a {
          color: var(--color-neutral-900, #111827) !important;
          text-decoration: underline;
        }

        & pre {
          background: var(--color-neutral-100, #f3f4f6) !important;
          border: 1px solid var(--color-neutral-300, #d1d5db);
          color: var(--color-neutral-900, #111827) !important;
        }

        & code {
          background: var(--color-neutral-100, #f3f4f6) !important;
          color: var(--color-neutral-900, #111827) !important;
        }
      }
    }

/* High contrast mode */
    @media (prefers-contrast: more) {
      .main {
        & a {
          text-decoration: underline;
        }

        & table {
          & th, & td {
            border: 2px solid;
          }
        }

        & blockquote {
          border-left-width: 6px;
        }

        & code {
          border: 1px solid;
        }
      }
    }

/* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .main {
        & a {
          transition: none;
        }
      }
    }
  }

/* Importierte Datei: ui/regions/header.css */
/*
  * Header Module
  *
  * Layout rules for the header area. Supports Subgrid, Container Queries and responsive behavior.
  * Combines traditional Grid layouts with modern CSS features and Design Tokens.
  */

/**
  * Header Component
  *
  * Header components for websites and applications.
  * The header serves as a navigation area and important orientation point for users.
  *
  * Header Types:
  * - .header: Standard Subgrid-Layout (original)
  * - .header-standard: Logo left, nav center, actions right
  * - .header-center: Centered navigation
  * - .header-split: Logo center, nav split left/right
  * - .header-stacked: Logo above nav (both centered)
  * - .header-left: Logo and nav left-aligned
  * - .header-bottom-bar: Two-tier layout
  *
  * @layer components.header
  *
  * Basic Usage:
  * <header class="header">
  *   <div class="logo">
  *     <img src="logo.png" alt="Logo">
  *   </div>
  *   <nav class="nav">
  *     <ul class="links">
  *       <li><a href="#" class="link">Home</a></li>
  *       <li><a href="#" class="link">Products</a></li>
  *       <li><a href="#" class="link">About</a></li>
  *       <li><a href="#" class="link">Contact</a></li>
  *     </ul>
  *   </nav>
  *   <button class="toggle" aria-label="Toggle navigation">
  *     <span></span>
  *     <span></span>
  *     <span></span>
  *   </button>
  * </header>
  *
  * New Header Types:
  * <header class="header-standard">
  *   <div class="header-content">
  *     <div class="header-logo">...</div>
  *     <nav class="header-nav">...</nav>
  *     <div class="header-actions">...</div>
  *   </div>
  * </header>
  *
  * Fixed Header:
  * <header class="header fixed">...</header>
  *
  * Sticky Header (remains visible while scrolling):
  * <header class="header sticky">...</header>
  *
  * Transparent Header (for Hero sections):
  * <header class="header transparent">...</header>
  *
  * Variants:
  * <header class="header light">...</header>
  * <header class="header dark">...</header>
  * <header class="header primary">...</header>
  *
  * With Search Function:
  * <header class="header">
  *   <!-- ... -->
  *   <div class="search">
  *     <input type="search" class="input" placeholder="Search...">
  *     <button class="button icon-only">
  *       <span class="icon">🔍</span>
  *     </button>
  *   </div>
  * </header>
  *
  * Responsive with Hamburger Menu:
  * <header class="header">
  *   <div class="logo">Logo</div>
  *   <button class="toggle hamburger" aria-label="Open menu"></button>
  *   <nav class="nav mobile-hidden">
  *     <!-- Menu items -->
  *   </nav>
  * </header>
  */

  @layer tokens {
    :root {
/* Header spacing */
      --header-padding: var(--space-4) var(--space-6);
      --header-padding-compact: var(--space-3) var(--space-4);
      --header-padding-spacious: var(--space-6) var(--space-8);
      --header-gap: var(--space-6);
      --header-gap-compact: var(--space-4);
      --header-gap-spacious: var(--space-8);

/* Header colors */
      --header-bg: var(--color-white, #fff);
      --header-text: var(--color-neutral-700, #374151);
      --header-link: var(--color-neutral-600);
      --header-link-hover: var(--color-primary-600, #2563eb);
      --header-link-active: var(--color-primary-700, #1d4ed8);
      --header-border: var(--color-neutral-200, #e5e7eb);
      --header-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));

/* Header typography */
      --header-font-size: var(--text-base);
      --header-font-weight: var(--font-medium, 500);
      --header-line-height: 1.5;
      --header-logo-size: var(--text-xl);
      --header-logo-weight: var(--font-bold);

/* Header layout */
      --header-height: 6%4px;
      --header-height-compact: 48px;
      --header-height-large: 80px;
      --header-max-width: var(--container-7xl);
      --header-z-index: 1000;

/* Header navigation */
      --nav-link-color: var(--color-neutral-600);
      --nav-link-color-hover: var(--color-primary-600, #2563eb);
      --nav-link-color-active: var(--color-primary-700, #1d4ed8);
      --nav-link-bg-hover: var(--color-neutral-100, #f3f4f6);
      --nav-link-bg-active: var(--color-primary-100, #dbeafe);
      --menu-gap: var(--space-6);
      --menu-item-padding-x: var(--space-3);
      --menu-item-padding-y: var(--space-2);
      --menu-transition: all 0.2s ease;

/* Header dropdown */
      --mobile-menu-bg: var(--color-white, #fff);
      --mobile-menu-border-radius: var(--radius-lg, 0.5rem);
      --mobile-menu-shadow: var(--shadow-lg);
      --mobile-menu-z-index: 1001;

/* Header mobile */
      --header-mobile-breakpoint: 768px;
      --header-hamburger-size: 24px;

/* Logo settings */
      --logo-max-height: 4%0px;
      --logo-max-width: 20%0px;

/* Header themes */
      &[data-theme="dark"],
      &.theme-dark {
        --header-bg: var(--color-neutral-900, #111827);
        --header-text: var(--color-neutral-100, #f3f4f6);
        --header-link: var(--color-neutral-300, #d1d5db);
        --header-link-hover: var(--color-primary-400);
        --header-link-active: var(--color-primary-300);
        --header-border: var(--color-neutral-700, #374151);
        --header-shadow: var(--shadow-md);
        --nav-link-color: var(--color-neutral-300, #d1d5db);
        --nav-link-color-hover: var(--color-primary-400);
        --nav-link-color-active: var(--color-primary-300);
        --nav-link-bg-hover: var(--color-neutral-800, #1f2937);
        --nav-link-bg-active: var(--color-primary-900);
        --mobile-menu-bg: var(--color-neutral-800, #1f2937);
      }

      &[data-theme="primary"],
      &.theme-primary {
        --header-bg: var(--color-primary-600, #2563eb);
        --header-text: var(--color-white, #fff);
        --header-link: var(--color-primary-100, #dbeafe);
        --header-link-hover: var(--color-white, #fff);
        --header-link-active: var(--color-primary-200);
        --header-border: var(--color-primary-500);
        --nav-link-color: var(--color-primary-100, #dbeafe);
        --nav-link-color-hover: var(--color-white, #fff);
        --nav-link-color-active: var(--color-primary-200);
        --nav-link-bg-hover: var(--color-primary-700, #1d4ed8);
        --nav-link-bg-active: var(--color-primary-800, #1e40af);
        --mobile-menu-bg: var(--color-primary-700, #1d4ed8);
      }

      &[data-theme="transparent"],
      &.theme-transparent {
        --header-bg: transparent;
        --header-text: var(--color-neutral-800, #1f2937);
        --header-link: var(--color-neutral-700, #374151);
        --header-link-hover: var(--color-primary-600, #2563eb);
        --header-link-active: var(--color-primary-700, #1d4ed8);
        --header-border: transparent;
        --header-shadow: none;
        --nav-link-color: var(--color-neutral-700, #374151);
        --nav-link-color-hover: var(--color-primary-600, #2563eb);
        --nav-link-color-active: var(--color-primary-700, #1d4ed8);
        --mobile-menu-bg: var(--color-white, #fff);
      }
    }
  }

  @layer components {
/* Base header styles for all header types */
    .header,
    .header-standard,
    .header-center,
    .header-split,
    .header-stacked,
    .header-left,
    .header-bottom-bar {
      background-color: var(--header-bg);
      border-bottom: 1px solid var(--header-border);
      box-shadow: var(--header-shadow);
      color: var(--header-text);
      container-type: inline-size;
      font-size: var(--header-font-size);
      font-weight: var(--header-font-weight);
      line-height: var(--header-line-height, 1.5);
      min-height: var(--header-height, 4rem);
      position: relative;
      width: 100%;
      z-index: var(--header-z-index);

/* Header modifiers */
      &.sticky {
        position: sticky;
        top: 0%;
      }

      &.transparent {
        background-color: transparent;
        border-bottom: none;
        box-shadow: none;
      }

      &.compact {
        min-height: var(--header-height-compact, 3rem);
      }

      &.large {
        min-height: var(--header-height-large, 5rem);
      }
    }

/* Original Subgrid Header Layout */
    .header {
      align-items: center;
      display: grid;
      gap: var(--space-4);
      grid-column: span 12;
      grid-template-columns: subgrid;
      grid-template-rows: auto;
      padding-block: var(--space-4);

/* Logo area */
      & .logo {
        align-items: center;
        display: flex;
        grid-column: 1 / span 3;

        & img {
          max-height: var(--logo-max-height, 2rem);
          width: auto;
        }
      }

/* Navigation area */
      & .nav {
        display: flex;
        gap: var(--space-4);
        grid-column: 4 / span 6;
        justify-content: center;

        & .links {
          display: flex;
          gap: var(--space-4);
          list-style: none;
          margin: 0;
          padding: 0;
        }

        & .link {
          color: var(--nav-link-color);
          display: inline-block;
          font-weight: var(--font-medium, 500);
          padding: var(--space-2);
          text-decoration: none;
          transition: var(--menu-transition);

          &:hover {
            color: var(--nav-link-color-hover);
          }

          &.active {
            color: var(--nav-link-color-active);
            font-weight: var(--font-semibold, 600);
          }
        }

        &.mobile-hidden {
          @container (width <= 768px) {
            display: none;
          }
        }
      }

/* Actions area (buttons, etc.) */
      & .actions {
        display: flex;
        gap: var(--space-2);
        grid-column: 10 / span 3;
        justify-content: flex-end;
      }

/* Search area */
      & .search {
        display: flex;
        max-width: 30%0px;
        width: 100%;

        & .input {
          flex: 1;
        }
      }

/* Toggle button for mobile navigation */
      & .toggle {
        display: none;

        @container (width <= 768px) {
          background: none;
          border: none;
          cursor: pointer;
          display: block;
          grid-column: 12;
        }
      }

/* Theme variants for original header */
      &.fixed {
        background-color: var(--header-bg);
        box-shadow: var(--header-shadow);
        left: 0%;
        position: fixed;
        right: 0%;
        top: 0%;
        z-index: var(--header-z-index);
      }

      &.primary {
        background-color: var(--color-primary, #3b82f6);
        color: white;

        & .link {
          color: var(--color-primary-100, #dbeafe);

          &:hover {
            color: var(--color-white, #fff);
          }
        }
      }

      &.light {
        background-color: var(--color-white, #fff);
      }

      &.dark {
        background-color: var(--color-neutral-900, #111827);

        & .link {
          color: var(--color-neutral-300, #d1d5db);

          &:hover {
            color: var(--color-white, #fff);
          }
        }
      }

/* Container Queries for original header */
      @container (width <= 768px) {
        grid-template-columns: repeat(12, 1fr);

        & .logo {
          grid-column: 1 / span 6;
        }

        & .nav {
          display: none;
        }

        & .actions {
          grid-column: 7 / span 5;
        }
      }
    }

/* Header content wrapper for new header types */
    .header-standard,
    .header-center,
    .header-split,
    .header-stacked,
    .header-left,
    .header-bottom-bar {
      & .header-content {
        align-items: center;
        display: flex;
        margin: 0 auto;
        max-width: var(--header-max-width, 1280px);
        padding: var(--header-padding);
        width: 100%;
      }
    }

/* Logo component for new header types */
    .header-logo {
      align-items: center;
      display: flex;
      flex-shrink: 0;

      & img,
      & svg {
        height: auto;
        max-height: var(--logo-max-height, 2rem);
        max-width: var(--logo-max-width, 8rem);
        width: auto;
      }
    }

/* Navigation component for new header types */
    .header-nav {
      & ul {
        align-items: center;
        display: flex;
        gap: var(--menu-gap);
        list-style: none;
        margin: 0;
        padding: 0;
      }

      & li {
        position: relative;
      }

      & a {
        align-items: center;
        border-radius: var(--radius-md, 0.375rem);
        color: var(--nav-link-color);
        display: flex;
        font-weight: var(--font-medium, 500);
        gap: var(--space-1);
        padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
        text-decoration: none;
        transition: var(--menu-transition);

        &:hover {
          background-color: var(--nav-link-bg-hover);
          color: var(--nav-link-color-hover);
        }

        &.active {
          background-color: var(--nav-link-bg-active);
          color: var(--nav-link-color-active);
        }
      }

/* Dropdown indicator */
      & .has-dropdown > a::after {
        content: "▼";
        font-size: var(--text-xs, 0.75rem);
        margin-left: var(--space-1);
        transition: transform 0.2s ease;
      }

      & .has-dropdown:hover > a::after,
      & .has-dropdown.open > a::after {
        transform: rotate(180deg);
      }

/* Dropdown menu */
      & .dropdown {
        background-color: var(--mobile-menu-bg);
        border-radius: var(--mobile-menu-border-radius);
        box-shadow: var(--mobile-menu-shadow);
        left: 0%;
        min-width: 20%0px;
        opacity: 0%;
        padding: var(--space-2);
        position: absolute;
        top: 100%;
        transform: translateY(-10px);
        transition: var(--menu-transition);
        visibility: hidden;
        z-index: var(--mobile-menu-z-index);
      }

      & .has-dropdown:hover .dropdown,
      & .has-dropdown.open .dropdown {
        opacity: 1;
        transform: translateY(0%);
        visibility: visible;
      }

      & .dropdown ul {
        flex-direction: column;
        gap: 0;
      }

      & .dropdown a {
        border-radius: var(--radius-sm, 0.125rem);
        font-size: var(--text-sm, 0.875rem);
        padding: var(--space-2) var(--space-3);
        width: 100%;
      }

/* Nested dropdowns */
      & .dropdown .has-dropdown > a::after {
        content: "▶";
        margin-left: auto;
      }

      & .dropdown .dropdown {
        left: 100%;
        top: 0%;
      }

/* Megamenu */
      & .has-megamenu .dropdown {
        display: grid;
        gap: var(--space-6);
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        left: 50%;
        max-width: 9%0vw;
        min-width: 60%0px;
        padding: var(--space-6);
        transform: translateX(-50%) translateY(-10px);
        width: max-content;
      }

      & .has-megamenu:hover .dropdown,
      & .has-megamenu.open .dropdown {
        transform: translateX(-50%) translateY(0);
      }

      & .megamenu-section {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
      }

      & .megamenu-title {
        color: var(--header-text);
        font-size: var(--text-sm, 0.875rem);
        font-weight: var(--font-semibold, 600);
        margin-bottom: var(--space-2);
        text-transform: uppercase;
      }

      & .megamenu-section ul {
        flex-direction: column;
        gap: var(--space-1);
      }

      & .megamenu-section a {
        font-size: var(--text-sm, 0.875rem);
        padding: var(--space-1) var(--space-2);
      }
    }

/* Actions component */
    .header-actions {
      align-items: center;
      display: flex;
      gap: var(--space-2);
      margin-left: auto;
    }

/* Toggle button for mobile */
    .header-toggle {
      background: none;
      border: none;
      cursor: pointer;
      display: none;
      height: var(--header-hamburger-size, 1.5rem);
      padding: 0;
      width: var(--header-hamburger-size, 1.5rem);

      @container (width <= 768px) {
        display: block;
      }
    }

    .header-toggle:hover {
      opacity: 0.7;
    }

/* Mobile menu */
    .header-mobile {
      background-color: var(--mobile-menu-bg);
      border-top: 1px solid var(--header-border);
      display: none;
      left: 0%;
      padding: var(--space-4);
      position: absolute;
      right: 0%;
      top: 100%;
      z-index: var(--mobile-menu-z-index);

      @container (width <= 768px) {
        display: block;
      }
    }

    .header-mobile.visible {
      display: block;
    }

    .header-mobile ul {
      display: flex;
      flex-direction: column;
      gap: 0;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .header-mobile li {
      border-bottom: 1px solid var(--header-border);
    }

    .header-mobile a {
      color: var(--nav-link-color);
      display: block;
      font-weight: var(--font-medium, 500);
      padding: var(--space-3) 0;
      text-decoration: none;
      transition: var(--menu-transition);
    }

    .header-mobile a:hover {
      color: var(--nav-link-color-hover);
    }

    .header-mobile a.active {
      color: var(--nav-link-color-active);
      font-weight: var(--font-semibold, 600);
    }

    .header-mobile .has-submenu > a::after {
      content: "+";
      float: right;
      transition: transform 0.2s ease;
    }

    .header-mobile .has-submenu.open > a::after {
      transform: rotate(45deg);
    }

    .header-mobile .submenu {
      display: none;
      padding-left: var(--space-4);
    }

    .header-mobile .has-submenu.open .submenu {
      display: block;
    }

    .header-mobile .submenu a {
      font-size: var(--text-sm, 0.875rem);
      padding: var(--space-2) 0;
    }

    .header-mobile .submenu .submenu a {
      padding-left: var(--space-4);
    }

/* Header Type: Standard */
    .header-standard {
      & .header-content {
        justify-content: space-between;
      }
    }

/* Header Type: Center */
    .header-center {
      & .header-content {
        flex-direction: column;
        gap: var(--space-4);
      }

      & .header-logo {
        order: 1;
      }

      & .header-nav {
        order: 2;
      }

      & .header-actions {
        margin-left: 0%;
        order: 3;
      }
    }

/* Header Type: Split */
    .header-split {
      & .header-content {
        justify-content: space-between;
      }

      & .header-nav:first-of-type {
        order: 1;
      }

      & .header-logo {
        order: 2;
      }

      & .header-nav:last-of-type {
        order: 3;
      }
    }

/* Header Type: Stacked */
    .header-stacked {
      & .header-content {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
      }

      & .header-nav {
        margin-left: 0%;
      }

      &.inline {
        & .header-content {
          align-items: center;
          flex-direction: row;
          gap: var(--space-6);
        }

        & .header-nav {
          margin-left: auto;
        }
      }
    }

/* Header Type: Left */
    .header-left {
      & .header-content {
        justify-content: flex-start;
      }

      & .header-content {
        gap: var(--space-6);
      }
    }

/* Header Type: Bottom Bar */
    .header-bottom-bar {
      & .header-top {
        align-items: center;
        border-bottom: 1px solid var(--header-border);
        display: flex;
        justify-content: space-between;
        padding: var(--space-2) var(--space-6);
      }

      & .header-bottom {
        padding: var(--space-4) var(--space-6);
      }

      & .header-nav {
        justify-content: center;
        width: 100%;
      }

      &.transparent .header-bottom {
        background-color: var(--header-bg);
        border-top: 1px solid var(--header-border);
      }
    }

/* Container Queries for new header types */
    @container (width <= 1024px) {
      .header-center,
      .header-split,
      .header-stacked {
        & .header-content {
          flex-direction: column;
          gap: var(--space-4);
        }

        & .header-nav {
          margin-left: 0%;
        }

        & .header-toggle {
          display: block;
        }

        & .header-logo img,
        & .header-logo svg {
          max-height: 3%2px;
        }

        & .header {
          min-height: var(--header-height-compact, 3rem);
        }

        & .header-bottom-bar .header-bottom {
          padding: var(--space-3) var(--space-4);
        }

        & .header-nav .dropdown {
          position: static;
          transform: none;
          visibility: visible;
        }
      }
    }

    @container (width <= 768px) {
      .header-center,
      .header-split,
      .header-stacked {
        & .header-content {
          flex-direction: column;
          gap: var(--space-3);
        }

        & .header-nav {
          display: none;
        }

        & .header-toggle {
          display: block;
        }

        & .header-logo img,
        & .header-logo svg {
          max-height: 2%8px;
        }

        & .header {
          min-height: var(--header-height-compact, 3rem);
        }

        & .header-bottom-bar .header-bottom {
          padding: var(--space-2) var(--space-3);
        }
      }
    }
  }

/* Fallback support for browsers without Container Queries */
  @supports not (container-type: inline-size) {
    @media (width <= 1024px) {
      .header-center .header-content,
      .header-split .header-content,
      .header-stacked .header-content {
        flex-direction: column;
        gap: var(--space-4);
      }

      .header-center .header-nav,
      .header-split .header-nav,
      .header-stacked .header-nav {
        margin-left: 0%;
      }

      .header-toggle {
        display: block;
      }

      .header-logo img,
      .header-logo svg {
        max-height: 3%2px;
      }

      .header {
        min-height: var(--header-height-compact, 3rem);
      }

      .header-bottom-bar .header-bottom {
        padding: var(--space-3) var(--space-4);
      }
    }

    @media (max-width: 768px) {
      .header .logo {
        grid-column: 1 / span 6;
      }

      .header .nav {
        display: none;
      }

      .header .actions {
        grid-column: 7 / span 5;
      }

      .header-center .header-content,
      .header-split .header-content,
      .header-stacked .header-content {
        flex-direction: column;
        gap: var(--space-3);
      }

      .header-center .header-nav,
      .header-split .header-nav,
      .header-stacked .header-nav {
        display: none;
      }

      .header-toggle {
        display: block;
      }

      .header-logo img,
      .header-logo svg {
        max-height: 2%8px;
      }

      .header {
        min-height: var(--header-height-compact, 3rem);
      }

      .header-bottom-bar .header-bottom {
        padding: var(--space-2) var(--space-3);
      }
    }
  }

/* Print styles */
  @media print {
    .header,
    .header-standard,
    .header-center,
    .header-split,
    .header-stacked,
    .header-left,
    .header-bottom-bar {
      background: white !important;
      border-bottom: 1px solid var(--color-neutral-900, #111827);
      box-shadow: none !important;
      color: var(--color-neutral-900, #111827) !important;
      position: static !important;

      & a {
        color: var(--color-neutral-900, #111827) !important;
        text-decoration: underline;
      }

      & .header-toggle,
      & .header-mobile {
        display: none !important;
      }

      & .header-nav {
        display: flex !important;
      }
    }
  }

/* High contrast mode */
  @media (prefers-contrast: more) {
    .header,
    .header-standard,
    .header-center,
    .header-split,
    .header-stacked,
    .header-left,
    .header-bottom-bar {
      border-bottom-width: 2px;

      & a {
        text-decoration: underline;
      }
    }
  }

/* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .header,
    .header-standard,
    .header-center,
    .header-split,
    .header-stacked,
    .header-left,
    .header-bottom-bar {
      & a,
      & .header-toggle,
      & .dropdown {
        transition: none;
      }
    }
  }




/* Importierte Datei: ui/regions/footer.css */
/*
  * Footer Module
  *
  * Layout rules for the footer area. Supports Subgrid, Container Queries and responsive behavior.
  * Combines traditional Grid layouts with modern CSS features and Design Tokens.
  */

/**
  * Footer Component
  *
  * Footer components for websites and applications.
  * The footer contains additional navigation elements, contact information and legal notices.
  *
  * @layer components.footer
  *
  * Footer Types:
  * - .footer: Standard Subgrid-Layout (original)
  * - .footer-simple: Basic single-row footer
  * - .footer-columns: Multi-column layout
  * - .footer-stacked: Vertical stacking
  * - .footer-split: Left/right split layout
  * - .footer-minimal: Minimal single-line footer
  *
  * Basic Usage:
  * <footer class="footer">
  *   <div class="logo">
  *     <img src="logo.png" alt="Logo">
  *   </div>
  *   <div class="content">
  *     <div class="section">
  *       <h4 class="heading">About Us</h4>
  *       <p>Brief company description</p>
  *     </div>
  *     <div class="section">
  *       <h4 class="heading">Links</h4>
  *       <ul class="links">
  *         <li><a href="#" class="link">Home</a></li>
  *         <li><a href="#" class="link">Products</a></li>
  *         <li><a href="#" class="link">About</a></li>
  *         <li><a href="#" class="link">Contact</a></li>
  *       </ul>
  *     </div>
  *     <div class="section">
  *       <h4 class="heading">Contact</h4>
  *       <address class="address">
  *         123 Example Street<br>
  *         12345 Example City<br>
  *         info@example.com
  *       </address>
  *     </div>
  *   </div>
  *   <div class="bottom">
  *     <p class="copyright">&copy; 2023 Company. All rights reserved.</p>
  *     <div class="social">
  *       <a href="#" class="social-link"><!-- Social Icon 1 --></a>
  *       <a href="#" class="social-link"><!-- Social Icon 2 --></a>
  *     </div>
  *   </div>
  * </footer>
  *
  * Variants:
  * <footer class="footer light">...</footer>
  * <footer class="footer dark">...</footer>
  * <footer class="footer primary">...</footer>
  *
  * Minimal Footer:
  * <footer class="footer minimal">
  *   <p class="copyright">&copy; 2023 Company</p>
  *   <ul class="legal">
  *     <li><a href="#">Imprint</a></li>
  *     <li><a href="#">Privacy</a></li>
  *     <li><a href="#">Terms</a></li>
  *   </ul>
  * </footer>
  */

  @layer tokens {
    :root {
/* Footer spacing */
      --footer-padding: var(--space-8) var(--space-4);
      --footer-padding-compact: var(--space-6) var(--space-3);
      --footer-padding-spacious: var(--space-12) var(--space-6);
      --footer-gap: var(--space-6);
      --footer-gap-compact: var(--space-4);
      --footer-gap-spacious: var(--space-8);
      --footer-section-gap: var(--space-4);

/* Footer colors */
      --footer-bg: var(--color-neutral-50);
      --footer-text: var(--color-neutral-700, #374151);
      --footer-heading: var(--color-neutral-900, #111827);
      --footer-link: var(--color-primary-600, #2563eb);
      --footer-link-hover: var(--color-primary-700, #1d4ed8);
      --footer-border: var(--color-neutral-200, #e5e7eb);

/* Footer typography */
      --footer-font-size: var(--text-sm, 0.875rem);
      --footer-line-height: 1%.6;
      --footer-heading-size: var(--text-base);
      --footer-heading-weight: var(--font-semibold, 600);
      --footer-link-weight: var(--font-medium, 500);

/* Footer layout */
      --footer-max-width: var(--container-7xl);
      --footer-columns: 4;
      --footer-column-gap: var(--space-8);
      --footer-min-height: auto;

/* Footer themes */
      &[data-theme="dark"],
      &.theme-dark {
        --footer-bg: var(--color-neutral-900, #111827);
        --footer-text: var(--color-neutral-300, #d1d5db);
        --footer-heading: var(--color-neutral-100, #f3f4f6);
        --footer-link: var(--color-primary-400);
        --footer-link-hover: var(--color-primary-300);
        --footer-border: var(--color-neutral-700, #374151);
      }

      &[data-theme="primary"],
      &.theme-primary {
        --footer-bg: var(--color-primary-900);
        --footer-text: var(--color-primary-100, #dbeafe);
        --footer-heading: var(--color-white, #fff);
        --footer-link: var(--color-primary-200);
        --footer-link-hover: var(--color-white, #fff);
        --footer-border: var(--color-primary-700, #1d4ed8);
      }

      &[data-theme="minimal"],
      &.theme-minimal {
        --footer-bg: transparent;
        --footer-text: var(--color-neutral-600);
        --footer-heading: var(--color-neutral-800, #1f2937);
        --footer-link: var(--color-neutral-700, #374151);
        --footer-link-hover: var(--color-neutral-900, #111827);
        --footer-border: var(--color-neutral-300, #d1d5db);
        --footer-padding: var(--space-4) 0;
      }
    }
  }

  @layer components {
/* Base footer styles for all footer types */
    .footer,
    .footer-simple,
    .footer-columns,
    .footer-stacked,
    .footer-split,
    .footer-minimal {
      background-color: var(--footer-bg);
      color: var(--footer-text);
      container-type: inline-size;
      font-size: var(--footer-font-size);
      line-height: var(--footer-line-height, 1.5);
      padding: var(--footer-padding);
      width: 100%;

/* Typography */
      & h1, & h2, & h3, & h4, & h5, & h6,
      & .heading {
        color: var(--footer-heading);
        font-size: var(--footer-heading-size);
        font-weight: var(--footer-heading-weight);
        margin: 0 0 var(--footer-section-gap) 0;
      }

      & p {
        margin: 0 0 var(--space-3) 0;

        &:last-child {
          margin-bottom: 0%;
        }
      }

/* Links */
      & a,
      & .link {
        color: var(--footer-link);
        font-weight: var(--footer-link-weight);
        text-decoration: none;
        transition: color 0.2s ease;

        &:hover,
        &:focus {
          color: var(--footer-link-hover);
          text-decoration: underline;
        }

        &:focus {
          outline: 2px solid var(--footer-link);
          outline-offset: 2px;
        }
      }

/* Lists */
      & ul, & ol,
      & .links {
        list-style: none;
        margin: 0;
        padding: 0;

        & li {
          margin-bottom: var(--space-2);

          &:last-child {
            margin-bottom: 0%;
          }
        }
      }

/* Address */
      & .address {
        color: var(--footer-text);
        font-style: normal;
        line-height: 1.5;
      }

/* Utility modifiers */
      &.compact {
        padding: var(--footer-padding-compact);
      }

      &.spacious {
        padding: var(--footer-padding-spacious);
      }

/* Text alignment utilities */
      &.center {
        text-align: center;
      }

      &.left {
        text-align: left;
      }

      &.right {
        text-align: right;
      }
    }

/* Original Subgrid Footer Layout */
    .footer {
      border-top: 1px solid var(--footer-border);
      display: grid;
      gap: var(--space-4);
      grid-column: span 12;
      grid-template-columns: subgrid;
      grid-template-rows: auto;

/* Logo area */
      & .logo {
        grid-column: span 3;

        & img {
          height: auto;
          max-width: 15%0px;
        }
      }

/* Content areas */
      & .content {
        display: grid;
        gap: var(--space-6);
        grid-column: span 9;
        grid-template-columns: repeat(3, 1fr);
      }

/* Sections */
      & .section {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
      }

/* Bottom area */
      & .bottom {
        align-items: center;
        border-top: 1px solid var(--footer-border);
        display: flex;
        grid-column: span 12;
        justify-content: space-between;
        margin-top: var(--space-4);
        padding-top: var(--space-4);
      }

/* Copyright */
      & .copyright {
        color: var(--footer-text);
        font-size: var(--text-sm, 0.875rem);
        margin: 0;
      }

/* Social Media */
      & .social {
        display: flex;
        gap: var(--space-3);

        & .social-link {
          align-items: center;
          background-color: var(--color-neutral-100, #f3f4f6);
          border-radius: 50px;
          color: var(--color-neutral-600);
          display: flex;
          height: 2rem;
          justify-content: center;
          transition: background-color 150ms ease, color 150ms ease;
          width: 2rem;

          &:hover {
            background-color: var(--color-primary, #3b82f6);
            color: white;
          }
        }
      }

/* Legal links */
      & .legal {
        display: flex;
        gap: var(--space-4);

        & a {
          color: var(--footer-text);
          font-size: var(--text-sm, 0.875rem);

          &:hover {
            color: var(--footer-link-hover);
          }
        }
      }

/* Theme variants for original footer */
      &.light {
        background-color: var(--color-white, #fff);
      }

      &.dark {
        background-color: var(--color-neutral-900, #111827);

        & .heading {
          color: var(--color-white, #fff);
        }

        & .link, & .address {
          color: var(--color-neutral-300, #d1d5db);
        }

        & .link:hover {
          color: var(--color-primary-400);
        }

        & .bottom {
          border-top-color: var(--color-neutral-700, #374151);
        }

        & .copyright, & .legal a {
          color: var(--color-neutral-400, #9ca3af);
        }

        & .social-link {
          background-color: var(--color-neutral-700, #374151);
          color: var(--color-neutral-300, #d1d5db);
        }
      }

      &.primary {
        background-color: var(--color-primary, #3b82f6);
        color: var(--color-white, #fff);

        & .heading {
          color: var(--color-white, #fff);
        }

        & .link, & .address {
          color: var(--color-primary-100, #dbeafe);
        }

        & .link:hover {
          color: var(--color-white, #fff);
        }

        & .bottom {
          border-top-color: var(--color-primary-600, #2563eb);
        }

        & .copyright, & .legal a {
          color: var(--color-primary-200);
        }

        & .social-link {
          background-color: var(--color-primary-600, #2563eb);
          color: var(--color-white, #fff);
        }
      }

      &.minimal {
        background-color: transparent;
        border-top: none;
        padding: var(--space-4) 0;

        & .bottom {
          border-top: 1px solid var(--color-neutral-200, #e5e7eb);
          margin-top: 0%;
          padding-top: var(--space-4);
        }
      }

/* Container Queries for original footer */
      @container (width <= 992px) {
        & .logo {
          grid-column: span 12;
          text-align: center;
        }

        & .content {
          grid-column: span 12;
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @container (width <= 768px) {
        & .bottom {
          flex-direction: column;
          gap: var(--space-4);
          text-align: center;
        }

        & .legal {
          flex-direction: column;
          gap: var(--space-2);
        }
      }

      @container (width <= 576px) {
        & .content {
          grid-template-columns: 1fr;
        }
      }
    }

/* Footer content wrapper for new footer types */
    .footer-simple,
    .footer-columns,
    .footer-stacked,
    .footer-split,
    .footer-minimal {
      & .footer-content {
        margin: 0 auto;
        max-width: var(--footer-max-width, 1280px);
        width: 100%;
      }
    }

/* Footer Type: Simple */
    .footer-simple {
      & .footer-content {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--footer-gap);
        justify-content: space-between;

        @container (width <= 768px) {
          flex-direction: column;
          gap: var(--footer-gap-compact);
          text-align: center;
        }
      }

      & nav ul {
        flex-direction: row;
        gap: var(--space-4);

        @container (width <= 768px) {
          flex-direction: column;
          gap: var(--space-2);
        }
      }
    }

/* Footer Type: Columns */
    .footer-columns {
      & .footer-content {
        display: grid;
        gap: var(--footer-column-gap);
        grid-template-columns: repeat(var(--footer-columns), 1fr);

        @container (width <= 1024px) {
          grid-template-columns: repeat(2, 1fr);
        }

        @container (width <= 768px) {
          gap: var(--footer-gap);
          grid-template-columns: 1fr;
        }
      }

      &.cols-2 {
        --footer-columns: 2;

        @container (width <= 768px) {
          & .footer-content {
            grid-template-columns: 1fr;
          }
        }
      }

      &.cols-3 {
        --footer-columns: 3;

        @container (width <= 1024px) {
          & .footer-content {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @container (width <= 768px) {
          & .footer-content {
            grid-template-columns: 1fr;
          }
        }
      }

      &.cols-4 {
        --footer-columns: 4;

        @container (width <= 1024px) {
          & .footer-content {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @container (width <= 768px) {
          & .footer-content {
            grid-template-columns: 1fr;
          }
        }
      }

      & section {
        & h4 {
          border-bottom: 2px solid var(--footer-border);
          margin-bottom: var(--space-3);
          padding-bottom: var(--space-2);
        }
      }
    }

/* Footer Type: Stacked */
    .footer-stacked {
      & .footer-content {
        display: flex;
        flex-direction: column;
        gap: var(--footer-gap);
        text-align: center;

        & > * {
          border-bottom: 1px solid var(--footer-border);
          padding-bottom: var(--footer-gap);

          &:last-child {
            border-bottom: none;
            padding-bottom: 0%;
          }
        }
      }

      & nav ul {
        flex-flow: row wrap;
        gap: var(--space-4);
        justify-content: center;

        @container (width <= 768px) {
          flex-direction: column;
          gap: var(--space-2);
        }
      }
    }

/* Footer Type: Split */
    .footer-split {
      & .footer-content {
        align-items: center;
        display: flex;
        justify-content: space-between;

        @container (width <= 768px) {
          flex-direction: column;
          gap: var(--footer-gap);
          text-align: center;
        }
      }

      & .footer-left {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);

        @container (width <= 768px) {
          align-items: center;
        }
      }

      & .footer-right {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);

        @container (width <= 768px) {
          align-items: center;
        }
      }

      & nav ul {
        flex-direction: row;
        gap: var(--space-4);

        @container (width <= 768px) {
          flex-direction: column;
          gap: var(--space-2);
        }
      }
    }

/* Footer Type: Minimal */
    .footer-minimal {
      background-color: transparent;
      border-top: 1px solid var(--footer-border);
      padding: var(--space-4) 0;

      & .footer-content {
        align-items: center;
        display: flex;
        justify-content: space-between;

        @container (width <= 768px) {
          flex-direction: column;
          gap: var(--space-3);
          text-align: center;
        }
      }

      & nav ul {
        flex-direction: row;
        gap: var(--space-4);

        @container (width <= 768px) {
          flex-direction: column;
          gap: var(--space-2);
        }
      }
    }

/* Theme variants for all footer types */
    .footer-simple,
    .footer-columns,
    .footer-stacked,
    .footer-split,
    .footer-minimal {
      &.theme-dark {
        background-color: var(--color-neutral-900, #111827);
        color: var(--color-neutral-300, #d1d5db);

        & h1, & h2, & h3, & h4, & h5, & h6 {
          color: var(--color-neutral-100, #f3f4f6);
        }

        & a {
          color: var(--color-primary-400);

          &:hover,
          &:focus {
            color: var(--color-primary-300);
          }
        }

        & .footer-content section h4 {
          border-bottom-color: var(--color-neutral-700, #374151);
        }

        &.footer-minimal {
          border-top-color: var(--color-neutral-700, #374151);
        }

        & .footer-stacked .footer-content > * {
          border-bottom-color: var(--color-neutral-700, #374151);
        }
      }

      &.theme-primary {
        background-color: var(--color-primary-900);
        color: var(--color-primary-100, #dbeafe);

        & h1, & h2, & h3, & h4, & h5, & h6 {
          color: var(--color-white, #fff);
        }

        & a {
          color: var(--color-primary-200);

          &:hover,
          &:focus {
            color: var(--color-white, #fff);
          }
        }

        & .footer-content section h4 {
          border-bottom-color: var(--color-primary-700, #1d4ed8);
        }

        &.footer-minimal {
          border-top-color: var(--color-primary-700, #1d4ed8);
        }

        & .footer-stacked .footer-content > * {
          border-bottom-color: var(--color-primary-700, #1d4ed8);
        }
      }

      &.theme-minimal {
        background-color: transparent;
        color: var(--color-neutral-600);

        & h1, & h2, & h3, & h4, & h5, & h6 {
          color: var(--color-neutral-800, #1f2937);
        }

        & a {
          color: var(--color-neutral-700, #374151);

          &:hover,
          &:focus {
            color: var(--color-neutral-900, #111827);
          }
        }

        & .footer-content section h4 {
          border-bottom-color: var(--color-neutral-300, #d1d5db);
        }

        &.footer-minimal {
          border-top-color: var(--color-neutral-300, #d1d5db);
        }

        & .footer-stacked .footer-content > * {
          border-bottom-color: var(--color-neutral-300, #d1d5db);
        }
      }
    }
  }

/* Fallback support for browsers without Container Queries */
  @supports not (container-type: inline-size) {
    @media (max-width: 1200px) {
      .footer-columns.cols-4 .footer-content {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (width <= 1024px) {
      .footer-columns .footer-content {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer-columns.cols-3 .footer-content {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .footer-simple .footer-content {
        flex-direction: column;
        gap: var(--footer-gap-compact);
        text-align: center;
      }

      .footer-simple nav ul,
      .footer-stacked nav ul,
      .footer-split nav ul,
      .footer-minimal nav ul {
        flex-direction: column;
        gap: var(--space-2);
      }

      .footer-columns .footer-content,
      .footer-columns.cols-2 .footer-content,
      .footer-columns.cols-3 .footer-content,
      .footer-columns.cols-4 .footer-content {
        grid-template-columns: 1fr;
      }

      .footer-split .footer-content {
        flex-direction: column;
        gap: var(--footer-gap);
        text-align: center;
      }

      .footer-split .footer-left,
      .footer-split .footer-right {
        align-items: center;
      }

      .footer-minimal .footer-content {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
      }
    }
  }

/* Print styles */
  @media print {
    .footer,
    .footer-simple,
    .footer-columns,
    .footer-stacked,
    .footer-split,
    .footer-minimal {
      background: white !important;
      border-top: 1px solid var(--color-neutral-900, #111827);
      color: var(--color-neutral-900, #111827) !important;

      & a {
        color: var(--color-neutral-900, #111827) !important;
        text-decoration: underline;
      }

      & .footer-content {
        gap: var(--space-4);

        & > * {
          break-inside: avoid;
        }
      }
    }
  }

/* High contrast mode */
  @media (prefers-contrast: more) {
    .footer,
    .footer-simple,
    .footer-columns,
    .footer-stacked,
    .footer-split,
    .footer-minimal {
      border-top: 2px solid;

      & a {
        text-decoration: underline;
      }

      & .footer-content section h4 {
        border-bottom-width: 3px;
      }
    }
  }

/* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .footer,
    .footer-simple,
    .footer-columns,
    .footer-stacked,
    .footer-split,
    .footer-minimal {
      & a {
        transition: none;
      }
    }
  }



/* Importierte Datei: ui/regions/sidebar.css */
/*
  * Sidebar Module
  *
  * Layout rules for sidebar navigation or contextual content. Uses grid column logic and Container Queries.
  */

/**
  * Sidebar Component
  *
  * Sidebar navigation and content for layouts with side columns.
  * Sidebars serve as additional navigation areas or for displaying contextual information.
  *
  * @layer components.sidebar
  *
  * Basic Usage:
  * <aside class="sidebar">
  *   <nav class="nav">
  *     <ul class="links">
  *       <li><a href="#" class="link">Dashboard</a></li>
  *       <li><a href="#" class="link">Settings</a></li>
  *       <li><a href="#" class="link">Profile</a></li>
  *     </ul>
  *   </nav>
  * </aside>
  *
  * Variants:
  * <aside class="sidebar left">...</aside>
  * <aside class="sidebar right">...</aside>
  * <aside class="sidebar collapsed">...</aside>
  */

  @layer components {
    .sidebar {
      background-color: var(--color-neutral-100, #f3f4f6);
      grid-column: span 3;
      padding-block: var(--space-4);
      padding-inline: var(--space-3);

/* Header-Bereich */
      .header {
        border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-2);

        .title {
          color: var(--color-neutral-900, #111827);
          font-size: var(--text-lg);
          font-weight: var(--font-medium, 500);
          margin: 0;
        }
      }

/* Navigation */
      .nav {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);

        .links {
          display: flex;
          flex-direction: column;
          gap: var(--space-1);
          list-style: none;
          margin: 0;
          padding: 0;
        }

        .link {
          color: var(--color-neutral-700, #374151);
          display: block;
          padding: var(--space-2);
          text-decoration: none;
          transition: color 150ms ease;

          &:hover {
            color: var(--color-primary, #3b82f6);
          }

          &.active {
            color: var(--color-primary, #3b82f6);
            font-weight: var(--font-semibold, 600);
          }
        }
      }

/* Menu list */
      .menu {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        list-style: none;
        margin: 0;
        padding: 0;
      }

/* Menu items */
      .item {
        width: 100%;

        &.active {
          > .link {
            background-color: color-mix(in srgb, var(--color-primary-500) 10, transparent);
            color: var(--color-primary, #3b82f6);
            font-weight: var(--font-medium, 500);
          }
        }
      }

/* Menu links */
      .link {
        border-radius: var(--radius-md, 0.375rem);
        color: var(--color-neutral-700, #374151);
        display: block;
        padding: var(--space-2) var(--space-3);
        text-decoration: none;
        transition: background-color 150ms ease, color 150ms ease;

        &:hover {
          background-color: var(--color-neutral-200, #e5e7eb);
          color: var(--color-neutral-900, #111827);
        }
      }

/* Submenu */
      .submenu {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        list-style: none;
        margin: var(--space-1) 0 0 0;
        padding-left: var(--space-4);

        .link {
          font-size: var(--text-sm, 0.875rem);
          padding: var(--space-1) var(--space-3);
        }
      }

/* Toggle button for collapse */
      .toggle {
        background: none;
        border: none;
        cursor: pointer;
        display: none;

        @media (max-width: 768px) {
          display: block;
        }
      }

/* Content (for collapse) */
      .content {
        width: 100%;
      }

/* Variants */
      &.left {
        grid-column: 1 / span 3;
      }

      &.right {
        order: 2;
      }

      &.light {
        background-color: var(--color-neutral-50);
      }

      &.dark {
        background-color: var(--color-neutral-800, #1f2937);
        color: var(--color-neutral-100, #f3f4f6);

        .title {
          color: var(--color-white, #fff);
        }

        .link {
          color: var(--color-neutral-300, #d1d5db);

          &:hover {
            background-color: var(--color-neutral-700, #374151);
            color: var(--color-white, #fff);
          }
        }

        .item.active > .link {
          background-color: color-mix(in srgb, var(--color-primary-500) 30, transparent);
        }
      }

/* Collapsible-Verhalten */
      &.collapsible {
        @media (max-width: 768px) {
          .toggle {
            display: block;
          }

          .content {
            display: none;

            &.open {
              display: block;
            }
          }
        }
      }

/* Responsive adjustments */
      @container layout (max-width: 768px) {
        grid-column: span 12;
        order: 2;
      }
    }
  }



/* Importierte Datei: ui/content.css */
/* Content Module */

  @layer elements {
    a {
      color: var(--color-primary, #3b82f6);
    }

    a:hover {
      color: var(--color-primary-hover, #2563eb);
      text-decoration: underline;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 1.5rem 0 1rem;
    }

    p {
      margin: 1rem 0;
    }
  }

  @layer components {
    .content {
      color: var(--color-gray-900, #111827);
      font-size: var(--font-size-base, 1rem);
      line-height: 1.6;
      max-width: 65ch;
    }

    .content h1 {
      font-size: var(--font-size-4xl, 2.25rem);
    }

    .content h2 {
      font-size: var(--font-size-3xl, 1.875rem);
    }

    .content p {
      line-height: 1.6;
      margin-bottom: var(--space-4);
      margin-top: 0;
    }

    .content a {
      color: var(--color-primary, #3b82f6);
      text-decoration: underline;
    }

    .content a:hover {
      color: var(--color-primary-dark, #1e40af);
    }
  }



/* UI Patterns */
/* Importierte Datei: ui/patterns/blog.css */
/*
  * Blog-Komponente
  *
  * Struktur und Layout für Blogbeiträge mit Fokus auf Lesbarkeit.
  */

/**
  * Blog-Komponente
  *
  * Blogartikel-Layouts und -Komponenten für Inhalts- und Publikationsdarstellung.
  * Das Blog-Modul bietet spezialisierte Komponenten für Blogseiten, Artikel und Nachrichtenauflistungen.
  *
  * @layer components
  *
  * Grundlegende Verwendung:
  * <article class="blog-post">
  *   <header class="header">
  *     <h2 class="title">Artikel-Titel</h2>
  *     <div class="meta">
  *       <time datetime="2023-10-15">15. Oktober 2023</time>
  *       <span class="author">Von Max Mustermann</span>
  *     </div>
  *   </header>
  *   <div class="content">
  *     <p>Artikel-Inhalt...</p>
  *   </div>
  *   <footer class="footer">
  *     <div class="tags">
  *       <span class="tag">Design</span>
  *       <span class="tag">CSS</span>
  *     </div>
  *   </footer>
  * </article>
  *
  * Blog-Liste:
  * <div class="blog-list">
  *   <article class="blog-card">
  *     <img class="image" src="thumbnail.jpg" alt="Artikel-Bild">
  *     <div class="content">
  *       <h3 class="title">Artikel-Titel</h3>
  *       <p class="excerpt">Kurze Beschreibung des Artikels...</p>
  *       <a class="link" href="#">Weiterlesen</a>
  *     </div>
  *   </article>
  * </div>
  *
  * Hervorgehobener Artikel:
  * <article class="blog-post featured">...</article>
  *
  * Blog-Navigation:
  * <nav class="blog-nav">
  *   <a class="prev" href="#">&larr; Vorheriger Artikel</a>
  *   <a class="next" href="#">Nächster Artikel &rarr;</a>
  * </nav>
  *
  * Teilen-Optionen:
  * <div class="blog-share">
  *   <span class="label">Teilen:</span>
  *   <div class="buttons">
  *     <a href="#" class="button twitter">Twitter</a>
  *     <a href="#" class="button facebook">Facebook</a>
  *     <a href="#" class="button linkedin">LinkedIn</a>
  *   </div>
  * </div>
  */

  @layer components {
/* Blog-Post */
    .blog-post {
      font-size: var(--text-base);
      line-height: 1%.6;
      margin-inline: auto;
      max-width: 65%ch;
      padding-block: var(--space-6);
      padding-inline: var(--space-4);

/* Standard-Elemente im Blogpost */
      h1, h2, h3 {
        font-family: var(--font-sans);
        font-weight: var(--font-semibold, 600);
        margin-block: var(--space-4) var(--space-2);
      }

      p {
        margin-block: var(--space-3);
      }

      img {
        border-radius: var(--radius-md, 0.375rem);
        margin-block: var(--space-4);
        max-width: 100%;
      }

      pre, code {
        background: var(--color-neutral-100, #f3f4f6);
        border-radius: var(--radius-sm, 0.125rem);
        font-family: var(--font-mono);
        padding: var(--space-1) var(--space-2);
      }

/* Strukturelemente */
      .header {
        margin-bottom: var(--space-6);

        .title {
          font-size: var(--text-2xl);
          margin-bottom: var(--space-2);
          margin-top: 0%;
        }

        .meta {
          color: var(--color-neutral-600);
          display: flex;
          flex-wrap: wrap;
          font-size: var(--text-sm, 0.875rem);
          gap: var(--space-3);
        }

        .author {
          font-weight: var(--font-medium, 500);
        }
      }

      .content {
        margin-bottom: var(--space-6);
      }

      .footer {
        border-top: 1px solid var(--color-neutral-200, #e5e7eb);
        padding-top: var(--space-4);

        .tags {
          display: flex;
          flex-wrap: wrap;
          gap: var(--space-2);
        }
      }

/* Zustände */
      &.featured {
        border-left: 4px solid var(--color-primary, #3b82f6);
        padding-left: var(--space-6);
      }
    }

/* Blog-Karte */
    .blog-card {
      border-radius: var(--radius-md, 0.375rem);
      box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.2s;

      &:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-4px);
      }

      .image {
        height: 20%0px;
        object-fit: cover;
        width: 100%;
      }

      .content {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: var(--space-4);

        .title {
          font-size: var(--text-lg);
          margin-bottom: var(--space-2);
          margin-top: 0%;
        }

        .excerpt {
          color: var(--color-neutral-700, #374151);
          flex: 1;
          margin-bottom: var(--space-4);
        }

        .link {
          align-self: flex-start;
          color: var(--color-primary, #3b82f6);
          font-weight: var(--font-medium, 500);
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

/* Blog-Liste */
    .blog-list {
      display: grid;
      gap: var(--space-6);
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

/* Blog-Navigation */
    .blog-nav {
      border-top: 1px solid var(--color-neutral-200, #e5e7eb);
      display: flex;
      justify-content: space-between;
      margin-top: var(--space-8);
      padding-top: var(--space-4);

      a {
        color: var(--color-primary, #3b82f6);
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      .prev::before {
        content: "←";
        margin-right: var(--space-1);
      }

      .next::after {
        content: "→";
        margin-left: var(--space-1);
      }
    }

/* Blog-Share */
    .blog-share {
      margin-top: var(--space-6);

      .label {
        display: block;
        font-weight: var(--font-medium, 500);
        margin-bottom: var(--space-2);
      }

      .buttons {
        display: flex;
        gap: var(--space-2);
      }

      .button {
        align-items: center;
        border-radius: var(--radius-md, 0.375rem);
        color: white;
        display: flex;
        font-size: var(--text-sm, 0.875rem);
        justify-content: center;
        padding: var(--space-2) var(--space-3);
        text-decoration: none;

        &.twitter {
          background-color: var(--color-twitter, #1DA1F2);
        }

        &.facebook {
          background-color: var(--color-facebook, #4267B2);
        }

        &.linkedin {
          background-color: var(--color-linkedin, #0077B5);
        }

        &:hover {
          opacity: 9000%;
        }
      }
    }
  }

/* Importierte Datei: ui/patterns/tags.css */
/**
  * Tags-Komponente
  *
  * Tag-Elemente für Kategorisierung, Filterung und Kennzeichnung von Inhalten.
  * Tags bieten eine kompakte Darstellung von Kategorien, Eigenschaften oder Status.
  *
  * @layer components.tags
  *
  * Grundlegende Verwendung:
  * <span class="tag">Standard-Tag</span>
  *
  * Farbvarianten:
  * <span class="tag primary">Primär</span>
  * <span class="tag secondary">Sekundär</span>
  * <span class="tag success">Erfolg</span>
  * <span class="tag warning">Warnung</span>
  * <span class="tag danger">Gefahr</span>
  * <span class="tag info">Info</span>
  *
  * Größenvarianten:
  * <span class="tag sm">Klein</span>
  * <span class="tag md">Mittel (Standard)</span>
  * <span class="tag lg">Groß</span>
  *
  * Stiloptionen:
  * <span class="tag outlined">Umriss</span>
  * <span class="tag rounded">Abgerundet</span>
  * <span class="tag pill">Pill-Form</span>
  *
  * Mit Icon:
  * <span class="tag with-icon">
  *   <span class="icon"><!-- Icon hier --></span>
  *   Tag mit Icon
  * </span>
  *
  * Entfernbare Tags:
  * <span class="tag removable">
  *   Entfernbar
  *   <button class="remove">&times;</button>
  * </span>
  *
  * Tag-Gruppe:
  * <div class="tag-group">
  *   <span class="tag">Tag 1</span>
  *   <span class="tag">Tag 2</span>
  *   <span class="tag">Tag 3</span>
  * </div>
  */

  @layer components {
    .tag {
      align-items: center;
      background-color: var(--color-neutral-100, #f3f4f6);
      border-radius: 9px;
      color: var(--color-neutral-900, #111827);
      cursor: default;
      display: inline-flex;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1%;
      padding: 0.375rem 0.75rem;
      transition: background-color 150ms ease-in-out;
      user-select: none;
      white-space: nowrap;

      &:hover {
        background-color: var(--color-neutral-200, #e5e7eb);
      }

/* Varianten */
      &.clickable {
        cursor: pointer;
      }

/* Farbvarianten */
      &.primary {
        background-color: var(--color-primary-100, #dbeafe);
        color: var(--color-primary-800, #1e40af);
      }

      &.secondary {
        background-color: var(--color-secondary-100, #f1f5f9);
        color: var(--color-secondary-800, #1e293b);
      }

      &.success {
        background-color: var(--color-success-100, #d1fae5);
        color: var(--color-success-800, #065f46);
      }

      &.warning {
        background-color: var(--color-warning-100, #fef3c7);
        color: var(--color-warning-800, #92400e);
      }

      &.danger {
        background-color: var(--color-error-100, #fee2e2);
        color: var(--color-error-800, #991b1b);
      }

      &.info {
        background-color: var(--color-info-100, #dbeafe);
        color: var(--color-info-800, #1e40af);
      }

/* Form-Varianten */
      &.rounded {
        border-radius: 0.5rem;
      }

      &.pill {
        border-radius: 9px;
      }

      &.outlined {
        background-color: transparent;
        border: 1px solid currentcolor;

        &.primary {
          color: var(--color-primary-600, #2563eb);
        }
      }

/* Größenvarianten */
      &.sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
      }

      &.lg {
        font-size: 1rem;
        padding: 0.5rem 1rem;
      }

/* Elemente */
      .icon {
        align-items: center;
        display: inline-flex;
        height: 1em;
        justify-content: center;
        margin-right: 0%.25rem;
        width: 1em;
      }

      .remove {
        align-items: center;
        background: transparent;
        border: none;
        border-radius: 50px;
        color: currentcolor;
        cursor: pointer;
        display: inline-flex;
        height: 1%.25em;
        justify-content: center;
        line-height: 1%;
        margin-left: 0%.25rem;
        margin-right: -0.25rem;
        opacity: 0.7;
        padding: 0;
        transition: opacity 150ms ease;
        width: 1%.25em;

        &:hover {
          background-color: rgb(0 0 0 / 1000%);
          opacity: 1;
        }
      }
    }

/* Tag-Gruppe */
    .tag-group {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
  }




/* Importierte Datei: ui/patterns/code.css */
/**
  * Code-Komponente
  *
  * Formatierung für Code-Blöcke und Inline-Code-Elemente.
  * Code-Komponenten stellen Quellcode und Code-Schnipsel übersichtlich dar.
  *
  * @layer components.code
  *
  * Grundlegende Verwendung:
  * <pre class="code">
  *   <code>function example() {
    *     return "Hello World";
    *   }</code>
    * </pre>
    *
    * Inline-Code:
    * <p>Verwenden Sie <code class="code-inline">console.log()</code> zum Debuggen.</p>
    *
    * Mit Syntax-Hervorhebung (erfordert zusätzliches JS):
    * <pre class="code highlighted">
    *   <code class="language-javascript">
    *     function example() {
      *       return "Hello World";
      *     }
      *   </code>
      * </pre>
      *
      * Mit Zeilennummern:
      * <pre class="code numbered">
      *   <div class="line-numbers">1</div>
      *   <code>function example() {</code>
      *   <div class="line-numbers">2</div>
      *   <code>  return "Hello World";</code>
      *   <div class="line-numbers">3</div>
      *   <code>}</code>
      * </pre>
      *
      * Varianten:
      * <pre class="code dark">Dunkles Theme</pre>
      * <pre class="code light">Helles Theme</pre>
      *
      * Mit Kopierknopf:
      * <div class="code-container">
      *   <pre class="code">...</pre>
      *   <button class="copy-button">Kopieren</button>
      * </div>
      *
      * Terminal-Output:
      * <pre class="code terminal">
      *   <code>$ npm install @casoon/ui-lib</code>
      * </pre>
      */

      @layer components {
/* Inline-Code */
        .code-inline {
          background: var(--color-neutral-100, #f3f4f6);
          border-radius: var(--radius-sm, 0.125rem);
          color: var(--color-primary-700, #1d4ed8);
          font-family: var(--font-mono);
          font-size: var(--text-sm, 0.875rem);
          padding: var(--space-1) var(--space-2);
        }

/* Code-Block */
        .code {
          background: var(--color-neutral-100, #f3f4f6);
          border: 1px solid var(--color-neutral-200, #e5e7eb);
          border-radius: var(--radius-md, 0.375rem);
          color: var(--color-neutral-800, #1f2937);
          display: block;
          font-family: var(--font-mono);
          font-size: var(--text-sm, 0.875rem);
          line-height: 1%.4;
          margin: var(--space-4) 0;
          overflow-x: auto;
          padding: var(--space-4);

          pre {
            margin: 0;
          }

          code {
            display: block;
            font-family: inherit;
          }

/* Zeilennummern */
          &.numbered {
            display: grid;
            gap: var(--space-4);
            grid-template-columns: auto 1fr;

            .line-numbers {
              border-right: 1px solid var(--color-neutral-300, #d1d5db);
              color: var(--color-neutral-500, #6b7280);
              padding-right: var(--space-2);
              text-align: right;
              user-select: none;
            }
          }

/* Varianten */
          &.dark {
            background-color: var(--color-neutral-900, #111827);
            border-color: var(--color-neutral-800, #1f2937);
            color: var(--color-neutral-100, #f3f4f6);
          }

          &.light {
            background-color: var(--color-white, #fff);
            border-color: var(--color-neutral-200, #e5e7eb);
            color: var(--color-neutral-900, #111827);
          }

          &.terminal {
            background-color: var(--color-neutral-900, #111827);
            border-color: var(--color-neutral-800, #1f2937);
            color: var(--color-neutral-100, #f3f4f6);

            &::before {
              color: var(--color-neutral-500, #6b7280);
              content: '>';
              margin-right: var(--space-2);
            }
          }

          &.highlighted {
/* Beispielfarben für Syntax-Hervorhebung - diese würden normalerweise
            durch eine JavaScript-Bibliothek wie Prism.js oder Highlight.js gesetzt */
            .keyword { color: var(--color-primary-600, #2563eb); }

            .string { color: var(--color-success-600); }

            .comment { color: var(--color-neutral-500, #6b7280); font-style: italic; }

            .function { color: var(--color-secondary-600); }

            .number { color: var(--color-warning-600); }
          }
        }

/* Container mit Kopierknopf */
        .code-container {
          position: relative;

          .copy-button {
            background-color: var(--color-neutral-200, #e5e7eb);
            border: none;
            border-radius: var(--radius-sm, 0.125rem);
            color: var(--color-neutral-700, #374151);
            cursor: pointer;
            font-size: var(--text-xs, 0.75rem);
            opacity: 0%;
            padding: var(--space-1) var(--space-2);
            position: absolute;
            right: var(--space-2);
            top: var(--space-2);
            transition: opacity 150ms ease;

            &:hover {
              background-color: var(--color-neutral-300, #d1d5db);
              color: var(--color-neutral-900, #111827);
            }
          }

          &:hover .copy-button {
            opacity: 1;
          }
        }
      }




/* Importierte Datei: ui/patterns/widget.css */
/*
      * Widget-Komponente
      *
      * Flexible Boxen für Dashboards und Seitenlayouts.
      */

/**
      * Widget-Komponente
      *
      * Wiederverwendbare UI-Widgets für modulare Benutzeroberflächen.
      * Widgets sind eigenständige Komponenten, die bestimmte Funktionen oder Inhalte kapseln.
      *
      * @layer components.widget
      *
      * Grundlegende Verwendung:
      * <div class="widget">
      *   <div class="header">Widget-Titel</div>
      *   <div class="body">Widget-Inhalt</div>
      *   <div class="footer">Widget-Fußzeile</div>
      * </div>
      *
      * Varianten:
      * <div class="widget primary">Primär-Widget</div>
      * <div class="widget secondary">Sekundär-Widget</div>
      * <div class="widget light">Helles Widget</div>
      * <div class="widget dark">Dunkles Widget</div>
      *
      * Größen:
      * <div class="widget sm">Klein</div>
      * <div class="widget md">Mittel (Standard)</div>
      * <div class="widget lg">Groß</div>
      * <div class="widget full">Volle Breite</div>
      *
      * Zustände:
      * <div class="widget loading">Ladend</div>
      * <div class="widget collapsed">Eingeklappt</div>
      * <div class="widget expanded">Ausgeklappt</div>
      *
      * Widget mit Aktionsbuttons:
      * <div class="widget">
      *   <div class="header">
      *     <h3 class="title">Statistik</h3>
      *     <div class="actions">
      *       <button class="action">Aktualisieren</button>
      *       <button class="action">Einklappen</button>
      *     </div>
      *   </div>
      *   <div class="body">...</div>
      * </div>
      */

/* Animation - außerhalb von @layer definieren */

/* Komponenten-Styles */
      @layer components {
        .widget {
          background-color: var(--color-white, #fff);
          border: 1px solid var(--color-neutral-200, #e5e7eb);
          border-radius: var(--radius-md, 0.375rem);
          box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
          overflow: hidden;

/* Strukturelemente */
          .header {
            align-items: center;
            background-color: var(--color-neutral-50);
            border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
            display: flex;
            justify-content: space-between;
            padding: var(--space-3) var(--space-4);

            .title {
              font-size: var(--text-base);
              font-weight: var(--font-medium, 500);
              margin: 0;
            }

            .actions {
              display: flex;
              gap: var(--space-2);

              .action {
                background: none;
                border: none;
                border-radius: var(--radius-sm, 0.125rem);
                color: var(--color-neutral-600);
                cursor: pointer;
                font-size: var(--text-sm, 0.875rem);
                padding: var(--space-1) var(--space-2);

                &:hover {
                  background-color: var(--color-neutral-200, #e5e7eb);
                  color: var(--color-neutral-800, #1f2937);
                }
              }
            }
          }

          .body {
            padding: var(--space-4);
          }

          .footer {
            background-color: var(--color-neutral-50);
            border-top: 1px solid var(--color-neutral-200, #e5e7eb);
            color: var(--color-neutral-600);
            font-size: var(--text-sm, 0.875rem);
            padding: var(--space-3) var(--space-4);
          }

/* Farbvarianten */
          &.primary {
            border-color: var(--color-primary, #3b82f6);

            .header {
              background-color: var(--color-primary, #3b82f6);
              color: white;
            }
          }

          &.secondary {
            border-color: var(--color-secondary);

            .header {
              background-color: var(--color-secondary);
              color: white;
            }
          }

          &.light {
            background-color: var(--color-white, #fff);
            border-color: var(--color-neutral-100, #f3f4f6);

            .header {
              background-color: var(--color-white, #fff);
              border-bottom-color: var(--color-neutral-100, #f3f4f6);
            }
          }

          &.dark {
            background-color: var(--color-neutral-800, #1f2937);
            border-color: var(--color-neutral-700, #374151);
            color: white;

            .header {
              background-color: var(--color-neutral-900, #111827);
              border-bottom-color: var(--color-neutral-700, #374151);
            }

            .footer {
              background-color: var(--color-neutral-900, #111827);
              border-top-color: var(--color-neutral-700, #374151);
              color: var(--color-neutral-300, #d1d5db);
            }
          }

/* Größenvarianten */
          &.sm {
            .header {
              padding: var(--space-2) var(--space-3);

              .title {
                font-size: var(--text-sm, 0.875rem);
              }
            }

            .body {
              padding: var(--space-3);
            }

            .footer {
              font-size: var(--text-xs, 0.75rem);
              padding: var(--space-2) var(--space-3);
            }
          }

          &.lg {
            .header {
              padding: var(--space-4) var(--space-5);

              .title {
                font-size: var(--text-lg);
              }
            }

            .body {
              padding: var(--space-5);
            }

            .footer {
              padding: var(--space-4) var(--space-5);
            }
          }

          &.full {
            width: 100%;
          }

/* Zustände */
          &.loading {
            opacity: 0.7;
            position: relative;
          }

          &.collapsed {
            .body, .footer {
              display: none;
            }

            .header {
              border-bottom: none;
            }
          }

          &.highlight {
            background-color: color-mix(in oklab, var(--color-primary, #3b82f6), white 90);
            border-color: var(--color-primary, #3b82f6);
          }
        }
      }

/* Animations-Styles */
      @layer animations {
        .widget {
          &.loading::after {
            animation: loading 1.5s infinite;
            background: linear-gradient(90deg, var(--color-primary, #3b82f6), transparent);
            content: "";
            height: 3px;
            left: 0%;
            position: absolute;
            top: 0%;
            width: 100%;
          }
        }
      }

/* Importierte Datei: ui/patterns/skeleton.css */
/**
      * Skeleton-Komponente
      *
      * Ladezustands-Platzhalter für Inhalte, die noch geladen werden.
      * Skeleton-Loader verbessern die wahrgenommene Performance und verhindern Layout-Shifts.
      *
      * Grundlegende Verwendung:
      * <div class="skeleton"></div>
      *
      * Formen:
      * <div class="skeleton text">Textzeile</div>
      * <div class="skeleton circle">Kreis</div>
      * <div class="skeleton rect">Rechteck</div>
      * <div class="skeleton avatar">Avatar</div>
      * <div class="skeleton button">Button</div>
      *
      * Varianten:
      * <div class="skeleton pulse">Mit Pulsieren</div>
      * <div class="skeleton wave">Mit Wellenbewegung</div>
      *
      * Größen:
      * <div class="skeleton text sm">Klein</div>
      * <div class="skeleton text md">Mittel</div>
      * <div class="skeleton text lg">Groß</div>
      *
      * Komplexe Layoutbeispiele:
      * <div class="skeleton-card">
      *   <div class="skeleton rect image"></div>
      *   <div class="skeleton text title"></div>
      *   <div class="skeleton text"></div>
      *   <div class="skeleton text"></div>
      *   <div class="skeleton text short"></div>
      * </div>
      *
      * Artikel-Ladeansicht:
      * <div class="skeleton-article">
      *   <div class="skeleton text heading"></div>
      *   <div class="skeleton text subheading"></div>
      *   <div class="skeleton text"></div>
      *   <div class="skeleton text"></div>
      *   <div class="skeleton text"></div>
      * </div>
      */

/* Animationen - außerhalb von @layer definieren */
      @keyframes pulse {
        0, 100 {
          opacity: 1;
        }

        50 {
          opacity: 4000%;
        }
      }

      @keyframes wave {
        100 {
          transform: translateX(100%);
        }
      }

/* Komponenten-Styles */
      @layer components {
        .skeleton {
          background-color: var(--color-neutral-200, #e5e7eb);
          border-radius: var(--radius-sm, 0.125rem);

/* Formvarianten */
          &.circle {
            border-radius: 9px;
          }

          &.rect {
            border-radius: var(--radius-md, 0.375rem);
          }

          &.text {
            height: 1rem;
            margin-bottom: 0%.5rem;
            width: 100%;
          }

          &.avatar {
            border-radius: 50px;
            height: 3rem;
            width: 3rem;
          }

          &.button {
            border-radius: var(--radius-md, 0.375rem);
            height: 2.5rem;
            width: 8rem;
          }

/* Animationsvorbereitung für Wave-Effekt */
          &.wave {
            overflow: hidden;
            position: relative;
          }

/* Größenvarianten */
          &.sm {
            height: 0%.75rem;
          }

          &.md {
            height: 1rem;
          }

          &.lg {
            height: 1%.5rem;
          }

/* Spezifische Stile für verschiedene Layouts */
          &.title {
            height: 1%.5rem;
            width: 70%;
          }

          &.heading {
            height: 2rem;
            width: 90%;
          }

          &.subheading {
            height: 1%.5rem;
            width: 70%;
          }

          &.image {
            height: 1%2rem;
            width: 100%;
          }

          &.short {
            width: 60%;
          }
        }

/* Skeleton-Kontainer */
        .skeleton-card {
          background-color: var(--color-white, #fff);
          border-radius: var(--radius-md, 0.375rem);
          box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
          max-width: 2%4rem;
          padding: var(--space-4);
          width: 100%;
        }

        .skeleton-article {
          max-width: 4%0rem;
          width: 100%;
        }
      }

/* Animations-Styles */
      @layer animations {
        .skeleton {
          animation: pulse 1.5s ease-in-out infinite;

/* Animationstypen */
          &.pulse {
            animation: pulse 1.5s ease-in-out infinite;
          }

          &.wave::after {
            animation: wave 2s infinite;
            background-image: linear-gradient(
            90deg,
            rgb(255 255 255 / 0%) 0,
            rgb(255 255 255 / 2000%) 20,
            rgb(255 255 255 / 5000%) 60,
            rgb(255 255 255 / 0%)
            );
            content: '';
            inset: 0;
            position: absolute;
            transform: translateX(-100%);
          }
        }
      }





/* Datei: ui/forms.css */
/*
      * Forms Module - Complete Form System
      *
      * Comprehensive form elements and controls for user input and interaction.
      * This module combines all form-related components and provides both simple
      * utility classes and advanced form system features.
      *
      * CONTENTS:
      *
      * 1. BASIC FORM ELEMENTS (Simple utility classes):
      *    - Buttons (interactive form controls)
      *    - Input fields (text, email, password, etc.)
      *    - Textarea (multi-line text input)
      *    - Select dropdowns (single and multiple selection)
      *    - Checkboxes (multiple selection)
      *    - Radio buttons (single selection from group)
      *    - Switches (toggle controls)
      *    - Sliders (range input controls)
      *
      * 2. ADVANCED FORM SYSTEM (Bootstrap-style components):
      *    - Form containers and layouts (.form, .form-group, .form-row)
      *    - Form controls (.form-control, .form-select, .form-check)
      *    - Labels and feedback (.form-label, .form-text, .feedback)
      *    - Validation states and feedback mechanisms
      *    - Input groups (.input-group, .input-group-text)
      *    - Responsive and adaptive layouts
      *    - RTL support and accessibility features
      *
      * @layer components.forms
      *
      * Accessibility Features:
      * - Semantic HTML elements as foundation
      * - Proper focus management and keyboard navigation
      * - ARIA attributes where needed
      * - High contrast focus indicators
      * - Screen reader friendly labels and descriptions
      */

/**
      * Form Elements Collection
      *
      * This file contains all form-related components:
      * - Buttons (interactive form controls)
      * - Input fields (text, email, password, etc.)
      * - Textarea (multi-line text input)
      * - Select dropdowns (single and multiple selection)
      * - Checkboxes (multiple selection)
      * - Radio buttons (single selection from group)
      * - Switches (toggle controls)
      * - Sliders (range input controls)
      *
      * @layer components.forms
      *
      * Accessibility Features:
      * - Semantic HTML elements as foundation
      * - Proper focus management and keyboard navigation
      * - ARIA attributes where needed
      * - High contrast focus indicators
      * - Screen reader friendly labels and descriptions
      */

/* =================== ANIMATIONS =================== */

/* =================== BUTTONS =================== */

      @layer components {
/* Base Button Style */
        .button {
          align-items: center;
          border: none;
          border-radius: var(--radius-md, 0.5rem);
          cursor: pointer;
          display: inline-flex;
          font-size: var(--font-size-sm, 0.875rem);
          font-weight: var(--font-weight-medium, 500);
          justify-content: center;
          line-height: 1.25;
          padding-block: var(--space-2, 0.5rem);
          padding-inline: var(--space-4, 1rem);
          position: relative;
          text-decoration: none;
          transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, cubic-bezier(0.4, 0, 0.2, 1));
        }

/* Button Variants */
        .button--primary {
          background-color: var(--color-primary, #06c);
          color: white;
        }

        .button--primary:hover {
          background-color: var(--color-primary-hover, #05a);
        }

        .button--secondary {
          background-color: var(--color-secondary);
          color: white;
        }

        .button--secondary:hover {
          background-color: var(--color-secondary-hover);
        }

        .button--tertiary {
          background-color: transparent;
          border: 1px solid var(--color-border, #e5e7eb);
          color: var(--color-text);
        }

        .button--tertiary:hover {
          background-color: var(--color-background-alt, #f9fafb);
        }

        .button--success {
          background-color: var(--color-success, #10b981);
          color: white;
        }

        .button--success:hover {
          background-color: var(--color-success-hover);
        }

        .button--warning {
          background-color: var(--color-warning, #f59e0b);
          color: var(--color-text);
        }

        .button--warning:hover {
          background-color: var(--color-warning-hover);
        }

        .button--danger {
          background-color: var(--color-error, #ef4444);
          color: white;
        }

        .button--danger:hover {
          background-color: var(--color-error-hover);
        }

        .button--info {
          background-color: var(--color-info, #3b82f6);
          color: white;
        }

        .button--info:hover {
          background-color: var(--color-info-hover);
        }

        .button--link {
          background-color: transparent;
          color: var(--color-primary, #3b82f6);
          padding: 0;
          text-decoration: underline;
        }

        .button--link:hover {
          color: var(--color-primary-hover, #2563eb);
          text-decoration: none;
        }

/* Button Sizes */
        .button--xs {
          font-size: var(--font-size-xs);
          padding-block: var(--space-1);
          padding-inline: var(--space-2);
        }

        .button--sm {
          font-size: var(--font-size-sm, 0.875rem);
          padding-block: var(--space-1);
          padding-inline: var(--space-3);
        }

        .button--md {
          font-size: var(--font-size-base, 1rem);
          padding-block: var(--space-2);
          padding-inline: var(--space-4);
        }

        .button--lg {
          font-size: var(--font-size-lg);
          padding-block: var(--space-3);
          padding-inline: var(--space-6);
        }

        .button--xl {
          font-size: var(--font-size-xl);
          padding-block: var(--space-4);
          padding-inline: var(--space-8);
        }

/* Button States */
        button:disabled,
        .button:disabled {
          cursor: not-allowed;
          opacity: var(--opacity-50);
        }

        .button--loading {
          color: transparent;
          pointer-events: none;
        }

        .button--with-icon {
          gap: var(--space-2);
        }

        .button--with-icon .icon {
          flex-shrink: 0;
          height: 1em;
          width: 1em;
        }

        .button--icon-only {
          aspect-ratio: 1;
          padding: var(--space-2);
        }

        .button--icon-only .icon {
          height: 1.25em;
          width: 1.25em;
        }

        .button--loading::after {
          animation: spin 1s linear infinite;
          border: 2px solid transparent;
          border-radius: var(--radius-full, 9999px);
          border-top-color: currentColor;
          content: "";
          height: 1em;
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 1em;
        }
      }

/* =================== INPUT FIELDS =================== */

      @layer components {
        .input {
          background-color: var(--color-white, #fff);
          border: 1px solid var(--color-gray-300, #d1d5db);
          border-radius: var(--radius-md, 0.375rem);
          color: var(--color-gray-900, #111827);
          display: block;
          font-size: var(--font-size-base, 1rem);
          padding: var(--space-2) var(--space-3);
          transition: border-color var(--transition-fast, 150ms ease), background-color var(--transition-fast, 150ms ease);
          width: 100%;

          &:focus {
            border-color: var(--color-primary, #3b82f6);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #3b82f6) 50, transparent);
            outline: none;
          }

          &.invalid {
            background-color: color-mix(in srgb, var(--color-error, #ef4444) 5%, white);
            border-color: var(--color-error, #ef4444);
          }

          &:disabled {
            background-color: var(--color-gray-100, #f3f4f6);
            color: var(--color-gray-500);
            cursor: not-allowed;
          }

          &:read-only {
            background-color: var(--color-gray-50);
          }

/* Input Variants */
          &.primary {
            border-color: var(--color-primary, #3b82f6);
          }

          &.success {
            border-color: var(--color-success, #10b981);
          }

          &.warning {
            border-color: var(--color-warning, #f59e0b);
          }

          &.danger {
            border-color: var(--color-danger);
          }

/* Input Sizes */
          &.sm {
            font-size: var(--font-size-sm, 0.875rem);
            padding: var(--space-1) var(--space-2);
          }

          &.lg {
            font-size: var(--font-size-lg);
            padding: var(--space-3) var(--space-4);
          }
        }

/* Input with Icon */
        .input-wrapper {
          align-items: center;
          display: flex;
          position: relative;

          .input {
            padding-left: var(--space-8);
          }

          .input-icon {
            color: var(--color-gray-400);
            left: var(--space-3);
            pointer-events: none;
            position: absolute;
          }
        }
      }

/* =================== TEXTAREA =================== */

      @layer components {
        .textarea {
          background-color: var(--color-white, #fff);
          border: 1px solid var(--color-gray-300, #d1d5db);
          border-radius: var(--radius-md, 0.375rem);
          color: var(--color-gray-900, #111827);
          font-size: var(--font-size-base, 1rem);
          min-height: 6rem;
          padding: var(--space-3);
          resize: vertical;
          transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
          width: 100%;

          &:focus {
            border-color: var(--color-primary, #3b82f6);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #3b82f6) 50, transparent);
            outline: none;
          }

          &:disabled {
            background-color: var(--color-gray-100, #f3f4f6);
            color: var(--color-gray-500);
            cursor: not-allowed;
            opacity: 0.7;
          }

/* Textarea Sizes */
          &.sm {
            font-size: var(--font-size-sm, 0.875rem);
            min-height: 4rem;
            padding: var(--space-2);
          }

          &.lg {
            font-size: var(--font-size-lg);
            min-height: 8rem;
            padding: var(--space-4);
          }

/* Textarea States */
          &.error {
            background-color: color-mix(in srgb, var(--color-error, #ef4444) 3%, var(--color-white, #fff));
            border-color: var(--color-error, #ef4444);

            &:focus {
              box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error, #ef4444) 30, transparent);
            }
          }

          &.success {
            background-color: color-mix(in srgb, var(--color-success, #10b981) 3%, var(--color-white, #fff));
            border-color: var(--color-success, #10b981);

            &:focus {
              box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success, #10b981) 30, transparent);
            }
          }

          &.readonly {
            background-color: var(--color-gray-50);
            cursor: default;
          }

          &.auto-resize {
            overflow-y: hidden;
          }
        }

/* Textarea with Counter */
        .textarea-container {
          position: relative;
          width: 100%;

          .counter {
            bottom: var(--space-2);
            color: var(--color-gray-500);
            font-size: var(--font-size-xs);
            pointer-events: none;
            position: absolute;
            right: var(--space-3);
          }

          .textarea {
            padding-bottom: calc(var(--space-3) + 1.5rem);
          }
        }
      }

/* =================== SELECT DROPDOWNS =================== */

      @layer components {
        .select {
          appearance: none;
          background-color: var(--color-white, #fff);
          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' stroke='%23666' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
          background-position: right var(--space-3) center;
          background-repeat: no-repeat;
          background-size: 1rem;
          border: 1px solid var(--color-gray-300, #d1d5db);
          border-radius: var(--radius-md, 0.375rem);
          color: var(--color-gray-900, #111827);
          cursor: pointer;
          display: block;
          font-size: var(--font-size-base, 1rem);
          padding: var(--space-2) var(--space-3);
          transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
          width: 100%;

          &:focus {
            border-color: var(--color-primary, #3b82f6);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #3b82f6) 50, transparent);
            outline: none;
          }

          &:disabled {
            background-color: var(--color-gray-100, #f3f4f6);
            color: var(--color-gray-500);
            cursor: not-allowed;
            opacity: 0.7;
          }

/* Select Sizes */
          &.sm {
            background-position: right var(--space-2) center;
            background-size: 0%.875rem;
            font-size: var(--font-size-sm, 0.875rem);
            padding: var(--space-1) var(--space-2);
          }

          &.lg {
            background-position: right var(--space-4) center;
            background-size: 1%.25rem;
            font-size: var(--font-size-lg);
            padding: var(--space-3) var(--space-4);
          }

/* Select States */
          &.error {
            background-color: color-mix(in srgb, var(--color-error, #ef4444) 3%, var(--color-white, #fff));
            border-color: var(--color-error, #ef4444);

            &:focus {
              box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error, #ef4444) 30, transparent);
            }
          }

          &.success {
            background-color: color-mix(in srgb, var(--color-success, #10b981) 3%, var(--color-white, #fff));
            border-color: var(--color-success, #10b981);

            &:focus {
              box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success, #10b981) 30, transparent);
            }
          }

/* Multiple Selection */
          &[multiple] {
            background-image: none;
            padding: var(--space-1);

            option {
              border-radius: var(--radius-sm, 0.125rem);
              padding: var(--space-1) var(--space-2);

              &:checked {
                background-color: color-mix(in srgb, var(--color-primary, #3b82f6) 15%, transparent);
              }
            }
          }

/* Option Groups */
          optgroup {
            color: var(--color-gray-700);
            font-weight: var(--font-weight-medium, 500);
          }
        }
      }

/* =================== CHECKBOXES =================== */

      @layer elements {
        .checkbox {
          align-items: center;
          cursor: pointer;
          display: inline-flex;
          font-size: var(--text-sm, 0.875rem);
          gap: var(--space-2);
          position: relative;
        }

        .checkbox .input {
          appearance: none;
          background-color: white;
          border: 1px solid var(--color-neutral-400, #9ca3af);
          border-radius: var(--radius-sm, 0.125rem);
          cursor: pointer;
          height: 1rem;
          position: relative;
          transition: all 0.2s;
          width: 1rem;
        }

        .checkbox .input:checked {
          background-color: var(--color-primary-500);
          border-color: var(--color-primary-500);
        }

        .checkbox .input:checked::after {
          border: solid white;
          border-width: 0% 2px 2px 0;
          content: "";
          height: 6px;
          left: 4px;
          position: absolute;
          top: 1px;
          transform: rotate(45deg);
          width: 3px;
        }

        .checkbox .label {
          color: var(--color-text-700, #374151);
          font-size: var(--text-sm, 0.875rem);
        }

        .checkbox .input:focus-visible {
          outline: 2px solid var(--color-primary-300);
          outline-offset: 2px;
        }

        .checkbox .input:hover:not(:disabled) {
          border-color: var(--color-primary-500);
        }

        .checkbox .input:disabled {
          background-color: var(--color-neutral-100, #f3f4f6);
          border-color: var(--color-neutral-300, #d1d5db);
          cursor: not-allowed;
          opacity: var(--opacity-50);
        }

        .checkbox .input:disabled ~ .checkbox .label {
          color: var(--color-text-400);
          cursor: not-allowed;
        }

/* Checkbox Sizes */
        .checkbox--sm .input {
          height: 0%.875rem;
          width: 0%.875rem;
        }

        .checkbox--sm .input:checked::after {
          height: 5px;
          left: 3px;
          top: 1px;
          width: 2px;
        }

        .checkbox--sm .label {
          font-size: var(--text-xs, 0.75rem);
        }

        .checkbox--lg .input {
          height: 1%.25rem;
          width: 1%.25rem;
        }

        .checkbox--lg .input:checked::after {
          height: 8px;
          left: 5px;
          top: 2px;
          width: 4px;
        }

        .checkbox--lg .label {
          font-size: var(--text-base);
        }

/* Checkbox Groups */
        .checkbox-group {
          display: flex;
          flex-direction: column;
          gap: var(--space-3);
        }

        .checkbox-group--horizontal {
          flex-flow: row wrap;
          gap: var(--space-4);
        }
      }

/* =================== RADIO BUTTONS =================== */

      @layer components {
        .radio {
          align-items: center;
          cursor: pointer;
          display: inline-flex;
          font-size: var(--font-size-sm, 0.875rem);
          gap: var(--space-2);

          input[type="radio"] {
            appearance: none;
            background-color: var(--color-white, #fff);
            border: 2px solid var(--color-gray-400);
            border-radius: 9px;
            height: 1rem;
            position: relative;
            transition: all var(--transition-fast, 150ms ease);
            width: 1rem;

            &:checked {
              background-color: var(--color-primary, #3b82f6);
              border-color: var(--color-primary, #3b82f6);

              &::after {
                background-color: white;
                border-radius: 9px;
                content: "";
                height: 0%.375rem;
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 0%.375rem;
              }
            }

            &:focus-visible {
              outline: 2px solid var(--color-primary, #3b82f6);
              outline-offset: 2px;
            }

            &:disabled {
              background-color: var(--color-gray-100, #f3f4f6);
              border-color: var(--color-gray-300, #d1d5db);
              cursor: not-allowed;

              & ~ .label {
                color: var(--color-gray-400);
                cursor: not-allowed;
              }
            }
          }

/* Radio Sizes */
          &.sm {
            font-size: var(--font-size-xs);

            input[type="radio"] {
              height: 0%.875rem;
              width: 0%.875rem;
            }
          }

          &.lg {
            font-size: var(--font-size-base, 1rem);

            input[type="radio"] {
              height: 1%.25rem;
              width: 1%.25rem;

              &:checked::after {
                height: 0%.5rem;
                width: 0%.5rem;
              }
            }
          }
        }

        .radio-group {
          display: flex;
          flex-direction: column;
          gap: var(--space-2);

          &.horizontal {
            align-items: center;
            flex-flow: row wrap;
          }
        }
      }

/* =================== SWITCHES =================== */

      @layer elements {
        .switch {
          align-items: center;
          cursor: pointer;
          display: inline-flex;
          gap: var(--space-2);
          position: relative;
        }

        .switch .input {
          height: 0%;
          opacity: 0%;
          position: absolute;
          width: 0%;
        }

        .switch .track {
          background-color: var(--color-neutral-300, #d1d5db);
          border-radius: var(--radius-full, 9999px);
          display: inline-block;
          height: var(--switch-height, 1.25rem);
          position: relative;
          transition: background-color 0.2s;
          width: var(--switch-width, 2.5rem);
        }

        .switch .thumb {
          background-color: white;
          border-radius: var(--radius-full, 9999px);
          box-shadow: 0 1px 2px rgb(0 0 0 / 1000%);
          height: calc(var(--switch-height, 1.25rem) * 0.8);
          left: calc(var(--switch-height, 1.25rem) * 0.1);
          position: absolute;
          top: calc(var(--switch-height, 1.25rem) * 0.1);
          transition: transform 0.2s;
          width: calc(var(--switch-height, 1.25rem) * 0.8);
        }

        .switch .label {
          color: var(--color-text-700, #374151);
          font-size: var(--text-sm, 0.875rem);
        }

        .switch .input:checked + .switch .track {
          background-color: var(--color-primary-500);
        }

        .switch .input:checked + .switch .track .switch .thumb {
          transform: translateX(calc(var(--switch-width, 2.5rem) - var(--switch-height, 1.25rem)));
        }

        .switch .input:focus-visible + .switch .track {
          outline: 2px solid var(--color-primary-500);
          outline-offset: 2px;
        }

        .switch .input:disabled + .switch .track {
          background-color: var(--color-neutral-200, #e5e7eb);
          cursor: not-allowed;
          opacity: 0.7;
        }

        .switch .input:disabled + .switch .track .switch .thumb {
          background-color: var(--color-neutral-400, #9ca3af);
        }

        .switch .input:disabled ~ .switch .label {
          color: var(--color-text-400);
          cursor: not-allowed;
        }

/* Switch Sizes */
        .switch--sm {
          --switch-width: 2rem;
          --switch-height: 1rem;
        }

        .switch--sm .label {
          font-size: var(--text-xs, 0.75rem);
        }

        .switch--md {
          --switch-width: 2.5rem;
          --switch-height: 1%.25rem;
        }

        .switch--lg {
          --switch-width: 3%.5rem;
          --switch-height: 1%.75rem;
        }

        .switch--lg .label {
          font-size: var(--text-base);
        }

/* Switch Color Variants */
        .switch--primary .input:checked + .switch .track {
          background-color: var(--color-primary-500);
        }

        .switch--secondary .input:checked + .switch .track {
          background-color: var(--color-secondary-500);
        }

        .switch--success .input:checked + .switch .track {
          background-color: var(--color-success-500);
        }

        .switch--warning .input:checked + .switch .track {
          background-color: var(--color-warning-500);
        }

        .switch--danger .input:checked + .switch .track {
          background-color: var(--color-error-500);
        }
      }

/* =================== SLIDERS =================== */

      @layer elements {
        .slider {
          appearance: none;
          background-color: var(--color-neutral-200, #e5e7eb);
          border-radius: var(--radius-full, 9999px);
          cursor: pointer;
          height: 0%.25rem;
          margin: var(--space-2) 0;
          width: 100%;
        }

/* Slider Thumb - WebKit */
        .slider::-webkit-slider-thumb {
          appearance: none;
          background-color: var(--color-primary-500);
          border-radius: var(--radius-full, 9999px);
          box-shadow: 0 1px 3px rgb(0 0 0 / 1000%);
          cursor: pointer;
          height: 1rem;
          transition: transform 0.2s, background-color 0.2s;
          width: 1rem;
        }

/* Slider Thumb - Firefox */
        .slider::-moz-range-thumb {
          background-color: var(--color-primary-500);
          border: none;
          border-radius: var(--radius-full, 9999px);
          box-shadow: 0 1px 3px rgb(0 0 0 / 1000%);
          cursor: pointer;
          height: 1rem;
          transition: transform 0.2s, background-color 0.2s;
          width: 1rem;
        }

/* Slider Hover */
        .slider:hover::-webkit-slider-thumb {
          transform: scale(1.1%);
        }

        .slider:hover::-moz-range-thumb {
          transform: scale(1.1%);
        }

/* Slider Focus */
        .slider:focus {
          outline: none;
        }

        .slider:focus::-webkit-slider-thumb {
          box-shadow: 0 0 0 3px var(--color-primary-200);
        }

        .slider:focus::-moz-range-thumb {
          box-shadow: 0 0 0 3px var(--color-primary-200);
        }

/* Slider Sizes */
        .slider--sm {
          height: 0%.125rem;
        }

        .slider--sm::-webkit-slider-thumb {
          height: 0%.75rem;
          width: 0%.75rem;
        }

        .slider--sm::-moz-range-thumb {
          height: 0%.75rem;
          width: 0%.75rem;
        }

        .slider--lg {
          height: 0%.375rem;
        }

        .slider--lg::-webkit-slider-thumb {
          height: 1%.25rem;
          width: 1%.25rem;
        }

        .slider--lg::-moz-range-thumb {
          height: 1%.25rem;
          width: 1%.25rem;
        }

/* Slider Color Variants */
        .slider--primary::-webkit-slider-thumb {
          background-color: var(--color-primary-500);
        }

        .slider--primary::-moz-range-thumb {
          background-color: var(--color-primary-500);
        }

        .slider--secondary::-webkit-slider-thumb {
          background-color: var(--color-secondary-500);
        }

        .slider--secondary::-moz-range-thumb {
          background-color: var(--color-secondary-500);
        }

        .slider--success::-webkit-slider-thumb {
          background-color: var(--color-success-500);
        }

        .slider--success::-moz-range-thumb {
          background-color: var(--color-success-500);
        }

        .slider--danger::-webkit-slider-thumb {
          background-color: var(--color-error-500);
        }

        .slider--danger::-moz-range-thumb {
          background-color: var(--color-error-500);
        }

        .slider--warning::-webkit-slider-thumb {
          background-color: var(--color-warning-500);
        }

        .slider--warning::-moz-range-thumb {
          background-color: var(--color-warning-500);
        }

/* Slider Container */
        .slider-container {
          display: flex;
          flex-direction: column;
          margin: var(--space-3) 0;
          width: 100%;
        }

        .slider-container .labels {
          color: var(--color-text-500, #6b7280);
          display: flex;
          font-size: var(--text-xs, 0.75rem);
          justify-content: space-between;
          margin-top: var(--space-1);
        }

        .slider-container .value {
          align-self: flex-end;
          color: var(--color-text-700, #374151);
          font-size: var(--text-sm, 0.875rem);
          font-weight: var(--font-medium, 500);
          margin-top: var(--space-1);
        }

/* Range Slider (dual thumbs) */
        .slider-range {
          height: 2rem;
          margin: var(--space-3) 0;
          position: relative;
          width: 100%;
        }

        .slider-range .slider {
          background: none;
          pointer-events: none;
          position: absolute;
          top: 0%;
          width: 100%;
          z-index: 1;
        }

        .slider-range .slider::-webkit-slider-thumb {
          pointer-events: auto;
        }

        .slider-range .slider::-moz-range-thumb {
          pointer-events: auto;
        }

        .slider-range .fill {
          background-color: var(--color-primary-500);
          border-radius: var(--radius-full, 9999px);
          height: 0%.25rem;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
        } /**
        * Formular-Styling-System
        *
        * Diese Datei bietet ein umfassendes System für das Styling von Formularelementen,
        * einschließlich Textfeldern, Auswahlfeldern, Checkboxen, Radios und mehr.
        * Das System ist darauf ausgelegt, konsistente, zugängliche und responsive Formulare zu erzeugen.
        *
        * Hauptmerkmale:
        * - Variablensystem für konsistentes Styling und einfache Anpassung
        * - Flexible Layout-Optionen (vertikal, horizontal, mehrspaltig)
        * - Validierungszustände und Feedback-Mechanismen
        * - Umfangreiche Barrierefreiheit und Tastatur-Navigation
        * - Responsive Anpassung für verschiedene Bildschirmgrößen
        * - Kompatibilität mit dem Container-Query-System aus layout.css
        * - Unterstützung für interpolate-size: allow-keywords mit fluid und adaptive Klassen
        * - Optionale field-sizing: content für natürlichere Eingabefelder
        * - Umfassende Unterstützung für alle HTML5 Input-Typen
        * - RTL-Unterstützung für mehrsprachige Anwendungen
        *
        * @layer components
        */

        @layer components {
/**
          * Form Variables
          *
          * CSS-Variablen die das Formular-Styling steuern.
          * Diese Variablen ermöglichen eine konsistente Darstellung und einfache Anpassung.
          * Die Variablen basieren auf den globalen Design-Tokens aus tokens.css.
          */
          :root {
/* Grundlegende Formular-Variablen */
            --form-gap: var(--spacing-4);        /* Abstand zwischen Formularelementen */
            --form-padding: var(--spacing-4);    /* Innenabstand des Formulars */
            --form-padding-y: var(--spacing-2);  /* Vertikaler Innenabstand */
            --form-padding-x: var(--spacing-3);  /* Horizontaler Innenabstand */
            --form-font-size: var(--font-size-base, 1rem); /* Basisschriftgröße */
            --form-line-height: var(--line-height-base, 1.5); /* Basiszeilenhöhe */
            --form-color: var(--color-text-primary); /* Textfarbe */
            --form-background: var(--color-background); /* Hintergrundfarbe */
            --form-border-color: var(--color-border, #e5e7eb); /* Rahmenfarbe */
            --form-border-radius: var(--border-radius-md); /* Rahmenradius */
            --form-box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)); /* Schatten */
            --form-transition: all var(--transition-normal); /* Übergangsanimation */

/* Input-spezifische Variablen */
            --input-padding-y: var(--spacing-2);  /* Vertikaler Innenabstand für Inputs */
            --input-padding-x: var(--spacing-3);  /* Horizontaler Innenabstand für Inputs */
            --input-height: 2.5rem;               /* Höhe von Eingabefeldern */
            --input-font-size: var(--font-size-base, 1rem); /* Schriftgröße von Eingabefeldern */
            --input-bg: var(--color-background);  /* Hintergrundfarbe von Eingabefeldern */
            --input-color: var(--color-text-primary); /* Textfarbe von Eingabefeldern */
            --input-border-color: var(--color-border, #e5e7eb); /* Rahmenfarbe von Eingabefeldern */
            --input-border-width: 1px;            /* Rahmenstärke von Eingabefeldern */
            --input-border-radius: var(--border-radius-md); /* Rahmenradius von Eingabefeldern */

/* Select-spezifische Variablen */
            --select-padding-right: 2.5rem;       /* Rechter Innenabstand für Dropdown-Pfeil */
            --select-indicator-padding: 1.75rem;  /* Abstand des Dropdown-Pfeils vom Rand */
            --select-indicator-size: 0.75rem;     /* Größe des Dropdown-Pfeils */
            --select-indicator-color: var(--color-text-secondary); /* Farbe des Dropdown-Pfeils */

/* Checkbox/Radio-spezifische Variablen */
            --control-indicator-size: 1.25rem;    /* Größe von Checkboxen und Radios */
            --control-indicator-bg: var(--color-background); /* Hintergrundfarbe */
            --control-indicator-border-color: var(--color-border, #e5e7eb); /* Rahmenfarbe */
            --control-indicator-checked-bg: var(--color-primary-500); /* Hintergrundfarbe bei Auswahl */
            --control-indicator-checked-border-color: var(--color-primary-500); /* Rahmenfarbe bei Auswahl */
            --control-indicator-checked-color: var(--color-white, #fff); /* Symbol-Farbe bei Auswahl */

/* Dark Mode Unterstützung */
            color-scheme: light dark;

/* Dark Mode Fallback-Variablen */
            --form-disabled-bg: var(--color-gray-100, #f3f4f6);
            --form-group-text-bg: var(--color-gray-100, #f3f4f6);
            --form-range-bg: var(--color-gray-200);
            --form-file-button-bg: var(--color-gray-200);
            --form-file-button-hover-bg: var(--color-gray-300, #d1d5db);
            --form-button-bg: var(--color-gray-200);
            --form-button-border: var(--color-gray-300, #d1d5db);
            --form-button-hover-bg: var(--color-gray-300, #d1d5db);

            @media (prefers-color-scheme: dark) {
              --form-disabled-bg: var(--color-gray-800);
              --form-group-text-bg: var(--color-gray-700);
              --form-range-bg: var(--color-gray-700);
              --form-file-button-bg: var(--color-gray-700);
              --form-file-button-hover-bg: var(--color-gray-600);
              --form-button-bg: var(--color-gray-700);
              --form-button-border: var(--color-gray-600);
              --form-button-hover-bg: var(--color-gray-600);
            }
          }

/**
          * Modulare Komponenten-Hinweis
          *
          * Dieses Kommentar informiert über die verfügbaren spezialisierten Module,
          * die erweiterte Funktionen für bestimmte Formularelemente bieten.
          * Diese Module können zusammen mit dieser Basisdatei verwendet werden.
          */

/**
          * Hinweis zu modularen Komponenten:
          * Einige Formularkomponenten sind auch als separate Module verfügbar:
          * - input.module.css - Für Input-Felder mit erweiterten Funktionen und Varianten
          * - select.module.css - Für Select-Felder mit Suchfunktion, Mehrfachauswahl und mehr
          * - checkbox.module.css - Für Checkboxen mit verschiedenen Stilen und Animationen
          * - radio.module.css - Für Radio-Buttons mit anpassbaren Stilen
          * - textarea.module.css - Für mehrzeilige Texteingaben mit automatischer Größenanpassung
          * - switch.module.css - Für Toggle-Schalter mit verschiedenen Größen und Stilen
          * - file.module.css - Für Datei-Upload-Felder mit Drag & Drop und Vorschau
          * - input-group.module.css - Für Eingabegruppen mit Buttons/Icons und mehr
          *
          * Die Module bieten umfangreichere Funktionen und Varianten,
          * während diese globalen Klassen für einfache Formulare ausreichen.
          */

/**
          * Basis-Formularstile
          *
          * Definiert grundlegende Container und Layout-Optionen für Formulare.
          * Verschiedene Klassen ermöglichen flexible Formularstrukturen.
          */

/* Form Base - Vertikales Layout */
          .form {
            background-color: var(--form-background);
            color: var(--form-color);
            display: flex;
            flex-direction: column;
            gap: var(--form-gap);
            padding: var(--form-padding);
          }

/* Form Inline - Horizontales Layout */
          .form-layout-inline {
            align-items: flex-end;
            display: flex;
            flex-flow: row wrap;
            gap: var(--spacing-4);
          }

          .form-layout-inline .form-group {
            flex: 1 0 auto;
            margin-bottom: 0%;
            min-width: 25%0px;
          }

/* Form Group - Gruppierung zusammengehöriger Elemente */
          .form-group {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            margin-bottom: var(--spacing-4);
          }

          .form-group:last-child {
            margin-bottom: 0%;
          }

/* Form Row - Mehrspaltiges Layout innerhalb eines Formulars */
          .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-4);
          }

          .form-row > * {
            flex: 1;
            min-width: 20%0px;
          }

/**
          * Formular-Labels und Hilfstexte
          *
          * Definiert Stile für Beschriftungen, Pflichtfeldmarkierungen und Hilfstexte.
          * Diese Elemente verbessern die Benutzererfahrung und Barrierefreiheit.
          */

/* Standard-Label */
          .form-label {
            color: var(--color-text-primary);
            display: block;
            font-size: var(--font-size-sm, 0.875rem);
            font-weight: var(--font-weight-medium, 500);
            margin-bottom: var(--spacing-1);
          }

/* Pflichtfeld-Markierung mit Sternchen */
          .form-label.required::after {
            color: var(--color-error, #ef4444);
            content: "*";
            margin-left: var(--spacing-1);
          }

          [dir="rtl"] .form-label.required::after {
            margin-left: 0%;
            margin-right: var(--spacing-1);
          }

/* Hilfetext unterhalb von Formularfeldern */
          .form-text {
            color: var(--color-text-secondary);
            display: block;
            font-size: var(--font-size-sm, 0.875rem);
            margin-top: var(--spacing-1);
          }

/* Feedback für Validierung */
          .feedback {
            font-size: var(--font-size-xs);
            margin-top: var(--space-1);
          }

/**
          * Basis-Eingabefelder
          *
          * .form-control ist die Hauptklasse für Eingabefelder wie Input, Select, Textarea.
          * Definiert Grundstil und verschiedene Zustände (Fokus, Deaktiviert, etc.).
          */

/* Basis-Eingabefeld */
          .form-control {
            background-color: var(--input-bg, #fff);
            border: var(--input-border-width, 1px) solid var(--input-border-color, #d1d5db);
            border-radius: var(--input-border-radius, 0.375rem);
            box-shadow: var(--form-box-shadow);
            color: var(--input-color);
            display: block;

/* Experimentelle Eigenschaft für natürlichere Feldgrößen */
            field-sizing: content; /* Optionale Eigenschaft */
            font-size: var(--input-font-size, 0.875rem);
            line-height: var(--form-line-height, 1.5);
            padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);
            transition: var(--form-transition);
            width: 100%;
          }

/* Fokus-Zustand mit hervorgehobener Umrandung */
          .form-control:focus {
            border-color: var(--color-primary-500);
            box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);
            outline: none;
          }

/* Platzhaltertext in Eingabefeldern */
          .form-control::placeholder {
            color: var(--color-text-tertiary);
            opacity: 1;
          }

/* Deaktivierte und schreibgeschützte Eingabefelder */
          .form-control:disabled,
          .form-control[readonly] {
            background-color: var(--form-disabled-bg); /* Fallback */
            cursor: not-allowed;
            opacity: 0.7;
          }

/**
          * Formular-Validierung
          *
          * Definiert Stile für gültige und ungültige Eingabefelder,
          * sowie die zugehörigen Feedback-Meldungen.
          * Kann sowohl manuell als auch mit .was-validated aktiviert werden.
          */

/* Gültiger Zustand */
          .form-control.is-valid, .form-group.valid .form-control {
            border-color: var(--color-success, #10b981);
          }

          .form-control.is-valid:focus, .form-group.valid .form-control:focus {
            border-color: var(--color-success, #10b981);
            box-shadow: 0 0 0 0.2rem rgb(var(--color-success-rgb), 0.25);
          }

/* Ungültiger Zustand */
          .form-control.is-invalid, .form-group.invalid .form-control {
            border-color: var(--color-error, #ef4444);
          }

          .form-control.is-invalid:focus, .form-group.invalid .form-control:focus {
            border-color: var(--color-error, #ef4444);
            box-shadow: 0 0 0 0.2rem rgb(var(--color-error-rgb), 0.25);
          }

/**
          * Moderne Validierungsstile mit :has()
          *
          * Nutzt den modernen :has()-Selektor, um Validierungszustände
          * auf Elternebene basierend auf dem Zustand der Kind-Inputs anzuzeigen.
          * Bietet visuelle Indikatoren für Valid/Invalid ohne zusätzliche Klassen.
          */
          .form-group:has(.form-control:invalid) {
            border-left: 4px solid var(--color-error, #ef4444);
            padding-left: var(--spacing-3);
          }

          [dir="rtl"] .form-group:has(.form-control:invalid) {
            border-left: none;
            border-right: 4px solid var(--color-error, #ef4444);
            padding-left: 0%;
            padding-right: var(--spacing-3);
          }

          .form-group:has(.form-control:valid:not(:placeholder-shown)) {
            border-left: 4px solid var(--color-success, #10b981);
            padding-left: var(--spacing-3);
          }

          [dir="rtl"] .form-group:has(.form-control:valid:not(:placeholder-shown)) {
            border-left: none;
            border-right: 4px solid var(--color-success, #10b981);
            padding-left: 0%;
            padding-right: var(--spacing-3);
          }

/* Visuelle Indikatoren neben den Eingabefeldern */
          .form-group:has(.form-control:invalid) .form-label::after {
            content: "⚠️";
            display: inline-block;
            margin-left: var(--spacing-2);
            vertical-align: middle;
          }

          [dir="rtl"] .form-group:has(.form-control:invalid) .form-label::after {
            margin-left: 0%;
            margin-right: var(--spacing-2);
          }

          .form-group:has(.form-control:valid:not(:placeholder-shown)) .form-label::after {
            color: var(--color-success, #10b981);
            content: "✓";
            display: inline-block;
            margin-left: var(--spacing-2);
            vertical-align: middle;
          }

          [dir="rtl"] .form-group:has(.form-control:valid:not(:placeholder-shown)) .form-label::after {
            margin-left: 0%;
            margin-right: var(--spacing-2);
          }

/* Fallback für Browser ohne :has() Unterstützung */
          @supports not (selector(:has(*))) {
            .form-group.invalid {
              border-left: 4px solid var(--color-error, #ef4444);
              padding-left: var(--spacing-3);
            }

            [dir="rtl"] .form-group.invalid {
              border-left: none;
              border-right: 4px solid var(--color-error, #ef4444);
              padding-left: 0%;
              padding-right: var(--spacing-3);
            }

            .form-group.valid {
              border-left: 4px solid var(--color-success, #10b981);
              padding-left: var(--spacing-3);
            }

            [dir="rtl"] .form-group.valid {
              border-left: none;
              border-right: 4px solid var(--color-success, #10b981);
              padding-left: 0%;
              padding-right: var(--spacing-3);
            }
          }

/* Feedback-Container für Validierungsmeldungen */
          .valid-feedback {
            color: var(--color-success, #10b981);
            display: none;
            font-size: var(--font-size-sm, 0.875rem);
            margin-top: var(--spacing-1);
            width: 100%;
          }

          .invalid-feedback {
            color: var(--color-error, #ef4444);
            display: none;
            font-size: var(--font-size-sm, 0.875rem);
            margin-top: var(--spacing-1);
            width: 100%;
          }

/* Feedback in der modularen Formularstruktur */
          .form-group.valid .feedback {
            color: var(--color-success, #10b981);
          }

          .form-group.invalid .feedback {
            color: var(--color-error, #ef4444);
          }

/* Anzeigen von Feedback-Meldungen bei Validierung */
          .was-validated .form-control:valid ~ .valid-feedback,
          .was-validated .form-control:invalid ~ .invalid-feedback,
          .form-control.is-valid ~ .valid-feedback,
          .form-control.is-invalid ~ .invalid-feedback {
            display: block;
          }

/**
          * Größenvarianten für Eingabefelder
          *
          * Bietet verschiedene Größen für Eingabefelder:
          * - Small (sm): kompakte Größe für platzsparende Layouts
          * - Large (lg): größere Variante für bessere Lesbarkeit oder Touch-Bedienung
          */

/* Kleine Eingabefelder */
          .form-control-sm {
            border-radius: var(--border-radius-sm);
            font-size: var(--font-size-sm, 0.875rem);
            height: calc(var(--input-height, 2.5rem) * 0.85);
            padding: var(--spacing-1) var(--spacing-2);
          }

/* Große Eingabefelder */
          .form-control-lg {
            border-radius: var(--border-radius-lg);
            font-size: var(--font-size-lg);
            height: calc(var(--input-height, 2.5rem) * 1.15);
            padding: var(--spacing-3) var(--spacing-4);
          }

/**
          * Select-Felder
          *
          * Angepasste Styles für Dropdown-Auswahlfelder mit eigenem Dropdown-Pfeil.
          * Basiert auf .form-control mit zusätzlichen Select-spezifischen Anpassungen.
          */

/* Basis-Select mit angepasstem Dropdown-Pfeil */
          .form-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
            background-position: right var(--input-padding-x, 0.75rem) center;
            background-repeat: no-repeat;
            background-size: var(--select-indicator-size);
            display: block;
            padding-right: var(--select-indicator-padding);
            width: 100%;
          }

          [dir="rtl"] .form-select {
            background-position: left var(--input-padding-x, 0.75rem) center;
            padding-left: var(--select-indicator-padding);
            padding-right: var(--input-padding-x, 0.75rem);
          }

/* Kleine Select-Variante */
          .form-select-sm {
            background-position: right var(--spacing-2) center;
            padding-right: calc(var(--select-indicator-padding) * 0.85);
          }

/* Große Select-Variante */
          .form-select-lg {
            background-position: right var(--spacing-4) center;
            padding-right: calc(var(--select-indicator-padding) * 1.15);
          }

/**
          * Textarea-Felder
          *
          * Mehrzeilige Textfelder mit angepassten Eigenschaften.
          * Basiert auf .form-control mit spezifischen Textarea-Anpassungen.
          */

/* Mehrzeiliges Textfeld mit vertikaler Größenanpassung */
          textarea.form-control {
            min-height: 6rem;
            resize: vertical;
          }

/**
          * Checkboxen und Radio-Buttons
          *
          * Angepasstes Styling für Checkboxen und Radio-Buttons mit SVG-Icons.
          * Ermöglicht konsistentes Aussehen über verschiedene Browser hinweg.
          */

/* Container für Checkbox/Radio */
          .form-check {
            display: block;
            margin-bottom: var(--spacing-2);
            min-height: var(--control-indicator-size, 1rem);
            padding-left: calc(var(--control-indicator-size, 1rem) + var(--spacing-2));
            position: relative;
          }

          .form-check:last-child {
            margin-bottom: 0%;
          }

/* Inline-Variante für horizontale Anordnung */
          .form-check-inline {
            align-items: center;
            display: inline-flex;
            margin-right: var(--spacing-4);
          }

/* Checkbox/Radio Input-Element */
          .form-check-input {
            appearance: none;
            background-color: var(--control-indicator-bg);
            border: var(--input-border-width, 1px) solid var(--control-indicator-border-color);
            height: var(--control-indicator-size, 1rem);
            margin-left: calc(-1 * (var(--control-indicator-size, 1rem) + var(--spacing-2)));
            margin-top: calc((var(--form-line-height, 1.5) * var(--form-font-size) - var(--control-indicator-size, 1rem)) / 2);
            position: absolute;
            print-color-adjust: exact;
            transition: var(--form-transition);
            width: var(--control-indicator-size, 1rem);
          }

          [dir="rtl"] .form-check-input {
            margin-left: 0%;
            margin-right: calc(-1 * (var(--control-indicator-size, 1rem) + var(--spacing-2)));
          }

/* Checkbox-spezifische Styles */
          .form-check-input[type="checkbox"] {
            border-radius: var(--border-radius-sm);
          }

/* Radio-Button-spezifische Styles */
          .form-check-input[type="radio"] {
            border-radius: var(--radius-full, 9999px);
          }

/* Aktiver Zustand (bei Mausklick) */
          .form-check-input:active {
            filter: brightness(90);
          }

/* Fokus-Zustand */
          .form-check-input:focus {
            border-color: var(--color-primary-500);
            box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);
            outline: 0;
          }

/* Ausgewählter Zustand */
          .form-check-input:checked {
            background-color: var(--control-indicator-checked-bg);
            border-color: var(--control-indicator-checked-border-color);
          }

/* SVG-Icon für ausgewählte Checkbox */
          .form-check-input:checked[type="checkbox"] {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
            background-position: center;
            background-repeat: no-repeat;
            background-size: var(--select-indicator-size);
          }

/* SVG-Icon für ausgewählten Radio-Button */
          .form-check-input:checked[type="radio"] {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle r='4' fill='white' cx='8' cy='8'/%3E%3C/svg%3E");
            background-position: center;
            background-repeat: no-repeat;
            background-size: var(--select-indicator-size);
          }

/* Deaktivierter Zustand */
          .form-check-input:disabled {
            filter: none;
            opacity: var(--opacity-50);
            pointer-events: none;
          }

          .form-check-input:disabled ~ .form-check-label {
            cursor: default;
            opacity: var(--opacity-50);
          }

/* Beschriftung für Checkbox/Radio */
          .form-check-label {
            cursor: pointer;
            display: inline-block;
          }

/**
          * Toggle-Schalter (Switch)
          *
          * Moderne Alternative zu Checkboxen für Ein/Aus-Optionen.
          * Basiert auf .form-check, mit angepasstem Styling für Schalteroptik.
          */

/* Container für Toggle-Schalter */
          .form-switch {
            padding-left: calc(var(--control-indicator-size, 1rem) * 2);
          }

          [dir="rtl"] .form-switch {
            padding-left: 0%;
            padding-right: calc(var(--control-indicator-size, 1rem) * 2);
          }

/* Toggle-Schalter-Input mit Schieberegler */
          .form-switch .form-check-input {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle r='3' fill='rgb(0 0 0 / 0.25)' cx='3' cy='8'/%3E%3C/svg%3E");
            background-position: left center;
            background-repeat: no-repeat;
            border-radius: calc(var(--control-indicator-size, 1rem) * 0.85);
            height: calc(var(--control-indicator-size, 1rem) * 0.85);
            transition: background-position var(--transition-normal);
            width: calc(var(--control-indicator-size, 1rem) * 1.75);
          }

/* Ausgewählter Zustand des Toggle-Schalters */
          .form-switch .form-check-input:checked {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle r='3' fill='%23fff' cx='13' cy='8'/%3E%3C/svg%3E");
            background-position: right center;
          }

/**
          * Datei-Upload
          *
          * Angepasste Darstellung für Datei-Upload-Felder mit benutzerdefiniertem Styling.
          */

/* Container für Datei-Upload */
          .form-file {
            position: relative;
          }

/* Verstecktes natürliches File-Input */
          .form-file-input {
            height: var(--input-height, 2.5rem);
            margin: 0;
            opacity: 0%;
            position: relative;
            width: 100%;
            z-index: 2;
          }

/* Sichtbares Label für Datei-Upload */
          .form-file-label {
            background-color: var(--input-bg, #fff);
            border: var(--input-border-width, 1px) solid var(--input-border-color, #d1d5db);
            border-radius: var(--input-border-radius, 0.375rem);
            display: flex;
            height: var(--input-height, 2.5rem);
            left: 0%;
            position: absolute;
            right: 0%;
            top: 0%;
            z-index: 1;
          }

/* Textbereich für Dateipfad-Anzeige */
          .form-file-text {
            background-color: var(--input-bg, #fff);
            border-right: none;
            color: var(--color-text-tertiary);
            flex: 1;
            overflow: hidden;
            padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          [dir="rtl"] .form-file-text {
            border-left: none;
            border-right: initial;
          }

/* Button für Dateiauswahl */
          .form-file-button {
            background-color: var(--color-gray-200);
            border-bottom-right-radius: var(--input-border-radius, 0.375rem);
            border-left: inherit;
            border-top-right-radius: var(--input-border-radius, 0.375rem);
            color: var(--color-text-primary);
            display: block;
            padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);
            z-index: 3;
          }

          [dir="rtl"] .form-file-button {
            border-left: none;
            border-radius: var(--input-border-radius, 0.375rem) 0 0 var(--input-border-radius, 0.375rem);
            border-right: inherit;
          }

/**
          * Formular-Aktionen
          *
          * Container für Formular-Schaltflächen (Absenden, Abbrechen, etc.)
          * Mit flexiblen Layout-Optionen für verschiedene Anordnungen.
          */

/* Container für Formular-Aktionsschaltflächen */
          .form-actions {
            display: flex;
            gap: var(--spacing-3);
            justify-content: flex-end;
            margin-top: var(--spacing-6);
          }

          [dir="rtl"] .form-actions {
            justify-content: flex-start;
          }

          .form-actions > * {
            flex: 0 0 auto;
          }

/**
          * Input-Gruppen
          *
          * Ermöglicht die Kombination von Eingabefeldern mit Text oder Buttons.
          * Nützlich für Währungsangaben, Suchfelder mit Buttons, etc.
          */

/**
          * Input Groups - Enhanced Version
          *
          * Gruppierte Eingabeelemente für zusammengehörende Formularfelder.
          * Input-Groups ermöglichen die Kombination von Eingabefeldern mit Addons, Buttons oder Labels.
          *
          * Grundlegende Verwendung:
          * <div class="input-group">
          *   <span class="addon">https://</span>
          *   <input type="text" class="input" placeholder="example.com">
          * </div>
          *
          * Mit Button:
          * <div class="input-group">
          *   <input type="text" class="input" placeholder="Suchen...">
          *   <button class="button">Suchen</button>
          * </div>
          *
          * Mit Icon:
          * <div class="input-group">
          *   <span class="icon"><!-- Icon hier --></span>
          *   <input type="text" class="input" placeholder="Benutzername">
          * </div>
          *
          * Größenvarianten:
          * <div class="input-group sm">...</div>
          * <div class="input-group md">...</div>
          * <div class="input-group lg">...</div>
          */

/* Container für Input-Gruppe */
          .input-group {
            align-items: stretch;
            border: var(--input-border-width, 1px) solid var(--color-border, var(--color-neutral-300, #d1d5db));
            border-radius: var(--radius-input, var(--radius-md, 0.375rem));
            display: flex;
            overflow: hidden;
            width: 100%;

/* Allgemeine Styles für alle Kinder-Elemente */
            > * {
              border: none;
              font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
              outline: none;
              padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
            }

/* Addon-Elemente */
            .addon {
              align-items: center;
              background-color: var(--color-neutral-100, #f3f4f6);
              color: var(--color-neutral-700, #374151);
              display: flex;
              font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
              justify-content: center;
              padding: 0 var(--space-3, 0.75rem);
              white-space: nowrap;
            }

/* Icon-Elemente */
            .icon {
              align-items: center;
              background-color: transparent;
              color: var(--color-neutral-500, #6b7280);
              display: flex;
              justify-content: center;
              width: 2.5rem;

              &:hover {
                color: var(--color-neutral-700, #374151);
                transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
              }
            }

/* Input innerhalb der Gruppe */
            .input {
              background-color: var(--color-background, #fff);
              color: var(--color-text, var(--color-neutral-900, #111827));
              flex: 1;
              height: var(--input-height, 2.5rem);
              min-width: 0%;
              padding: var(--input-padding, var(--space-3, 0.75rem));

              &:focus {
                box-shadow: none;
              }

              &::placeholder {
                color: var(--color-neutral-400, #9ca3af);
              }
            }

/* Select innerhalb der Gruppe */
            .select {
              background-color: var(--color-background, #fff);
              color: var(--color-text, var(--color-neutral-900, #111827));
              flex: 1;
              height: var(--input-height, 2.5rem);
              min-width: 0%;
              padding: var(--input-padding, var(--space-3, 0.75rem));
            }

/* Button innerhalb der Gruppe */
            .button {
              align-items: center;
              border-radius: 0;
              display: flex;
              justify-content: center;
              padding: var(--space-2, 0.5rem) var(--space-4, 1rem);

              &:first-child {
                border-bottom-left-radius: var(--radius-input, var(--radius-md, 0.375rem));
                border-top-left-radius: var(--radius-input, var(--radius-md, 0.375rem));
              }

              &:last-child {
                border-bottom-right-radius: var(--radius-input, var(--radius-md, 0.375rem));
                border-top-right-radius: var(--radius-input, var(--radius-md, 0.375rem));
              }
            }

/* Größenvarianten */
            &.sm {
              > * {
                font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
                padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
              }

              .input, .select {
                height: 2rem;
                padding: var(--space-2, 0.5rem);
              }

              .button {
                padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
              }
            }

            &.lg {
              > * {
                font-size: var(--text-base, var(--font-size-base, 1rem));
                padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
              }

              .input, .select {
                height: 3rem;
                padding: var(--space-4, 1rem);
              }

              .button {
                padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
              }
            }

/* Zustände */
            &:focus-within {
              border-color: var(--color-primary-500, #3b82f6);
              box-shadow: 0 0 0 2px var(--color-primary-200, #bfdbfe);
            }

/* Error State */
            &.error {
              border-color: var(--color-error-500, #ef4444);

              &:focus-within {
                border-color: var(--color-error-500, #ef4444);
                box-shadow: 0 0 0 2px var(--color-error-200, #fecaca);
              }
            }

/* Success State */
            &.success {
              border-color: var(--color-success-500, #10b981);

              &:focus-within {
                border-color: var(--color-success-500, #10b981);
                box-shadow: 0 0 0 2px var(--color-success-200, #a7f3d0);
              }
            }

/* Warning State */
            &.warning {
              border-color: var(--color-warning-500, #f59e0b);

              &:focus-within {
                border-color: var(--color-warning-500, #f59e0b);
                box-shadow: 0 0 0 2px var(--color-warning-200, #fde68a);
              }
            }

/* Disabled State */
            &.disabled {
              background-color: var(--color-neutral-100, #f3f4f6);
              border-color: var(--color-neutral-200, #e5e7eb);
              color: var(--color-neutral-400, #9ca3af);
              cursor: not-allowed;

              .input, .select, .button {
                background-color: transparent;
                color: var(--color-neutral-400, #9ca3af);
                cursor: not-allowed;
              }
            }
          }

/* Legacy compatibility for existing .input-group-text */
          .input-group-text {
            align-items: center;
            background-color: var(--color-neutral-100, #f3f4f6);
            color: var(--color-neutral-700, #374151);
            display: flex;
            font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
            justify-content: center;
            padding: 0 var(--space-3, 0.75rem);
            white-space: nowrap;
          }

/**
          * Horizontales Layout für Formulare
          *
          * Ermöglicht eine horizontale Anordnung von Labels und Eingabefeldern.
          */

/* Horizontales Layout */
          .form.horizontal .form-group,
          .form-horizontal .form-group {
            align-items: center;
            flex-direction: row;
          }

          .form.horizontal .form-label,
          .form-horizontal .form-label {
            margin-bottom: 0%;
            margin-right: var(--space-4);
            width: 30%;
          }

          [dir="rtl"] .form.horizontal .form-label,
          [dir="rtl"] .form-horizontal .form-label {
            margin-left: var(--space-4);
            margin-right: 0%;
          }

          .form.horizontal .form-control {
            flex: 1;
          }

          .form.horizontal .form-text,
          .form.horizontal .feedback,
          .form-horizontal .form-text,
          .form-horizontal .valid-feedback,
          .form-horizontal .invalid-feedback {
            margin-left: calc(30 + var(--space-4));
          }

          [dir="rtl"] .form.horizontal .form-text,
          [dir="rtl"] .form.horizontal .feedback,
          [dir="rtl"] .form-horizontal .form-text,
          [dir="rtl"] .form-horizontal .valid-feedback,
          [dir="rtl"] .form-horizontal .invalid-feedback {
            margin-left: 0%;
            margin-right: calc(30 + var(--space-4));
          }

/**
          * Spezifische Input-Typen
          *
          * Angepasste Styles für verschiedene HTML5 Input-Typen.
          * Stellt sicher, dass alle Input-Typen ein konsistentes und ansprechendes Aussehen haben.
          */

/* Color-Picker Input */
          input[type="color"] {
            cursor: pointer;
            min-height: 2.5rem;
            padding: 0.25rem;
          }

          input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
          }

          input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: var(--border-radius-sm);
          }

/* Range Slider */
          input[type="range"] {
            appearance: none;
            background-color: var(--form-range-bg); /* Fallback */
            border-radius: 1rem;
            height: 0%.5rem;
            margin: 0.5rem 0;
            outline: none;
            width: 100%;
          }

          input[type="range"]::-webkit-slider-thumb {
            appearance: none;
            background-color: var(--color-primary-500);
            border: none;
            border-radius: var(--radius-full, 9999px);
            cursor: pointer;
            height: 1%.25rem;
            width: 1%.25rem;
          }

          input[type="range"]::-moz-range-thumb {
            background-color: var(--color-primary-500);
            border: none;
            border-radius: var(--radius-full, 9999px);
            cursor: pointer;
            height: 1%.25rem;
            width: 1%.25rem;
          }

          input[type="range"]:focus::-webkit-slider-thumb {
            box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);
          }

          input[type="range"]:focus::-moz-range-thumb {
            box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);
          }

/* Date, Time, DateTime Inputs */
          input[type="date"],
          input[type="datetime-local"],
          input[type="month"],
          input[type="time"],
          input[type="week"] {
            padding-right: 0%.5rem;
          }

/* Search Input */
          input[type="search"] {
            appearance: none;
          }

          input[type="search"]::-webkit-search-cancel-button {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
            cursor: pointer;
            height: 1rem;
            margin-left: 0%.5rem;
            width: 1rem;
          }

/* File Input - Erweitert die bestehende form-file Klasse */
          input[type="file"] {
            cursor: pointer;
          }

          input[type="file"]::file-selector-button {
            background-color: var(--form-file-button-bg); /* Fallback */
            border: none;
            border-radius: var(--border-radius-sm);
            color: var(--color-text-primary);
            cursor: pointer;
            margin-right: 1rem;
            padding: 0.25rem 0.75rem;
            transition: background-color 0.2s;
          }

          [dir="rtl"] input[type="file"]::file-selector-button {
            margin-left: 1rem;
            margin-right: 0%;
          }

/* URL, Email, Tel und andere Text-basierte Inputs */
          input[type="url"],
          input[type="email"],
          input[type="tel"],
          input[type="password"],
          input[type="text"],
          input[type="number"] {
/* Diese erben bereits die Basis-Stile von .form-control */
          }

/* Number Input Spinner */
          input[type="number"]::-webkit-inner-spin-button,
          input[type="number"]::-webkit-outer-spin-button {
            height: auto;
            margin-left: 0%.5rem;
            opacity: 1;
          }

/* Button-artige Inputs */
          input[type="button"],
          input[type="submit"],
          input[type="reset"] {
            border-radius: var(--input-border-radius, 0.375rem);
            cursor: pointer;
            display: inline-block;
            font-weight: var(--font-weight-medium, 500);
            padding: var(--input-padding-y, 0.5rem) var(--input-padding-x, 0.75rem);
            text-align: center;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            user-select: none;
            vertical-align: middle;
            white-space: nowrap;
          }

          input[type="button"],
          input[type="reset"] {
            background-color: var(--form-button-bg); /* Fallback */
            border: 1px solid var(--form-button-border); /* Fallback */
            color: var(--color-text-primary);
          }

          input[type="button"]:hover,
          input[type="reset"]:hover {
            background-color: var(--form-button-hover-bg); /* Fallback */
          }

          input[type="submit"] {
            background-color: var(--color-primary-500);
            border: 1px solid var(--color-primary-500);
            color: var(--color-white, #fff);
          }

          input[type="submit"]:hover {
            background-color: var(--color-primary-600, #2563eb);
            border-color: var(--color-primary-600, #2563eb);
          }

/* Image Input */
          input[type="image"] {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
          }

/* Hidden Input */
          input[type="hidden"] {
            display: none;
          }

/* Input Placeholder Styling */
          input::placeholder {
            color: var(--color-text-tertiary);
            opacity: 0.7;
          }

/* Fokus-Zustand für alle Input-Typen */
          input:focus {
            border-color: var(--color-primary-500);
            box-shadow: 0 0 0 0.2rem rgb(var(--color-primary-rgb), 0.25);
            outline: none;
          }
        }

/**
        * Form-Komponente - Legacy Unterstützung
        *
        * Unterstützt die bestehende modulare Struktur der .form-Komponente.
        * Diese Layer-Definition stellt die Kompatibilität mit bestehenden Komponenten sicher.
        */
        @layer form {
/* Vorhandene Stile aus components/form.css werden automatisch durch die oben definierten Klassen unterstützt */
        }

/**
        * Formular-Utilities
        *
        * Stellt Utility-Klassen für Formulare bereit, die verwendet werden können,
        * um das Verhalten und Aussehen von Formularen anzupassen.
        */
        @layer utilities {
/**
          * Inline Layout für Checkboxen/Radios
          *
          * Ermöglicht eine horizontale Anordnung von Checkboxen und Radios.
          */
          .form-inline-controls,
          .form-inline,
          .inline {
            align-items: center;
            flex-direction: row;
            gap: var(--space-3);
          }

          .form-inline-controls .form-label,
          .form-inline .form-label,
          .inline .form-label {
            margin-bottom: 0%;
            margin-left: var(--space-2);
          }

          [dir="rtl"] .form-inline-controls .form-label,
          [dir="rtl"] .form-inline .form-label,
          [dir="rtl"] .inline .form-label {
            margin-left: 0%;
            margin-right: var(--space-2);
          }

/**
          * Gestapeltes Layout (Stacked)
          *
          * Explizites vertikales Layout für Formulare, bei dem Labels über den Eingabefeldern stehen.
          * Dies ist das Standardverhalten, aber diese Klasse kann für Konsistenz verwendet werden.
          */
          .form-stacked .form-group {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
          }

          .form-stacked .form-label {
            margin-bottom: var(--spacing-1);
            width: 100%;
          }

          .form-stacked .form-control {
            width: 100%;
          }

          .form-stacked .form-text,
          .form-stacked .feedback {
            margin-top: var(--spacing-1);
          }

/**
          * Kompaktes Layout
          *
          * Reduziert Abstände für platzsparende Formulare.
          */
          .form.compact, .form-compact {
            gap: var(--space-2);
          }

          .form.compact .form-group,
          .form-compact .form-group {
            gap: var(--space-1);
          }

/**
          * Flüssige Größenanpassung mit interpolate-size: allow-keywords
          *
          * Ermöglicht Formulare mit flüssiger Größenanpassung basierend auf CSS-Schlüsselwörtern.
          */
          .form.fluid {
/* Nutzt CSS-Schlüsselwörter für Größen - funktioniert mit interpolate-size: allow-keywords */
            font-size: medium; /* Basis-Größe für Skalierungsfaktor */
            gap: 1em;

            .form-group {
              gap: 00.5em;
            }

            .form-label {
              font-size: 0.875em;
              margin-bottom: 0%.25em;
            }

            .form-text,
            .feedback {
              font-size: 0.75em;
              margin-top: 0%.25em;
            }

            .form-actions {
              gap: 0.75em;
              margin-top: 00%.5em;
            }

/* Größenvarianten mit CSS-Schlüsselwörtern */
            &.small {
              font-size: small;
            }

            &.medium {
              font-size: medium;
            }

            &.large {
              font-size: large;
            }

            &.x-large {
              font-size: x-large;
            }

/* Horizontales Layout für flüssige Formen */
            &.horizontal {
              .form-group {
                .form-label {
                  margin-right: 1em;
                }

                .form-text,
                .feedback {
                  margin-left: calc(30 + 1em);
                }
              }
            }
          }

/**
          * Container-adaptive Größenanpassung
          *
          * Ermöglicht Formulare, die sich automatisch an die Container-Größe anpassen.
          */
          .form.adaptive {
            container-type: inline-size;
            gap: clamp(var(--space-2), 1cqi, var(--space-6));

            .form-group {
              gap: clamp(var(--space-1), 0.5cqi, var(--space-3));
            }

            .form-label {
              font-size: clamp(var(--font-size-xs), 1.5cqi, var(--font-size-base, 1rem));
            }

            .form-text,
            .feedback {
              font-size: clamp(var(--font-size-xs), 1cqi, var(--font-size-sm, 0.875rem));
            }

            .form-actions {
              gap: clamp(var(--space-2), 0.75cqi, var(--space-4));
            }

            @container (min-width: 400px) {
              &:not(.horizontal) .form-group {
                max-width: 80%;
              }
            }

            @container (min-width: 600px) {
              &.horizontal .form-group {
                flex-direction: row;

                .form-label {
                  margin-bottom: 0%;
                  width: 2%5%;
                }
              }
            }
          }

/**
          * Barrierefreiheit
          *
          * Verbesserte Barrierefreiheit für Nutzer mit speziellen Bedürfnissen.
          * Beachtet Einstellungen wie reduzierte Bewegung.
          */
          @container root (prefers-reduced-motion: reduce) {
            .form-element,
            .form-input,
            .form-select,
            .form-textarea,
            .form-checkbox,
            .form-radio,
            .form-switch,
            .form-range,
            .form-field,
            .form-label,
            .form-feedback,
            button,
            .button,
            .input-animate-label .input-label,
            .form-element-validated::before,
            .form-element-validated::after,
            .input-float-label .input-label {
              animation: none !important;
              transform: none !important;
              transition: none !important;
            }

            .input-spinner,
            .form-loading,
            .submit-processing,
            .form-validation-icon {
              display: none !important;
            }
          }

/**
          * Responsive Anpassungen
          *
          * Spezifische Anpassungen für verschiedene Bildschirmgrößen.
          * Optimiert die Formulardarstellung auf mobilen Geräten.
          */
          @container root (width <= 768px) {
            .form-field {
              margin-block-end: 1rem;
            }

            .input-group {
              flex-direction: column;
            }

            .input-group > * + * {
              margin-block-start: 0.5rem;
              margin-inline-start: 0;
            }

            .checkbox-group, .radio-group {
              align-items: flex-start;
              flex-direction: column;
            }

            .form-actions {
              flex-direction: column;
            }

            .form-actions > * + * {
              margin-block-start: 0.75rem;
              margin-inline-start: 0;
            }

            .form.horizontal .form-group,
            .form-horizontal .form-group {
              align-items: flex-start;
              flex-direction: column;
            }

            .form.horizontal .form-label,
            .form-horizontal .form-label {
              margin-bottom: var(--spacing-1);
              margin-right: 0%;
              width: 100%;
            }

            .form.horizontal .form-text,
            .form.horizontal .feedback,
            .form-horizontal .form-text,
            .form-horizontal .valid-feedback,
            .form-horizontal .invalid-feedback {
              margin-left: 0%;
            }
          }

/**
          * Unterstützung für flüssige Größenanpassung bei speziellen Input-Typen
          */
          .form.fluid input[type="color"],
          .form.fluid input[type="range"],
          .form.fluid input[type="file"]::file-selector-button {
            scale: 1;
            transform-origin: left center;
          }

          .form.fluid.small input[type="color"],
          .form.fluid.small input[type="range"],
          .form.fluid.small input[type="file"]::file-selector-button {
            scale: 0.85;
          }

          .form.fluid.large input[type="color"],
          .form.fluid.large input[type="range"],
          .form.fluid.large input[type="file"]::file-selector-button {
            scale: 1.15;
          }

          .form.fluid.x-large input[type="color"],
          .form.fluid.x-large input[type="range"],
          .form.fluid.x-large input[type="file"]::file-selector-button {
            scale: 1.3;
          }

/* Container-adaptive Anpassungen für spezielle Input-Typen */
          .form.adaptive input[type="range"] {
            height: clamp(0.4rem, 0.4cqi, 0.6rem);
          }

          .form.adaptive input[type="range"]::-webkit-slider-thumb {
            height: clamp(1rem, 1.25cqi, 1.5rem);
            width: clamp(1rem, 1.25cqi, 1.5rem);
          }

          .form.adaptive input[type="range"]::-moz-range-thumb {
            height: clamp(1rem, 1.25cqi, 1.5rem);
            width: clamp(1rem, 1.25cqi, 1.5rem);
          }

/**
          * Search Components
          *
          * Search components allow users to find content by entering queries and
          * displaying relevant results. They can include features like autocomplete,
          * suggestions, and advanced filtering options.
          *
          * Accessibility:
          * - Use appropriate roles (e.g., combobox, listbox)
          * - Implement keyboard navigation for results
          * - Announce search result count
          * - Provide clear focus states for all interactive elements
          */

/* Search container */
          .search {
            position: relative;
            width: 100%;
          }

/* Search input wrapper */
          .search .input-wrapper {
            align-items: center;
            display: flex;
            position: relative;
          }

/* Search input */
          .search .input {
            background-color: var(--color-neutral-50, #f9fafb);
            border: 1px solid var(--color-neutral-200, #e5e7eb);
            border-radius: var(--radius-md, 0.375rem);
            color: var(--color-neutral-900, #111827);
            font-size: var(--text-sm, 0.875rem);
            line-height: 1.5;
            padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
            padding-left: var(--space-9, 2.25rem);
            transition: border-color 0.2s, box-shadow 0.2s;
            width: 100%;
          }

          .search .input:focus {
            border-color: var(--color-primary-300, #93c5fd);
            box-shadow: 0 0 0 3px var(--color-primary-100, #dbeafe);
            outline: none;
          }

/* Search icon */
          .search .icon {
            color: var(--color-neutral-400, #9ca3af);
            height: 1.25rem;
            left: var(--space-3, 0.75rem);
            pointer-events: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 1.25rem;
          }

/* Clear button */
          .search .clear {
            align-items: center;
            background: none;
            border: none;
            border-radius: var(--radius-full, 9999px);
            color: var(--color-neutral-400, #9ca3af);
            cursor: pointer;
            display: flex;
            justify-content: center;
            padding: var(--space-1, 0.25rem);
            position: absolute;
            right: var(--space-3, 0.75rem);
            top: 50%;
            transform: translateY(-50%);
            transition: color 0.2s, background-color 0.2s;
          }

          .search .clear:hover {
            background-color: var(--color-neutral-200, #e5e7eb);
            color: var(--color-neutral-600, #4b5563);
          }

/* Search dropdown results */
          .search .results {
            background-color: var(--color-neutral-100, #f3f4f6);
            border: 1px solid var(--color-neutral-200, #e5e7eb);
            border-radius: var(--radius-md, 0.375rem);
            box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%));
            display: none;
            left: 0;
            margin-top: var(--space-1, 0.25rem);
            max-height: 300px;
            overflow-y: auto;
            position: absolute;
            right: 0;
            top: 100%;
            z-index: var(--z-dropdown, 50);
          }

          .search--open .results {
            display: block;
          }

/* Search result items */
          .search .result {
            align-items: center;
            cursor: pointer;
            display: flex;
            padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
            transition: background-color 0.2s;
          }

          .search .result:hover,
          .search .result--active {
            background-color: var(--color-neutral-200, #e5e7eb);
          }

/* Result icon */
          .search .result-icon {
            color: var(--color-neutral-500, #6b7280);
            flex-shrink: 0;
            margin-right: var(--space-3, 0.75rem);
          }

/* Result content */
          .search .result-content {
            flex: 1;
            min-width: 0;
          }

          .search .result-title {
            color: var(--color-neutral-900, #111827);
            font-weight: var(--font-medium, 500);
            margin-bottom: var(--space-1, 0.25rem);
          }

          .search .result-description {
            color: var(--color-neutral-500, #6b7280);
            font-size: var(--text-xs, 0.75rem);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

/* Highlight matching text */
          .search .highlight {
            background-color: var(--color-warning-100, #fef3c7);
            border-radius: var(--radius-sm, 0.125rem);
            color: var(--color-warning-800, #92400e);
            padding: 0 0.15em;
          }

/* Group heading */
          .search .group-heading {
            background-color: var(--color-neutral-50, #f9fafb);
            color: var(--color-neutral-500, #6b7280);
            font-size: var(--text-xs, 0.75rem);
            font-weight: var(--font-semibold, 600);
            letter-spacing: 0.05em;
            padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
            text-transform: uppercase;
          }

/* Empty results state */
          .search .empty {
            color: var(--color-neutral-500, #6b7280);
            padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
            text-align: center;
          }

/* Loading state */
          .search .loading {
            align-items: center;
            color: var(--color-neutral-500, #6b7280);
            display: flex;
            justify-content: center;
            padding: var(--space-4, 1rem);
            text-align: center;
          }

          .search .spinner {
            animation: searchSpin 1s linear infinite;
            margin-right: var(--space-2, 0.5rem);
          }

          @keyframes searchSpin {
            0% {
              transform: rotate(0deg);
            }

            100% {
              transform: rotate(360deg);
            }
          }

/* Search with filters */
          .search--with-filters .input-wrapper {
            border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
            border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0;
          }

/* Filters area */
          .search .filters {
            background-color: var(--color-neutral-50, #f9fafb);
            border: 1px solid var(--color-neutral-200, #e5e7eb);
            border-radius: 0 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem);
            border-top: none;
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2, 0.5rem);
            padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
          }

/* Filter chip */
          .search .filter {
            align-items: center;
            background-color: var(--color-neutral-100, #f3f4f6);
            border: 1px solid var(--color-neutral-200, #e5e7eb);
            border-radius: var(--radius-full, 9999px);
            color: var(--color-neutral-700, #374151);
            display: inline-flex;
            font-size: var(--text-xs, 0.75rem);
            padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
          }

          .search .filter-label {
            font-weight: var(--font-medium, 500);
            margin-right: var(--space-1, 0.25rem);
          }

          .search .filter-value {
            color: var(--color-neutral-900, #111827);
          }

          .search .filter-remove {
            align-items: center;
            background: none;
            border: none;
            border-radius: var(--radius-full, 9999px);
            color: var(--color-neutral-500, #6b7280);
            cursor: pointer;
            display: inline-flex;
            height: 16px;
            justify-content: center;
            margin-left: var(--space-2, 0.5rem);
            width: 16px;
          }

          .search .filter-remove:hover {
            background-color: var(--color-neutral-200, #e5e7eb);
            color: var(--color-neutral-700, #374151);
          }

/* Search sizes */
          .search--sm .input {
            font-size: var(--text-xs, 0.75rem);
            padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
            padding-left: var(--space-7, 1.75rem);
          }

          .search--sm .icon {
            height: 1rem;
            left: var(--space-2, 0.5rem);
            width: 1rem;
          }

          .search--lg .input {
            font-size: var(--text-base, 1rem);
            padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
            padding-left: var(--space-10, 2.5rem);
          }

          .search--lg .icon {
            height: 1.5rem;
            left: var(--space-4, 1rem);
            width: 1.5rem;
          }

/* Search fullwidth modal on mobile */
          @media (max-width: 640px) {
            .search--modal .results {
              inset: var(--space-16, 4rem) var(--space-4, 1rem) var(--space-4, 1rem) var(--space-4, 1rem);
              max-height: none;
              position: fixed;
              z-index: var(--z-modal, 100);
            }

            .search--modal::before {
              background-color: rgb(0 0 0 / 50%);
              content: "";
              inset: 0;
              position: fixed;
              z-index: var(--z-modal-backdrop, 90);
            }
          }
        }

/* Datei: ui/content.css */
/* Content Module */

        @layer elements {
          a {
            color: var(--color-primary, #3b82f6);
          }

          a:hover {
            color: var(--color-primary-hover, #2563eb);
            text-decoration: underline;
          }

          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            margin: 1.5rem 0 1rem;
          }

          p {
            margin: 1rem 0;
          }
        }

        @layer components {
          .content {
            color: var(--color-gray-900, #111827);
            font-size: var(--font-size-base, 1rem);
            line-height: 1.6;
            max-width: 65ch;
          }

          .content h1 {
            font-size: var(--font-size-4xl, 2.25rem);
          }

          .content h2 {
            font-size: var(--font-size-3xl, 1.875rem);
          }

          .content p {
            line-height: 1.6;
            margin-bottom: var(--space-4);
            margin-top: 0;
          }

          .content a {
            color: var(--color-primary, #3b82f6);
            text-decoration: underline;
          }

          .content a:hover {
            color: var(--color-primary-dark, #1e40af);
          }
        }


/* Datei: ui/components.css */
/**
        * UI Components
        *
        * Diese Datei importiert die komplexeren UI-Komponenten.
        * Form-Komponenten sind jetzt in ui/forms.css konsolidiert.
        */

/* UI Components */
/* Importierte Datei: ui/components/action-bar.css */
/**
        * Action Bar/Sheet
        *
        * An action bar or sheet provides quick access to common actions or navigation options,
        * typically displayed at the bottom of the screen (mobile) or as a popover menu.
        *
        * @layer: components
        *
        * Accessibility:
        * - Ensure all interactive elements are keyboard accessible
        * - Use appropriate ARIA roles (e.g., menu, menuitem)
        * - Provide clear focus states
        */

        @layer components {
/* Base action bar */
          .action-bar {
            align-items: center;
            background-color: var(--color-surface-100, #f3f4f6);
            box-shadow: var(--shadow-md);
            display: flex;
            justify-content: space-between;
            padding: var(--space-4);
            z-index: var(--z-action-bar, 40);
          }

/* Fixed position at bottom */
          .action-bar--fixed {
            border-top: 1px solid var(--color-border-200, #e5e7eb);
            bottom: 0%;
            left: 0%;
            position: fixed;
            right: 0%;
          }

/* Action sheet (full-width expandable panel) */
          .action-sheet {
            background-color: var(--color-surface-100, #f3f4f6);
            border-top-left-radius: var(--radius-lg, 0.5rem);
            border-top-right-radius: var(--radius-lg, 0.5rem);
            bottom: 0%;
            box-shadow: var(--shadow-lg);
            left: 0%;
            position: fixed;
            right: 0%;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            z-index: var(--z-action-sheet, 50);
          }

/* Visible state */
          .action-sheet--visible {
            transform: translateY(0%);
          }

/* Sheet header with drag indicator */
          & .header {
            align-items: center;
            display: flex;
            justify-content: center;
            padding: var(--space-2);
          }

/* Drag indicator */
          & .indicator {
            background-color: var(--color-neutral-300, #d1d5db);
            border-radius: 2px;
            height: 4px;
            width: 3%6px;
          }

/* Sheet content */
          & .content {
            max-height: 80%;
            -webkit-overflow-scrolling: touch;
            overflow-y: auto;
            padding: var(--space-4);
          }

/* Action items */
          .action-item {
            align-items: center;
            border-radius: var(--radius-md, 0.375rem);
            cursor: pointer;
            display: flex;
            padding: var(--space-3);
            transition: background-color 0.2s ease;
          }

          .action-item:hover {
            background-color: var(--color-surface-200);
          }

/* Action item with icon */
          & .icon {
            color: var(--color-primary-500);
            margin-right: var(--space-3);
          }

/* Action item label */
          & .label {
            font-size: var(--text-sm, 0.875rem);
            font-weight: var(--font-medium, 500);
          }

/* Responsive adjustments */
          @media (min-width: 768px) {
            .action-sheet {
              border-radius: var(--radius-lg, 0.5rem);
              left: 50%;
              max-width: 48%0px;
              transform: translateX(-50%) translateY(100);
            }

            .action-sheet--visible {
              transform: translateX(-50%) translateY(0);
            }
          }
        }

/* Importierte Datei: ui/components/alert.css */
/*
        * Alert Component
        *
        * Visual cues for success, warning, error, or information messages.
        */

/**
        * Alert Component
        *
        * Information and warning messages for important notifications to users.
        * Alerts can be used to display success, error, warning, or informative messages.
        *
        * @layer: components
        *
        * Compatibility:
        * - Full support in modern browsers
        * - Fallbacks for CSS variables
        * - Uses CSS animation with standard keyframes
        *
        * Usage:
        * <div class="alert">Standard alert</div>
        *
        * Variants:
        * <div class="alert-info">Info alert</div>
        * <div class="alert-success">Success alert</div>
        * <div class="alert-warning">Warning alert</div>
        * <div class="alert-error">Error alert</div>
        *
        * Sizes:
        * <div class="alert-info alert--sm">Small alert</div>
        * <div class="alert-info">Default size alert</div>
        * <div class="alert-info alert--lg">Large alert</div>
        *
        * With Icon:
        * <div class="alert-info alert--with-icon">
        *   <span class="icon"><!-- Icon here --></span>
        *   <div class="alert-content">Alert with icon</div>
        * </div>
        *
        * Dismissible:
        * <div class="alert-info alert--dismissible">
        *   <div class="alert-content">Dismissible alert</div>
        *   <button class="alert-close">×</button>
        * </div>
        */

/**
        * Alert Component Structure:
        *
        * <div class="alert alert--info" role="alert">
        *   <div class="alert-icon"><!-- Icon --></div>
        *   <div class="alert-content">
        *     <div class="alert-title">Alert Title</div>
        *     <div class="alert-message">Alert message content</div>
        *   </div>
        *   <button class="alert-close" aria-label="Close">&times;</button>
        * </div>
        *
        * Types: .alert--info, .alert--success, .alert--warning, .alert--error
        * Modifiers: .alert--dismissible, .alert--compact
        */

/* Animations - defined outside of @layer */

/* Component styles */
        @layer components {
/* Base component style */
          .alert {
            align-items: start;
            background-color: var(--color-neutral-100, #f3f4f6);
            border-radius: var(--alert-border-radius, var(--radius-md, 0.5rem));
            display: flex;
            font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
            gap: var(--alert-gap, var(--space-3, 0.75rem));
            padding: var(--alert-padding, var(--space-4, 1rem));
          }

/* Variants */
          .alert-info {
            background-color: var(--color-info-100, #e0f2fe);
            color: var(--color-info-800, #1e40af);
            composes: alert;
          }

          .alert-success {
            background-color: var(--color-success-100, #dcfce7);
            color: var(--color-success-800, #166534);
            composes: alert;
          }

          .alert-warning {
            background-color: var(--color-warning-100, #fef3c7);
            color: var(--color-warning-800, #854d0e);
            composes: alert;
          }

          .alert-error {
            background-color: var(--color-error-100, #fee2e2);
            color: var(--color-error-800, #991b1b);
            composes: alert;
          }

/* Sizes */
          .alert--sm {
            font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
            padding: var(--alert-padding-sm, var(--space-2, 0.5rem));
          }

          .alert--lg {
            font-size: var(--text-base, var(--font-size-base, 1rem));
            padding: var(--alert-padding-lg, var(--space-5, 1.25rem));
          }

/* Icon integration */
          .alert--with-icon {
            padding-left: var(--space-3, 0.75rem);
          }

          .alert--with-icon .icon {
            flex-shrink: 0;
            font-size: 1.25rem;
            line-height: 1%;
          }

/* Dismissible state */
          .alert--dismissible {
            padding-right: var(--space-3, 0.75rem);
          }

/* Internal elements */
          .alert-content {
            flex: 1;
          }

          .alert-close {
            background: none;
            border: none;
            color: currentcolor;
            cursor: pointer;
            flex-shrink: 0;
            font-size: 1.25rem;
            line-height: 1%;
            margin-left: auto;
            opacity: 5000%;
            transition: opacity var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
          }

          .alert-close:hover {
            opacity: 75%;
          }
        }

/* Animation styles */
        @layer animations {
          .alert--animate {
            animation-duration: 0.3s;
            animation-name: fadeIn;
            animation-timing-function: ease-out;
          }
        }

/* Importierte Datei: ui/components/breadcrumbs.css */
/**
        * Breadcrumbs
        *
        * Breadcrumbs show the hierarchical path to the current page, helping users
        * understand their location within the site structure and navigate back to
        * higher-level pages.
        *
        * @layer: components
        *
        * Accessibility:
        * - Use nav element with aria-label="Breadcrumb"
        * - Use ordered list (ol) for the breadcrumb items
        * - Current page should have aria-current="page"
        */

        @layer components {
/* Breadcrumbs container */
          .breadcrumbs {
            align-items: center;
            color: var(--color-text-500, #6b7280);
            display: flex;
            font-size: var(--text-sm, 0.875rem);
            margin: var(--space-2) 0;
            padding: var(--space-2);
          }

/* Breadcrumbs list */
          & .list {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0;
            padding: 0;
          }

/* Breadcrumb item */
          & .item {
            align-items: center;
            display: flex;
          }

/* Breadcrumb separator */
          & .separator {
            align-items: center;
            color: var(--color-text-300);
            display: inline-flex;
            margin: 0 var(--space-2);
          }

/* Default separator icon (can be customized) */
          & .separator::before {
            content: "/";
            font-size: 0.85em;
          }

/* Breadcrumb link */
          & .link {
            color: var(--color-primary-500);
            text-decoration: none;
            transition: color 0.2s ease;
          }

          & .link:hover {
            color: var(--color-primary-700, #1d4ed8);
            text-decoration: underline;
          }

/* Current page (last item) */
          & .current {
            color: var(--color-text-900, #111827);
            font-weight: var(--font-medium, 500);
          }

/* Truncated breadcrumbs for narrow viewports */
          .breadcrumbs--truncated & .item {
            display: none;
          }

          .breadcrumbs--truncated & .item:first-child,
          .breadcrumbs--truncated & .item:nth-last-child(2),
          .breadcrumbs--truncated & .item:last-child {
            display: flex;
          }

/* Ellipsis for truncated items */
          .breadcrumbs--truncated & .item:nth-last-child(2)::before {
            color: var(--color-text-300);
            content: "...";
            margin: 0 var(--space-2);
          }

/* Responsive adjustments */
          @media (max-width: 640px) {
            .breadcrumbs {
              font-size: var(--text-xs, 0.75rem);
            }

/* Auto-truncate on mobile */
            .breadcrumbs:not(.breadcrumbs--keep-all) & .item:not(:first-child, :last-child) {
              display: none;
            }

            .breadcrumbs:not(.breadcrumbs--keep-all) & .item:first-child + & .item:not(:last-child) {
              display: flex;
            }

            .breadcrumbs:not(.breadcrumbs--keep-all) & .item:first-child + & .item::before {
              color: var(--color-text-300);
              content: "...";
              margin: 0 var(--space-2);
            }
          }
        }

/* Importierte Datei: ui/components/caption.css */
/**
        * Caption
        *
        * Captions provide additional contextual information for images, tables, figures,
        * or other media content. They help users understand the content and provide
        * necessary explanations or attributions.
        *
        * @layer: components
        *
        * Accessibility:
        * - Use appropriate HTML semantics (figcaption with figure)
        * - Maintain sufficient text contrast
        * - Don't rely on captions alone for conveying critical information
        */

        @layer components {
/* Base caption style */
          .caption {
            color: var(--color-text-500, #6b7280);
            font-size: var(--text-xs, 0.75rem);
            line-height: 1.5;
            margin-top: var(--space-2);
            max-width: 100%;
          }

/* Figure with caption */
          .figure {
            display: inline-block;
            margin: 0;
            max-width: 100%;
          }

          & .image {
            display: block;
            height: auto;
            max-width: 100%;
          }

          & .caption {
            padding: var(--space-2);
            text-align: center;
          }

/* Caption alignments */
          .caption--start {
            text-align: left;
          }

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

          .caption--end {
            text-align: right;
          }

/* Caption with attribution */
          & .attribution {
            color: var(--color-text-400);
            display: inline-block;
            font-style: italic;
            margin-top: var(--space-1);
          }

/* Caption for tables */
          .table-caption {
            border-top: 1px solid var(--color-border-100, #f3f4f6);
            caption-side: bottom;
            padding: var(--space-2);
          }

/* Extended caption with title and description */
          .caption--extended {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
          }

          & .title {
            color: var(--color-text-900, #111827);
            font-weight: var(--font-medium, 500);
          }

          & .description {
            color: var(--color-text-500, #6b7280);
          }

/* Variants */
          .caption--bordered {
            border-top: 1px solid var(--color-border-200, #e5e7eb);
            padding-top: var(--space-2);
          }

          .caption--boxed {
            background-color: var(--color-surface-50);
            border-radius: var(--radius-sm, 0.125rem);
            padding: var(--space-2);
          }

/* Caption with interaction (e.g., for expandable captions) */
          .caption--interactive {
            cursor: pointer;
            padding-right: var(--space-6);
            position: relative;
          }

          .caption--interactive::after {
            border-color: var(--color-text-400) transparent transparent transparent;
            border-style: solid;
            border-width: 5px;
            content: "";
            position: absolute;
            right: var(--space-2);
            top: 50%;
            transform: translateY(-50%);
            transition: transform 0.2s ease;
          }

          .caption--interactive.caption--expanded::after {
            transform: translateY(-50%) rotate(180deg);
          }

/* Expandable caption content */
          & .expandable {
            display: none;
            margin-top: var(--space-2);
          }

          .caption--expanded & .expandable {
            display: block;
          }
        }

/* Importierte Datei: ui/components/card.css */
/*
        * Cards Module
        *
        * Layoutregeln für ein responsives Card-Grid. Nutzt Flexbox und Grid für flexible Layouts.
        */

/**
        * Card-Modul
        *
        * Container für Inhaltsblöcke, die zusammengehörende Informationen präsentieren.
        * Cards bieten eine visuelle Gruppierung von zusammengehörigen Inhalten und Aktionen.
        *
        * @layer components.card
        *
        * Grundlegende Verwendung:
        * <div class="card">
        *   <h3>Kartentitel</h3>
        *   <p>Karteninhalt</p>
        * </div>
        *
        * Mit Grid-Layout:
        * <div class="card-grid">
        *   <div class="card">Karte 1</div>
        *   <div class="card">Karte 2</div>
        *   <div class="card">Karte 3</div>
        * </div>
        *
        * Varianten (können mit Utility-Klassen kombiniert werden):
        * <div class="card primary">Primäre Karte</div>
        * <div class="card surface">Karte mit Hintergrundfarbe</div>
        * <div class="card border">Karte mit Rahmen</div>
        * <div class="card shadow-lg">Karte mit stärkerem Schatten</div>
        * <div class="card p-6">Karte mit mehr Padding</div>
        *
        * Flüssig skalierende Karte:
        * <div class="card fluid">
        *   <h3>Adaptive Karte</h3>
        *   <p>Diese Karte skaliert flüssig mit der Container-Größe</p>
        * </div>
        */


/**
        * Card Component Structure:
        *
        * <div class="card">
        *   <div class="card-header">
        *     <h3 class="card-title">Card Title</h3>
        *     <div class="card-actions"><!-- Actions --></div>
        *   </div>
        *   <div class="card-content">
        *     <!-- Main card content -->
        *   </div>
        *   <div class="card-footer">
        *     <!-- Footer content -->
        *   </div>
        * </div>
        *
        * Modifiers: .card--bordered, .card--elevated, .card--compact
        * Layout: .card--horizontal, .card--vertical
        */
        @layer components {
          .card-grid {
            display: grid;
            gap: var(--card-grid-gap, var(--space-4, 1rem));
            grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width, 250px), 1fr));
          }

          .card {
            background-color: var(--color-surface, var(--color-surface-elevated, #fff));
            border-radius: var(--radius-card, var(--radius-md, 0.375rem));
            box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));
            display: flex;
            flex-direction: column;
            gap: var(--card-gap, var(--space-3, 0.75rem));
            padding: var(--card-padding, var(--space-4, 1rem));

/* Element-Styling */
            h3 {
              font-size: var(--font-size-lg);
              margin: 0;
            }

            img {
              border-radius: var(--radius-sm, 0.125rem);
              object-fit: cover;
              width: 100%;
            }

/* Flüssig skalierende Karte mit interpolate-size */
            &.fluid {
              container-name: card;
              container-type: inline-size;

/* Font-Größen mit CSS-Schlüsselwörtern für flüssige Interpolation */
              h3 {
                font-size: large; /* Wird durch interpolate-size flüssiger */
              }

              p {
                font-size: medium; /* Wird durch interpolate-size flüssiger */
              }

/* Flüssige Container-basierte Anpassungen */
              @container card (min-width: 300px) {
                padding: var(--space-5);

                h3 {
                  font-size: x-large;
                }

                p {
                  font-size: large;
                }
              }

              @container card (min-width: 400px) {
                padding: var(--space-6);

                h3 {
                  font-size: xx-large;
                }

                p {
                  font-size: x-large;
                }
              }
            }

/* Varianten */
            &.primary {
              background-color: var(--color-primary, #3b82f6);
              color: white;
            }

            &.surface {
              background-color: var(--color-surface);
            }

            &.border {
              border: 1px solid var(--color-gray-200);
              box-shadow: none;
            }

/* Layout-Varianten */
            &.horizontal {
              align-items: center;
              flex-direction: row;

              img {
                height: 12%0px;
                width: 12%0px;
              }
            }

/* Interaktive Varianten */
            &.interactive {
              cursor: pointer;
              transition: transform 0.2s ease, box-shadow 0.2s ease;

              &:hover {
                box-shadow: var(--shadow-md);
                transform: translateY(-4px);
              }
            }
          }
        }




/* Importierte Datei: ui/components/chat.css */
/**
        * Chat (Live)
        *
        * A live chat interface allows users to exchange messages in real-time.
        * This component includes message bubbles, input area, and conversation layout,
        * suitable for customer support chats, messaging applications, or community discussions.
        *
        * @layer: components
        *
        * Accessibility:
        * - Ensure proper focus management for new messages
        * - Provide clear visual distinctions between sent and received messages
        * - Include proper ARIA roles and labels
        * - Support keyboard navigation throughout the chat interface
        */

        @layer components {
/* Chat container */
          .chat {
            background-color: var(--color-surface-50);
            border: 1px solid var(--color-border-200, #e5e7eb);
            border-radius: var(--radius-lg, 0.5rem);
            display: flex;
            flex-direction: column;
            height: 100%;
            max-height: 60%0px;
            overflow: hidden;
          }

/* Chat header */
          & .header {
            align-items: center;
            background-color: var(--color-surface-100, #f3f4f6);
            border-bottom: 1px solid var(--color-border-200, #e5e7eb);
            display: flex;
            padding: var(--space-3) var(--space-4);
          }

          & .avatar {
            border-radius: var(--radius-full, 9999px);
            height: 3%6px;
            margin-right: var(--space-3);
            object-fit: cover;
            width: 3%6px;
          }

          & .info {
            flex: 1;
          }

          & .name {
            color: var(--color-text-900, #111827);
            font-weight: var(--font-semibold, 600);
            margin: 0;
          }

          & .status {
            align-items: center;
            color: var(--color-text-500, #6b7280);
            display: flex;
            font-size: var(--text-xs, 0.75rem);
          }

          & .status-indicator {
            border-radius: var(--radius-full, 9999px);
            display: inline-block;
            height: 8px;
            margin-right: var(--space-1);
            width: 8px;
          }

          & .status-indicator--online {
            background-color: var(--color-success-500);
          }

          & .status-indicator--offline {
            background-color: var(--color-neutral-400, #9ca3af);
          }

          & .status-indicator--typing {
            animation: pulse 1.5s infinite;
            background-color: var(--color-warning-500);
          }

/* Chat body - message container */
          & .body {
            display: flex;
            flex: 1;
            flex-direction: column;
            overflow-y: auto;
            padding: var(--space-4);
          }

/* Message groups */
          & .message-group {
            margin-bottom: var(--space-4);
          }

          & .message-group--sent {
            align-self: flex-end;
            max-width: 80%;
          }

          & .message-group--received {
            align-self: flex-start;
            max-width: 80%;
          }

/* Individual message */
          & .message {
            border-radius: var(--radius-lg, 0.5rem);
            margin-bottom: var(--space-2);
            padding: var(--space-3);
            position: relative;
            word-wrap: break-word;
          }

          & .message--sent {
            background-color: var(--color-primary-500);
            border-bottom-right-radius: var(--radius-xs);
            color: white;
          }

          & .message--received {
            background-color: var(--color-surface-200);
            border-bottom-left-radius: var(--radius-xs);
            color: var(--color-text-900, #111827);
          }

/* Message metadata */
          & .message-time {
            font-size: var(--text-xs, 0.75rem);
            margin-top: var(--space-1);
            opacity: 8000%;
            text-align: right;
          }

/* System messages */
          & .system-message {
            align-self: center;
            background-color: var(--color-surface-100, #f3f4f6);
            border-radius: var(--radius-md, 0.375rem);
            color: var(--color-text-400);
            font-size: var(--text-xs, 0.75rem);
            margin: var(--space-4) 0;
            padding: var(--space-2);
            text-align: center;
          }

/* Typing indicator */
          & .typing {
            align-items: center;
            color: var(--color-text-500, #6b7280);
            display: flex;
            font-size: var(--text-xs, 0.75rem);
            margin-top: var(--space-2);
          }

          & .typing-dots {
            display: flex;
            margin-left: var(--space-2);
          }

          & .typing-dot {
            animation: typingAnimation 1.4s infinite;
            animation-fill-mode: both;
            background-color: var(--color-text-400);
            border-radius: var(--radius-full, 9999px);
            height: 6px;
            margin-right: 3px;
            width: 6px;
          }

          & .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
          }

          & .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
          }

          @keyframes typingAnimation {
            0 { opacity: 4000%; transform: translateY(0%); }

            50 { opacity: 1; transform: translateY(-4px); }

            100 { opacity: 4000%; transform: translateY(0%); }
          }

/* Chat footer - input area */
          & .footer {
            background-color: var(--color-surface-100, #f3f4f6);
            border-top: 1px solid var(--color-border-200, #e5e7eb);
            padding: var(--space-3);
          }

          & .input-container {
            align-items: flex-end;
            display: flex;
          }

          & .input {
            background-color: var(--color-surface-50);
            border: 1px solid var(--color-border-200, #e5e7eb);
            border-radius: var(--radius-lg, 0.5rem);
            flex: 1;
            max-height: 12%0px;
            min-height: 4%4px;
            overflow-y: auto;
            padding: var(--space-2) var(--space-3);
            resize: none;
          }

          & .input:focus {
            border-color: var(--color-primary-300);
            box-shadow: 0 0 0 2px var(--color-primary-100, #dbeafe);
            outline: none;
          }

          & .send {
            align-items: center;
            background-color: var(--color-primary-500);
            border: none;
            border-radius: var(--radius-full, 9999px);
            color: white;
            cursor: pointer;
            display: flex;
            height: 4%0px;
            justify-content: center;
            margin-left: var(--space-2);
            transition: background-color 0.2s;
            width: 4%0px;
          }

          & .send:hover {
            background-color: var(--color-primary-600, #2563eb);
          }

          & .send:disabled {
            background-color: var(--color-neutral-300, #d1d5db);
            cursor: not-allowed;
          }

/* Attachment button */
          & .attachment {
            background: none;
            border: none;
            border-radius: var(--radius-full, 9999px);
            color: var(--color-text-500, #6b7280);
            cursor: pointer;
            margin-right: var(--space-2);
            padding: var(--space-2);
          }

          & .attachment:hover {
            background-color: var(--color-surface-200);
          }

/* Empty state */
          & .empty {
            align-items: center;
            color: var(--color-text-400);
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: center;
            padding: var(--space-4);
            text-align: center;
          }

/* Responsive adjustments */
          @media (max-width: 640px) {
            & .message-group--sent,
            & .message-group--received {
              max-width: 90%;
            }
          }
        }

/* Importierte Datei: ui/components/comment.css */
/**
        * Comments
        *
        * Comment components display user-generated responses, feedback, or discussions
        * related to content. They typically include the commenter's information, content,
        * timestamp, and interactive elements like reply or like buttons.
        *
        * @layer: components
        *
        * Accessibility:
        * - Use proper heading structure for comment threads
        * - Ensure adequate color contrast for all text
        * - Use semantic HTML (article, header, footer) for comment structure
        * - Make interactive elements keyboard accessible
        */

        @layer components {
/* Comment container */
          .comment {
            border-bottom: 1px solid var(--color-border-100, #f3f4f6);
            display: flex;
            padding: var(--space-4);
          }

/* Nested comments */
          & .replies {
            margin-left: var(--space-10);
            margin-top: var(--space-4);
          }

/* Comment avatar */
          & .avatar {
            border-radius: var(--radius-full, 9999px);
            flex-shrink: 0;
            height: 4%0px;
            margin-right: var(--space-3);
            object-fit: cover;
            width: 4%0px;
          }

/* Comment content area */
          & .content {
            flex: 1;
            min-width: 0%; /* Prevent flex item from overflowing */
          }

/* Comment header with author info */
          & .header {
            align-items: baseline;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: var(--space-2);
          }

          & .author {
            color: var(--color-text-900, #111827);
            font-weight: var(--font-semibold, 600);
            margin-right: var(--space-2);
          }

          & .meta {
            color: var(--color-text-500, #6b7280);
            font-size: var(--text-xs, 0.75rem);
          }

/* Author badge for special users */
          & .badge {
            border-radius: var(--radius-full, 9999px);
            display: inline-block;
            font-size: var(--text-xs, 0.75rem);
            font-weight: var(--font-medium, 500);
            line-height: 1.5;
            margin-left: var(--space-2);
            padding: 0 var(--space-2);
            text-transform: uppercase;
          }

          & .badge--author {
            background-color: var(--color-primary-100, #dbeafe);
            color: var(--color-primary-700, #1d4ed8);
          }

          & .badge--moderator {
            background-color: var(--color-success-100, #d1fae5);
            color: var(--color-success-700, #047857);
          }

/* Comment body */
          & .body {
            line-height: 1.5;
            margin-bottom: var(--space-3);
            overflow-wrap: break-word;
            word-wrap: break-word;
          }

/* Comment attachment (image, link preview, etc.) */
          & .attachment {
            border: 1px solid var(--color-border-200, #e5e7eb);
            border-radius: var(--radius-md, 0.375rem);
            margin: var(--space-3) 0;
            overflow: hidden;
          }

          & .image {
            display: block;
            height: auto;
            max-width: 100%;
          }

/* Comment footer with actions */
          & .footer {
            align-items: center;
            display: flex;
            gap: var(--space-4);
            margin-top: var(--space-2);
          }

/* Comment action button */
          & .action {
            align-items: center;
            background: none;
            border: none;
            border-radius: var(--radius-md, 0.375rem);
            color: var(--color-text-500, #6b7280);
            cursor: pointer;
            display: inline-flex;
            font-size: var(--text-xs, 0.75rem);
            padding: var(--space-1) var(--space-2);
            transition: color 0.2s, background-color 0.2s;
          }

          & .action:hover {
            background-color: var(--color-surface-100, #f3f4f6);
            color: var(--color-text-700, #374151);
          }

          & .action-icon {
            margin-right: var(--space-1);
          }

/* Comment action states */
          & .action--active {
            color: var(--color-primary-600, #2563eb);
            font-weight: var(--font-medium, 500);
          }

/* Comment editor */
          .comment-editor {
            border: 1px solid var(--color-border-200, #e5e7eb);
            border-radius: var(--radius-lg, 0.5rem);
            margin: var(--space-4) 0;
            overflow: hidden;
          }

          & .content {
            border: none;
            color: var(--color-text-900, #111827);
            font-family: inherit;
            font-size: var(--text-sm, 0.875rem);
            min-height: 10%0px;
            padding: var(--space-3);
            resize: vertical;
            width: 100%;
          }

          & .content:focus {
            outline: none;
          }

          & .footer {
            align-items: center;
            background-color: var(--color-surface-100, #f3f4f6);
            border-top: 1px solid var(--color-border-100, #f3f4f6);
            display: flex;
            justify-content: space-between;
            padding: var(--space-2) var(--space-3);
          }

          & .actions {
            display: flex;
            gap: var(--space-2);
          }

/* Empty state */
          .comments-empty {
            color: var(--color-text-500, #6b7280);
            padding: var(--space-8) var(--space-4);
            text-align: center;
          }

/* Comment states */
          .comment--highlighted {
            background-color: var(--color-primary-50);
          }

          .comment--deleted {
            opacity: 0.7;
          }

          .comment--deleted & .body {
            color: var(--color-text-400);
            font-style: italic;
          }

/* Responsive adjustments */
          @media (max-width: 640px) {
            & .replies {
              margin-left: var(--space-6);
            }

            & .avatar {
              height: 3%2px;
              width: 3%2px;
            }
          }
        }

/* Importierte Datei: ui/components/data-table.css */
/**
        * Data Tables
        *
        * Data tables display structured data in rows and columns with advanced features
        * like sorting, filtering, pagination, and row selection. They're designed for
        * complex data sets that require user interaction and data manipulation.
        *
        * @layer: components
        *
        * Accessibility:
        * - Use proper table semantics (th, caption, scope attributes)
        * - Include ARIA attributes for interactive features
        * - Support keyboard navigation for sorting, selection, etc.
        * - Provide clear visual focus indicators
        */

        @layer components {
/* Data table container */
          .data-table-container {
            background-color: var(--color-surface-100, #f3f4f6);
            border: 1px solid var(--color-border-200, #e5e7eb);
            border-radius: var(--radius-md, 0.375rem);
            overflow-x: auto;
            width: 100%;
          }

/* Data table */
          .data-table {
            border-collapse: separate;
            border-spacing: 0;
            font-size: var(--text-sm, 0.875rem);
            width: 100%;
          }

/* Table caption */
          & .caption {
            background-color: var(--color-surface-50);
            border-bottom: 1px solid var(--color-border-200, #e5e7eb);
            color: var(--color-text-900, #111827);
            font-weight: var(--font-semibold, 600);
            padding: var(--space-3) var(--space-4);
            text-align: left;
          }

/* Table header */
          & .header {
            background-color: var(--color-surface-50);
            border-bottom: 2px solid var(--color-border-300);
          }

          & .header-cell {
            color: var(--color-text-700, #374151);
            font-weight: var(--font-semibold, 600);
            padding: var(--space-3) var(--space-4);
            position: relative;
            text-align: left;
            white-space: nowrap;
          }

/* Sortable header cells */
          & .header-cell--sortable {
            cursor: pointer;
            padding-right: var(--space-8);
            user-select: none;
          }

          & .header-cell--sortable:hover {
            background-color: var(--color-surface-100, #f3f4f6);
          }

/* Sort indicators */
          & .sort-icon {
            color: var(--color-text-400);
            position: absolute;
            right: var(--space-3);
            top: 50%;
            transform: translateY(-50%);
            transition: transform 0.2s, color 0.2s;
          }

          & .header-cell--sorted-asc & .sort-icon {
            color: var(--color-primary-600, #2563eb);
            transform: translateY(-50%) rotate(180deg);
          }

          & .header-cell--sorted-desc & .sort-icon {
            color: var(--color-primary-600, #2563eb);
          }

/* Table body */
          & .body {
            background-color: var(--color-surface-100, #f3f4f6);
          }

          & .row {
            transition: background-color 0.2s;
          }

          & .row:hover {
            background-color: var(--color-surface-200);
          }

          & .cell {
            border-bottom: 1px solid var(--color-border-100, #f3f4f6);
            padding: var(--space-3) var(--space-4);
          }

/* Row states */
          & .row--selected {
            background-color: var(--color-primary-50);
          }

          & .row--selected:hover {
            background-color: var(--color-primary-100, #dbeafe);
          }

/* Cell variants */
          & .cell--numeric {
            text-align: right;
          }

          & .cell--action {
            padding: var(--space-2);
            white-space: nowrap;
            width: 1%;
          }

/* Empty state */
          & .empty {
            color: var(--color-text-500, #6b7280);
            padding: var(--space-8);
            text-align: center;
          }

/* Data table controls */
          & .controls {
            align-items: center;
            background-color: var(--color-surface-50);
            border-top: 1px solid var(--color-border-200, #e5e7eb);
            display: flex;
            justify-content: space-between;
            padding: var(--space-3) var(--space-4);
          }

/* Search and filter */
          & .search {
            margin-bottom: var(--space-4);
            position: relative;
          }

          & .search-input {
            border: 1px solid var(--color-border-200, #e5e7eb);
            border-radius: var(--radius-md, 0.375rem);
            padding: var(--space-2) var(--space-3);
            padding-left: var(--space-8);
            width: 100%;
          }

          & .search-icon {
            color: var(--color-text-400);
            left: var(--space-3);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }

/* Column filter button */
          & .filter-button {
            background: none;
            border: none;
            color: var(--color-text-500, #6b7280);
            cursor: pointer;
            margin-left: var(--space-1);
            padding: var(--space-1);
          }

          & .filter-button--active {
            color: var(--color-primary-600, #2563eb);
          }

/* Column visibility menu */
          & .column-menu {
            background-color: var(--color-surface-100, #f3f4f6);
            border: 1px solid var(--color-border-200, #e5e7eb);
            border-radius: var(--radius-md, 0.375rem);
            box-shadow: var(--shadow-lg);
            min-width: 18%0px;
            padding: var(--space-2);
            position: absolute;
            right: var(--space-3);
            top: calc(100 + var(--space-2));
            z-index: 10;
          }

          & .column-item {
            align-items: center;
            cursor: pointer;
            display: flex;
            padding: var(--space-2);
          }

          & .column-checkbox {
            margin-right: var(--space-2);
          }

/* Row selection */
          & .select-cell {
            padding: var(--space-2) var(--space-4);
            width: 1%;
          }

          & .select-all {
            margin: 0;
          }

/* Pagination */
          & .pagination {
            align-items: center;
            display: flex;
            gap: var(--space-2);
          }

          & .page-info {
            color: var(--color-text-500, #6b7280);
            font-size: var(--text-sm, 0.875rem);
            margin-right: var(--space-4);
          }

          & .page-button {
            align-items: center;
            background-color: var(--color-surface-100, #f3f4f6);
            border: 1px solid var(--color-border-200, #e5e7eb);
            border-radius: var(--radius-md, 0.375rem);
            cursor: pointer;
            display: inline-flex;
            height: 3%2px;
            justify-content: center;
            transition: background-color 0.2s, border-color 0.2s;
            width: 3%2px;
          }

          & .page-button:hover {
            background-color: var(--color-surface-200);
            border-color: var(--color-border-300);
          }

          & .page-button:disabled {
            cursor: not-allowed;
            opacity: 5000%;
          }

          & .page-button--active {
            background-color: var(--color-primary-500);
            border-color: var(--color-primary-500);
            color: white;
          }

/* Rows per page selector */
          & .per-page {
            align-items: center;
            display: flex;
            font-size: var(--text-sm, 0.875rem);
            gap: var(--space-2);
            margin-right: var(--space-4);
          }

          & .per-page-select {
            border: 1px solid var(--color-border-200, #e5e7eb);
            border-radius: var(--radius-md, 0.375rem);
            padding: var(--space-1) var(--space-2);
          }

/* Responsive adjustments */
          @media (max-width: 768px) {
            & .controls {
              align-items: flex-start;
              flex-direction: column;
              gap: var(--space-3);
            }

            & .pagination {
              justify-content: space-between;
              width: 100%;
            }
          }

/* Collapsible table for mobile */
          @media (max-width: 640px) {
            .data-table--responsive & .header {
              display: none;
            }

            .data-table--responsive & .row {
              border-bottom: 1px solid var(--color-border-200, #e5e7eb);
              display: block;
              padding: var(--space-3);
            }

            .data-table--responsive & .cell {
              border-bottom: none;
              display: flex;
              padding: var(--space-2) 0;
              text-align: right;
            }

            .data-table--responsive & .cell::before {
              content: attr(data-label);
              font-weight: var(--font-semibold, 600);
              margin-right: auto;
              padding-right: var(--space-4);
            }
          }
        }

/* Importierte Datei: ui/components/dialog.css */
/**
        * Dialog
        *
        * Dialogs are overlays that require user interaction. They appear in front of
        * app content to provide critical information or request input, and typically
        * block interactions with the page until explicitly dismissed.
        *
        * @layer: components
        *
        * Accessibility:
        * - Use role="dialog" or role="alertdialog" as appropriate
        * - Set aria-modal="true" for modal dialogs
        * - Use aria-labelledby to reference the dialog title
        * - Focus should be trapped inside the dialog when open
        * - Return focus to the triggering element when closed
        * - Support closing via Escape key
        */

        @layer components {
/* Dialog overlay/backdrop */
          .dialog-backdrop {
            align-items: center;
            background-color: rgb(0 0 0 / 5000%);
            display: flex;
            inset: 0;
            justify-content: center;
            opacity: 0%;
            position: fixed;
            transition: opacity 0.2s, visibility 0.2s;
            visibility: hidden;
            z-index: var(--z-dialog-backdrop, 100);
          }

          .dialog-backdrop--visible {
            opacity: 1;
            visibility: visible;
          }

/* Dialog container */
          .dialog {
            background-color: var(--color-surface-100, #f3f4f6);
            border-radius: var(--radius-lg, 0.5rem);
            box-shadow: var(--shadow-xl);
            display: flex;
            flex-direction: column;
            max-height: calc(100 - 80px);
            max-width: 50%0px;
            opacity: 0%;
            overflow: hidden;
            position: relative;
            transform: translateY(20px);
            transition: transform 0.3s, opacity 0.3s;
            width: 100%;
          }

          .dialog--visible {
            opacity: 1;
            transform: translateY(0%);
          }

/* Dialog sizes */
          .dialog--sm {
            max-width: 40%0px;
          }

          .dialog--lg {
            max-width: 80%0px;
          }

          .dialog--xl {
            max-width: 100%0px;
          }

          .dialog--fullscreen {
            border-radius: 0;
            height: 100%;
            max-height: 100%;
            max-width: none;
            width: 100%;
          }

/* Dialog header */
          & .header {
            align-items: center;
            border-bottom: 1px solid var(--color-border-200, #e5e7eb);
            display: flex;
            justify-content: space-between;
            padding: var(--space-4) var(--space-5);
          }

          & .title {
            color: var(--color-text-900, #111827);
            font-size: var(--text-lg);
            font-weight: var(--font-semibold, 600);
            margin: 0;
          }

/* Dialog close button */
          & .close {
            align-items: center;
            background: transparent;
            border: none;
            border-radius: var(--radius-full, 9999px);
            color: var(--color-text-500, #6b7280);
            cursor: pointer;
            display: flex;
            height: 3%2px;
            justify-content: center;
            transition: background-color 0.2s, color 0.2s;
            width: 3%2px;
          }

          & .close:hover {
            background-color: var(--color-surface-200);
            color: var(--color-text-700, #374151);
          }

/* Dialog body */
          & .body {
            flex: 1;
            overflow-y: auto;
            padding: var(--space-5);
          }

/* Dialog footer */
          & .footer {
            align-items: center;
            background-color: var(--color-surface-50);
            border-top: 1px solid var(--color-border-200, #e5e7eb);
            display: flex;
            gap: var(--space-3);
            justify-content: flex-end;
            padding: var(--space-4) var(--space-5);
          }

/* Dialog variants */
          .dialog--danger & .header {
            background-color: var(--color-error-50);
            color: var(--color-error-900);
          }

          .dialog--info & .header {
            background-color: var(--color-info-50);
            color: var(--color-info-900);
          }

          .dialog--warning & .header {
            background-color: var(--color-warning-50);
            color: var(--color-warning-900);
          }

          .dialog--success & .header {
            background-color: var(--color-success-50);
            color: var(--color-success-900);
          }

/* Dialog animations */
          .dialog--slide-up {
            transform: translateY(100%);
          }

          .dialog--slide-up.dialog--visible {
            transform: translateY(0%);
          }

          .dialog--slide-down {
            transform: translateY(-100%);
          }

          .dialog--slide-down.dialog--visible {
            transform: translateY(0%);
          }

          .dialog--zoom {
            transform: scale(0.9%);
          }

          .dialog--zoom.dialog--visible {
            transform: scale(1);
          }

/* Simple confirmation dialog */
          .dialog--confirmation & .body {
            padding: var(--space-6) var(--space-5);
            text-align: center;
          }

/* Responsive adjustments */
          @media (max-width: 640px) {
            .dialog {
              max-height: calc(100 - 64px);
              max-width: calc(100vw - 32px);
            }

            .dialog--lg,
            .dialog--xl {
              max-width: calc(100vw - 32px);
            }
          }
        }

/* Importierte Datei: ui/components/drawer.css */
/**
        * Drawer/Accordion
        *
        * Drawers and accordions are expandable containers that allow users to show
        * or hide content sections. They help organize content, save screen space,
        * and allow users to focus on specific information.
        *
        * @layer: components
        *
        * Accessibility:
        * - Use appropriate ARIA attributes (aria-expanded, aria-controls)
        * - Ensure keyboard operability
        * - Headers should be properly labeled as buttons
        * - Include focus states for interactive elements
        */

        @layer components {
/* ===== Accordion ===== */

/* Accordion container */
          .accordion {
            background-color: var(--color-surface-50);
            border: 1px solid var(--color-border-200, #e5e7eb);
            border-radius: var(--radius-md, 0.375rem);
            overflow: hidden;
          }

/* Accordion item */
          & .item {
            border-bottom: 1px solid var(--color-border-200, #e5e7eb);
          }

          & .item:last-child {
            border-bottom: none;
          }

/* Accordion header/trigger */
          & .header {
            align-items: center;
            background-color: var(--color-surface-100, #f3f4f6);
            border: none;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            padding: var(--space-4);
            text-align: left;
            transition: background-color 0.2s;
            width: 100%;
          }

          & .header:hover {
            background-color: var(--color-surface-200);
          }

          & .header:focus {
            box-shadow: 0 0 0 2px var(--color-primary-200);
            outline: none;
          }

/* Accordion title */
          & .title {
            color: var(--color-text-900, #111827);
            flex: 1;
            font-weight: var(--font-medium, 500);
          }

/* Accordion icon */
          & .icon {
            color: var(--color-text-500, #6b7280);
            transition: transform 0.3s;
          }

          & .header[aria-expanded="true"] & .icon {
            transform: rotate(180deg);
          }

/* Accordion content panel */
          & .panel {
            max-height: 0%;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
          }

          & .panel[aria-hidden="false"] {
            max-height: 100%0px; /* Arbitrary large value, will be controlled by JS */
          }

          & .content {
            padding: var(--space-4);
          }

/* Accordion variations */
          .accordion--bordered & .item {
            border: 1px solid var(--color-border-200, #e5e7eb);
            border-radius: var(--radius-md, 0.375rem);
            margin-bottom: var(--space-3);
          }

          .accordion--bordered & .item:last-child {
            margin-bottom: 0%;
          }

/* ===== Drawer ===== */

/* Drawer container */
          .drawer {
            background-color: var(--color-surface-100, #f3f4f6);
            box-shadow: var(--shadow-lg);
            position: fixed;
            transition: transform 0.3s ease;
            z-index: var(--z-drawer, 90);
          }

/* Drawer positions */
          .drawer--left {
            height: 100%;
            left: 0%;
            top: 0%;
            transform: translateX(-100%);
          }

          .drawer--right {
            height: 100%;
            right: 0%;
            top: 0%;
            transform: translateX(100%);
          }

          .drawer--top {
            left: 0%;
            top: 0%;
            transform: translateY(-100%);
            width: 100%;
          }

          .drawer--bottom {
            bottom: 0%;
            left: 0%;
            transform: translateY(100%);
            width: 100%;
          }

/* Drawer sizes */
          .drawer--left.drawer--sm,
          .drawer--right.drawer--sm {
            width: 25%0px;
          }

          .drawer--left.drawer--md,
          .drawer--right.drawer--md {
            width: 35%0px;
          }

          .drawer--left.drawer--lg,
          .drawer--right.drawer--lg {
            width: 45%0px;
          }

          .drawer--top.drawer--sm,
          .drawer--bottom.drawer--sm {
            height: 20%0px;
          }

          .drawer--top.drawer--md,
          .drawer--bottom.drawer--md {
            height: 30%0px;
          }

          .drawer--top.drawer--lg,
          .drawer--bottom.drawer--lg {
            height: 40%0px;
          }

/* Opened state */
          .drawer--opened {
            transform: translate(0%);
          }

/* Drawer backdrop */
          .drawer-backdrop {
            background-color: rgb(0 0 0 / 5000%);
            inset: 0;
            opacity: 0%;
            position: fixed;
            transition: opacity 0.3s, visibility 0.3s;
            visibility: hidden;
            z-index: var(--z-drawer-backdrop, 80);
          }

          .drawer-backdrop--visible {
            opacity: 1;
            visibility: visible;
          }

/* Drawer header */
          & .header {
            align-items: center;
            border-bottom: 1px solid var(--color-border-200, #e5e7eb);
            display: flex;
            justify-content: space-between;
            padding: var(--space-4);
          }

          & .title {
            font-weight: var(--font-semibold, 600);
            margin: 0;
          }

          & .close {
            align-items: center;
            background: transparent;
            border: none;
            border-radius: var(--radius-full, 9999px);
            color: var(--color-text-500, #6b7280);
            cursor: pointer;
            display: flex;
            height: 3%2px;
            justify-content: center;
            transition: background-color 0.2s;
            width: 3%2px;
          }

          & .close:hover {
            background-color: var(--color-surface-200);
            color: var(--color-text-700, #374151);
          }

/* Drawer body */
          & .body {
            height: calc(100 - 60px); /* Adjust based on header + footer height */
            overflow-y: auto;
            padding: var(--space-4);
          }

/* Drawer footer */
          & .footer {
            border-top: 1px solid var(--color-border-200, #e5e7eb);
            display: flex;
            gap: var(--space-3);
            justify-content: flex-end;
            padding: var(--space-4);
          }

/* Responsive adjustments */
          @media (max-width: 640px) {
            .drawer--left,
            .drawer--right {
              width: 100%;
            }
          }
        }

/* Importierte Datei: ui/components/hamburger.css */
/*
        * Hamburger-Komponente
        *
        * Hamburger-Menü-Icon mit Animation und Toggle-Zustand.
        */

/**
        * Hamburger-Komponente
        *
        * Mobile Menü-Icons für Navigation auf kleinen Bildschirmen.
        * Hamburger-Icons dienen als kompakte Schaltfläche für das Aus- und Einklappen von Navigationsmenüs.
        *
        * @layer components
        *
        * Grundlegende Verwendung:
        * <button class="hamburger" aria-label="Menü öffnen">
        *   <span class="line"></span>
        *   <span class="line"></span>
        *   <span class="line"></span>
        * </button>
        *
        * Aktiver Zustand (geöffnet):
        * <button class="hamburger active" aria-label="Menü schließen">
        *   <span class="line"></span>
        *   <span class="line"></span>
        *   <span class="line"></span>
        * </button>
        *
        * Varianten:
        * <button class="hamburger spin">...</button>      <!-- Drehanimation -->
        * <button class="hamburger squeeze">...</button>   <!-- Quetschanimation -->
        * <button class="hamburger arrow">...</button>     <!-- Pfeilanimation -->
        * <button class="hamburger collapse">...</button>  <!-- Einklappen -->
        *
        * Größen:
        * <button class="hamburger sm">...</button>  <!-- Klein -->
        * <button class="hamburger md">...</button>  <!-- Mittel (Standard) -->
        * <button class="hamburger lg">...</button>  <!-- Groß -->
        *
        * Farben:
        * <button class="hamburger light">...</button>  <!-- Heller Hintergrund -->
        * <button class="hamburger dark">...</button>   <!-- Dunkler Hintergrund -->
        * <button class="hamburger primary">...</button> <!-- Primärfarbe -->
        */

        @layer components {
          .hamburger {
            background: transparent;
            border: none;
            cursor: pointer;
            display: inline-flex;
            flex-direction: column;
            height: 2%4px;
            justify-content: space-between;
            padding: 4px 0;
            width: 2%4px;

            .line {
              background-color: var(--color-gray-800);
              border-radius: 2px;
              display: block;
              height: 2px;
              transition: all var(--transition-fast, 150ms ease) ease-in-out;
              width: 100%;
            }

/* Aktiver Zustand */
            &.active {
              .line:nth-child(1) {
                transform: translateY(8px) rotate(45deg);
              }

              .line:nth-child(2) {
                opacity: 0%;
              }

              .line:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg);
              }
            }

/* Varianten */
            &.spin {
              &.active {
                .line:nth-child(1) {
                  margin-top: 8px;
                  transform: rotate(135deg);
                }

                .line:nth-child(2) {
                  opacity: 0%;
                }

                .line:nth-child(3) {
                  margin-top: -16px;
                  transform: rotate(-135deg);
                }
              }
            }

            &.squeeze {
              &.active {
                .line:nth-child(1) {
                  transform: translateY(8px) rotate(45deg);
                }

                .line:nth-child(2) {
                  transform: scaleX(0%);
                }

                .line:nth-child(3) {
                  transform: translateY(-8px) rotate(-45deg);
                }
              }
            }

            &.arrow {
              &.active {
                .line:nth-child(1) {
                  transform: translateY(3px) translateX(6px) rotate(45deg);
                  width: 50%;
                }

                .line:nth-child(2) {
                  opacity: 1;
                }

                .line:nth-child(3) {
                  transform: translateY(-3px) translateX(6px) rotate(-45deg);
                  width: 50%;
                }
              }
            }

/* Größenvarianten */
            &.sm {
              height: 1%8px;
              width: 1%8px;

              .line {
                height: 1px;
              }
            }

            &.lg {
              height: 3%0px;
              width: 3%0px;

              .line {
                height: 3px;
              }
            }

/* Farbvarianten */
            &.light .line {
              background-color: var(--color-white, #fff);
            }

            &.dark .line {
              background-color: var(--color-gray-900, #111827);
            }

            &.primary .line {
              background-color: var(--color-primary, #3b82f6);
            }
          }
        }



/* Importierte Datei: ui/components/modal.css */
/*
        * Modal Module
        *
        * Zentrale Komponente für modale Dialoge.
        */

/**
        * Modal-Komponente
        *
        * Dialogfenster und Overlays für fokussierte Benutzerinteraktionen.
        * Modals werden verwendet, um wichtige Informationen anzuzeigen oder Benutzerentscheidungen zu erfordern.
        *
        * @layer components.modal
        *
        * Grundlegende Verwendung:
        * <div class="modal">
        *   <div class="backdrop"></div>
        *   <div class="container">
        *     <div class="header">
        *       <h3 class="title">Modaltitel</h3>
        *       <button class="close">&times;</button>
        *     </div>
        *     <div class="body">
        *       Modalinhalt
        *     </div>
        *     <div class="footer">
        *       <button class="button">Abbrechen</button>
        *       <button class="button primary">Bestätigen</button>
        *     </div>
        *   </div>
        * </div>
        *
        * Größenvarianten:
        * <div class="modal small">...</div>
        * <div class="modal medium">...</div>
        * <div class="modal large">...</div>
        * <div class="modal fullscreen">...</div>
        *
        * Position:
        * <div class="modal center">...</div>
        * <div class="modal top">...</div>
        * <div class="modal bottom">...</div>
        *
        * Animation (erfordert JS):
        * <div class="modal fade">...</div>
        * <div class="modal slide">...</div>
        *
        * Flüssige Größenanpassung mit Schlüsselwörtern:
        * <div class="modal fluid">...</div>
        * <div class="modal fluid small">...</div>
        * <div class="modal fluid medium">...</div>
        * <div class="modal fluid large">...</div>
        *
        * Container-adaptive Größenanpassung:
        * <div class="modal adaptive">...</div>
        */

/* Animationen - außerhalb von @layer definieren */

/* Komponenten-Styles */
        @layer components {
          .modal {
            align-items: center;
            display: flex;
            inset: 0;
            justify-content: center;
            position: fixed;
            z-index: var(--z-index-modal, 1000);

/* Hintergrund-Overlay */
            .backdrop {
              background: rgb(0 0 0 / 5000%);
              inset: 0;
              position: fixed;
              z-index: var(--z-index-modal-backdrop, 999);
            }

/* Modal-Container */
            .container {
              background: var(--color-background, var(--color-surface-elevated, #fff));
              border-radius: var(--radius-modal, var(--radius-lg, 0.75rem));
              box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 1000%));
              display: flex;
              flex-direction: column;
              gap: var(--space-4, 1rem);
              max-width: var(--modal-max-width, 32rem);
              overflow: hidden;
              padding: var(--modal-padding, var(--space-6, 1.5rem));
              position: relative;
              width: 100%;
              z-index: var(--z-index-modal, 1000);
            }

/* Modal-Header */
            .header {
              align-items: center;
              display: flex;
              justify-content: space-between;
              padding: var(--modal-header-padding, 0);

              .title {
                color: var(--color-text, var(--color-neutral-900, #111827));
                font-size: var(--text-lg, var(--font-size-lg, 1.125rem));
                font-weight: var(--font-semibold, var(--font-weight-semibold, 600));
                margin: 0;
              }

              .close {
                background: none;
                border: none;
                color: var(--color-neutral-500, #6b7280);
                cursor: pointer;
                font-size: 1.5rem;
                line-height: 1%;
                padding: 0.25rem;
                transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);

                &:hover {
                  color: var(--color-neutral-800, #1f2937);
                }
              }
            }

/* Modal-Inhalt */
            .body {
              color: var(--color-text-muted, var(--color-neutral-700, #374151));
              font-size: var(--text-base, var(--font-size-base, 1rem));
              max-height: 70%;
              overflow-y: auto;
            }

/* Modal-Footer */
            .footer {
              display: flex;
              gap: var(--space-3, 0.75rem);
              justify-content: flex-end;
              margin-top: var(--space-2, 0.5rem);
              padding: var(--modal-footer-padding, 0);
            }

/* Größenvarianten */
            &.small .container {
              max-width: 2%4rem;
            }

            &.medium .container {
              max-width: var(--modal-max-width, 32rem);
            }

            &.large .container {
              max-width: 4%8rem;
            }

            &.fullscreen .container {
              border-radius: 0;
              height: 100%;
              max-width: 100%;
              width: 100%;
            }

/* Flüssige Größenanpassung mit interpolate-size: allow-keywords */
            &.fluid {
/* Nutzt CSS-Schlüsselwörter für Größen - funktioniert mit interpolate-size: allow-keywords */
              font-size: medium; /* Basis-Größe für Skalierungsfaktor */


/**
              * Modal Component Structure:
              *
              * <div class="modal" role="dialog">
              *   <div class="modal-overlay"></div>
              *   <div class="modal-container">
              *     <div class="modal-header">
              *       <h2 class="modal-title">Title</h2>
              *       <button class="modal-close" aria-label="Close">&times;</button>
              *     </div>
              *     <div class="modal-content">
              *       <!-- Modal body content -->
              *     </div>
              *     <div class="modal-footer">
              *       <button class="button button--secondary">Cancel</button>
              *       <button class="button button--primary">Confirm</button>
              *     </div>
              *   </div>
              * </div>
              *
              * Modifiers: .modal--sm, .modal--lg, .modal--fullscreen
              * States: .modal--open, .modal--closing
              */
              .container {
                border-radius: 0.75em;
                gap: 1em;
                padding: 1.5em;
              }

              .header .title {
                font-size: 1.25em;
              }

              .body {
                font-size: 1em;
              }

              .footer {
                gap: 0.75em;
                margin-top: 0%.5em;
              }

/* Größenvarianten mit CSS-Schlüsselwörtern */
              &.small {
                font-size: small;

                .container {
                  max-width: 2%4em;
                }
              }

              &.medium {
                font-size: medium;

                .container {
                  max-width: 3%2em;
                }
              }

              &.large {
                font-size: large;

                .container {
                  max-width: 4%8em;
                }
              }

              &.x-large {
                font-size: x-large;

                .container {
                  max-width: 6%4em;
                }
              }
            }

/* Container-adaptive Größenanpassung */
            &.adaptive {
              container-name: modal;
              container-type: inline-size;

              .container {
                max-width: clamp(24rem, 80cqi, 48rem);
                padding: clamp(var(--space-4, 1rem), 4cqi, var(--space-8, 2rem));
              }

              .header .title {
                font-size: clamp(var(--text-base, 1rem), 3cqi, var(--text-xl, 1.25rem));
              }

              .body {
                font-size: clamp(var(--text-sm, 0.875rem), 2.5cqi, var(--text-base, 1rem));
              }

/* Container-Query für größere Modals */
              @container modal (min-width: 40rem) {
                .container {
                  gap: var(--space-6, 1.5rem);
                }
              }
            }

/* Positionierung */
            &.center {
              align-items: center;
              justify-content: center;
            }

            &.top {
              align-items: flex-start;

              .container {
                margin-top: var(--space-16, 4rem);
              }
            }

            &.bottom {
              align-items: flex-end;

              .container {
                margin-bottom: var(--space-16, 4rem);
              }
            }
          }
        }

/* Animationen */
        @layer animations {
          .modal {
            &.fade .container {
              animation: fadeIn 0.2s ease-out;
            }

            &.slide .container {
              animation: slideUp 0.3s ease-out;
            }
          }
        }


/* Importierte Datei: ui/components/notification.css */
/*
        * Notification Module
        *
        * Benachrichtigungen und Systemmeldungen (Toast/Messages).
        */

/**
        * Notification-Komponente
        *
        * System- und Benutzermeldungen für wichtige Mitteilungen und Updates.
        * Notifications informieren Benutzer über Ereignisse, Aktivitäten oder Statusänderungen.
        *
        * @layer components.notification
        *
        * Grundlegende Verwendung:
        * <div class="notification">
        *   <div class="icon"><!-- Icon hier --></div>
        *   <div class="content">
        *     <div class="title">Neue Nachricht</div>
        *     <div class="message">Sie haben eine neue Nachricht erhalten.</div>
        *   </div>
        *   <button class="close">&times;</button>
        * </div>
        *
        * Varianten:
        * <div class="notification info">Informativ</div>
        * <div class="notification success">Erfolg</div>
        * <div class="notification warning">Warnung</div>
        * <div class="notification error">Fehler</div>
        *
        * Positionen:
        * <div class="notification top-right">Oben rechts</div>
        * <div class="notification top-left">Oben links</div>
        * <div class="notification bottom-right">Unten rechts</div>
        * <div class="notification bottom-left">Unten links</div>
        *
        * Mit Aktionen:
        * <div class="notification">
        *   <div class="content">Neue Anfrage</div>
        *   <div class="actions">
        *     <button class="button small primary">Annehmen</button>
        *     <button class="button small">Ablehnen</button>
        *   </div>
        * </div>
        *
        * Mit Timer:
        * <div class="notification with-timer">
        *   <div class="content">Diese Meldung verschwindet in 5 Sekunden</div>
        *   <div class="timer"></div>
        * </div>
        *
        * Gruppierte Benachrichtigungen:
        * <div class="notification-center">
        *   <div class="notification">Benachrichtigung 1</div>
        *   <div class="notification">Benachrichtigung 2</div>
        * </div>
        */

/* Animationen - außerhalb von @layer definieren */
        @keyframes notification-timer {
          from { width: 100%; }

          to { width: 0%; }
        }

/* Komponenten-Styles */
        @layer components {
          .notification {
            align-items: start;
            background-color: var(--color-gray-100, #f3f4f6);
            border: 1px solid var(--color-gray-300, #d1d5db);
            border-radius: var(--radius-md, 0.375rem);
            box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
            display: flex;
            font-size: var(--font-size-sm, 0.875rem);
            gap: var(--space-3);
            max-width: 100%;
            padding: var(--space-3);

/* Varianten */
            &.success {
              background-color: var(--color-success, #10b981);
              color: white;
            }

            &.error {
              background-color: var(--color-error, #ef4444);
              color: white;
            }

            &.warning {
              background-color: var(--color-warning, #f59e0b);
              color: black;
            }

            &.info {
              background-color: var(--color-info, #3b82f6);
              color: white;
            }

/* Icon */
            .icon {
              flex-shrink: 0;
              font-size: 1.25rem;
              line-height: 1%;
              margin-top: 2px;
            }

/* Inhalt */
            .content {
              flex: 1;

              .title {
                font-weight: var(--font-weight-medium, 500);
                margin-bottom: var(--space-1);
              }

              .message {
                color: inherit;
                opacity: 9000%;
              }
            }

/* Schließen-Knopf */
            .close {
              background: none;
              border: none;
              color: currentcolor;
              cursor: pointer;
              flex-shrink: 0;
              font-size: 1.25rem;
              line-height: 1%;
              margin-left: auto;
              opacity: 0.7;
              padding: 0.25rem;
              transition: opacity var(--transition-fast, 150ms ease);

              &:hover {
                opacity: 1;
              }
            }

/* Aktionen */
            .actions {
              display: flex;
              gap: var(--space-2);
              margin-top: var(--space-2);
            }

/* Timer */
            .timer {
              background-color: rgb(255 255 255 / 5000%);
              bottom: 0%;
              height: 3px;
              left: 0%;
              position: absolute;
            }

/* Positionen */
            &.top-right,
            &.top-left,
            &.bottom-right,
            &.bottom-left {
              margin: var(--space-4);
              position: fixed;
              z-index: var(--z-index-notification, 1070);
            }

            &.top-right {
              right: 0%;
              top: 0%;
            }

            &.top-left {
              left: 0%;
              top: 0%;
            }

            &.bottom-right {
              bottom: 0%;
              right: 0%;
            }

            &.bottom-left {
              bottom: 0%;
              left: 0%;
            }

            &.with-timer {
              overflow: hidden;
              position: relative;
            }
          }

/* Notification-Center */
          .notification-center {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            max-width: 100%;
            position: fixed;
            width: 35%0px;
            z-index: var(--z-index-notification, 1070);

            &.top-right {
              margin: var(--space-4);
              right: 0%;
              top: 0%;
            }

            &.top-left {
              left: 0%;
              margin: var(--space-4);
              top: 0%;
            }

            &.bottom-right {
              bottom: 0%;
              margin: var(--space-4);
              right: 0%;
            }

            &.bottom-left {
              bottom: 0%;
              left: 0%;
              margin: var(--space-4);
            }
          }
        }

/* Animations-Styles */
        @layer animations {
          .notification {
            &.animate-in {
              animation-duration: 0.3s;
              animation-name: slideIn;
              animation-timing-function: ease-out;
            }

            &.animate-out {
              animation-duration: 0.3s;
              animation-fill-mode: forwards;
              animation-name: slideOut;
              animation-timing-function: ease-in;
            }

            .timer {
              animation: notification-timer 5s linear forwards;
            }
          }
        }

/* Importierte Datei: ui/components/popover.css */
/**
        * Popover-Komponente
        *
        * Eine Komponente zur Erstellung von Popover-Elementen mit der nativen HTML Popover API.
        * Unterstützt Hover-Effekte, Animationen, Pfeile und Dark Mode.
        *
        * @nutzung
        * <button popovertarget="myPopover">Follow Me</button>
        * <div id="myPopover" popover class="popover">Thank you for following me!</div>
        *
        * @eigenschaften
        * - Automatische Positionierung unter dem Trigger-Element
        * - Smooth Animation beim Öffnen/Schließen mit @starting-style
        * - Pfeil-Element für visuelle Verbindung zum Trigger
        * - Responsive Design (max-width: 9%0vw)
        * - Unterstützung für Light/Dark Mode
        *
        * @browser-kompatibilität
        * Die native HTML Popover API wird unterstützt in:
        * - Chrome/Edge ab Version 114
        * - Safari ab Version 16.4
        * - Firefox ab Version 114 (mit Aktivierung über Flag)
        *
        * Für ältere Browser sollte ein Fallback-Mechanismus implementiert werden,
        * z.B. mit JavaScript-basierten Popover-Lösungen.
        */

        @layer components {
          .popover {
            animation: slideIn var(--animation-duration-normal, 300ms) cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
            background: var(--color-background, #fff);
            border: 1px solid var(--color-border, #e5e7eb);
            border-radius: 0.5rem;
            box-shadow: 0 8px 32px rgb(0 0 0 / 18%), 0 1.5px 4px rgb(0 0 0 / 8%);
            color: var(--color-text, #222);
            max-width: 9%0vw;
            min-width: 20%0px;
            padding: 1rem;
            position: absolute;
            z-index: 1000;
          }

          @starting-style {
            .popover {
              opacity: 0%;
              transform: translateY(8px) scale(0.98%);
            }
          }

          .popover[popover] {
            display: block;

/* Ermöglicht Styling für native Popover-API */
            inset: unset;
            left: 0%;
            margin-top: 0%.5rem;
            top: 100%;
          }

/* Optional: Arrow */
          .popover::before {
            background: var(--color-background, #fff);
            border-left: 1px solid var(--color-border, #e5e7eb);
            border-top: 1px solid var(--color-border, #e5e7eb);
            clip-path: polygon(50% 0, 0 100, 100 100);
            content: '';
            height: 8px;
            left: 2rem;
            position: absolute;
            top: -8px;
            width: 1%6px;
            z-index: 1;
          }
        }

/* Darkmode Support */
        @media (prefers-color-scheme: dark) {
          @layer components {
            .popover {
              background: var(--color-background-dark, #222);
              border-color: var(--color-border-dark, #444);
              color: var(--color-text-dark, #fff);
            }

            .popover::before {
              background: var(--color-background-dark, #222);
              border-color: var(--color-border-dark, #444);
            }
          }
        }

/* Importierte Datei: ui/components/progress-bar.css */
/**
        * Progress Bar
        *
        * Progress bars visualize the completion status of a task or process, showing
        * users how much has been completed and how much remains. They can include
        * percentages, labels, and different visual styles.
        *
        * @layer: components
        *
        * Accessibility:
        * - Use proper ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow)
        * - Include text alternatives for screen readers
        * - Ensure sufficient color contrast for all states
        * - Consider color blind users when choosing colors
        */

        @layer components {
/* Base progress bar container */
          .progress {
            background-color: var(--color-neutral-200, #e5e7eb);
            border-radius: var(--radius-full, 9999px);
            height: var(--progress-height, 0.5rem);
            overflow: hidden;
            position: relative;
            width: 100%;
          }

/* Progress bar fill */
          & .fill {
            background-color: var(--color-primary-500, #3b82f6);
            border-radius: var(--radius-full, 9999px);
            height: 100%;
            left: 0%;
            position: absolute;
            top: 0%;
            transition: width var(--transition-duration-normal, 300ms) var(--transition-timing-ease, ease);
          }

/* Progress with label */
          .progress--with-label {
            margin-bottom: var(--space-1, 0.25rem);
          }

/* Progress label */
          & .label {
            color: var(--color-text-muted, var(--color-neutral-700, #374151));
            display: flex;
            font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
            justify-content: space-between;
            margin-bottom: var(--space-2, 0.5rem);
          }

          & .title {
            font-weight: var(--font-medium, var(--font-weight-medium, 500));
          }

          & .value {
            font-variant-numeric: tabular-nums;
          }

/* Progress sizes */
          .progress--xs {
            height: 0%.25rem;
          }

          .progress--sm {
            height: 0%.375rem;
          }

          .progress--md {
            height: var(--progress-height, 0.5rem);
          }

          .progress--lg {
            height: 0%.75rem;
          }

          .progress--xl {
            height: 1rem;
          }

/* Progress shapes */
          .progress--square {
            border-radius: var(--radius-sm, 0.25rem);
          }

          .progress--square & .fill {
            border-radius: var(--radius-sm, 0.25rem);
          }

/* Progress colors */
          .progress--primary & .fill {
            background-color: var(--color-primary-500, #3b82f6);
          }

          .progress--secondary & .fill {
            background-color: var(--color-secondary-500, #6b7280);
          }

          .progress--success & .fill {
            background-color: var(--color-success-500, #10b981);
          }

          .progress--danger & .fill {
            background-color: var(--color-error-500, #ef4444);
          }

          .progress--warning & .fill {
            background-color: var(--color-warning-500, #f59e0b);
          }

          .progress--info & .fill {
            background-color: var(--color-info-500, #3b82f6);
          }

/* Progress with steps */
          .progress--stepped {
            background-color: transparent;
            display: flex;
            gap: var(--progress-step-gap, 4px);
            height: auto;
            justify-content: space-between;
          }

          & .step {
            background-color: var(--color-neutral-200, #e5e7eb);
            border-radius: var(--radius-full, 9999px);
            flex: 1;
            height: var(--progress-height, 0.5rem);
            transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
          }

          & .step--completed {
            background-color: var(--color-primary-500, #3b82f6);
          }

          & .step--active {
            background-color: var(--color-primary-300, #93c5fd);
          }

          .progress--stepped.progress--square & .step {
            border-radius: var(--radius-sm, 0.25rem);
          }

/* Progress with steps and labels */
          .progress--with-step-labels {
            margin-bottom: var(--space-6, 1.5rem);
          }

          & .steps-container {
            display: flex;
            justify-content: space-between;
            margin-top: var(--space-2, 0.5rem);
            position: relative;
          }

          & .step-label {
            color: var(--color-neutral-500, #6b7280);
            font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
            position: absolute;
            text-align: center;
            top: var(--space-2, 0.5rem);
            transform: translateX(-50%);
            white-space: nowrap;
          }

          & .step-label--completed {
            color: var(--color-primary-600, #2563eb);
            font-weight: var(--font-medium, var(--font-weight-medium, 500));
          }

/* Indeterminate progress animation */
          .progress--indeterminate & .fill {
            animation: progressIndeterminate 1.5s infinite;
            transform-origin: left;
            width: 40% !important;
          }

/* Progress with stripes */
          .progress--striped & .fill {
            background-image: linear-gradient(
            45deg,
            rgb(255 255 255 / 15%) 25%,
            transparent 25%,
            transparent 50,
            rgb(255 255 255 / 15%) 50,
            rgb(255 255 255 / 15%) 75%,
            transparent 75%,
            transparent
            );
            background-size: 1rem 1rem;
          }

          .progress--animated & .fill {
            animation: progressStripes 1s linear infinite;
          }

/* Progress with value inside */
          .progress--with-value-inside {
            position: relative;
          }

          & .value-inside {
            color: var(--color-text-inverse, white);
            font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
            font-weight: var(--font-medium, var(--font-weight-medium, 500));
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50);
            z-index: 1;
          }

/* Buffer progress */
          .progress--buffer {
            background-color: transparent;
          }

          & .buffer {
            background-color: var(--color-neutral-300, #d1d5db);
            border-radius: var(--radius-full, 9999px);
            height: 100%;
            left: 0%;
            position: absolute;
            top: 0%;
            transition: width var(--transition-duration-normal, 300ms) var(--transition-timing-ease, ease);
          }

          .progress--buffer & .fill {
            z-index: 1;
          }

/* Gradient progress */
          .progress--gradient & .fill {
            background: linear-gradient(
            90deg,
            var(--color-primary-400, #60a5fa),
            var(--color-primary-600, #2563eb)
            );
          }

          .progress--gradient.progress--success & .fill {
            background: linear-gradient(
            90deg,
            var(--color-success-400, #34d399),
            var(--color-success-600, #059669)
            );
          }

          .progress--gradient.progress--warning & .fill {
            background: linear-gradient(
            90deg,
            var(--color-warning-400, #fbbf24),
            var(--color-warning-600, #d97706)
            );
          }

          .progress--gradient.progress--danger & .fill {
            background: linear-gradient(
            90deg,
            var(--color-error-400, #f87171),
            var(--color-error-600, #dc2626)
            );
          }
        }

/* Importierte Datei: ui/components/tabs.css */
/**
        * Tabs-Komponente
        *
        * Tab-Navigation für das Umschalten zwischen verschiedenen Inhaltsbereichen.
        * Tabs ermöglichen ein platzsparendes Design für verschiedene Inhaltsgruppen.
        *
        * @layer components.tabs
        *
        * Grundlegende Verwendung:
        * <div class="tabs">
        *   <div class="nav">
        *     <button class="tab active">Tab 1</button>
        *     <button class="tab">Tab 2</button>
        *     <button class="tab">Tab 3</button>
        *   </div>
        *   <div class="content">
        *     <div class="panel active">Inhalt Tab 1</div>
        *     <div class="panel">Inhalt Tab 2</div>
        *     <div class="panel">Inhalt Tab 3</div>
        *   </div>
        * </div>
        *
        * Varianten:
        * <div class="tabs pills">...</div>  <!-- Pill-Style Tabs -->
        * <div class="tabs underline">...</div>  <!-- Unterstrichene Tabs -->
        * <div class="tabs boxed">...</div>  <!-- Box-Style Tabs -->
        *
        * Ausrichtungen:
        * <div class="tabs horizontal">...</div>  <!-- Horizontal (Standard) -->
        * <div class="tabs vertical">...</div>  <!-- Vertikale Tabs -->
        *
        * Größen:
        * <div class="tabs sm">...</div>  <!-- Klein -->
        * <div class="tabs md">...</div>  <!-- Medium (Standard) -->
        * <div class="tabs lg">...</div>  <!-- Groß -->
        */


/**
        * Tabs Component Structure:
        *
        * <div class="tabs">
        *   <div class="tabs-list" role="tablist">
        *     <button class="tab-item" role="tab" aria-selected="true">Tab 1</button>
        *     <button class="tab-item" role="tab">Tab 2</button>
        *   </div>
        *   <div class="tab-panels">
        *     <div class="tab-panel" role="tabpanel">Panel 1 content</div>
        *     <div class="tab-panel" role="tabpanel" hidden>Panel 2 content</div>
        *   </div>
        * </div>
        *
        * Variants: .tabs--vertical, .tabs--pills, .tabs--underlined
        * Modifiers: .tabs--justify, .tabs--center
        */
        @layer components {
          .tabs {
            display: flex;
            flex-direction: column;

/* Tab-Navigation */
            .nav {
              border-bottom: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
              display: flex;
              gap: var(--tab-gap, var(--space-4, 1rem));
            }

/* Tab-Buttons */
            .tab {
              background: none;
              border: none;
              color: var(--color-text-muted, var(--color-neutral-700, #374151));
              cursor: pointer;
              font-size: var(--text-base, var(--font-size-base, 1rem));
              padding: var(--tab-padding, 0.5rem 1rem);
              transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease),
              border-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);

              &.active {
                border-bottom: 2px solid var(--color-primary-500, #3b82f6);
                color: var(--color-primary-600, #2563eb);
                font-weight: var(--font-medium, var(--font-weight-medium, 500));
              }

              &:hover:not(.active) {
                color: var(--color-primary-500, #3b82f6);
              }

              &:focus {
                box-shadow: 0 0 0 2px var(--color-primary-200, #bfdbfe);
                outline: none;
              }

              &:disabled {
                color: var(--color-neutral-400, #9ca3af);
                cursor: not-allowed;

                &:hover {
                  color: var(--color-neutral-400, #9ca3af);
                }
              }
            }

/* Inhaltsbereich */
            .content {
              padding: var(--tab-content-padding, 1rem 0);
            }

/* Panel (Inhaltsbereich je Tab) */
            .panel {
              display: none;

              &.active {
                display: block;
              }
            }

/* Varianten */
            &.pills {
              .nav {
                border-bottom: none;
                gap: var(--space-2, 0.5rem);
              }

              .tab {
                border-radius: var(--radius-full, 9999px);
                padding: var(--space-2, 0.5rem) var(--space-4, 1rem);

                &.active {
                  background-color: var(--color-primary-500, #3b82f6);
                  border-bottom: none;
                  color: var(--color-text-inverse, white);
                }

                &:hover:not(.active) {
                  background-color: var(--color-neutral-100, #f3f4f6);
                }
              }
            }

            &.underline {
              .tab {
                border-bottom: 2px solid transparent;
                margin-bottom: -1px;

                &.active {
                  border-bottom-color: var(--color-primary-500, #3b82f6);
                }
              }
            }

            &.boxed {
              .nav {
                border-bottom: none;
                gap: 0;
              }

              .tab {
                background-color: var(--color-neutral-50, #f9fafb);
                border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
                border-bottom: none;
                border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0;
                margin-right: -1px;

                &.active {
                  background-color: var(--color-background, white);
                  position: relative;
                  z-index: 1;
                }
              }

              .content {
                border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
                border-radius: 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) var(--radius-md, 0.375rem);
                padding: var(--space-4, 1rem);
              }
            }

/* Ausrichtungen */
            &.horizontal {
/* Standard (wie oben definiert) */
            }

            &.vertical {
              align-items: flex-start;
              flex-direction: row;

              .nav {
                border-bottom: none;
                border-right: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
                flex-direction: column;
                gap: var(--space-2, 0.5rem);
                margin-right: var(--space-4, 1rem);
                padding-right: var(--space-4, 1rem);
              }

              .tab {
                border-bottom: none;
                text-align: left;
                width: 100%;

                &.active {
                  border-bottom: none;
                  border-right: 2px solid var(--color-primary-500, #3b82f6);
                  margin-right: -1px;
                }
              }
            }

/* Größenvarianten */
            &.sm {
              .tab {
                font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
                padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
              }

              .content {
                padding: var(--space-2, 0.5rem) 0;
              }
            }

            &.lg {
              .tab {
                font-size: var(--text-lg, var(--font-size-lg, 1.125rem));
                padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
              }

              .content {
                padding: var(--space-6, 1.5rem) 0;
              }
            }

/* Farbvarianten */
            &.success .tab.active {
              border-bottom-color: var(--color-success-500, #10b981);
              color: var(--color-success-600, #059669);
            }

            &.warning .tab.active {
              border-bottom-color: var(--color-warning-500, #f59e0b);
              color: var(--color-warning-600, #d97706);
            }

            &.error .tab.active {
              border-bottom-color: var(--color-error-500, #ef4444);
              color: var(--color-error-600, #dc2626);
            }

            &.secondary .tab.active {
              border-bottom-color: var(--color-secondary-500, #6b7280);
              color: var(--color-secondary-600, #4b5563);
            }
          }
        }



/* Importierte Datei: ui/components/table.css */
/*
        * Table-Komponente
        *
        * Gestylte Tabellen mit responsivem Verhalten.
        */

/**
        * Table-Komponente
        *
        * Tabellen und Datenraster für strukturierte Informationsdarstellung.
        * Tabellen eignen sich für den Vergleich von Daten und die Darstellung von strukturierten Informationen.
        *
        * @layer components.table
        *
        * Grundlegende Verwendung:
        * <table class="table">
        *   <thead>
        *     <tr>
        *       <th>Spalte 1</th>
        *       <th>Spalte 2</th>
        *     </tr>
        *   </thead>
        *   <tbody>
        *     <tr>
        *       <td>Zelle 1</td>
        *       <td>Zelle 2</td>
        *     </tr>
        *   </tbody>
        * </table>
        *
        * Varianten:
        * <table class="table striped">...</table>  <!-- Abwechselnd gefärbte Zeilen -->
        * <table class="table bordered">...</table>  <!-- Mit Rahmen -->
        * <table class="table hoverable">...</table> <!-- Hover-Effekt für Zeilen -->
        * <table class="table compact">...</table>   <!-- Kompaktes Layout -->
        * <table class="table responsive">...</table> <!-- Responsives Layout -->
        *
        * Zellenausrichtung:
        * <td class="left">Links ausgerichtet</td>
        * <td class="center">Zentriert</td>
        * <td class="right">Rechts ausgerichtet</td>
        *
        * Statuszeilen:
        * <tr class="success">...</tr>
        * <tr class="warning">...</tr>
        * <tr class="danger">...</tr>
        *
        * Flüssige Größenanpassung mit Schlüsselwörtern:
        * <table class="table fluid">...</table>
        * <table class="table fluid small">...</table>
        * <table class="table fluid medium">...</table>
        * <table class="table fluid large">...</table>
        *
        * Container-adaptive Tabelle:
        * <div class="container-query">
        *   <table class="table adaptive">...</table>
        * </div>
        */

        @layer components {
          .table {
            border-collapse: collapse;
            font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
            width: 100%;

/* Basiselemente */
            thead {
              background-color: var(--color-neutral-100, #f3f4f6);
            }

            th,
            td {
              border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
              padding: var(--table-cell-padding, var(--space-3, 0.75rem));
              text-align: left;
            }

            th {
              color: var(--color-text, var(--color-neutral-900, #111827));
              font-weight: var(--font-semibold, var(--font-weight-semibold, 600));
              padding: var(--table-header-padding, 1rem 0.75rem);
            }

            td {
              color: var(--color-text-muted, var(--color-neutral-700, #374151));
            }

/* Tabellen-Varianten */
            &.striped tbody tr:nth-child(odd) {
              background-color: var(--color-neutral-50, #f9fafb);
            }

            &.hoverable tbody tr:hover {
              background-color: var(--color-neutral-100, #f3f4f6);
              transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
            }

            &.bordered th,
            &.bordered td {
              border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
            }

            &.compact th,
            &.compact td {
              padding: var(--space-2, 0.5rem);
            }

/* Flüssige Größenanpassung mit interpolate-size: allow-keywords */
            &.fluid {
/* Nutzt CSS-Schlüsselwörter für Größen - funktioniert mit interpolate-size: allow-keywords */
              font-size: medium; /* Basis-Größe für Skalierungsfaktor */

              th, td {
                font-size: 0.875em;
                padding: 0.75em;
              }

              thead {
                font-weight: var(--font-semibold, 600);
              }

/* Größenvarianten mit CSS-Schlüsselwörtern */
              &.small {
                font-size: small;
              }

              &.medium {
                font-size: medium;
              }

              &.large {
                font-size: large;
              }

              &.x-large {
                font-size: x-large;
              }
            }

/* Container-adaptive Größenanpassung */
            &.adaptive {
              font-size: clamp(var(--text-xs, 0.75rem), 2cqi, var(--text-base, 1rem));

              th, td {
                padding: clamp(var(--space-1, 0.25rem), 1cqi, var(--space-4, 1rem));
              }

              @container (min-width: 300px) {
                th {
                  font-weight: var(--font-bold, var(--font-weight-bold, 700));
                }
              }

              @container (min-width: 500px) {
                thead {
                  position: sticky;
                  top: 0%;
                  z-index: 1;
                }
              }

              @container (min-width: 700px) {
                &.hoverable tbody tr:hover {
                  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));
                }
              }
            }

            &.responsive {
              @media (max-width: 768px) {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
              }
            }

/* Zellenausrichtungen */
            .left {
              text-align: left;
            }

            .center {
              text-align: center;
            }

            .right {
              text-align: right;
            }

/* Statuszeilen */
            .success {
              background-color: var(--color-success-100, #d1fae5);
              color: var(--color-success-800, #065f46);
            }

            .warning {
              background-color: var(--color-warning-100, #fef3c7);
              color: var(--color-warning-800, #92400e);
            }

            .danger {
              background-color: var(--color-error-100, #fee2e2);
              color: var(--color-error-800, #991b1b);
            }
          }
        }



/* Importierte Datei: ui/components/toast.css */
/**
        * Toast-Komponente
        *
        * Toast-Benachrichtigungen für temporäre Hinweise.
        */

/**
        * Toast-Komponente
        *
        * Temporäre Benachrichtigungen, die automatisch verschwinden.
        * Toasts eignen sich für Systembenachrichtigungen, die den Benutzerfluss nicht unterbrechen sollen.
        *
        * @layer components.toast
        *
        * Grundlegende Verwendung:
        * <div class="toast">
        *   <div class="content">Einfache Benachrichtigung</div>
        * </div>
        *
        * Varianten:
        * <div class="toast success">Erfolg</div>
        * <div class="toast error">Fehler</div>
        * <div class="toast warning">Warnung</div>
        * <div class="toast info">Information</div>
        *
        * Mit Icon:
        * <div class="toast">
        *   <div class="icon"><!-- Icon hier --></div>
        *   <div class="content">Benachrichtigung mit Icon</div>
        * </div>
        *
        * Schließbar:
        * <div class="toast">
        *   <div class="content">Schließbare Benachrichtigung</div>
        *   <button class="close">&times;</button>
        * </div>
        */

/**
        * Toast Component Structure:
        *
        * <div class="toast toast--success" role="alert">
        *   <div class="toast-icon"><!-- Icon --></div>
        *   <div class="toast-content">
        *     <div class="toast-title">Success!</div>
        *     <div class="toast-message">Operation completed</div>
        *   </div>
        *   <button class="toast-close" aria-label="Close">&times;</button>
        * </div>
        *
        * Types: .toast--info, .toast--success, .toast--warning, .toast--error
        * Positions: .toast--top-right, .toast--top-left, .toast--bottom-right, .toast--bottom-left
        */

/* Animation - außerhalb von @layer definieren */

/* Komponenten-Styles */
        @layer components {
          .toast {
            align-items: center;
            background-color: var(--color-gray-800);
            border-radius: var(--radius-md, 0.375rem);
            box-shadow: var(--shadow-md);
            color: white;
            display: flex;
            gap: var(--space-3);
            margin-bottom: var(--space-3);
            max-width: 2%4rem;
            padding: var(--space-3) var(--space-4);

/* Inhaltselemente */
            .content {
              flex: 1;
            }

            .icon {
              flex-shrink: 0;
              font-size: 1.25rem;
            }

            .close {
              background: none;
              border: none;
              color: currentcolor;
              cursor: pointer;
              flex-shrink: 0;
              font-size: 1.25rem;
              opacity: 0.7;
              padding: 0;

              &:hover {
                opacity: 1;
              }
            }

/* Farbvarianten */
            &.success {
              background-color: var(--color-success, #10b981);
            }

            &.error {
              background-color: var(--color-error, #ef4444);
            }

            &.warning {
              background-color: var(--color-warning, #f59e0b);
              color: black;
            }

            &.info {
              background-color: var(--color-info, #3b82f6);
            }

/* Positionen (als zusätzliche Klasse auf einem Container) */
            &-container {
              display: flex;
              flex-direction: column;
              gap: var(--space-2);
              padding: var(--space-4);
              position: fixed;
              z-index: var(--z-index-toast);

              &.top-right {
                right: 0%;
                top: 0%;
              }

              &.top-left {
                left: 0%;
                top: 0%;
              }

              &.bottom-right {
                bottom: 0%;
                right: 0%;
              }

              &.bottom-left {
                bottom: 0%;
                left: 0%;
              }
            }
          }
        }

/* Animations-Styles */
        @layer animations {
          .toast {
            animation: slideIn 0.3s ease-out;
          }
        }

/* Importierte Datei: ui/components/tooltip.css */
/**
        * Tooltip-Komponente
        *
        * Informations-Tooltips und Hinweistexte für UI-Elemente.
        * Tooltips bieten zusätzliche Informationen oder Hilfestellungen zu Elementen.
        *
        * @layer components.tooltip
        *
        * Grundlegende Verwendung:
        * <div class="tooltip">
        *   <button class="trigger">Hover mich</button>
        *   <div class="content">Tooltip-Inhalt</div>
        * </div>
        *
        * Positionsvarianten:
        * <div class="tooltip top">Oben</div>
        * <div class="tooltip right">Rechts</div>
        * <div class="tooltip bottom">Unten</div>
        * <div class="tooltip left">Links</div>
        *
        * Größenvarianten:
        * <div class="tooltip sm">Klein</div>
        * <div class="tooltip md">Mittel (Standard)</div>
        * <div class="tooltip lg">Groß</div>
        *
        * Varianten:
        * <div class="tooltip light">Heller Hintergrund</div>
        * <div class="tooltip dark">Dunkler Hintergrund (Standard)</div>
        * <div class="tooltip primary">Primärfarbe</div>
        *
        * Mit Pfeil:
        * <div class="tooltip arrow">
        *   <button class="trigger">Mit Pfeil</button>
        *   <div class="content">Tooltip mit Pfeil</div>
        * </div>
        *
        * Mit HTML-Inhalt:
        * <div class="tooltip">
        *   <button class="trigger">Komplexer Inhalt</button>
        *   <div class="content">
        *     <h4>Überschrift</h4>
        *     <p>Mehrere Zeilen Text sind möglich.</p>
        *   </div>
        * </div>
        *
        * Flüssig skalierende Tooltips (nutzt interpolate-size):
        * <div class="tooltip adaptive">
        *   <button class="trigger">Adaptiver Tooltip</button>
        *   <div class="content">Dieser Tooltip skaliert flüssig mit der Container-Größe</div>
        * </div>
        *
        * Mit Schlüsselwort-Größen:
        * <div class="tooltip fluid small">Klein</div>
        * <div class="tooltip fluid medium">Mittel</div>
        * <div class="tooltip fluid large">Groß</div>
        */


/**
        * Tooltip Component Structure:
        *
        * <div class="tooltip" role="tooltip">
        *   <div class="tooltip-content">Tooltip text</div>
        *   <div class="tooltip-arrow"></div>
        * </div>
        *
        * Positions: .tooltip--top, .tooltip--bottom, .tooltip--left, .tooltip--right
        * Modifiers: .tooltip--sm, .tooltip--lg
        */
        @layer components {
          .tooltip {
            display: inline-block;
            position: relative;

            .trigger {
              cursor: pointer;
              display: inline-block;
            }

            .content {
              background-color: var(--color-neutral-900, #111827);
              border-radius: var(--radius-sm, 0.25rem);
              box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));
              color: var(--color-text-inverse, white);
              font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
              max-width: var(--tooltip-max-width, 200px);
              opacity: 0%;
              padding: var(--tooltip-padding, 0.5rem 0.75rem);
              position: absolute;
              transition: opacity var(--transition-duration-fast, 200ms) var(--transition-timing-ease, ease),
              visibility var(--transition-duration-fast, 200ms) var(--transition-timing-ease, ease);
              visibility: hidden;
              white-space: nowrap;
              z-index: var(--z-index-tooltip, 1000);
            }

/* Trigger-Interaktion */
            &:hover .content,
            .trigger:focus + .content {
              opacity: 1;
              visibility: visible;
            }

/* Positionsvarianten */
            &.top .content {
              bottom: 100%;
              left: 50%;
              margin-bottom: var(--space-1, 0.25rem);
              transform: translateX(-50%) translateY(-8px);
            }

            &.right .content {
              left: 100%;
              margin-left: var(--space-1, 0.25rem);
              top: 50%;
              transform: translateY(-50%) translateX(8px);
            }

            &.bottom .content {
              left: 50%;
              margin-top: var(--space-1, 0.25rem);
              top: 100%;
              transform: translateX(-50%) translateY(8px);
            }

            &.left .content {
              margin-right: var(--space-1, 0.25rem);
              right: 100%;
              top: 50%;
              transform: translateY(-50%) translateX(-8px);
            }

/* Größenvarianten */
            &.sm .content {
              font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
              padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
            }

            &.lg .content {
              font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
              max-width: 25%0px;
              padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
              white-space: normal;
            }

/* Farbvarianten */
            &.light .content {
              background-color: var(--color-background, white);
              border: 1px solid var(--color-border, var(--color-neutral-200, #e5e7eb));
              color: var(--color-text, var(--color-neutral-900, #111827));
            }

            &.dark .content {
              background-color: var(--color-neutral-900, #111827);
              color: var(--color-text-inverse, white);
            }

            &.primary .content {
              background-color: var(--color-primary-500, #3b82f6);
              color: var(--color-text-inverse, white);
            }

            &.success .content {
              background-color: var(--color-success-500, #10b981);
              color: var(--color-text-inverse, white);
            }

            &.warning .content {
              background-color: var(--color-warning-500, #f59e0b);
              color: var(--color-warning-900, #78350f);
            }

            &.error .content {
              background-color: var(--color-error-500, #ef4444);
              color: var(--color-text-inverse, white);
            }

/* Flüssig skalierende Tooltips mit interpolate-size: allow-keywords */
            &.fluid {
/* Basisgröße verwenden */
              font-size: medium;

              .content {
                border-radius: 0.25em;
                box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 2000%);
                font-size: 0.8em;

/* em-Einheiten für flüssige Skalierung basierend auf font-size */
                padding: 0.5em 0.75em;
              }

/* Größenvarianten mit CSS-Schlüsselwörtern */
              &.small {
                font-size: small;
              }

              &.medium {
                font-size: medium;
              }

              &.large {
                font-size: large;
              }

              &.x-large {
                font-size: x-large;
              }
            }

/* Container-adaptive Tooltips */
            &.adaptive {
              container-type: inline-size;

              .content {
                border-radius: clamp(var(--radius-sm, 0.25rem), 0.5cqi, var(--radius-md, 0.375rem));
                font-size: clamp(var(--text-xs, 0.75rem), 2cqi, var(--text-base, 1rem));
                max-width: 90%cqi; /* 90 der Container-Breite */
                padding: clamp(var(--space-1, 0.25rem), 1cqi, var(--space-4, 1rem));
                white-space: normal;
              }

              &.arrow .content::before {
                height: clamp(6px, 1cqi, 12px);
                width: clamp(6px, 1cqi, 12px);
              }
            }

/* Mit Pfeil */
            &.arrow .content::before {
              background-color: inherit;
              border: inherit;
              border-width: 1px;
              content: "";
              height: var(--tooltip-arrow-size, 8px);
              position: absolute;
              transform: rotate(45deg);
              width: var(--tooltip-arrow-size, 8px);
            }

            &.arrow.top .content::before {
              bottom: -4px;
              left: 50%;
              transform: translateX(-50%) rotate(45deg);
            }

            &.arrow.right .content::before {
              left: -4px;
              top: 50%;
              transform: translateY(-50%) rotate(45deg);
            }

            &.arrow.bottom .content::before {
              left: 50%;
              top: -4px;
              transform: translateX(-50%) rotate(45deg);
            }

            &.arrow.left .content::before {
              right: -4px;
              top: 50%;
              transform: translateY(-50%) rotate(45deg);
            }
          }
        }




/* Importierte Datei: ui/components/wizard.css */
/*
        * Wizard-Komponente
        *
        * Schrittweiser Navigationsablauf.
        */

/**
        * Wizard-Komponente
        *
        * Schrittweise Navigationskomponenten für mehrstufige Prozesse.
        * Wizards führen Benutzer durch komplexe Workflows wie Formulare oder Setups.
        *
        * @layer components.wizard
        *
        * Grundlegende Verwendung:
        * <div class="wizard">
        *   <div class="steps">
        *     <div class="step completed">
        *       <span class="indicator">1</span>
        *       <span class="title">Schritt 1</span>
        *     </div>
        *     <div class="step active">
        *       <span class="indicator">2</span>
        *       <span class="title">Schritt 2</span>
        *     </div>
        *     <div class="step">
        *       <span class="indicator">3</span>
        *       <span class="title">Schritt 3</span>
        *     </div>
        *   </div>
        *   <div class="content">
        *     <!-- Aktuelle Schrittinhalte -->
        *   </div>
        *   <div class="actions">
        *     <button class="button">Zurück</button>
        *     <button class="button primary">Weiter</button>
        *   </div>
        * </div>
        *
        * Varianten:
        * <div class="wizard horizontal">...</div>
        * <div class="wizard vertical">...</div>
        *
        * Stilvarianten:
        * <div class="wizard numbered">...</div>     <!-- Mit Nummern -->
        * <div class="wizard with-icons">...</div>        <!-- Mit Icons -->
        * <div class="wizard with-progress">...</div>     <!-- Mit Fortschrittsbalken -->
        *
        * Zustandsanzeige:
        * <div class="step completed">...</div>  <!-- Abgeschlossen -->
        * <div class="step active">...</div>     <!-- Aktiv -->
        * <div class="step error">...</div>      <!-- Mit Fehler -->
        * <div class="step disabled">...</div>   <!-- Deaktiviert -->
        */

        @layer components {
          .wizard {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
            width: 100%;

/* Schrittanzeige im Wizard */
            .steps {
              display: flex;
              gap: var(--space-2);
              justify-content: space-between;
              margin-bottom: var(--space-6);
              position: relative;

/* Verbindungslinie zwischen Schritten */
              &::before {
                background-color: var(--color-gray-300, #d1d5db);
                content: '';
                height: 2px;
                left: 0%;
                position: absolute;
                top: calc(var(--step-size, 2rem) / 2);
                width: 100%;
                z-index: 0;
              }
            }

/* Einzelner Schritt */
            .step {
              --step-size: 2rem;

              align-items: center;
              display: flex;
              flex: 1;
              flex-direction: column;
              padding-top: calc(var(--step-size, 2rem) + var(--space-2));
              position: relative;
              text-align: center;
              z-index: 1;

/* Schritt-Indikator (Kreis) */
              .indicator {
                align-items: center;
                background-color: var(--color-white, #fff);
                border: 2px solid var(--color-gray-300, #d1d5db);
                border-radius: 50px;
                color: var(--color-gray-600);
                display: flex;
                font-size: var(--font-size-sm, 0.875rem);
                font-weight: var(--font-weight-medium, 500);
                height: var(--step-size, 2rem);
                justify-content: center;
                position: absolute;
                top: 0%;
                width: var(--step-size, 2rem);
                z-index: 2;
              }

/* Schritt-Titel */
              .title {
                color: var(--color-gray-700);
                font-size: var(--font-size-sm, 0.875rem);
                font-weight: var(--font-weight-normal);
                margin-top: var(--space-1);
              }

/* Optionale Beschreibung */
              .description {
                color: var(--color-gray-600);
                font-size: var(--font-size-xs);
                margin-top: var(--space-1);
                max-width: 14%0px;
              }

/* Schritt-Zustände */
              &.active {
                .indicator {
                  background-color: var(--color-primary, #3b82f6);
                  border-color: var(--color-primary, #3b82f6);
                  color: white;
                }

                .title {
                  color: var(--color-primary, #3b82f6);
                  font-weight: var(--font-weight-medium, 500);
                }
              }

              &.completed {
                .indicator {
                  background-color: var(--color-success, #10b981);
                  border-color: var(--color-success, #10b981);
                  color: white;

/* Optional: Häkchen statt Nummer */
                  &::after {
                    content: '✓';
                  }
                }

/* Verbindungslinie nach dem abgeschlossenen Schritt */
                &::after {
                  background-color: var(--color-success, #10b981);
                  content: '';
                  height: 2px;
                  left: 50%;
                  position: absolute;
                  top: calc(var(--step-size, 2rem) / 2);
                  width: 100%;
                  z-index: 0;
                }

                &:last-child::after {
                  display: none;
                }
              }

              &.error {
                .indicator {
                  background-color: var(--color-error, #ef4444);
                  border-color: var(--color-error, #ef4444);
                  color: white;
                }

                .title {
                  color: var(--color-error, #ef4444);
                }
              }

              &.disabled {
                cursor: not-allowed;
                opacity: 5000%;
              }
            }

/* Inhaltsbereich */
            .content {
              background-color: var(--color-white, #fff);
              border: 1px solid var(--color-gray-200);
              border-radius: var(--radius-md, 0.375rem);
              padding: var(--space-6);
            }

/* Aktionsbuttons */
            .actions {
              display: flex;
              justify-content: space-between;
              margin-top: var(--space-4);

/* Wenn nur ein Button (z.B. beim ersten Schritt) */
              &.end {
                justify-content: flex-end;
              }
            }

/* Ausrichtungsvarianten */
            &.vertical {
              align-items: flex-start;
              flex-direction: row;

              .steps {
                flex-direction: column;
                gap: var(--space-6);
                margin-bottom: 0%;
                margin-right: var(--space-8);
                width: 24%0px;

                &::before {
                  height: 100%;
                  left: calc(var(--step-size, 2rem) / 2);
                  top: 0%;
                  width: 2px;
                }
              }

              .step {
                align-items: flex-start;
                flex-direction: row;
                padding-left: calc(var(--step-size, 2rem) + var(--space-4));
                padding-top: 0%;
                text-align: left;

                .indicator {
                  left: 0%;
                  top: 0%;
                }

                &.completed::after {
                  height: 100%;
                  left: calc(var(--step-size, 2rem) / 2);
                  top: 50%;
                  width: 2px;
                }
              }

              .content {
                flex: 1;
              }
            }

/* Mit Fortschrittsbalken */
            &.with-progress {
              .progress-bar {
                background-color: var(--color-gray-200);
                border-radius: var(--radius-full, 9999px);
                height: 0%.5rem;
                margin-bottom: var(--space-6);
                overflow: hidden;

                .fill {
                  background-color: var(--color-primary, #3b82f6);
                  height: 100%;
                  transition: width 0.3s ease-in-out;
                }
              }
            }
          }
        }


/* Datei: ui/regions/sidebar.css */
/*
        * Sidebar Module
        *
        * Layout rules for sidebar navigation or contextual content. Uses grid column logic and Container Queries.
        */

/**
        * Sidebar Component
        *
        * Sidebar navigation and content for layouts with side columns.
        * Sidebars serve as additional navigation areas or for displaying contextual information.
        *
        * @layer components.sidebar
        *
        * Basic Usage:
        * <aside class="sidebar">
        *   <nav class="nav">
        *     <ul class="links">
        *       <li><a href="#" class="link">Dashboard</a></li>
        *       <li><a href="#" class="link">Settings</a></li>
        *       <li><a href="#" class="link">Profile</a></li>
        *     </ul>
        *   </nav>
        * </aside>
        *
        * Variants:
        * <aside class="sidebar left">...</aside>
        * <aside class="sidebar right">...</aside>
        * <aside class="sidebar collapsed">...</aside>
        */

        @layer components {
          .sidebar {
            background-color: var(--color-neutral-100, #f3f4f6);
            grid-column: span 3;
            padding-block: var(--space-4);
            padding-inline: var(--space-3);

/* Header-Bereich */
            .header {
              border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
              margin-bottom: var(--space-4);
              padding-bottom: var(--space-2);

              .title {
                color: var(--color-neutral-900, #111827);
                font-size: var(--text-lg);
                font-weight: var(--font-medium, 500);
                margin: 0;
              }
            }

/* Navigation */
            .nav {
              display: flex;
              flex-direction: column;
              gap: var(--space-2);

              .links {
                display: flex;
                flex-direction: column;
                gap: var(--space-1);
                list-style: none;
                margin: 0;
                padding: 0;
              }

              .link {
                color: var(--color-neutral-700, #374151);
                display: block;
                padding: var(--space-2);
                text-decoration: none;
                transition: color 150ms ease;

                &:hover {
                  color: var(--color-primary, #3b82f6);
                }

                &.active {
                  color: var(--color-primary, #3b82f6);
                  font-weight: var(--font-semibold, 600);
                }
              }
            }

/* Menu list */
            .menu {
              display: flex;
              flex-direction: column;
              gap: var(--space-1);
              list-style: none;
              margin: 0;
              padding: 0;
            }

/* Menu items */
            .item {
              width: 100%;

              &.active {
                > .link {
                  background-color: color-mix(in srgb, var(--color-primary-500) 10, transparent);
                  color: var(--color-primary, #3b82f6);
                  font-weight: var(--font-medium, 500);
                }
              }
            }

/* Menu links */
            .link {
              border-radius: var(--radius-md, 0.375rem);
              color: var(--color-neutral-700, #374151);
              display: block;
              padding: var(--space-2) var(--space-3);
              text-decoration: none;
              transition: background-color 150ms ease, color 150ms ease;

              &:hover {
                background-color: var(--color-neutral-200, #e5e7eb);
                color: var(--color-neutral-900, #111827);
              }
            }

/* Submenu */
            .submenu {
              display: flex;
              flex-direction: column;
              gap: var(--space-1);
              list-style: none;
              margin: var(--space-1) 0 0 0;
              padding-left: var(--space-4);

              .link {
                font-size: var(--text-sm, 0.875rem);
                padding: var(--space-1) var(--space-3);
              }
            }

/* Toggle button for collapse */
            .toggle {
              background: none;
              border: none;
              cursor: pointer;
              display: none;

              @media (max-width: 768px) {
                display: block;
              }
            }

/* Content (for collapse) */
            .content {
              width: 100%;
            }

/* Variants */
            &.left {
              grid-column: 1 / span 3;
            }

            &.right {
              order: 2;
            }

            &.light {
              background-color: var(--color-neutral-50);
            }

            &.dark {
              background-color: var(--color-neutral-800, #1f2937);
              color: var(--color-neutral-100, #f3f4f6);

              .title {
                color: var(--color-white, #fff);
              }

              .link {
                color: var(--color-neutral-300, #d1d5db);

                &:hover {
                  background-color: var(--color-neutral-700, #374151);
                  color: var(--color-white, #fff);
                }
              }

              .item.active > .link {
                background-color: color-mix(in srgb, var(--color-primary-500) 30, transparent);
              }
            }

/* Collapsible-Verhalten */
            &.collapsible {
              @media (max-width: 768px) {
                .toggle {
                  display: block;
                }

                .content {
                  display: none;

                  &.open {
                    display: block;
                  }
                }
              }
            }

/* Responsive adjustments */
            @container layout (max-width: 768px) {
              grid-column: span 12;
              order: 2;
            }
          }
        }



/* Datei: ui/regions/main-content.css */
/**
        * Main Content Region
        *
        * Central content layout with consistent spacing, max-width, and responsive behavior.
        * Part of the page regions system - defines the main content area styling.
        * Uses CSS Nesting and Container Queries for modern responsive design.
        *
        * @layer: components
        * @location: ui/regions/main-content.css
        *
        * Main Classes:
        * - .main: Base main content wrapper
        * - .main-narrow: 800 max width
        * - .main-wide: 1400 max width
        * - .main-full: Full width
        *
        * Utility Classes:
        * - .centered: Center alignment
        * - .compact: Reduced padding
        * - .spacious: Increased padding
        * - .no-padding: Remove padding
        *
        * Container Queries:
        * - Responsive typography
        * - Mobile-first approach
        * - Automatic layout adjustments
        *
        * Integration:
        * - Works with layout-system.css for grid positioning
        * - Complements header.css, footer.css, sidebar.css
        * - Provides content styling within the main grid area
        */

        @layer components {
/* Main content tokens */
          :root {
/* Main dimensions */
            --main-max-width: 120%0px;
            --main-max-width-narrow: 800;
            --main-max-width-wide: 1400;
            --main-padding: var(--space-6) var(--space-4);
            --main-padding-compact: var(--space-4) var(--space-3);
            --main-padding-spacious: var(--space-8) var(--space-6);

/* Main typography */
            --main-font-size: var(--text-base);
            --main-line-height: 1%.6;
            --main-color: var(--color-neutral-900, #111827);
            --main-heading-color: var(--color-neutral-900, #111827);
            --main-link-color: var(--color-primary-600, #2563eb);
            --main-link-hover: var(--color-primary-700, #1d4ed8);

/* Main spacing */
            --main-section-gap: var(--space-8);
            --main-paragraph-gap: var(--space-4);
            --main-list-gap: var(--space-2);

/* Main responsive breakpoints */
            --main-mobile-breakpoint: 768px;
            --main-tablet-breakpoint: 1024px;
          }

/* Base main content wrapper */
          .main {
            color: var(--main-color);
            container-type: inline-size;
            font-size: var(--main-font-size);
            line-height: var(--main-line-height, 1.6);
            margin: 0 auto;
            max-width: var(--main-max-width, 1200px);
            padding: var(--main-padding);
            width: 100%;

/* Typography hierarchy */
            & h1, & h2, & h3, & h4, & h5, & h6 {
              color: var(--main-heading-color);
              font-weight: var(--font-semibold, 600);
              line-height: 1%.2;
              margin: 0 0 var(--space-4) 0;

              &:first-child {
                margin-top: 0%;
              }

              &:last-child {
                margin-bottom: 0%;
              }
            }

            & h1 {
              font-size: var(--text-4xl);
              font-weight: var(--font-bold);
              margin-bottom: var(--space-6);

              @container (width <= 768px) {
                font-size: var(--text-3xl);
              }

              @container (width <= 480px) {
                font-size: var(--text-2xl);
              }
            }

            & h2 {
              font-size: var(--text-3xl);
              margin-bottom: var(--space-5);
              margin-top: var(--space-8);

              @container (width <= 768px) {
                font-size: var(--text-2xl);
              }

              @container (width <= 480px) {
                font-size: var(--text-xl);
              }
            }

            & h3 {
              font-size: var(--text-2xl);
              margin-bottom: var(--space-4);
              margin-top: var(--space-6);

              @container (width <= 768px) {
                font-size: var(--text-xl);
              }

              @container (width <= 480px) {
                font-size: var(--text-lg);
              }
            }

            & h4 {
              font-size: var(--text-xl);
              margin-bottom: var(--space-3);
              margin-top: var(--space-5);

              @container (width <= 768px) {
                font-size: var(--text-lg);
              }
            }

            & h5 {
              font-size: var(--text-lg);
              margin-bottom: var(--space-3);
              margin-top: var(--space-4);

              @container (width <= 768px) {
                font-size: var(--text-base);
              }
            }

            & h6 {
              font-size: var(--text-base);
              margin-bottom: var(--space-2);
              margin-top: var(--space-4);
              text-transform: uppercase;

              @container (width <= 768px) {
                font-size: var(--text-sm, 0.875rem);
              }
            }

/* Paragraphs and text */
            & p {
              margin: 0 0 var(--main-paragraph-gap) 0;

              &:last-child {
                margin-bottom: 0%;
              }

              &.lead {
                font-size: var(--text-lg);
                font-weight: var(--font-medium, 500);
                margin-bottom: var(--space-6);

                @container (width <= 768px) {
                  font-size: var(--text-base);
                }
              }

              &.small {
                font-size: var(--text-sm, 0.875rem);

                @container (width <= 768px) {
                  font-size: var(--text-xs, 0.75rem);
                }
              }
            }

/* Links */
            & a {
              color: var(--main-link-color);
              text-decoration: underline;
              text-decoration-color: transparent;
              text-underline-offset: 2px;
              transition: all 0.2s ease;

              &:hover,
              &:focus {
                color: var(--main-link-hover);
                text-decoration-color: currentColor;
              }

              &:focus {
                outline: 2px solid var(--main-link-color);
                outline-offset: 2px;
              }
            }

/* Lists */
            & ul, & ol {
              margin: 0 0 var(--main-paragraph-gap) 0;
              padding-left: var(--space-6);

              & li {
                margin-bottom: var(--main-list-gap);

                &:last-child {
                  margin-bottom: 0%;
                }

                & ul, & ol {
                  margin-bottom: 0%;
                  margin-top: var(--main-list-gap);
                }
              }

              &:last-child {
                margin-bottom: 0%;
              }
            }

            & ul {
              list-style-type: disc;

              & ul {
                list-style-type: circle;

                & ul {
                  list-style-type: square;
                }
              }
            }

            & ol {
              list-style-type: decimal;

              & ol {
                list-style-type: lower-alpha;

                & ol {
                  list-style-type: lower-roman;
                }
              }
            }

/* Definition lists */
            & dl {
              margin: 0 0 var(--main-paragraph-gap) 0;

              & dt {
                font-weight: var(--font-semibold, 600);
                margin-bottom: var(--space-1);
                margin-top: var(--space-3);

                &:first-child {
                  margin-top: 0%;
                }
              }

              & dd {
                margin-bottom: var(--space-2);
                margin-left: var(--space-4);

                &:last-child {
                  margin-bottom: 0%;
                }
              }
            }

/* Blockquotes */
            & blockquote {
              border-left: 4px solid var(--color-primary-200);
              font-size: var(--text-lg);
              font-style: italic;
              margin: var(--space-6) 0;
              padding: var(--space-4) var(--space-6);

              @container (width <= 768px) {
                font-size: var(--text-base);
                margin: var(--space-4) 0;
                padding: var(--space-3) var(--space-4);
              }

              & p:last-child {
                margin-bottom: 0%;
              }

              & cite {
                display: block;
                font-size: var(--text-sm, 0.875rem);
                font-style: normal;
                font-weight: var(--font-medium, 500);
                margin-top: var(--space-2);

                &::before {
                  content: "— ";
                }
              }
            }

/* Code */
            & code {
              background-color: var(--color-neutral-100, #f3f4f6);
              border-radius: var(--radius-sm, 0.125rem);
              font-family: var(--font-mono);
              font-size: 0.875em;
              padding: 0.125em 0010.25em;
            }

            & pre {
              background-color: var(--color-neutral-900, #111827);
              border-radius: var(--radius-md, 0.375rem);
              color: var(--color-neutral-100, #f3f4f6);
              font-family: var(--font-mono);
              font-size: var(--text-sm, 0.875rem);
              line-height: 1.5;
              margin: var(--space-6) 0;
              overflow-x: auto;
              padding: var(--space-4);

              @container (width <= 768px) {
                font-size: var(--text-xs, 0.75rem);
                margin: var(--space-4) 0;
                padding: var(--space-3);
              }

              & code {
                background: none;
                color: inherit;
                font-size: inherit;
                padding: 0;
              }
            }

/* Tables */
            & table {
              border-collapse: collapse;
              margin: var(--space-6) 0;
              width: 100%;

              @container (width <= 768px) {
                font-size: var(--text-sm, 0.875rem);
                margin: var(--space-4) 0;
              }

              & th, & td {
                border: 1px solid var(--color-neutral-200, #e5e7eb);
                padding: var(--space-3);
                text-align: left;

                @container (width <= 768px) {
                  padding: var(--space-2);
                }
              }

              & th {
                background-color: var(--color-neutral-50);
                font-weight: var(--font-semibold, 600);
              }

              & tbody tr:nth-child(even) {
                background-color: var(--color-neutral-25);
              }
            }

/* Images and media */
            & img {
              height: auto;
              max-width: 100%;

              &.rounded {
                border-radius: var(--radius-md, 0.375rem);
              }

              &.shadow {
                box-shadow: var(--shadow-lg);
              }
            }

            & figure {
              margin: var(--space-6) 0;

              @container (width <= 768px) {
                margin: var(--space-4) 0;
              }

              & img {
                display: block;
                margin: 0 auto;
              }

              & figcaption {
                color: var(--color-neutral-600);
                font-size: var(--text-sm, 0.875rem);
                font-style: italic;
                margin-top: var(--space-2);
                text-align: center;

                @container (width <= 768px) {
                  font-size: var(--text-xs, 0.75rem);
                }
              }
            }

/* Horizontal rules */
            & hr {
              border: none;
              border-top: 1px solid var(--color-neutral-200, #e5e7eb);
              margin: var(--main-section-gap) 0;

              @container (width <= 768px) {
                margin: var(--space-6) 0;
              }
            }

/* Utility modifiers */
            &.narrow {
              max-width: var(--main-max-width-narrow, 768px);
            }

            &.wide {
              max-width: var(--main-max-width-wide, 1440px);
            }

            &.full {
              max-width: none;
            }

            &.centered {
              text-align: center;
            }

            &.compact {
              padding: var(--main-padding-compact);

              & h1 { margin-bottom: var(--space-4); }

              & h2 { margin-bottom: var(--space-3); margin-top: var(--space-6); }

              & h3 { margin-bottom: var(--space-3); margin-top: var(--space-4); }

              & p { margin-bottom: var(--space-3); }

              & blockquote { margin: var(--space-4) 0; }

              & pre { margin: var(--space-4) 0; }

              & table { margin: var(--space-4) 0; }

              & figure { margin: var(--space-4) 0; }

              & hr { margin: var(--space-6) 0; }
            }

            &.spacious {
              padding: var(--main-padding-spacious);

              & h1 { margin-bottom: var(--space-8); }

              & h2 { margin-bottom: var(--space-6); margin-top: var(--space-12); }

              & h3 { margin-bottom: var(--space-5); margin-top: var(--space-8); }

              & p { margin-bottom: var(--space-5); }

              & blockquote { margin: var(--space-8) 0; }

              & pre { margin: var(--space-8) 0; }

              & table { margin: var(--space-8) 0; }

              & figure { margin: var(--space-8) 0; }

              & hr { margin: var(--space-12) 0; }
            }

            &.no-padding {
              padding: 0;
            }

/* Container query responsive adjustments */
            @container (width <= 768px) {
              font-size: var(--text-sm, 0.875rem);
              padding: var(--space-4) var(--space-3);

              &.compact {
                padding: var(--space-3) var(--space-2);
              }

              &.spacious {
                padding: var(--space-6) var(--space-4);
              }
            }

            @container (width <= 480px) {
              font-size: var(--text-sm, 0.875rem);
              padding: var(--space-3) var(--space-2);

              & ul, & ol {
                padding-left: var(--space-4);
              }

              & blockquote {
                padding: var(--space-2) var(--space-3);
              }

              & table {
                font-size: var(--text-xs, 0.75rem);

                & th, & td {
                  padding: var(--space-1);
                }
              }
            }
          }

/* Dark mode support */
          @media (prefers-color-scheme: dark) {
            .main {
              --main-color: var(--color-neutral-100, #f3f4f6);
              --main-heading-color: var(--color-neutral-50);
              --main-link-color: var(--color-primary-400);
              --main-link-hover: var(--color-primary-300);

              & code {
                background-color: var(--color-neutral-800, #1f2937);
                color: var(--color-neutral-200, #e5e7eb);
              }

              & table {
                & th, & td {
                  border-color: var(--color-neutral-700, #374151);
                }

                & th {
                  background-color: var(--color-neutral-800, #1f2937);
                }

                & tbody tr:nth-child(even) {
                  background-color: var(--color-neutral-900, #111827);
                }
              }

              & blockquote {
                border-left-color: var(--color-primary-600, #2563eb);
              }

              & hr {
                border-top-color: var(--color-neutral-700, #374151);
              }

              & figure figcaption {
                color: var(--color-neutral-400, #9ca3af);
              }
            }
          }

/* Fallback media queries for browsers without container query support */
          @supports not (container-type: inline-size) {
            @media (max-width: 768px) {
              .main {
                font-size: var(--text-sm, 0.875rem);
                padding: var(--space-4) var(--space-3);

                & h1 { font-size: var(--text-3xl); }

                & h2 { font-size: var(--text-2xl); }

                & h3 { font-size: var(--text-xl); }

                & h4 { font-size: var(--text-lg); }

                & h5 { font-size: var(--text-base); }

                & h6 { font-size: var(--text-sm, 0.875rem); }

                & p.lead { font-size: var(--text-base); }

                & p.small { font-size: var(--text-xs, 0.75rem); }

                & blockquote {
                  font-size: var(--text-base);
                  margin: var(--space-4) 0;
                  padding: var(--space-3) var(--space-4);
                }

                & pre {
                  font-size: var(--text-xs, 0.75rem);
                  margin: var(--space-4) 0;
                  padding: var(--space-3);
                }

                & table {
                  font-size: var(--text-sm, 0.875rem);
                  margin: var(--space-4) 0;

                  & th, & td {
                    padding: var(--space-2);
                  }
                }

                & figure {
                  margin: var(--space-4) 0;

                  & figcaption {
                    font-size: var(--text-xs, 0.75rem);
                  }
                }

                & hr {
                  margin: var(--space-6) 0;
                }

                &.compact {
                  padding: var(--space-3) var(--space-2);
                }

                &.spacious {
                  padding: var(--space-6) var(--space-4);
                }
              }
            }

            @media (width <= 480px) {
              .main {
                font-size: var(--text-sm, 0.875rem);
                padding: var(--space-3) var(--space-2);

                & h1 { font-size: var(--text-2xl); }

                & h2 { font-size: var(--text-xl); }

                & h3 { font-size: var(--text-lg); }

                & ul, & ol {
                  padding-left: var(--space-4);
                }

                & blockquote {
                  padding: var(--space-2) var(--space-3);
                }

                & table {
                  font-size: var(--text-xs, 0.75rem);

                  & th, & td {
                    padding: var(--space-1);
                  }
                }
              }
            }
          }

/* Print styles */
          @media print {
            .main {
              color: var(--color-neutral-900, #111827) !important;
              font-size: 12pt;
              max-width: none;
              padding: 0;

              & h1, & h2, & h3, & h4, & h5, & h6 {
                color: var(--color-neutral-900, #111827) !important;
                page-break-after: avoid;
              }

              & p, & li {
                orphans: 3;
                widows: 3;
              }

              & blockquote, & pre, & table, & figure {
                page-break-inside: avoid;
              }

              & a {
                color: var(--color-neutral-900, #111827) !important;
                text-decoration: underline;
              }

              & pre {
                background: var(--color-neutral-100, #f3f4f6) !important;
                border: 1px solid var(--color-neutral-300, #d1d5db);
                color: var(--color-neutral-900, #111827) !important;
              }

              & code {
                background: var(--color-neutral-100, #f3f4f6) !important;
                color: var(--color-neutral-900, #111827) !important;
              }
            }
          }

/* High contrast mode */
          @media (prefers-contrast: more) {
            .main {
              & a {
                text-decoration: underline;
              }

              & table {
                & th, & td {
                  border: 2px solid;
                }
              }

              & blockquote {
                border-left-width: 6px;
              }

              & code {
                border: 1px solid;
              }
            }
          }

/* Reduced motion */
          @media (prefers-reduced-motion: reduce) {
            .main {
              & a {
                transition: none;
              }
            }
          }
        }

/* Datei: ui/regions/header.css */
/*
        * Header Module
        *
        * Layout rules for the header area. Supports Subgrid, Container Queries and responsive behavior.
        * Combines traditional Grid layouts with modern CSS features and Design Tokens.
        */

/**
        * Header Component
        *
        * Header components for websites and applications.
        * The header serves as a navigation area and important orientation point for users.
        *
        * Header Types:
        * - .header: Standard Subgrid-Layout (original)
        * - .header-standard: Logo left, nav center, actions right
        * - .header-center: Centered navigation
        * - .header-split: Logo center, nav split left/right
        * - .header-stacked: Logo above nav (both centered)
        * - .header-left: Logo and nav left-aligned
        * - .header-bottom-bar: Two-tier layout
        *
        * @layer components.header
        *
        * Basic Usage:
        * <header class="header">
        *   <div class="logo">
        *     <img src="logo.png" alt="Logo">
        *   </div>
        *   <nav class="nav">
        *     <ul class="links">
        *       <li><a href="#" class="link">Home</a></li>
        *       <li><a href="#" class="link">Products</a></li>
        *       <li><a href="#" class="link">About</a></li>
        *       <li><a href="#" class="link">Contact</a></li>
        *     </ul>
        *   </nav>
        *   <button class="toggle" aria-label="Toggle navigation">
        *     <span></span>
        *     <span></span>
        *     <span></span>
        *   </button>
        * </header>
        *
        * New Header Types:
        * <header class="header-standard">
        *   <div class="header-content">
        *     <div class="header-logo">...</div>
        *     <nav class="header-nav">...</nav>
        *     <div class="header-actions">...</div>
        *   </div>
        * </header>
        *
        * Fixed Header:
        * <header class="header fixed">...</header>
        *
        * Sticky Header (remains visible while scrolling):
        * <header class="header sticky">...</header>
        *
        * Transparent Header (for Hero sections):
        * <header class="header transparent">...</header>
        *
        * Variants:
        * <header class="header light">...</header>
        * <header class="header dark">...</header>
        * <header class="header primary">...</header>
        *
        * With Search Function:
        * <header class="header">
        *   <!-- ... -->
        *   <div class="search">
        *     <input type="search" class="input" placeholder="Search...">
        *     <button class="button icon-only">
        *       <span class="icon">🔍</span>
        *     </button>
        *   </div>
        * </header>
        *
        * Responsive with Hamburger Menu:
        * <header class="header">
        *   <div class="logo">Logo</div>
        *   <button class="toggle hamburger" aria-label="Open menu"></button>
        *   <nav class="nav mobile-hidden">
        *     <!-- Menu items -->
        *   </nav>
        * </header>
        */

        @layer tokens {
          :root {
/* Header spacing */
            --header-padding: var(--space-4) var(--space-6);
            --header-padding-compact: var(--space-3) var(--space-4);
            --header-padding-spacious: var(--space-6) var(--space-8);
            --header-gap: var(--space-6);
            --header-gap-compact: var(--space-4);
            --header-gap-spacious: var(--space-8);

/* Header colors */
            --header-bg: var(--color-white, #fff);
            --header-text: var(--color-neutral-700, #374151);
            --header-link: var(--color-neutral-600);
            --header-link-hover: var(--color-primary-600, #2563eb);
            --header-link-active: var(--color-primary-700, #1d4ed8);
            --header-border: var(--color-neutral-200, #e5e7eb);
            --header-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));

/* Header typography */
            --header-font-size: var(--text-base);
            --header-font-weight: var(--font-medium, 500);
            --header-line-height: 1.5;
            --header-logo-size: var(--text-xl);
            --header-logo-weight: var(--font-bold);

/* Header layout */
            --header-height: 6%4px;
            --header-height-compact: 48px;
            --header-height-large: 80px;
            --header-max-width: var(--container-7xl);
            --header-z-index: 1000;

/* Header navigation */
            --nav-link-color: var(--color-neutral-600);
            --nav-link-color-hover: var(--color-primary-600, #2563eb);
            --nav-link-color-active: var(--color-primary-700, #1d4ed8);
            --nav-link-bg-hover: var(--color-neutral-100, #f3f4f6);
            --nav-link-bg-active: var(--color-primary-100, #dbeafe);
            --menu-gap: var(--space-6);
            --menu-item-padding-x: var(--space-3);
            --menu-item-padding-y: var(--space-2);
            --menu-transition: all 0.2s ease;

/* Header dropdown */
            --mobile-menu-bg: var(--color-white, #fff);
            --mobile-menu-border-radius: var(--radius-lg, 0.5rem);
            --mobile-menu-shadow: var(--shadow-lg);
            --mobile-menu-z-index: 1001;

/* Header mobile */
            --header-mobile-breakpoint: 768px;
            --header-hamburger-size: 24px;

/* Logo settings */
            --logo-max-height: 4%0px;
            --logo-max-width: 20%0px;

/* Header themes */
            &[data-theme="dark"],
            &.theme-dark {
              --header-bg: var(--color-neutral-900, #111827);
              --header-text: var(--color-neutral-100, #f3f4f6);
              --header-link: var(--color-neutral-300, #d1d5db);
              --header-link-hover: var(--color-primary-400);
              --header-link-active: var(--color-primary-300);
              --header-border: var(--color-neutral-700, #374151);
              --header-shadow: var(--shadow-md);
              --nav-link-color: var(--color-neutral-300, #d1d5db);
              --nav-link-color-hover: var(--color-primary-400);
              --nav-link-color-active: var(--color-primary-300);
              --nav-link-bg-hover: var(--color-neutral-800, #1f2937);
              --nav-link-bg-active: var(--color-primary-900);
              --mobile-menu-bg: var(--color-neutral-800, #1f2937);
            }

            &[data-theme="primary"],
            &.theme-primary {
              --header-bg: var(--color-primary-600, #2563eb);
              --header-text: var(--color-white, #fff);
              --header-link: var(--color-primary-100, #dbeafe);
              --header-link-hover: var(--color-white, #fff);
              --header-link-active: var(--color-primary-200);
              --header-border: var(--color-primary-500);
              --nav-link-color: var(--color-primary-100, #dbeafe);
              --nav-link-color-hover: var(--color-white, #fff);
              --nav-link-color-active: var(--color-primary-200);
              --nav-link-bg-hover: var(--color-primary-700, #1d4ed8);
              --nav-link-bg-active: var(--color-primary-800, #1e40af);
              --mobile-menu-bg: var(--color-primary-700, #1d4ed8);
            }

            &[data-theme="transparent"],
            &.theme-transparent {
              --header-bg: transparent;
              --header-text: var(--color-neutral-800, #1f2937);
              --header-link: var(--color-neutral-700, #374151);
              --header-link-hover: var(--color-primary-600, #2563eb);
              --header-link-active: var(--color-primary-700, #1d4ed8);
              --header-border: transparent;
              --header-shadow: none;
              --nav-link-color: var(--color-neutral-700, #374151);
              --nav-link-color-hover: var(--color-primary-600, #2563eb);
              --nav-link-color-active: var(--color-primary-700, #1d4ed8);
              --mobile-menu-bg: var(--color-white, #fff);
            }
          }
        }

        @layer components {
/* Base header styles for all header types */
          .header,
          .header-standard,
          .header-center,
          .header-split,
          .header-stacked,
          .header-left,
          .header-bottom-bar {
            background-color: var(--header-bg);
            border-bottom: 1px solid var(--header-border);
            box-shadow: var(--header-shadow);
            color: var(--header-text);
            container-type: inline-size;
            font-size: var(--header-font-size);
            font-weight: var(--header-font-weight);
            line-height: var(--header-line-height, 1.5);
            min-height: var(--header-height, 4rem);
            position: relative;
            width: 100%;
            z-index: var(--header-z-index);

/* Header modifiers */
            &.sticky {
              position: sticky;
              top: 0%;
            }

            &.transparent {
              background-color: transparent;
              border-bottom: none;
              box-shadow: none;
            }

            &.compact {
              min-height: var(--header-height-compact, 3rem);
            }

            &.large {
              min-height: var(--header-height-large, 5rem);
            }
          }

/* Original Subgrid Header Layout */
          .header {
            align-items: center;
            display: grid;
            gap: var(--space-4);
            grid-column: span 12;
            grid-template-columns: subgrid;
            grid-template-rows: auto;
            padding-block: var(--space-4);

/* Logo area */
            & .logo {
              align-items: center;
              display: flex;
              grid-column: 1 / span 3;

              & img {
                max-height: var(--logo-max-height, 2rem);
                width: auto;
              }
            }

/* Navigation area */
            & .nav {
              display: flex;
              gap: var(--space-4);
              grid-column: 4 / span 6;
              justify-content: center;

              & .links {
                display: flex;
                gap: var(--space-4);
                list-style: none;
                margin: 0;
                padding: 0;
              }

              & .link {
                color: var(--nav-link-color);
                display: inline-block;
                font-weight: var(--font-medium, 500);
                padding: var(--space-2);
                text-decoration: none;
                transition: var(--menu-transition);

                &:hover {
                  color: var(--nav-link-color-hover);
                }

                &.active {
                  color: var(--nav-link-color-active);
                  font-weight: var(--font-semibold, 600);
                }
              }

              &.mobile-hidden {
                @container (width <= 768px) {
                  display: none;
                }
              }
            }

/* Actions area (buttons, etc.) */
            & .actions {
              display: flex;
              gap: var(--space-2);
              grid-column: 10 / span 3;
              justify-content: flex-end;
            }

/* Search area */
            & .search {
              display: flex;
              max-width: 30%0px;
              width: 100%;

              & .input {
                flex: 1;
              }
            }

/* Toggle button for mobile navigation */
            & .toggle {
              display: none;

              @container (width <= 768px) {
                background: none;
                border: none;
                cursor: pointer;
                display: block;
                grid-column: 12;
              }
            }

/* Theme variants for original header */
            &.fixed {
              background-color: var(--header-bg);
              box-shadow: var(--header-shadow);
              left: 0%;
              position: fixed;
              right: 0%;
              top: 0%;
              z-index: var(--header-z-index);
            }

            &.primary {
              background-color: var(--color-primary, #3b82f6);
              color: white;

              & .link {
                color: var(--color-primary-100, #dbeafe);

                &:hover {
                  color: var(--color-white, #fff);
                }
              }
            }

            &.light {
              background-color: var(--color-white, #fff);
            }

            &.dark {
              background-color: var(--color-neutral-900, #111827);

              & .link {
                color: var(--color-neutral-300, #d1d5db);

                &:hover {
                  color: var(--color-white, #fff);
                }
              }
            }

/* Container Queries for original header */
            @container (width <= 768px) {
              grid-template-columns: repeat(12, 1fr);

              & .logo {
                grid-column: 1 / span 6;
              }

              & .nav {
                display: none;
              }

              & .actions {
                grid-column: 7 / span 5;
              }
            }
          }

/* Header content wrapper for new header types */
          .header-standard,
          .header-center,
          .header-split,
          .header-stacked,
          .header-left,
          .header-bottom-bar {
            & .header-content {
              align-items: center;
              display: flex;
              margin: 0 auto;
              max-width: var(--header-max-width, 1280px);
              padding: var(--header-padding);
              width: 100%;
            }
          }

/* Logo component for new header types */
          .header-logo {
            align-items: center;
            display: flex;
            flex-shrink: 0;

            & img,
            & svg {
              height: auto;
              max-height: var(--logo-max-height, 2rem);
              max-width: var(--logo-max-width, 8rem);
              width: auto;
            }
          }

/* Navigation component for new header types */
          .header-nav {
            & ul {
              align-items: center;
              display: flex;
              gap: var(--menu-gap);
              list-style: none;
              margin: 0;
              padding: 0;
            }

            & li {
              position: relative;
            }

            & a {
              align-items: center;
              border-radius: var(--radius-md, 0.375rem);
              color: var(--nav-link-color);
              display: flex;
              font-weight: var(--font-medium, 500);
              gap: var(--space-1);
              padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
              text-decoration: none;
              transition: var(--menu-transition);

              &:hover {
                background-color: var(--nav-link-bg-hover);
                color: var(--nav-link-color-hover);
              }

              &.active {
                background-color: var(--nav-link-bg-active);
                color: var(--nav-link-color-active);
              }
            }

/* Dropdown indicator */
            & .has-dropdown > a::after {
              content: "▼";
              font-size: var(--text-xs, 0.75rem);
              margin-left: var(--space-1);
              transition: transform 0.2s ease;
            }

            & .has-dropdown:hover > a::after,
            & .has-dropdown.open > a::after {
              transform: rotate(180deg);
            }

/* Dropdown menu */
            & .dropdown {
              background-color: var(--mobile-menu-bg);
              border-radius: var(--mobile-menu-border-radius);
              box-shadow: var(--mobile-menu-shadow);
              left: 0%;
              min-width: 20%0px;
              opacity: 0%;
              padding: var(--space-2);
              position: absolute;
              top: 100%;
              transform: translateY(-10px);
              transition: var(--menu-transition);
              visibility: hidden;
              z-index: var(--mobile-menu-z-index);
            }

            & .has-dropdown:hover .dropdown,
            & .has-dropdown.open .dropdown {
              opacity: 1;
              transform: translateY(0%);
              visibility: visible;
            }

            & .dropdown ul {
              flex-direction: column;
              gap: 0;
            }

            & .dropdown a {
              border-radius: var(--radius-sm, 0.125rem);
              font-size: var(--text-sm, 0.875rem);
              padding: var(--space-2) var(--space-3);
              width: 100%;
            }

/* Nested dropdowns */
            & .dropdown .has-dropdown > a::after {
              content: "▶";
              margin-left: auto;
            }

            & .dropdown .dropdown {
              left: 100%;
              top: 0%;
            }

/* Megamenu */
            & .has-megamenu .dropdown {
              display: grid;
              gap: var(--space-6);
              grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
              left: 50%;
              max-width: 9%0vw;
              min-width: 60%0px;
              padding: var(--space-6);
              transform: translateX(-50%) translateY(-10px);
              width: max-content;
            }

            & .has-megamenu:hover .dropdown,
            & .has-megamenu.open .dropdown {
              transform: translateX(-50%) translateY(0);
            }

            & .megamenu-section {
              display: flex;
              flex-direction: column;
              gap: var(--space-3);
            }

            & .megamenu-title {
              color: var(--header-text);
              font-size: var(--text-sm, 0.875rem);
              font-weight: var(--font-semibold, 600);
              margin-bottom: var(--space-2);
              text-transform: uppercase;
            }

            & .megamenu-section ul {
              flex-direction: column;
              gap: var(--space-1);
            }

            & .megamenu-section a {
              font-size: var(--text-sm, 0.875rem);
              padding: var(--space-1) var(--space-2);
            }
          }

/* Actions component */
          .header-actions {
            align-items: center;
            display: flex;
            gap: var(--space-2);
            margin-left: auto;
          }

/* Toggle button for mobile */
          .header-toggle {
            background: none;
            border: none;
            cursor: pointer;
            display: none;
            height: var(--header-hamburger-size, 1.5rem);
            padding: 0;
            width: var(--header-hamburger-size, 1.5rem);

            @container (width <= 768px) {
              display: block;
            }
          }

          .header-toggle:hover {
            opacity: 0.7;
          }

/* Mobile menu */
          .header-mobile {
            background-color: var(--mobile-menu-bg);
            border-top: 1px solid var(--header-border);
            display: none;
            left: 0%;
            padding: var(--space-4);
            position: absolute;
            right: 0%;
            top: 100%;
            z-index: var(--mobile-menu-z-index);

            @container (width <= 768px) {
              display: block;
            }
          }

          .header-mobile.visible {
            display: block;
          }

          .header-mobile ul {
            display: flex;
            flex-direction: column;
            gap: 0;
            list-style: none;
            margin: 0;
            padding: 0;
          }

          .header-mobile li {
            border-bottom: 1px solid var(--header-border);
          }

          .header-mobile a {
            color: var(--nav-link-color);
            display: block;
            font-weight: var(--font-medium, 500);
            padding: var(--space-3) 0;
            text-decoration: none;
            transition: var(--menu-transition);
          }

          .header-mobile a:hover {
            color: var(--nav-link-color-hover);
          }

          .header-mobile a.active {
            color: var(--nav-link-color-active);
            font-weight: var(--font-semibold, 600);
          }

          .header-mobile .has-submenu > a::after {
            content: "+";
            float: right;
            transition: transform 0.2s ease;
          }

          .header-mobile .has-submenu.open > a::after {
            transform: rotate(45deg);
          }

          .header-mobile .submenu {
            display: none;
            padding-left: var(--space-4);
          }

          .header-mobile .has-submenu.open .submenu {
            display: block;
          }

          .header-mobile .submenu a {
            font-size: var(--text-sm, 0.875rem);
            padding: var(--space-2) 0;
          }

          .header-mobile .submenu .submenu a {
            padding-left: var(--space-4);
          }

/* Header Type: Standard */
          .header-standard {
            & .header-content {
              justify-content: space-between;
            }
          }

/* Header Type: Center */
          .header-center {
            & .header-content {
              flex-direction: column;
              gap: var(--space-4);
            }

            & .header-logo {
              order: 1;
            }

            & .header-nav {
              order: 2;
            }

            & .header-actions {
              margin-left: 0%;
              order: 3;
            }
          }

/* Header Type: Split */
          .header-split {
            & .header-content {
              justify-content: space-between;
            }

            & .header-nav:first-of-type {
              order: 1;
            }

            & .header-logo {
              order: 2;
            }

            & .header-nav:last-of-type {
              order: 3;
            }
          }

/* Header Type: Stacked */
          .header-stacked {
            & .header-content {
              flex-direction: column;
              gap: var(--space-4);
              text-align: center;
            }

            & .header-nav {
              margin-left: 0%;
            }

            &.inline {
              & .header-content {
                align-items: center;
                flex-direction: row;
                gap: var(--space-6);
              }

              & .header-nav {
                margin-left: auto;
              }
            }
          }

/* Header Type: Left */
          .header-left {
            & .header-content {
              justify-content: flex-start;
            }

            & .header-content {
              gap: var(--space-6);
            }
          }

/* Header Type: Bottom Bar */
          .header-bottom-bar {
            & .header-top {
              align-items: center;
              border-bottom: 1px solid var(--header-border);
              display: flex;
              justify-content: space-between;
              padding: var(--space-2) var(--space-6);
            }

            & .header-bottom {
              padding: var(--space-4) var(--space-6);
            }

            & .header-nav {
              justify-content: center;
              width: 100%;
            }

            &.transparent .header-bottom {
              background-color: var(--header-bg);
              border-top: 1px solid var(--header-border);
            }
          }

/* Container Queries for new header types */
          @container (width <= 1024px) {
            .header-center,
            .header-split,
            .header-stacked {
              & .header-content {
                flex-direction: column;
                gap: var(--space-4);
              }

              & .header-nav {
                margin-left: 0%;
              }

              & .header-toggle {
                display: block;
              }

              & .header-logo img,
              & .header-logo svg {
                max-height: 3%2px;
              }

              & .header {
                min-height: var(--header-height-compact, 3rem);
              }

              & .header-bottom-bar .header-bottom {
                padding: var(--space-3) var(--space-4);
              }

              & .header-nav .dropdown {
                position: static;
                transform: none;
                visibility: visible;
              }
            }
          }

          @container (width <= 768px) {
            .header-center,
            .header-split,
            .header-stacked {
              & .header-content {
                flex-direction: column;
                gap: var(--space-3);
              }

              & .header-nav {
                display: none;
              }

              & .header-toggle {
                display: block;
              }

              & .header-logo img,
              & .header-logo svg {
                max-height: 2%8px;
              }

              & .header {
                min-height: var(--header-height-compact, 3rem);
              }

              & .header-bottom-bar .header-bottom {
                padding: var(--space-2) var(--space-3);
              }
            }
          }
        }

/* Fallback support for browsers without Container Queries */
        @supports not (container-type: inline-size) {
          @media (width <= 1024px) {
            .header-center .header-content,
            .header-split .header-content,
            .header-stacked .header-content {
              flex-direction: column;
              gap: var(--space-4);
            }

            .header-center .header-nav,
            .header-split .header-nav,
            .header-stacked .header-nav {
              margin-left: 0%;
            }

            .header-toggle {
              display: block;
            }

            .header-logo img,
            .header-logo svg {
              max-height: 3%2px;
            }

            .header {
              min-height: var(--header-height-compact, 3rem);
            }

            .header-bottom-bar .header-bottom {
              padding: var(--space-3) var(--space-4);
            }
          }

          @media (max-width: 768px) {
            .header .logo {
              grid-column: 1 / span 6;
            }

            .header .nav {
              display: none;
            }

            .header .actions {
              grid-column: 7 / span 5;
            }

            .header-center .header-content,
            .header-split .header-content,
            .header-stacked .header-content {
              flex-direction: column;
              gap: var(--space-3);
            }

            .header-center .header-nav,
            .header-split .header-nav,
            .header-stacked .header-nav {
              display: none;
            }

            .header-toggle {
              display: block;
            }

            .header-logo img,
            .header-logo svg {
              max-height: 2%8px;
            }

            .header {
              min-height: var(--header-height-compact, 3rem);
            }

            .header-bottom-bar .header-bottom {
              padding: var(--space-2) var(--space-3);
            }
          }
        }

/* Print styles */
        @media print {
          .header,
          .header-standard,
          .header-center,
          .header-split,
          .header-stacked,
          .header-left,
          .header-bottom-bar {
            background: white !important;
            border-bottom: 1px solid var(--color-neutral-900, #111827);
            box-shadow: none !important;
            color: var(--color-neutral-900, #111827) !important;
            position: static !important;

            & a {
              color: var(--color-neutral-900, #111827) !important;
              text-decoration: underline;
            }

            & .header-toggle,
            & .header-mobile {
              display: none !important;
            }

            & .header-nav {
              display: flex !important;
            }
          }
        }

/* High contrast mode */
        @media (prefers-contrast: more) {
          .header,
          .header-standard,
          .header-center,
          .header-split,
          .header-stacked,
          .header-left,
          .header-bottom-bar {
            border-bottom-width: 2px;

            & a {
              text-decoration: underline;
            }
          }
        }

/* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
          .header,
          .header-standard,
          .header-center,
          .header-split,
          .header-stacked,
          .header-left,
          .header-bottom-bar {
            & a,
            & .header-toggle,
            & .dropdown {
              transition: none;
            }
          }
        }




/* Datei: ui/regions/footer.css */
/*
        * Footer Module
        *
        * Layout rules for the footer area. Supports Subgrid, Container Queries and responsive behavior.
        * Combines traditional Grid layouts with modern CSS features and Design Tokens.
        */

/**
        * Footer Component
        *
        * Footer components for websites and applications.
        * The footer contains additional navigation elements, contact information and legal notices.
        *
        * @layer components.footer
        *
        * Footer Types:
        * - .footer: Standard Subgrid-Layout (original)
        * - .footer-simple: Basic single-row footer
        * - .footer-columns: Multi-column layout
        * - .footer-stacked: Vertical stacking
        * - .footer-split: Left/right split layout
        * - .footer-minimal: Minimal single-line footer
        *
        * Basic Usage:
        * <footer class="footer">
        *   <div class="logo">
        *     <img src="logo.png" alt="Logo">
        *   </div>
        *   <div class="content">
        *     <div class="section">
        *       <h4 class="heading">About Us</h4>
        *       <p>Brief company description</p>
        *     </div>
        *     <div class="section">
        *       <h4 class="heading">Links</h4>
        *       <ul class="links">
        *         <li><a href="#" class="link">Home</a></li>
        *         <li><a href="#" class="link">Products</a></li>
        *         <li><a href="#" class="link">About</a></li>
        *         <li><a href="#" class="link">Contact</a></li>
        *       </ul>
        *     </div>
        *     <div class="section">
        *       <h4 class="heading">Contact</h4>
        *       <address class="address">
        *         123 Example Street<br>
        *         12345 Example City<br>
        *         info@example.com
        *       </address>
        *     </div>
        *   </div>
        *   <div class="bottom">
        *     <p class="copyright">&copy; 2023 Company. All rights reserved.</p>
        *     <div class="social">
        *       <a href="#" class="social-link"><!-- Social Icon 1 --></a>
        *       <a href="#" class="social-link"><!-- Social Icon 2 --></a>
        *     </div>
        *   </div>
        * </footer>
        *
        * Variants:
        * <footer class="footer light">...</footer>
        * <footer class="footer dark">...</footer>
        * <footer class="footer primary">...</footer>
        *
        * Minimal Footer:
        * <footer class="footer minimal">
        *   <p class="copyright">&copy; 2023 Company</p>
        *   <ul class="legal">
        *     <li><a href="#">Imprint</a></li>
        *     <li><a href="#">Privacy</a></li>
        *     <li><a href="#">Terms</a></li>
        *   </ul>
        * </footer>
        */

        @layer tokens {
          :root {
/* Footer spacing */
            --footer-padding: var(--space-8) var(--space-4);
            --footer-padding-compact: var(--space-6) var(--space-3);
            --footer-padding-spacious: var(--space-12) var(--space-6);
            --footer-gap: var(--space-6);
            --footer-gap-compact: var(--space-4);
            --footer-gap-spacious: var(--space-8);
            --footer-section-gap: var(--space-4);

/* Footer colors */
            --footer-bg: var(--color-neutral-50);
            --footer-text: var(--color-neutral-700, #374151);
            --footer-heading: var(--color-neutral-900, #111827);
            --footer-link: var(--color-primary-600, #2563eb);
            --footer-link-hover: var(--color-primary-700, #1d4ed8);
            --footer-border: var(--color-neutral-200, #e5e7eb);

/* Footer typography */
            --footer-font-size: var(--text-sm, 0.875rem);
            --footer-line-height: 1%.6;
            --footer-heading-size: var(--text-base);
            --footer-heading-weight: var(--font-semibold, 600);
            --footer-link-weight: var(--font-medium, 500);

/* Footer layout */
            --footer-max-width: var(--container-7xl);
            --footer-columns: 4;
            --footer-column-gap: var(--space-8);
            --footer-min-height: auto;

/* Footer themes */
            &[data-theme="dark"],
            &.theme-dark {
              --footer-bg: var(--color-neutral-900, #111827);
              --footer-text: var(--color-neutral-300, #d1d5db);
              --footer-heading: var(--color-neutral-100, #f3f4f6);
              --footer-link: var(--color-primary-400);
              --footer-link-hover: var(--color-primary-300);
              --footer-border: var(--color-neutral-700, #374151);
            }

            &[data-theme="primary"],
            &.theme-primary {
              --footer-bg: var(--color-primary-900);
              --footer-text: var(--color-primary-100, #dbeafe);
              --footer-heading: var(--color-white, #fff);
              --footer-link: var(--color-primary-200);
              --footer-link-hover: var(--color-white, #fff);
              --footer-border: var(--color-primary-700, #1d4ed8);
            }

            &[data-theme="minimal"],
            &.theme-minimal {
              --footer-bg: transparent;
              --footer-text: var(--color-neutral-600);
              --footer-heading: var(--color-neutral-800, #1f2937);
              --footer-link: var(--color-neutral-700, #374151);
              --footer-link-hover: var(--color-neutral-900, #111827);
              --footer-border: var(--color-neutral-300, #d1d5db);
              --footer-padding: var(--space-4) 0;
            }
          }
        }

        @layer components {
/* Base footer styles for all footer types */
          .footer,
          .footer-simple,
          .footer-columns,
          .footer-stacked,
          .footer-split,
          .footer-minimal {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            container-type: inline-size;
            font-size: var(--footer-font-size);
            line-height: var(--footer-line-height, 1.5);
            padding: var(--footer-padding);
            width: 100%;

/* Typography */
            & h1, & h2, & h3, & h4, & h5, & h6,
            & .heading {
              color: var(--footer-heading);
              font-size: var(--footer-heading-size);
              font-weight: var(--footer-heading-weight);
              margin: 0 0 var(--footer-section-gap) 0;
            }

            & p {
              margin: 0 0 var(--space-3) 0;

              &:last-child {
                margin-bottom: 0%;
              }
            }

/* Links */
            & a,
            & .link {
              color: var(--footer-link);
              font-weight: var(--footer-link-weight);
              text-decoration: none;
              transition: color 0.2s ease;

              &:hover,
              &:focus {
                color: var(--footer-link-hover);
                text-decoration: underline;
              }

              &:focus {
                outline: 2px solid var(--footer-link);
                outline-offset: 2px;
              }
            }

/* Lists */
            & ul, & ol,
            & .links {
              list-style: none;
              margin: 0;
              padding: 0;

              & li {
                margin-bottom: var(--space-2);

                &:last-child {
                  margin-bottom: 0%;
                }
              }
            }

/* Address */
            & .address {
              color: var(--footer-text);
              font-style: normal;
              line-height: 1.5;
            }

/* Utility modifiers */
            &.compact {
              padding: var(--footer-padding-compact);
            }

            &.spacious {
              padding: var(--footer-padding-spacious);
            }

/* Text alignment utilities */
            &.center {
              text-align: center;
            }

            &.left {
              text-align: left;
            }

            &.right {
              text-align: right;
            }
          }

/* Original Subgrid Footer Layout */
          .footer {
            border-top: 1px solid var(--footer-border);
            display: grid;
            gap: var(--space-4);
            grid-column: span 12;
            grid-template-columns: subgrid;
            grid-template-rows: auto;

/* Logo area */
            & .logo {
              grid-column: span 3;

              & img {
                height: auto;
                max-width: 15%0px;
              }
            }

/* Content areas */
            & .content {
              display: grid;
              gap: var(--space-6);
              grid-column: span 9;
              grid-template-columns: repeat(3, 1fr);
            }

/* Sections */
            & .section {
              display: flex;
              flex-direction: column;
              gap: var(--space-2);
            }

/* Bottom area */
            & .bottom {
              align-items: center;
              border-top: 1px solid var(--footer-border);
              display: flex;
              grid-column: span 12;
              justify-content: space-between;
              margin-top: var(--space-4);
              padding-top: var(--space-4);
            }

/* Copyright */
            & .copyright {
              color: var(--footer-text);
              font-size: var(--text-sm, 0.875rem);
              margin: 0;
            }

/* Social Media */
            & .social {
              display: flex;
              gap: var(--space-3);

              & .social-link {
                align-items: center;
                background-color: var(--color-neutral-100, #f3f4f6);
                border-radius: 50px;
                color: var(--color-neutral-600);
                display: flex;
                height: 2rem;
                justify-content: center;
                transition: background-color 150ms ease, color 150ms ease;
                width: 2rem;

                &:hover {
                  background-color: var(--color-primary, #3b82f6);
                  color: white;
                }
              }
            }

/* Legal links */
            & .legal {
              display: flex;
              gap: var(--space-4);

              & a {
                color: var(--footer-text);
                font-size: var(--text-sm, 0.875rem);

                &:hover {
                  color: var(--footer-link-hover);
                }
              }
            }

/* Theme variants for original footer */
            &.light {
              background-color: var(--color-white, #fff);
            }

            &.dark {
              background-color: var(--color-neutral-900, #111827);

              & .heading {
                color: var(--color-white, #fff);
              }

              & .link, & .address {
                color: var(--color-neutral-300, #d1d5db);
              }

              & .link:hover {
                color: var(--color-primary-400);
              }

              & .bottom {
                border-top-color: var(--color-neutral-700, #374151);
              }

              & .copyright, & .legal a {
                color: var(--color-neutral-400, #9ca3af);
              }

              & .social-link {
                background-color: var(--color-neutral-700, #374151);
                color: var(--color-neutral-300, #d1d5db);
              }
            }

            &.primary {
              background-color: var(--color-primary, #3b82f6);
              color: var(--color-white, #fff);

              & .heading {
                color: var(--color-white, #fff);
              }

              & .link, & .address {
                color: var(--color-primary-100, #dbeafe);
              }

              & .link:hover {
                color: var(--color-white, #fff);
              }

              & .bottom {
                border-top-color: var(--color-primary-600, #2563eb);
              }

              & .copyright, & .legal a {
                color: var(--color-primary-200);
              }

              & .social-link {
                background-color: var(--color-primary-600, #2563eb);
                color: var(--color-white, #fff);
              }
            }

            &.minimal {
              background-color: transparent;
              border-top: none;
              padding: var(--space-4) 0;

              & .bottom {
                border-top: 1px solid var(--color-neutral-200, #e5e7eb);
                margin-top: 0%;
                padding-top: var(--space-4);
              }
            }

/* Container Queries for original footer */
            @container (width <= 992px) {
              & .logo {
                grid-column: span 12;
                text-align: center;
              }

              & .content {
                grid-column: span 12;
                grid-template-columns: repeat(2, 1fr);
              }
            }

            @container (width <= 768px) {
              & .bottom {
                flex-direction: column;
                gap: var(--space-4);
                text-align: center;
              }

              & .legal {
                flex-direction: column;
                gap: var(--space-2);
              }
            }

            @container (width <= 576px) {
              & .content {
                grid-template-columns: 1fr;
              }
            }
          }

/* Footer content wrapper for new footer types */
          .footer-simple,
          .footer-columns,
          .footer-stacked,
          .footer-split,
          .footer-minimal {
            & .footer-content {
              margin: 0 auto;
              max-width: var(--footer-max-width, 1280px);
              width: 100%;
            }
          }

/* Footer Type: Simple */
          .footer-simple {
            & .footer-content {
              align-items: center;
              display: flex;
              flex-wrap: wrap;
              gap: var(--footer-gap);
              justify-content: space-between;

              @container (width <= 768px) {
                flex-direction: column;
                gap: var(--footer-gap-compact);
                text-align: center;
              }
            }

            & nav ul {
              flex-direction: row;
              gap: var(--space-4);

              @container (width <= 768px) {
                flex-direction: column;
                gap: var(--space-2);
              }
            }
          }

/* Footer Type: Columns */
          .footer-columns {
            & .footer-content {
              display: grid;
              gap: var(--footer-column-gap);
              grid-template-columns: repeat(var(--footer-columns), 1fr);

              @container (width <= 1024px) {
                grid-template-columns: repeat(2, 1fr);
              }

              @container (width <= 768px) {
                gap: var(--footer-gap);
                grid-template-columns: 1fr;
              }
            }

            &.cols-2 {
              --footer-columns: 2;

              @container (width <= 768px) {
                & .footer-content {
                  grid-template-columns: 1fr;
                }
              }
            }

            &.cols-3 {
              --footer-columns: 3;

              @container (width <= 1024px) {
                & .footer-content {
                  grid-template-columns: repeat(2, 1fr);
                }
              }

              @container (width <= 768px) {
                & .footer-content {
                  grid-template-columns: 1fr;
                }
              }
            }

            &.cols-4 {
              --footer-columns: 4;

              @container (width <= 1024px) {
                & .footer-content {
                  grid-template-columns: repeat(2, 1fr);
                }
              }

              @container (width <= 768px) {
                & .footer-content {
                  grid-template-columns: 1fr;
                }
              }
            }

            & section {
              & h4 {
                border-bottom: 2px solid var(--footer-border);
                margin-bottom: var(--space-3);
                padding-bottom: var(--space-2);
              }
            }
          }

/* Footer Type: Stacked */
          .footer-stacked {
            & .footer-content {
              display: flex;
              flex-direction: column;
              gap: var(--footer-gap);
              text-align: center;

              & > * {
                border-bottom: 1px solid var(--footer-border);
                padding-bottom: var(--footer-gap);

                &:last-child {
                  border-bottom: none;
                  padding-bottom: 0%;
                }
              }
            }

            & nav ul {
              flex-flow: row wrap;
              gap: var(--space-4);
              justify-content: center;

              @container (width <= 768px) {
                flex-direction: column;
                gap: var(--space-2);
              }
            }
          }

/* Footer Type: Split */
          .footer-split {
            & .footer-content {
              align-items: center;
              display: flex;
              justify-content: space-between;

              @container (width <= 768px) {
                flex-direction: column;
                gap: var(--footer-gap);
                text-align: center;
              }
            }

            & .footer-left {
              display: flex;
              flex-direction: column;
              gap: var(--space-2);

              @container (width <= 768px) {
                align-items: center;
              }
            }

            & .footer-right {
              display: flex;
              flex-direction: column;
              gap: var(--space-2);

              @container (width <= 768px) {
                align-items: center;
              }
            }

            & nav ul {
              flex-direction: row;
              gap: var(--space-4);

              @container (width <= 768px) {
                flex-direction: column;
                gap: var(--space-2);
              }
            }
          }

/* Footer Type: Minimal */
          .footer-minimal {
            background-color: transparent;
            border-top: 1px solid var(--footer-border);
            padding: var(--space-4) 0;

            & .footer-content {
              align-items: center;
              display: flex;
              justify-content: space-between;

              @container (width <= 768px) {
                flex-direction: column;
                gap: var(--space-3);
                text-align: center;
              }
            }

            & nav ul {
              flex-direction: row;
              gap: var(--space-4);

              @container (width <= 768px) {
                flex-direction: column;
                gap: var(--space-2);
              }
            }
          }

/* Theme variants for all footer types */
          .footer-simple,
          .footer-columns,
          .footer-stacked,
          .footer-split,
          .footer-minimal {
            &.theme-dark {
              background-color: var(--color-neutral-900, #111827);
              color: var(--color-neutral-300, #d1d5db);

              & h1, & h2, & h3, & h4, & h5, & h6 {
                color: var(--color-neutral-100, #f3f4f6);
              }

              & a {
                color: var(--color-primary-400);

                &:hover,
                &:focus {
                  color: var(--color-primary-300);
                }
              }

              & .footer-content section h4 {
                border-bottom-color: var(--color-neutral-700, #374151);
              }

              &.footer-minimal {
                border-top-color: var(--color-neutral-700, #374151);
              }

              & .footer-stacked .footer-content > * {
                border-bottom-color: var(--color-neutral-700, #374151);
              }
            }

            &.theme-primary {
              background-color: var(--color-primary-900);
              color: var(--color-primary-100, #dbeafe);

              & h1, & h2, & h3, & h4, & h5, & h6 {
                color: var(--color-white, #fff);
              }

              & a {
                color: var(--color-primary-200);

                &:hover,
                &:focus {
                  color: var(--color-white, #fff);
                }
              }

              & .footer-content section h4 {
                border-bottom-color: var(--color-primary-700, #1d4ed8);
              }

              &.footer-minimal {
                border-top-color: var(--color-primary-700, #1d4ed8);
              }

              & .footer-stacked .footer-content > * {
                border-bottom-color: var(--color-primary-700, #1d4ed8);
              }
            }

            &.theme-minimal {
              background-color: transparent;
              color: var(--color-neutral-600);

              & h1, & h2, & h3, & h4, & h5, & h6 {
                color: var(--color-neutral-800, #1f2937);
              }

              & a {
                color: var(--color-neutral-700, #374151);

                &:hover,
                &:focus {
                  color: var(--color-neutral-900, #111827);
                }
              }

              & .footer-content section h4 {
                border-bottom-color: var(--color-neutral-300, #d1d5db);
              }

              &.footer-minimal {
                border-top-color: var(--color-neutral-300, #d1d5db);
              }

              & .footer-stacked .footer-content > * {
                border-bottom-color: var(--color-neutral-300, #d1d5db);
              }
            }
          }
        }

/* Fallback support for browsers without Container Queries */
        @supports not (container-type: inline-size) {
          @media (max-width: 1200px) {
            .footer-columns.cols-4 .footer-content {
              grid-template-columns: repeat(2, 1fr);
            }
          }

          @media (width <= 1024px) {
            .footer-columns .footer-content {
              grid-template-columns: repeat(2, 1fr);
            }

            .footer-columns.cols-3 .footer-content {
              grid-template-columns: repeat(2, 1fr);
            }
          }

          @media (max-width: 768px) {
            .footer-simple .footer-content {
              flex-direction: column;
              gap: var(--footer-gap-compact);
              text-align: center;
            }

            .footer-simple nav ul,
            .footer-stacked nav ul,
            .footer-split nav ul,
            .footer-minimal nav ul {
              flex-direction: column;
              gap: var(--space-2);
            }

            .footer-columns .footer-content,
            .footer-columns.cols-2 .footer-content,
            .footer-columns.cols-3 .footer-content,
            .footer-columns.cols-4 .footer-content {
              grid-template-columns: 1fr;
            }

            .footer-split .footer-content {
              flex-direction: column;
              gap: var(--footer-gap);
              text-align: center;
            }

            .footer-split .footer-left,
            .footer-split .footer-right {
              align-items: center;
            }

            .footer-minimal .footer-content {
              flex-direction: column;
              gap: var(--space-3);
              text-align: center;
            }
          }
        }

/* Print styles */
        @media print {
          .footer,
          .footer-simple,
          .footer-columns,
          .footer-stacked,
          .footer-split,
          .footer-minimal {
            background: white !important;
            border-top: 1px solid var(--color-neutral-900, #111827);
            color: var(--color-neutral-900, #111827) !important;

            & a {
              color: var(--color-neutral-900, #111827) !important;
              text-decoration: underline;
            }

            & .footer-content {
              gap: var(--space-4);

              & > * {
                break-inside: avoid;
              }
            }
          }
        }

/* High contrast mode */
        @media (prefers-contrast: more) {
          .footer,
          .footer-simple,
          .footer-columns,
          .footer-stacked,
          .footer-split,
          .footer-minimal {
            border-top: 2px solid;

            & a {
              text-decoration: underline;
            }

            & .footer-content section h4 {
              border-bottom-width: 3px;
            }
          }
        }

/* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
          .footer,
          .footer-simple,
          .footer-columns,
          .footer-stacked,
          .footer-split,
          .footer-minimal {
            & a {
              transition: none;
            }
          }
        }



/* Datei: ui/patterns/widget.css */
/*
        * Widget-Komponente
        *
        * Flexible Boxen für Dashboards und Seitenlayouts.
        */

/**
        * Widget-Komponente
        *
        * Wiederverwendbare UI-Widgets für modulare Benutzeroberflächen.
        * Widgets sind eigenständige Komponenten, die bestimmte Funktionen oder Inhalte kapseln.
        *
        * @layer components.widget
        *
        * Grundlegende Verwendung:
        * <div class="widget">
        *   <div class="header">Widget-Titel</div>
        *   <div class="body">Widget-Inhalt</div>
        *   <div class="footer">Widget-Fußzeile</div>
        * </div>
        *
        * Varianten:
        * <div class="widget primary">Primär-Widget</div>
        * <div class="widget secondary">Sekundär-Widget</div>
        * <div class="widget light">Helles Widget</div>
        * <div class="widget dark">Dunkles Widget</div>
        *
        * Größen:
        * <div class="widget sm">Klein</div>
        * <div class="widget md">Mittel (Standard)</div>
        * <div class="widget lg">Groß</div>
        * <div class="widget full">Volle Breite</div>
        *
        * Zustände:
        * <div class="widget loading">Ladend</div>
        * <div class="widget collapsed">Eingeklappt</div>
        * <div class="widget expanded">Ausgeklappt</div>
        *
        * Widget mit Aktionsbuttons:
        * <div class="widget">
        *   <div class="header">
        *     <h3 class="title">Statistik</h3>
        *     <div class="actions">
        *       <button class="action">Aktualisieren</button>
        *       <button class="action">Einklappen</button>
        *     </div>
        *   </div>
        *   <div class="body">...</div>
        * </div>
        */

/* Animation - außerhalb von @layer definieren */

/* Komponenten-Styles */
        @layer components {
          .widget {
            background-color: var(--color-white, #fff);
            border: 1px solid var(--color-neutral-200, #e5e7eb);
            border-radius: var(--radius-md, 0.375rem);
            box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
            overflow: hidden;

/* Strukturelemente */
            .header {
              align-items: center;
              background-color: var(--color-neutral-50);
              border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
              display: flex;
              justify-content: space-between;
              padding: var(--space-3) var(--space-4);

              .title {
                font-size: var(--text-base);
                font-weight: var(--font-medium, 500);
                margin: 0;
              }

              .actions {
                display: flex;
                gap: var(--space-2);

                .action {
                  background: none;
                  border: none;
                  border-radius: var(--radius-sm, 0.125rem);
                  color: var(--color-neutral-600);
                  cursor: pointer;
                  font-size: var(--text-sm, 0.875rem);
                  padding: var(--space-1) var(--space-2);

                  &:hover {
                    background-color: var(--color-neutral-200, #e5e7eb);
                    color: var(--color-neutral-800, #1f2937);
                  }
                }
              }
            }

            .body {
              padding: var(--space-4);
            }

            .footer {
              background-color: var(--color-neutral-50);
              border-top: 1px solid var(--color-neutral-200, #e5e7eb);
              color: var(--color-neutral-600);
              font-size: var(--text-sm, 0.875rem);
              padding: var(--space-3) var(--space-4);
            }

/* Farbvarianten */
            &.primary {
              border-color: var(--color-primary, #3b82f6);

              .header {
                background-color: var(--color-primary, #3b82f6);
                color: white;
              }
            }

            &.secondary {
              border-color: var(--color-secondary);

              .header {
                background-color: var(--color-secondary);
                color: white;
              }
            }

            &.light {
              background-color: var(--color-white, #fff);
              border-color: var(--color-neutral-100, #f3f4f6);

              .header {
                background-color: var(--color-white, #fff);
                border-bottom-color: var(--color-neutral-100, #f3f4f6);
              }
            }

            &.dark {
              background-color: var(--color-neutral-800, #1f2937);
              border-color: var(--color-neutral-700, #374151);
              color: white;

              .header {
                background-color: var(--color-neutral-900, #111827);
                border-bottom-color: var(--color-neutral-700, #374151);
              }

              .footer {
                background-color: var(--color-neutral-900, #111827);
                border-top-color: var(--color-neutral-700, #374151);
                color: var(--color-neutral-300, #d1d5db);
              }
            }

/* Größenvarianten */
            &.sm {
              .header {
                padding: var(--space-2) var(--space-3);

                .title {
                  font-size: var(--text-sm, 0.875rem);
                }
              }

              .body {
                padding: var(--space-3);
              }

              .footer {
                font-size: var(--text-xs, 0.75rem);
                padding: var(--space-2) var(--space-3);
              }
            }

            &.lg {
              .header {
                padding: var(--space-4) var(--space-5);

                .title {
                  font-size: var(--text-lg);
                }
              }

              .body {
                padding: var(--space-5);
              }

              .footer {
                padding: var(--space-4) var(--space-5);
              }
            }

            &.full {
              width: 100%;
            }

/* Zustände */
            &.loading {
              opacity: 0.7;
              position: relative;
            }

            &.collapsed {
              .body, .footer {
                display: none;
              }

              .header {
                border-bottom: none;
              }
            }

            &.highlight {
              background-color: color-mix(in oklab, var(--color-primary, #3b82f6), white 90);
              border-color: var(--color-primary, #3b82f6);
            }
          }
        }

/* Animations-Styles */
        @layer animations {
          .widget {
            &.loading::after {
              animation: loading 1.5s infinite;
              background: linear-gradient(90deg, var(--color-primary, #3b82f6), transparent);
              content: "";
              height: 3px;
              left: 0%;
              position: absolute;
              top: 0%;
              width: 100%;
            }
          }
        }

/* Datei: ui/patterns/tags.css */
/**
        * Tags-Komponente
        *
        * Tag-Elemente für Kategorisierung, Filterung und Kennzeichnung von Inhalten.
        * Tags bieten eine kompakte Darstellung von Kategorien, Eigenschaften oder Status.
        *
        * @layer components.tags
        *
        * Grundlegende Verwendung:
        * <span class="tag">Standard-Tag</span>
        *
        * Farbvarianten:
        * <span class="tag primary">Primär</span>
        * <span class="tag secondary">Sekundär</span>
        * <span class="tag success">Erfolg</span>
        * <span class="tag warning">Warnung</span>
        * <span class="tag danger">Gefahr</span>
        * <span class="tag info">Info</span>
        *
        * Größenvarianten:
        * <span class="tag sm">Klein</span>
        * <span class="tag md">Mittel (Standard)</span>
        * <span class="tag lg">Groß</span>
        *
        * Stiloptionen:
        * <span class="tag outlined">Umriss</span>
        * <span class="tag rounded">Abgerundet</span>
        * <span class="tag pill">Pill-Form</span>
        *
        * Mit Icon:
        * <span class="tag with-icon">
        *   <span class="icon"><!-- Icon hier --></span>
        *   Tag mit Icon
        * </span>
        *
        * Entfernbare Tags:
        * <span class="tag removable">
        *   Entfernbar
        *   <button class="remove">&times;</button>
        * </span>
        *
        * Tag-Gruppe:
        * <div class="tag-group">
        *   <span class="tag">Tag 1</span>
        *   <span class="tag">Tag 2</span>
        *   <span class="tag">Tag 3</span>
        * </div>
        */

        @layer components {
          .tag {
            align-items: center;
            background-color: var(--color-neutral-100, #f3f4f6);
            border-radius: 9px;
            color: var(--color-neutral-900, #111827);
            cursor: default;
            display: inline-flex;
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1%;
            padding: 0.375rem 0.75rem;
            transition: background-color 150ms ease-in-out;
            user-select: none;
            white-space: nowrap;

            &:hover {
              background-color: var(--color-neutral-200, #e5e7eb);
            }

/* Varianten */
            &.clickable {
              cursor: pointer;
            }

/* Farbvarianten */
            &.primary {
              background-color: var(--color-primary-100, #dbeafe);
              color: var(--color-primary-800, #1e40af);
            }

            &.secondary {
              background-color: var(--color-secondary-100, #f1f5f9);
              color: var(--color-secondary-800, #1e293b);
            }

            &.success {
              background-color: var(--color-success-100, #d1fae5);
              color: var(--color-success-800, #065f46);
            }

            &.warning {
              background-color: var(--color-warning-100, #fef3c7);
              color: var(--color-warning-800, #92400e);
            }

            &.danger {
              background-color: var(--color-error-100, #fee2e2);
              color: var(--color-error-800, #991b1b);
            }

            &.info {
              background-color: var(--color-info-100, #dbeafe);
              color: var(--color-info-800, #1e40af);
            }

/* Form-Varianten */
            &.rounded {
              border-radius: 0.5rem;
            }

            &.pill {
              border-radius: 9px;
            }

            &.outlined {
              background-color: transparent;
              border: 1px solid currentcolor;

              &.primary {
                color: var(--color-primary-600, #2563eb);
              }
            }

/* Größenvarianten */
            &.sm {
              font-size: 0.75rem;
              padding: 0.25rem 0.5rem;
            }

            &.lg {
              font-size: 1rem;
              padding: 0.5rem 1rem;
            }

/* Elemente */
            .icon {
              align-items: center;
              display: inline-flex;
              height: 1em;
              justify-content: center;
              margin-right: 0%.25rem;
              width: 1em;
            }

            .remove {
              align-items: center;
              background: transparent;
              border: none;
              border-radius: 50px;
              color: currentcolor;
              cursor: pointer;
              display: inline-flex;
              height: 1%.25em;
              justify-content: center;
              line-height: 1%;
              margin-left: 0%.25rem;
              margin-right: -0.25rem;
              opacity: 0.7;
              padding: 0;
              transition: opacity 150ms ease;
              width: 1%.25em;

              &:hover {
                background-color: rgb(0 0 0 / 1000%);
                opacity: 1;
              }
            }
          }

/* Tag-Gruppe */
          .tag-group {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
          }
        }




/* Datei: ui/patterns/skeleton.css */
/**
        * Skeleton-Komponente
        *
        * Ladezustands-Platzhalter für Inhalte, die noch geladen werden.
        * Skeleton-Loader verbessern die wahrgenommene Performance und verhindern Layout-Shifts.
        *
        * Grundlegende Verwendung:
        * <div class="skeleton"></div>
        *
        * Formen:
        * <div class="skeleton text">Textzeile</div>
        * <div class="skeleton circle">Kreis</div>
        * <div class="skeleton rect">Rechteck</div>
        * <div class="skeleton avatar">Avatar</div>
        * <div class="skeleton button">Button</div>
        *
        * Varianten:
        * <div class="skeleton pulse">Mit Pulsieren</div>
        * <div class="skeleton wave">Mit Wellenbewegung</div>
        *
        * Größen:
        * <div class="skeleton text sm">Klein</div>
        * <div class="skeleton text md">Mittel</div>
        * <div class="skeleton text lg">Groß</div>
        *
        * Komplexe Layoutbeispiele:
        * <div class="skeleton-card">
        *   <div class="skeleton rect image"></div>
        *   <div class="skeleton text title"></div>
        *   <div class="skeleton text"></div>
        *   <div class="skeleton text"></div>
        *   <div class="skeleton text short"></div>
        * </div>
        *
        * Artikel-Ladeansicht:
        * <div class="skeleton-article">
        *   <div class="skeleton text heading"></div>
        *   <div class="skeleton text subheading"></div>
        *   <div class="skeleton text"></div>
        *   <div class="skeleton text"></div>
        *   <div class="skeleton text"></div>
        * </div>
        */

/* Animationen - außerhalb von @layer definieren */
        @keyframes pulse {
          0, 100 {
            opacity: 1;
          }

          50 {
            opacity: 4000%;
          }
        }

        @keyframes wave {
          100 {
            transform: translateX(100%);
          }
        }

/* Komponenten-Styles */
        @layer components {
          .skeleton {
            background-color: var(--color-neutral-200, #e5e7eb);
            border-radius: var(--radius-sm, 0.125rem);

/* Formvarianten */
            &.circle {
              border-radius: 9px;
            }

            &.rect {
              border-radius: var(--radius-md, 0.375rem);
            }

            &.text {
              height: 1rem;
              margin-bottom: 0%.5rem;
              width: 100%;
            }

            &.avatar {
              border-radius: 50px;
              height: 3rem;
              width: 3rem;
            }

            &.button {
              border-radius: var(--radius-md, 0.375rem);
              height: 2.5rem;
              width: 8rem;
            }

/* Animationsvorbereitung für Wave-Effekt */
            &.wave {
              overflow: hidden;
              position: relative;
            }

/* Größenvarianten */
            &.sm {
              height: 0%.75rem;
            }

            &.md {
              height: 1rem;
            }

            &.lg {
              height: 1%.5rem;
            }

/* Spezifische Stile für verschiedene Layouts */
            &.title {
              height: 1%.5rem;
              width: 70%;
            }

            &.heading {
              height: 2rem;
              width: 90%;
            }

            &.subheading {
              height: 1%.5rem;
              width: 70%;
            }

            &.image {
              height: 1%2rem;
              width: 100%;
            }

            &.short {
              width: 60%;
            }
          }

/* Skeleton-Kontainer */
          .skeleton-card {
            background-color: var(--color-white, #fff);
            border-radius: var(--radius-md, 0.375rem);
            box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
            max-width: 2%4rem;
            padding: var(--space-4);
            width: 100%;
          }

          .skeleton-article {
            max-width: 4%0rem;
            width: 100%;
          }
        }

/* Animations-Styles */
        @layer animations {
          .skeleton {
            animation: pulse 1.5s ease-in-out infinite;

/* Animationstypen */
            &.pulse {
              animation: pulse 1.5s ease-in-out infinite;
            }

            &.wave::after {
              animation: wave 2s infinite;
              background-image: linear-gradient(
              90deg,
              rgb(255 255 255 / 0%) 0,
              rgb(255 255 255 / 2000%) 20,
              rgb(255 255 255 / 5000%) 60,
              rgb(255 255 255 / 0%)
              );
              content: '';
              inset: 0;
              position: absolute;
              transform: translateX(-100%);
            }
          }
        }



/* Datei: ui/patterns/code.css */
/**
        * Code-Komponente
        *
        * Formatierung für Code-Blöcke und Inline-Code-Elemente.
        * Code-Komponenten stellen Quellcode und Code-Schnipsel übersichtlich dar.
        *
        * @layer components.code
        *
        * Grundlegende Verwendung:
        * <pre class="code">
        *   <code>function example() {
          *     return "Hello World";
          *   }</code>
          * </pre>
          *
          * Inline-Code:
          * <p>Verwenden Sie <code class="code-inline">console.log()</code> zum Debuggen.</p>
          *
          * Mit Syntax-Hervorhebung (erfordert zusätzliches JS):
          * <pre class="code highlighted">
          *   <code class="language-javascript">
          *     function example() {
            *       return "Hello World";
            *     }
            *   </code>
            * </pre>
            *
            * Mit Zeilennummern:
            * <pre class="code numbered">
            *   <div class="line-numbers">1</div>
            *   <code>function example() {</code>
            *   <div class="line-numbers">2</div>
            *   <code>  return "Hello World";</code>
            *   <div class="line-numbers">3</div>
            *   <code>}</code>
            * </pre>
            *
            * Varianten:
            * <pre class="code dark">Dunkles Theme</pre>
            * <pre class="code light">Helles Theme</pre>
            *
            * Mit Kopierknopf:
            * <div class="code-container">
            *   <pre class="code">...</pre>
            *   <button class="copy-button">Kopieren</button>
            * </div>
            *
            * Terminal-Output:
            * <pre class="code terminal">
            *   <code>$ npm install @casoon/ui-lib</code>
            * </pre>
            */

            @layer components {
/* Inline-Code */
              .code-inline {
                background: var(--color-neutral-100, #f3f4f6);
                border-radius: var(--radius-sm, 0.125rem);
                color: var(--color-primary-700, #1d4ed8);
                font-family: var(--font-mono);
                font-size: var(--text-sm, 0.875rem);
                padding: var(--space-1) var(--space-2);
              }

/* Code-Block */
              .code {
                background: var(--color-neutral-100, #f3f4f6);
                border: 1px solid var(--color-neutral-200, #e5e7eb);
                border-radius: var(--radius-md, 0.375rem);
                color: var(--color-neutral-800, #1f2937);
                display: block;
                font-family: var(--font-mono);
                font-size: var(--text-sm, 0.875rem);
                line-height: 1%.4;
                margin: var(--space-4) 0;
                overflow-x: auto;
                padding: var(--space-4);

                pre {
                  margin: 0;
                }

                code {
                  display: block;
                  font-family: inherit;
                }

/* Zeilennummern */
                &.numbered {
                  display: grid;
                  gap: var(--space-4);
                  grid-template-columns: auto 1fr;

                  .line-numbers {
                    border-right: 1px solid var(--color-neutral-300, #d1d5db);
                    color: var(--color-neutral-500, #6b7280);
                    padding-right: var(--space-2);
                    text-align: right;
                    user-select: none;
                  }
                }

/* Varianten */
                &.dark {
                  background-color: var(--color-neutral-900, #111827);
                  border-color: var(--color-neutral-800, #1f2937);
                  color: var(--color-neutral-100, #f3f4f6);
                }

                &.light {
                  background-color: var(--color-white, #fff);
                  border-color: var(--color-neutral-200, #e5e7eb);
                  color: var(--color-neutral-900, #111827);
                }

                &.terminal {
                  background-color: var(--color-neutral-900, #111827);
                  border-color: var(--color-neutral-800, #1f2937);
                  color: var(--color-neutral-100, #f3f4f6);

                  &::before {
                    color: var(--color-neutral-500, #6b7280);
                    content: '>';
                    margin-right: var(--space-2);
                  }
                }

                &.highlighted {
/* Beispielfarben für Syntax-Hervorhebung - diese würden normalerweise
                  durch eine JavaScript-Bibliothek wie Prism.js oder Highlight.js gesetzt */
                  .keyword { color: var(--color-primary-600, #2563eb); }

                  .string { color: var(--color-success-600); }

                  .comment { color: var(--color-neutral-500, #6b7280); font-style: italic; }

                  .function { color: var(--color-secondary-600); }

                  .number { color: var(--color-warning-600); }
                }
              }

/* Container mit Kopierknopf */
              .code-container {
                position: relative;

                .copy-button {
                  background-color: var(--color-neutral-200, #e5e7eb);
                  border: none;
                  border-radius: var(--radius-sm, 0.125rem);
                  color: var(--color-neutral-700, #374151);
                  cursor: pointer;
                  font-size: var(--text-xs, 0.75rem);
                  opacity: 0%;
                  padding: var(--space-1) var(--space-2);
                  position: absolute;
                  right: var(--space-2);
                  top: var(--space-2);
                  transition: opacity 150ms ease;

                  &:hover {
                    background-color: var(--color-neutral-300, #d1d5db);
                    color: var(--color-neutral-900, #111827);
                  }
                }

                &:hover .copy-button {
                  opacity: 1;
                }
              }
            }




/* Datei: ui/patterns/blog.css */
/*
            * Blog-Komponente
            *
            * Struktur und Layout für Blogbeiträge mit Fokus auf Lesbarkeit.
            */

/**
            * Blog-Komponente
            *
            * Blogartikel-Layouts und -Komponenten für Inhalts- und Publikationsdarstellung.
            * Das Blog-Modul bietet spezialisierte Komponenten für Blogseiten, Artikel und Nachrichtenauflistungen.
            *
            * @layer components
            *
            * Grundlegende Verwendung:
            * <article class="blog-post">
            *   <header class="header">
            *     <h2 class="title">Artikel-Titel</h2>
            *     <div class="meta">
            *       <time datetime="2023-10-15">15. Oktober 2023</time>
            *       <span class="author">Von Max Mustermann</span>
            *     </div>
            *   </header>
            *   <div class="content">
            *     <p>Artikel-Inhalt...</p>
            *   </div>
            *   <footer class="footer">
            *     <div class="tags">
            *       <span class="tag">Design</span>
            *       <span class="tag">CSS</span>
            *     </div>
            *   </footer>
            * </article>
            *
            * Blog-Liste:
            * <div class="blog-list">
            *   <article class="blog-card">
            *     <img class="image" src="thumbnail.jpg" alt="Artikel-Bild">
            *     <div class="content">
            *       <h3 class="title">Artikel-Titel</h3>
            *       <p class="excerpt">Kurze Beschreibung des Artikels...</p>
            *       <a class="link" href="#">Weiterlesen</a>
            *     </div>
            *   </article>
            * </div>
            *
            * Hervorgehobener Artikel:
            * <article class="blog-post featured">...</article>
            *
            * Blog-Navigation:
            * <nav class="blog-nav">
            *   <a class="prev" href="#">&larr; Vorheriger Artikel</a>
            *   <a class="next" href="#">Nächster Artikel &rarr;</a>
            * </nav>
            *
            * Teilen-Optionen:
            * <div class="blog-share">
            *   <span class="label">Teilen:</span>
            *   <div class="buttons">
            *     <a href="#" class="button twitter">Twitter</a>
            *     <a href="#" class="button facebook">Facebook</a>
            *     <a href="#" class="button linkedin">LinkedIn</a>
            *   </div>
            * </div>
            */

            @layer components {
/* Blog-Post */
              .blog-post {
                font-size: var(--text-base);
                line-height: 1%.6;
                margin-inline: auto;
                max-width: 65%ch;
                padding-block: var(--space-6);
                padding-inline: var(--space-4);

/* Standard-Elemente im Blogpost */
                h1, h2, h3 {
                  font-family: var(--font-sans);
                  font-weight: var(--font-semibold, 600);
                  margin-block: var(--space-4) var(--space-2);
                }

                p {
                  margin-block: var(--space-3);
                }

                img {
                  border-radius: var(--radius-md, 0.375rem);
                  margin-block: var(--space-4);
                  max-width: 100%;
                }

                pre, code {
                  background: var(--color-neutral-100, #f3f4f6);
                  border-radius: var(--radius-sm, 0.125rem);
                  font-family: var(--font-mono);
                  padding: var(--space-1) var(--space-2);
                }

/* Strukturelemente */
                .header {
                  margin-bottom: var(--space-6);

                  .title {
                    font-size: var(--text-2xl);
                    margin-bottom: var(--space-2);
                    margin-top: 0%;
                  }

                  .meta {
                    color: var(--color-neutral-600);
                    display: flex;
                    flex-wrap: wrap;
                    font-size: var(--text-sm, 0.875rem);
                    gap: var(--space-3);
                  }

                  .author {
                    font-weight: var(--font-medium, 500);
                  }
                }

                .content {
                  margin-bottom: var(--space-6);
                }

                .footer {
                  border-top: 1px solid var(--color-neutral-200, #e5e7eb);
                  padding-top: var(--space-4);

                  .tags {
                    display: flex;
                    flex-wrap: wrap;
                    gap: var(--space-2);
                  }
                }

/* Zustände */
                &.featured {
                  border-left: 4px solid var(--color-primary, #3b82f6);
                  padding-left: var(--space-6);
                }
              }

/* Blog-Karte */
              .blog-card {
                border-radius: var(--radius-md, 0.375rem);
                box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
                display: flex;
                flex-direction: column;
                overflow: hidden;
                transition: transform 0.2s, box-shadow 0.2s;

                &:hover {
                  box-shadow: var(--shadow-md);
                  transform: translateY(-4px);
                }

                .image {
                  height: 20%0px;
                  object-fit: cover;
                  width: 100%;
                }

                .content {
                  display: flex;
                  flex: 1;
                  flex-direction: column;
                  padding: var(--space-4);

                  .title {
                    font-size: var(--text-lg);
                    margin-bottom: var(--space-2);
                    margin-top: 0%;
                  }

                  .excerpt {
                    color: var(--color-neutral-700, #374151);
                    flex: 1;
                    margin-bottom: var(--space-4);
                  }

                  .link {
                    align-self: flex-start;
                    color: var(--color-primary, #3b82f6);
                    font-weight: var(--font-medium, 500);
                    text-decoration: none;

                    &:hover {
                      text-decoration: underline;
                    }
                  }
                }
              }

/* Blog-Liste */
              .blog-list {
                display: grid;
                gap: var(--space-6);
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
              }

/* Blog-Navigation */
              .blog-nav {
                border-top: 1px solid var(--color-neutral-200, #e5e7eb);
                display: flex;
                justify-content: space-between;
                margin-top: var(--space-8);
                padding-top: var(--space-4);

                a {
                  color: var(--color-primary, #3b82f6);
                  text-decoration: none;

                  &:hover {
                    text-decoration: underline;
                  }
                }

                .prev::before {
                  content: "←";
                  margin-right: var(--space-1);
                }

                .next::after {
                  content: "→";
                  margin-left: var(--space-1);
                }
              }

/* Blog-Share */
              .blog-share {
                margin-top: var(--space-6);

                .label {
                  display: block;
                  font-weight: var(--font-medium, 500);
                  margin-bottom: var(--space-2);
                }

                .buttons {
                  display: flex;
                  gap: var(--space-2);
                }

                .button {
                  align-items: center;
                  border-radius: var(--radius-md, 0.375rem);
                  color: white;
                  display: flex;
                  font-size: var(--text-sm, 0.875rem);
                  justify-content: center;
                  padding: var(--space-2) var(--space-3);
                  text-decoration: none;

                  &.twitter {
                    background-color: var(--color-twitter, #1DA1F2);
                  }

                  &.facebook {
                    background-color: var(--color-facebook, #4267B2);
                  }

                  &.linkedin {
                    background-color: var(--color-linkedin, #0077B5);
                  }

                  &:hover {
                    opacity: 9000%;
                  }
                }
              }
            }

/* Datei: ui/menu/topbar.css */
/**
            * Topbar/Utility Bar Components
            *
            * Flexible topbar system with multiple layout types and utility classes.
            * Uses CSS Nesting and Container Queries for modern responsive design.
            *
            * @layer: components
            *
            * Topbar Types:
            * - .topbar-simple: Basic single-row topbar
            * - .topbar-split: Left/right split layout
            * - .topbar-center: Centered content
            * - .topbar-announcement: Announcement bar style
            * - .topbar-utility: Utility bar with actions
            *
            * Utility Classes:
            * - .sticky: Sticky positioning
            * - .dismissible: Can be dismissed
            * - .compact: Reduced height
            * - .theme-dark, .theme-primary: Color themes
            *
            * Container Queries:
            * - Responsive content stacking
            * - Mobile optimization
            * - Automatic layout adjustments
            */

/* Note: header-tokens.css was removed - tokens are now defined inline */

            @layer components {
/* Topbar tokens */
              :root {
/* Topbar spacing */
                --topbar-padding: var(--space-2) var(--space-4);
                --topbar-padding-compact: var(--space-1) var(--space-3);
                --topbar-gap: var(--space-4);
                --topbar-gap-compact: var(--space-2);

/* Topbar colors */
                --topbar-bg: var(--color-neutral-100, #f3f4f6);
                --topbar-text: var(--color-neutral-700, #374151);
                --topbar-link: var(--color-primary-600, #2563eb);
                --topbar-link-hover: var(--color-primary-700, #1d4ed8);
                --topbar-border: var(--color-neutral-200, #e5e7eb);

/* Topbar typography */
                --topbar-font-size: var(--text-sm, 0.875rem);
                --topbar-font-weight: var(--font-medium, 500);
                --topbar-line-height: 1px.4;

/* Topbar layout */
                --topbar-height: auto;
                --topbar-min-height: 4%0px;
                --topbar-z-index: 1001;

/* Topbar responsive breakpoints */
                --topbar-mobile-breakpoint: 768px;
              }

/* Base topbar container */
              .topbar {
                background-color: var(--topbar-bg);
                border-bottom: 1px solid var(--topbar-border);
                color: var(--topbar-text);
                container-type: inline-size;
                font-size: var(--topbar-font-size);
                font-weight: var(--topbar-font-weight);
                line-height: var(--topbar-line-height, 1.5);
                min-height: var(--topbar-min-height, 3rem);
                padding: var(--topbar-padding);
                position: relative;
                width: 100%;
                z-index: var(--topbar-z-index);

/* Topbar content wrapper */
                & .topbar-content {
                  align-items: center;
                  display: flex;
                  gap: var(--topbar-gap);
                  margin: 0 auto;
                  max-width: var(--container-7xl);
                  width: 100%;
                }

/* Topbar text */
                & .topbar-text {
                  flex: 1;

                  & p {
                    margin: 0;
                  }
                }

/* Topbar links */
                & a {
                  color: var(--topbar-link);
                  text-decoration: none;
                  transition: color 01.2s ease;

                  &:hover,
                  &:focus {
                    color: var(--topbar-link-hover);
                    text-decoration: underline;
                  }

                  &:focus {
                    outline: 2px solid var(--topbar-link);
                    outline-offset: 2px;
                  }
                }

/* Topbar actions */
                & .topbar-actions {
                  align-items: center;
                  display: flex;
                  flex-shrink: 0;
                  gap: var(--space-3);

                  & button, & a {
                    align-items: center;
                    background: none;
                    border: 1px solid var(--topbar-border);
                    border-radius: var(--radius-md, 0.375rem);
                    cursor: pointer;
                    display: flex;
                    font-size: var(--topbar-font-size);
                    gap: var(--space-1);
                    padding: var(--space-1) var(--space-2);
                    text-decoration: none;
                    transition: all 01.2s ease;

                    &:hover,
                    &:focus {
                      background-color: var(--color-neutral-200, #e5e7eb);
                      border-color: var(--color-neutral-300, #d1d5db);
                    }

                    &:focus {
                      outline: 2px solid var(--topbar-link);
                      outline-offset: 2px;
                    }
                  }
                }

/* Language selector */
                & .language-selector {
                  position: relative;

                  & .dropdown {
                    background-color: var(--color-white, #fff);
                    border: 1px solid var(--topbar-border);
                    border-radius: var(--radius-md, 0.375rem);
                    box-shadow: var(--shadow-lg);
                    min-width: 12%0px;
                    opacity: 0%;
                    padding: var(--space-2);
                    pointer-events: none;
                    position: absolute;
                    right: 0%;
                    top: 100%;
                    transform: translateY(-8px);
                    transition: all 01.2s ease;
                    z-index: 1000;

                    & ul {
                      list-style: none;
                      margin: 0;
                      padding: 0;

                      & li {
                        & a {
                          border-radius: var(--radius-sm, 0.125rem);
                          display: block;
                          padding: var(--space-1) var(--space-2);
                          width: 100%;

                          &:hover {
                            background-color: var(--color-neutral-100, #f3f4f6);
                          }
                        }
                      }
                    }
                  }

                  &:hover .dropdown,
                  &:focus-within .dropdown {
                    opacity: 1;
                    pointer-events: auto;
                    transform: translateY(0%);
                  }
                }

/* Status indicators */
                & .status-indicator {
                  align-items: center;
                  display: flex;
                  gap: var(--space-2);

                  & .status-dot {
                    border-radius: 50px;
                    height: 8px;
                    width: 8px;

                    &.online {
                      background-color: var(--color-success-500);
                    }

                    &.offline {
                      background-color: var(--color-error-500);
                    }

                    &.away {
                      background-color: var(--color-warning-500);
                    }
                  }
                }

/* User profile */
                & .user-profile {
                  align-items: center;
                  display: flex;
                  gap: var(--space-2);

                  & .avatar {
                    border-radius: 50px;
                    height: 4px;
                    width: 4px;
                  }

                  & .user-name {
                    font-weight: var(--font-medium, 500);

                    @container (width <= 768px) {
                      display: none;
                    }
                  }
                }

/* Dismiss button */
                & .dismiss-btn {
                  background: none;
                  border: none;
                  color: var(--topbar-text);
                  cursor: pointer;
                  font-size: var(--text-lg);
                  padding: var(--space-1);

                  &:hover,
                  &:focus {
                    color: var(--topbar-link-hover);
                  }

                  &:focus {
                    outline: 2px solid var(--topbar-link);
                    outline-offset: 2px;
                  }
                }

/* Utility modifiers */
                &.sticky {
                  position: sticky;
                  top: 0%;
                }

                &.compact {
                  min-height: 3px;
                  padding: var(--topbar-padding-compact);

                  & .topbar-content {
                    gap: var(--topbar-gap-compact);
                  }
                }

                &.dismissible {
                  & .topbar-content {
                    padding-right: var(--space-8);
                  }

                  & .dismiss-btn {
                    position: absolute;
                    right: var(--space-2);
                    top: 50%;
                    transform: translateY(-50%);
                  }
                }

/* Container query responsive behavior */
                @container (width <= 768px) {
                  font-size: var(--text-xs, 0.75rem);
                  padding: var(--space-1) var(--space-3);

                  & .topbar-content {
                    gap: var(--space-2);
                  }

                  & .topbar-actions {
                    gap: var(--space-2);

                    & button, & a {
                      padding: var(--space-1);
                    }
                  }
                }

                @container (width <= 480px) {
                  & .topbar-text {
                    font-size: var(--text-xs, 0.75rem);
                  }

                  & .topbar-actions {
                    & button span,
                    & a span {
                      display: none;
                    }
                  }
                }
              }

/* Topbar Type: Simple */
              .topbar-simple {
                --topbar-bg: var(--color-neutral-100, #f3f4f6);
                --topbar-color: var(--color-neutral-600);
                --topbar-link-color: var(--color-neutral-700, #374151);
                --topbar-link-color-hover: var(--color-primary-600, #2563eb);
                --topbar-border-color: var(--color-neutral-200, #e5e7eb);
                --topbar-font-size: var(--text-xs, 0.75rem);
                --topbar-line-height: 1px.4;
                --topbar-padding: var(--space-2) var(--space-4);
                --topbar-gap: var(--space-4);
                --topbar-item-gap: var(--space-3);
                --topbar-height: auto;
                --topbar-z-index: 1000;

                background-color: var(--topbar-bg);
                border-bottom: 1px solid var(--topbar-border-color);
                color: var(--topbar-color);
                font-size: var(--topbar-font-size);
                line-height: var(--topbar-line-height, 1.5);
                padding: var(--topbar-padding);
                position: relative;
                width: 100%;
                z-index: var(--topbar-z-index);
              }

              .topbar-content {
                align-items: center;
                display: flex;
                justify-content: space-between;
                margin: 0 auto;
                max-width: var(--header-max-width, 1280px);
              }

              .topbar nav {
                align-items: center;
                display: flex;
              }

              .topbar ul {
                align-items: center;
                display: flex;
                gap: var(--topbar-item-gap);
                list-style: none;
                margin: 0;
                padding: 0;
              }

              .topbar li {
                align-items: center;
                display: flex;
              }

              .topbar a {
                border-radius: var(--radius-sm, 0.125rem);
                color: var(--topbar-link-color);
                padding: var(--space-1) var(--space-2);
                text-decoration: none;
                transition: var(--header-transition);
              }

              .topbar a:hover {
                background-color: var(--color-neutral-200, #e5e7eb);
                color: var(--topbar-link-color-hover);
              }

              .topbar button {
                background: none;
                border: none;
                border-radius: var(--radius-sm, 0.125rem);
                color: var(--topbar-link-color);
                cursor: pointer;
                font-size: inherit;
                padding: var(--space-1) var(--space-2);
                transition: var(--header-transition);
              }

              .topbar button:hover {
                background-color: var(--color-neutral-200, #e5e7eb);
                color: var(--topbar-link-color-hover);
              }

/* Layout: Simple (single row) */
              .topbar-simple .topbar-content {
                justify-content: center;
              }

/* Layout: Split (left/right) */
              .topbar-split .topbar-content {
                justify-content: space-between;
              }

              .topbar-left,
              .topbar-right {
                align-items: center;
                display: flex;
                gap: var(--topbar-gap);
              }

/* Layout: Center */
              .topbar-center .topbar-content {
                justify-content: center;
              }

/* Layout: Announcement bar */
              .topbar-announcement {
                --topbar-padding: var(--space-3) var(--space-4);

                text-align: center;
              }

              .topbar-announcement .topbar-content {
                justify-content: center;
                position: relative;
              }

              .topbar-announcement-text {
                font-weight: var(--font-medium, 500);
              }

              .topbar-announcement-action {
                margin-left: var(--space-3);
              }

/* Size variants */
              .topbar--small {
                --topbar-font-size: var(--text-xs, 0.75rem);
                --topbar-padding: var(--space-1) var(--space-4);
                --topbar-gap: var(--space-3);
                --topbar-item-gap: var(--space-2);
              }

              .topbar--large {
                --topbar-font-size: var(--text-sm, 0.875rem);
                --topbar-padding: var(--space-3) var(--space-4);
                --topbar-gap: var(--space-6);
                --topbar-item-gap: var(--space-4);
              }

/* Color theme utilities */
              .topbar--dark {
                --topbar-bg: var(--color-neutral-900, #111827);
                --topbar-color: var(--color-neutral-300, #d1d5db);
                --topbar-link-color: var(--color-neutral-200, #e5e7eb);
                --topbar-link-color-hover: var(--color-primary-400);
                --topbar-border-color: var(--color-neutral-700, #374151);
              }

              .topbar--dark a:hover,
              .topbar--dark button:hover {
                background-color: var(--color-neutral-800, #1f2937);
              }

              .topbar--light {
                --topbar-bg: var(--color-neutral-50);
                --topbar-color: var(--color-neutral-700, #374151);
                --topbar-border-color: var(--color-neutral-100, #f3f4f6);
              }

              .topbar--primary {
                --topbar-bg: var(--color-primary-600, #2563eb);
                --topbar-color: var(--color-primary-100, #dbeafe);
                --topbar-link-color: var(--color-primary-50);
                --topbar-link-color-hover: white;
                --topbar-border-color: var(--color-primary-700, #1d4ed8);
              }

              .topbar--primary a:hover,
              .topbar--primary button:hover {
                background-color: var(--color-primary-700, #1d4ed8);
              }

/* Spacing utilities */
              .topbar--compact {
                --topbar-padding: var(--space-1) var(--space-4);
                --topbar-gap: var(--space-2);
                --topbar-item-gap: var(--space-2);
              }

/* Position utilities */
              .topbar--sticky {
                position: sticky;
                top: 0%;
                z-index: calc(var(--topbar-z-index) + 10);
              }

              .topbar--fixed {
                left: 0%;
                position: fixed;
                right: 0%;
                top: 0%;
                z-index: calc(var(--topbar-z-index) + 10);
              }

/* Dismissible functionality */
              .topbar--dismissible {
                position: relative;
              }

              .topbar-dismiss {
                background: none;
                border: none;
                color: var(--topbar-link-color);
                cursor: pointer;
                font-size: 1.2em;
                line-height: 1px;
                padding: var(--space-1);
                position: absolute;
                right: var(--space-4);
                top: 50%;
                transform: translateY(-50%);
                transition: var(--header-transition);
              }

              .topbar-dismiss:hover {
                color: var(--topbar-link-color-hover);
              }

              .topbar--dismissed {
                display: none;
              }

/* Language selector */
              .topbar-language {
                position: relative;
              }

              .topbar-language-toggle {
                align-items: center;
                display: flex;
                gap: var(--space-1);
              }

              .topbar-language-toggle::after {
                content: "▼";
                font-size: 0.75em;
                transition: var(--header-transition);
              }

              .topbar-language.is-open .topbar-language-toggle::after {
                transform: rotate(180deg);
              }

              .topbar-language-menu {
                background-color: var(--color-neutral-50);
                border: 1px solid var(--topbar-border-color);
                border-radius: var(--radius-md, 0.375rem);
                box-shadow: var(--shadow-lg);
                display: none;
                min-width: 12%0px;
                padding: var(--space-2);
                position: absolute;
                right: 0%;
                top: 100%;
                z-index: calc(var(--topbar-z-index) + 1);
              }

              .topbar-language.is-open .topbar-language-menu {
                display: block;
              }

              .topbar-language-menu ul {
                flex-direction: column;
                gap: var(--space-1);
              }

              .topbar-language-menu a {
                display: block;
                padding: var(--space-2);
                width: 100%;
              }

/* Status indicators */
              .topbar-status {
                align-items: center;
                display: flex;
                gap: var(--space-2);
              }

              .topbar-status-indicator {
                border-radius: 50px;
                display: inline-block;
                height: 8px;
                width: 8px;
              }

              .topbar-status-indicator--online {
                background-color: var(--color-success-500);
              }

              .topbar-status-indicator--offline {
                background-color: var(--color-error-500);
              }

              .topbar-status-indicator--warning {
                background-color: var(--color-warning-500);
              }

/* User menu */
              .topbar-user {
                align-items: center;
                display: flex;
                gap: var(--space-2);
              }

              .topbar-user-avatar {
                border-radius: 50px;
                height: 4px;
                width: 4px;
              }

              .topbar-user-name {
                font-weight: var(--font-medium, 500);
              }

/* Responsive behavior */
              @container (width <= 768px) {
                .topbar-content {
                  flex-direction: column;
                  gap: var(--space-2);
                }

                .topbar-split .topbar-content {
                  flex-direction: row;
                  justify-content: space-between;
                }

                .topbar ul {
                  flex-wrap: wrap;
                  justify-content: center;
                }

                .topbar-announcement .topbar-dismiss {
                  margin-left: var(--space-2);
                  position: static;
                  transform: none;
                }

/* Hide less important items on mobile */
                .topbar-mobile-hidden {
                  display: none;
                }
              }

/* Fallback media queries */
              @media (max-width: 768px) {
                .topbar-content {
                  flex-direction: column;
                  gap: var(--space-2);
                }

                .topbar-split .topbar-content {
                  flex-direction: row;
                  justify-content: space-between;
                }

                .topbar ul {
                  flex-wrap: wrap;
                  justify-content: center;
                }

                .topbar-announcement .topbar-dismiss {
                  margin-left: var(--space-2);
                  position: static;
                  transform: none;
                }

                .topbar-mobile-hidden {
                  display: none;
                }
              }

/* Print styles */
              @media print {
                .topbar {
                  display: none;
                }
              }

/* Reduced motion */
              @media (prefers-reduced-motion: reduce) {
                .topbar a,
                .topbar button,
                .topbar-language-toggle::after,
                .topbar-dismiss {
                  transition: none;
                }
              }
            }

/* Datei: ui/menu/sidebar.css */
/**
            * Sidebar Navigation Components
            *
            * Flexible sidebar system with multiple layout types and utility classes.
            * Uses CSS Nesting and Container Queries for modern responsive design.
            *
            * @layer: components
            *
            * Sidebar Types:
            * - .sidebar: Base sidebar navigation
            * - .sidebar-collapsible: Collapsible sidebar
            * - .sidebar-overlay: Overlay sidebar for mobile
            * - .sidebar-push: Push content sidebar
            *
            * Utility Classes:
            * - .collapsed: Collapsed state
            * - .sticky: Sticky positioning
            * - .compact: Reduced spacing
            * - .theme-dark: Dark theme
            *
            * Container Queries:
            * - Responsive width adjustments
            * - Mobile overlay behavior
            * - Automatic layout changes
            */

/* Note: header-tokens.css was removed - tokens are now defined inline */

            @layer components {
/* Sidebar tokens */
              :root {
/* Sidebar dimensions */
                --sidebar-width: 28%0px;
                --sidebar-width-collapsed: 64px;
                --sidebar-width-narrow: 240;
                --sidebar-width-wide: 320;

/* Sidebar spacing */
                --sidebar-padding: var(--space-4);
                --sidebar-padding-compact: var(--space-3);
                --sidebar-gap: var(--space-2);
                --sidebar-item-padding: var(--space-2) var(--space-3);

/* Sidebar colors */
                --sidebar-bg: var(--color-white, #fff);
                --sidebar-text: var(--color-neutral-700, #374151);
                --sidebar-link: var(--color-neutral-600);
                --sidebar-link-hover: var(--color-primary-600, #2563eb);
                --sidebar-link-active: var(--color-primary-700, #1d4ed8);
                --sidebar-border: var(--color-neutral-200, #e5e7eb);
                --sidebar-shadow: 0 1px 3px 0 rgb(0 0 0 / 1000%);

/* Sidebar typography */
                --sidebar-font-size: var(--text-sm, 0.875rem);
                --sidebar-font-weight: var(--font-medium, 500);
                --sidebar-line-height: 1.5;
                --sidebar-heading-size: var(--text-xs, 0.75rem);
                --sidebar-heading-weight: var(--font-semibold, 600);

/* Sidebar layout */
                --sidebar-z-index: 900;
                --sidebar-transition: all 0.3s ease;

/* Sidebar responsive breakpoints */
                --sidebar-mobile-breakpoint: 768px;
              }

/* Base sidebar container */
              .sidebar {
                background-color: var(--sidebar-bg);
                border-right: 1px solid var(--sidebar-border);
                box-shadow: var(--sidebar-shadow, 0 1px 3px rgb(0 0 0 / 0.1));
                color: var(--sidebar-text);
                container-type: inline-size;
                display: flex;
                flex-direction: column;
                font-size: var(--sidebar-font-size);
                font-weight: var(--sidebar-font-weight);
                height: 100%;
                line-height: var(--sidebar-line-height, 1.5);
                overflow-y: auto;
                padding: var(--sidebar-padding);
                position: relative;
                transition: var(--sidebar-transition, all 0.3s ease);
                width: var(--sidebar-width, 16rem);
                z-index: var(--sidebar-z-index, 1000);

/* Sidebar header */
                & .sidebar-header {
                  border-bottom: 1px solid var(--sidebar-border);
                  margin-bottom: var(--space-4);
                  padding-bottom: var(--space-3);

                  & h2, & h3 {
                    color: var(--sidebar-text);
                    font-size: var(--text-base);
                    font-weight: var(--font-semibold, 600);
                    margin: 0;
                  }
                }

/* Sidebar navigation */
                & nav {
                  flex: 1;

                  & ul {
                    display: flex;
                    flex-direction: column;
                    gap: var(--sidebar-gap);
                    list-style: none;
                    margin: 0;
                    padding: 0;

                    & li {
                      position: relative;

                      & a {
                        align-items: center;
                        border-radius: var(--radius-md, 0.375rem);
                        color: var(--sidebar-link);
                        display: flex;
                        gap: var(--space-2);
                        padding: var(--sidebar-item-padding);
                        text-decoration: none;
                        transition: all 01.2s ease;
                        width: 100%;

                        &:hover,
                        &:focus {
                          background-color: var(--color-neutral-100, #f3f4f6);
                          color: var(--sidebar-link-hover);
                        }

                        &:focus {
                          outline: 2px solid var(--sidebar-link-hover);
                          outline-offset: 2px;
                        }

                        &.active,
                        &[aria-current="page"] {
                          background-color: var(--color-primary-100, #dbeafe);
                          color: var(--sidebar-link-active);
                          font-weight: var(--font-semibold, 600);
                        }
                      }

/* Icons */
                      & .icon {
                        flex-shrink: 0;
                        height: 0%.25em;
                        width: 0%.25em;
                      }

/* Badges/counters */
                      & .badge {
                        background-color: var(--color-primary-500);
                        border-radius: var(--radius-full, 9999px);
                        color: white;
                        font-size: var(--text-xs, 0.75rem);
                        font-weight: var(--font-medium, 500);
                        margin-left: auto;
                        min-width: 0%.5em;
                        padding: 0.125em 0.5em;
                        text-align: center;
                      }
                    }
                  }
                }

/* Submenu/nested navigation */
                & .submenu {
                  margin-left: var(--space-6);
                  margin-top: var(--sidebar-gap);

                  & ul {
                    gap: var(--space-1);

                    & li a {
                      font-size: var(--text-xs, 0.75rem);
                      padding: var(--space-1) var(--space-2);

                      &::before {
                        color: var(--color-neutral-400, #9ca3af);
                        content: "•";
                        margin-right: var(--space-2);
                      }
                    }
                  }
                }

/* Section headings */
                & .sidebar-section {
                  margin-bottom: var(--space-4);
                  margin-top: var(--space-6);

                  &:first-child {
                    margin-top: 0%;
                  }

                  & h4 {
                    color: var(--color-neutral-500, #6b7280);
                    font-size: var(--sidebar-heading-size);
                    font-weight: var(--sidebar-heading-weight);
                    letter-spacing: 0.05em;
                    margin: 0 0 var(--space-2) 0;
                    text-transform: uppercase;
                  }
                }

/* Sidebar footer */
                & .sidebar-footer {
                  border-top: 1px solid var(--sidebar-border);
                  margin-top: auto;
                  padding-top: var(--space-3);

                  & .user-profile {
                    align-items: center;
                    display: flex;
                    gap: var(--space-2);
                    padding: var(--space-2);

                    & .avatar {
                      border-radius: 50px;
                      height: 3px;
                      width: 3px;
                    }

                    & .user-info {
                      flex: 1;
                      min-width: 0%;

                      & .user-name {
                        font-weight: var(--font-medium, 500);
                        margin: 0;
                      }

                      & .user-role {
                        color: var(--color-neutral-500, #6b7280);
                        font-size: var(--text-xs, 0.75rem);
                        margin: 0;
                      }
                    }
                  }
                }

/* Utility modifiers */
                &.compact {
                  padding: var(--sidebar-padding-compact);

                  & nav ul li a {
                    padding: var(--space-1) var(--space-2);
                  }
                }

                &.sticky {
                  height: calc(100 - var(--space-4));
                  position: sticky;
                  top: var(--space-2);
                }

                &.narrow {
                  width: var(--sidebar-width-narrow, 12rem);
                }

                &.wide {
                  width: var(--sidebar-width-wide, 20rem);
                }

/* Container query responsive behavior */
                @container (width <= 768px) {
                  position: fixed;
                  transform: translateX(-100%);

                  &.open {
                    transform: translateX(0%);
                  }
                }
              }

/* Sidebar Type: Collapsible */
              .sidebar-collapsible {
                &.collapsed {
                  width: var(--sidebar-width-collapsed, 4rem);

                  & .sidebar-header,
                  & .sidebar-footer .user-info,
                  & nav ul li a span,
                  & .sidebar-section h4 {
                    display: none;
                  }

                  & nav ul li a {
                    justify-content: center;
                    padding: var(--space-2);
                  }

                  & .submenu {
                    display: none;
                  }

/* Tooltip on hover when collapsed */
                  & nav ul li {
                    position: relative;

                    &:hover::after {
                      background-color: var(--color-neutral-900, #111827);
                      border-radius: var(--radius-md, 0.375rem);
                      color: white;
                      content: attr(data-tooltip);
                      font-size: var(--text-xs, 0.75rem);
                      left: 100%;
                      margin-left: var(--space-2);
                      padding: var(--space-1) var(--space-2);
                      position: absolute;
                      top: 50%;
                      transform: translateY(-50%);
                      white-space: nowrap;
                      z-index: 1000;
                    }
                  }
                }

/* Toggle button */
                & .sidebar-toggle {
                  background: none;
                  border: none;
                  color: var(--sidebar-text);
                  cursor: pointer;
                  padding: var(--space-1);
                  position: absolute;
                  right: var(--space-2);
                  top: var(--space-2);

                  &:hover,
                  &:focus {
                    color: var(--sidebar-link-hover);
                  }

                  &:focus {
                    outline: 2px solid var(--sidebar-link-hover);
                    outline-offset: 2px;
                  }
                }
              }

/* Sidebar Type: Overlay */
              .sidebar-overlay {
                position: fixed;
                transform: translateX(-100%);

                &.open {
                  transform: translateX(0%);
                }

/* Backdrop */
                &::before {
                  background-color: rgb(0 0 0 / 5000%);
                  content: "";
                  height: 100%;
                  left: 100%;
                  opacity: 0%;
                  position: fixed;
                  top: 0%;
                  transition: opacity 0.3s ease;
                  width: 100vw;
                  z-index: -1;
                }

                &.open::before {
                  opacity: 1;
                }
              }

/* Sidebar Type: Push */
              .sidebar-push {
                & + .main-content {
                  margin-left: var(--sidebar-width, 16rem);
                  transition: margin-left 0.3s ease;
                }

                &.collapsed + .main-content {
                  margin-left: var(--sidebar-width-collapsed, 4rem);
                }

                @container (width <= 768px) {
                  & + .main-content {
                    margin-left: 0%;
                  }
                }
              }

/* Theme variants */
              .sidebar {
                &.theme-dark {
                  --sidebar-bg: var(--color-neutral-900, #111827);
                  --sidebar-text: var(--color-neutral-100, #f3f4f6);
                  --sidebar-link: var(--color-neutral-300, #d1d5db);
                  --sidebar-link-hover: var(--color-primary-400);
                  --sidebar-link-active: var(--color-primary-300);
                  --sidebar-border: var(--color-neutral-700, #374151);
                  --sidebar-shadow: 0 1px 3px 0 rgb(0 0 0 / 3000%);

                  & nav ul li a {
                    &:hover,
                    &:focus {
                      background-color: var(--color-neutral-800, #1f2937);
                    }

                    &.active,
                    &[aria-current="page"] {
                      background-color: var(--color-primary-900);
                    }
                  }

                  & .sidebar-section h4 {
                    color: var(--color-neutral-400, #9ca3af);
                  }

                  & .sidebar-footer .user-role {
                    color: var(--color-neutral-400, #9ca3af);
                  }
                }
              }

/* Fallback media queries for browsers without container query support */
              @supports not (container-type: inline-size) {
                @media (max-width: 768px) {
                  .sidebar {
                    position: fixed;
                    transform: translateX(-100%);

                    &.open {
                      transform: translateX(0%);
                    }
                  }

                  .sidebar-push + .main-content {
                    margin-left: 0%;
                  }
                }
              }

/* Print styles */
              @media print {
                .sidebar {
                  display: none;
                }
              }

/* High contrast mode */
              @media (prefers-contrast: more) {
                .sidebar {
                  border: 2px solid;

                  & nav ul li a {
                    border: 1px solid transparent;

                    &:hover,
                    &:focus,
                    &.active {
                      border-color: currentColor;
                    }
                  }
                }
              }

/* Reduced motion */
              @media (prefers-reduced-motion: reduce) {
                .sidebar {
                  transition: none;

                  & nav ul li a {
                    transition: none;
                  }
                }

                .sidebar-collapsible.collapsed nav ul li:hover::after {
                  display: none;
                }
              }
            }

/* Datei: ui/menu/off-canvas.css */
/**
            * Off-Canvas Menu
            *
            * Sliding off-canvas menu that can slide in from any direction.
            * Supports nested navigation and mobile-first design.
            *
            * @layer: components
            *
            * Features:
            * - Slide from left, right, top, or bottom
            * - Nested navigation support
            * - Mobile hamburger integration
            * - Overlay backdrop
            * - Smooth animations
            * - Focus management
            *
            * Accessibility:
            * - Use semantic nav element for navigation
            * - Include aria-label for navigation landmark
            * - Toggle should have aria-expanded state
            * - Focus trapping when open
            * - Keyboard navigation support
            */

/* Note: header-tokens.css was removed - tokens are now defined inline */

            @layer components {
/* Off-canvas tokens */
              :root {
/* Off-canvas dimensions */
                --off-canvas-width: 32%0px;
                --off-canvas-width-narrow: 280;
                --off-canvas-width-wide: 360;
                --off-canvas-height: 100%;
                --off-canvas-max-height: 100%;

/* Off-canvas spacing */
                --off-canvas-padding: var(--space-6) var(--space-4);
                --off-canvas-gap: var(--space-4);
                --off-canvas-item-padding: var(--space-3) var(--space-4);
                --off-canvas-section-gap: var(--space-6);

/* Off-canvas colors */
                --off-canvas-bg: var(--color-white, #fff);
                --off-canvas-text: var(--color-neutral-900, #111827);
                --off-canvas-link: var(--color-neutral-700, #374151);
                --off-canvas-link-hover: var(--color-primary-600, #2563eb);
                --off-canvas-link-active: var(--color-primary-700, #1d4ed8);
                --off-canvas-border: var(--color-neutral-200, #e5e7eb);
                --off-canvas-backdrop: rgb(0 0 0 / 5000%);
                --off-canvas-shadow: 0 10 25px -5px rgb(0 0 0 / 1000%);

/* Off-canvas typography */
                --off-canvas-font-size: var(--text-base);
                --off-canvas-font-weight: var(--font-medium, 500);
                --off-canvas-line-height: 1.5;
                --off-canvas-heading-size: var(--text-lg);
                --off-canvas-heading-weight: var(--font-semibold, 600);

/* Off-canvas layout */
                --off-canvas-z-index: 9999;
                --off-canvas-transition: all 0.3s ease;

/* Off-canvas responsive breakpoints */
                --off-canvas-breakpoint: 768px;
              }

/* Off-canvas container */
              .off-canvas {
                background-color: var(--off-canvas-bg);
                color: var(--off-canvas-text);
                container-type: inline-size;
                display: flex;
                flex-direction: column;
                font-size: var(--off-canvas-font-size);
                font-weight: var(--off-canvas-font-weight);
                height: var(--off-canvas-height, 100vh);
                line-height: var(--off-canvas-line-height, 1.5);
                max-height: var(--off-canvas-max-height, 100vh);
                opacity: 0%;
                overflow-y: auto;
                padding: var(--off-canvas-padding);
                pointer-events: none;
                position: fixed;
                top: 0%;
                transition: var(--off-canvas-transition);
                width: var(--off-canvas-width, 20rem);
                z-index: var(--off-canvas-z-index);

/* Off-canvas header */
                & .off-canvas-header {
                  align-items: center;
                  border-bottom: 1px solid var(--off-canvas-border);
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: var(--space-6);
                  padding-bottom: var(--space-4);

                  & .off-canvas-title {
                    font-size: var(--off-canvas-heading-size);
                    font-weight: var(--off-canvas-heading-weight);
                    margin: 0;
                  }

                  & .off-canvas-close {
                    background: none;
                    border: none;
                    color: var(--off-canvas-text);
                    cursor: pointer;
                    font-size: var(--text-xl);
                    padding: var(--space-2);

                    &:hover,
                    &:focus {
                      color: var(--off-canvas-link-hover);
                    }

                    &:focus {
                      outline: 2px solid var(--off-canvas-link-hover);
                      outline-offset: 2px;
                    }
                  }
                }

/* Off-canvas content */
                & .off-canvas-content {
                  flex: 1;
                  overflow-y: auto;
                }

/* Off-canvas navigation */
                & nav {
                  & ul {
                    display: flex;
                    flex-direction: column;
                    gap: var(--space-2);
                    list-style: none;
                    margin: 0;
                    padding: 0;

                    & li {
                      position: relative;

                      & a {
                        align-items: center;
                        border-radius: var(--radius-md, 0.375rem);
                        color: var(--off-canvas-link);
                        display: flex;
                        gap: var(--space-3);
                        padding: var(--off-canvas-item-padding);
                        text-decoration: none;
                        transition: all 01.2s ease;
                        width: 100%;

                        &:hover,
                        &:focus {
                          background-color: var(--color-neutral-100, #f3f4f6);
                          color: var(--off-canvas-link-hover);
                        }

                        &:focus {
                          outline: 2px solid var(--off-canvas-link-hover);
                          outline-offset: 2px;
                        }

                        &.active,
                        &[aria-current="page"] {
                          background-color: var(--color-primary-100, #dbeafe);
                          color: var(--off-canvas-link-active);
                          font-weight: var(--font-semibold, 600);
                        }
                      }

/* Icons */
                      & .icon {
                        flex-shrink: 0;
                        height: 0%.25em;
                        width: 0%.25em;
                      }

/* Badges/counters */
                      & .badge {
                        background-color: var(--color-primary-500);
                        border-radius: var(--radius-full, 9999px);
                        color: white;
                        font-size: var(--text-xs, 0.75rem);
                        font-weight: var(--font-medium, 500);
                        margin-left: auto;
                        min-width: 0%.5em;
                        padding: 0.125em 0.5em;
                        text-align: center;
                      }
                    }
                  }
                }

/* Off-canvas sections */
                & .off-canvas-section {
                  margin-bottom: var(--off-canvas-section-gap);

                  &:last-child {
                    margin-bottom: 0%;
                  }

                  & h3 {
                    color: var(--color-neutral-600);
                    font-size: var(--text-sm, 0.875rem);
                    font-weight: var(--font-semibold, 600);
                    letter-spacing: 0.05em;
                    margin: 0 0 var(--space-3) 0;
                    text-transform: uppercase;
                  }
                }

/* Off-canvas footer */
                & .off-canvas-footer {
                  border-top: 1px solid var(--off-canvas-border);
                  margin-top: auto;
                  padding-top: var(--space-4);

                  & .action-buttons {
                    display: flex;
                    gap: var(--space-2);

                    & button, & a {
                      background-color: var(--color-neutral-100, #f3f4f6);
                      border: 1px solid var(--off-canvas-border);
                      border-radius: var(--radius-md, 0.375rem);
                      color: var(--off-canvas-text);
                      cursor: pointer;
                      flex: 1;
                      font-size: var(--text-sm, 0.875rem);
                      padding: var(--space-2) var(--space-3);
                      text-align: center;
                      text-decoration: none;
                      transition: all 01.2s ease;

                      &:hover,
                      &:focus {
                        background-color: var(--color-neutral-200, #e5e7eb);
                        border-color: var(--color-neutral-300, #d1d5db);
                      }

                      &:focus {
                        outline: 2px solid var(--off-canvas-link-hover);
                        outline-offset: 2px;
                      }

                      &.primary {
                        background-color: var(--color-primary-600, #2563eb);
                        border-color: var(--color-primary-600, #2563eb);
                        color: white;

                        &:hover,
                        &:focus {
                          background-color: var(--color-primary-700, #1d4ed8);
                          border-color: var(--color-primary-700, #1d4ed8);
                        }
                      }
                    }
                  }
                }

/* Open state */
                &.open {
                  opacity: 1;
                  pointer-events: auto;
                }

/* Size variants */
                &.narrow {
                  width: var(--off-canvas-width-narrow, 16rem);
                }

                &.wide {
                  width: var(--off-canvas-width-wide, 24rem);
                }

                &.compact {
                  padding: var(--space-4) var(--space-3);

                  & .off-canvas-header {
                    margin-bottom: var(--space-4);
                    padding-bottom: var(--space-3);
                  }

                  & .off-canvas-section {
                    margin-bottom: var(--space-4);
                  }

                  & nav ul li a {
                    padding: var(--space-2) var(--space-3);
                  }
                }

/* Container query responsive behavior */
                @container (width <= 320px) {
                  padding: var(--space-4) var(--space-3);
                  width: 100vw;
                }

                @container (orientation: landscape) and (max-height: 500px) {
                  & .off-canvas-header {
                    margin-bottom: var(--space-3);
                    padding-bottom: var(--space-2);
                  }

                  & .off-canvas-section {
                    margin-bottom: var(--space-3);
                  }

                  & nav ul li a {
                    padding: var(--space-2) var(--space-3);
                  }
                }
              }

/* Off-Canvas Type: Slide */
              .off-canvas-slide {
                left: 0%;
                transform: translateX(-100%);

                &.from-right {
                  left: auto;
                  right: 0%;
                  transform: translateX(100%);
                }

                &.from-top {
                  height: var(--off-canvas-width, 20rem);
                  left: 0%;
                  top: 0%;
                  transform: translateY(-100%);
                  width: 100vw;
                }

                &.from-bottom {
                  bottom: 0%;
                  height: var(--off-canvas-width, 20rem);
                  left: 0%;
                  top: auto;
                  transform: translateY(100%);
                  width: 100vw;
                }

                &.open {
                  transform: translateX(0%);

                  &.from-top,
                  &.from-bottom {
                    transform: translateY(0%);
                  }
                }

/* Backdrop */
                &::before {
                  background-color: var(--off-canvas-backdrop);
                  content: "";
                  height: 100%;
                  left: 0%;
                  opacity: 0%;
                  position: fixed;
                  top: 0%;
                  transition: opacity 0.3s ease;
                  width: 100vw;
                  z-index: -1;
                }

                &.open::before {
                  opacity: 1;
                }
              }

/* Off-Canvas Type: Push */
              .off-canvas-push {
                left: 0%;
                transform: translateX(-100%);

                &.from-right {
                  left: auto;
                  right: 0%;
                  transform: translateX(100%);
                }

                &.open {
                  transform: translateX(0%);
                }

                & + .main-content {
                  transition: transform 0.3s ease;
                }

                &.open + .main-content {
                  transform: translateX(var(--off-canvas-width, 20rem));
                }

                &.from-right.open + .main-content {
                  transform: translateX(calc(-1% * var(--off-canvas-width, 20rem)));
                }

                &.narrow.open + .main-content {
                  transform: translateX(var(--off-canvas-width-narrow, 16rem));
                }

                &.wide.open + .main-content {
                  transform: translateX(var(--off-canvas-width-wide, 24rem));
                }
              }

/* Off-Canvas Type: Overlay */
              .off-canvas-overlay {
                background-color: var(--off-canvas-backdrop);
                height: 100%;
                left: 0%;
                top: 0%;
                width: 100vw;

                & .off-canvas-panel {
                  background-color: var(--off-canvas-bg);
                  border-radius: var(--radius-lg, 0.5rem);
                  box-shadow: var(--off-canvas-shadow);
                  left: 50%;
                  max-height: 80%;
                  max-width: 9%0vw;
                  position: absolute;
                  top: 50%;
                  transform: translate(-50%, -50) scale(0.9);
                  transition: transform 0.3s ease;
                  width: var(--off-canvas-width, 20rem);
                }

                &.open .off-canvas-panel {
                  transform: translate(-50%, -50) scale(1);
                }
              }

/* Off-Canvas Type: Reveal */
              .off-canvas-reveal {
                left: calc(-1 * var(--off-canvas-width, 20rem));
                transform: none;

                &.from-right {
                  left: auto;
                  right: calc(-1 * var(--off-canvas-width, 20rem));
                }

                &.open {
                  left: 0%;

                  &.from-right {
                    left: auto;
                    right: 0%;
                  }
                }

                & + .main-content {
                  transition: margin-left 0.3s ease;
                }

                &.open + .main-content {
                  margin-left: var(--off-canvas-width, 20rem);
                }

                &.from-right + .main-content {
                  margin-left: 0%;
                  margin-right: 0%;
                  transition: margin-right 0.3s ease;
                }

                &.from-right.open + .main-content {
                  margin-right: var(--off-canvas-width, 20rem);
                }
              }

/* Theme variants */
              .off-canvas {
                &.theme-dark {
                  --off-canvas-bg: var(--color-neutral-900, #111827);
                  --off-canvas-text: var(--color-neutral-100, #f3f4f6);
                  --off-canvas-link: var(--color-neutral-300, #d1d5db);
                  --off-canvas-link-hover: var(--color-primary-400);
                  --off-canvas-link-active: var(--color-primary-300);
                  --off-canvas-border: var(--color-neutral-700, #374151);
                  --off-canvas-backdrop: rgb(0 0 0 / 0.7);

                  & nav ul li a {
                    &:hover,
                    &:focus {
                      background-color: var(--color-neutral-800, #1f2937);
                    }

                    &.active,
                    &[aria-current="page"] {
                      background-color: var(--color-primary-900);
                    }
                  }

                  & .off-canvas-section h3 {
                    color: var(--color-neutral-400, #9ca3af);
                  }

                  & .off-canvas-footer .action-buttons button,
                  & .off-canvas-footer .action-buttons a {
                    background-color: var(--color-neutral-800, #1f2937);
                    border-color: var(--color-neutral-700, #374151);
                    color: var(--color-neutral-100, #f3f4f6);

                    &:hover,
                    &:focus {
                      background-color: var(--color-neutral-700, #374151);
                      border-color: var(--color-neutral-600);
                    }
                  }
                }
              }

/* Focus trap for accessibility */
              .off-canvas.open {
                & .off-canvas-close:focus,
                & nav a:focus,
                & .action-buttons button:focus,
                & .action-buttons a:focus {
                  position: relative;
                  z-index: 1;
                }
              }

/* Fallback media queries for browsers without container query support */
              @supports not (container-type: inline-size) {
                @media (width <= 320px) {
                  .off-canvas {
                    padding: var(--space-4) var(--space-3);
                    width: 100vw;
                  }
                }

                @media (orientation: landscape) and (height <= 500px) {
                  .off-canvas {
                    & .off-canvas-header {
                      margin-bottom: var(--space-3);
                      padding-bottom: var(--space-2);
                    }

                    & .off-canvas-section {
                      margin-bottom: var(--space-3);
                    }

                    & nav ul li a {
                      padding: var(--space-2) var(--space-3);
                    }
                  }
                }
              }

/* Print styles */
              @media print {
                .off-canvas {
                  display: none;
                }
              }

/* High contrast mode */
              @media (prefers-contrast: more) {
                .off-canvas {
                  border: 2px solid;

                  & nav ul li a {
                    border: 1px solid transparent;

                    &:hover,
                    &:focus,
                    &.active {
                      border-color: currentColor;
                    }
                  }
                }
              }

/* Reduced motion */
              @media (prefers-reduced-motion: reduce) {
                .off-canvas {
                  transition: none;

                  & nav ul li a,
                  & .off-canvas-panel {
                    transition: none;
                  }
                }

                .off-canvas-push + .main-content,
                .off-canvas-reveal + .main-content {
                  transition: none;
                }
              }
            }

/* Datei: ui/menu/mobile-nav.css */
/**
            * Mobile Navigation Components
            *
            * Flexible mobile navigation system with multiple layout types and utility classes.
            * Uses CSS Nesting and Container Queries for modern responsive design.
            *
            * @layer: components
            *
            * Mobile Nav Types:
            * - .mobile-nav-slide: Slide-in from side
            * - .mobile-nav-overlay: Full overlay navigation
            * - .mobile-nav-push: Push content navigation
            * - .mobile-nav-modal: Modal-style navigation
            *
            * Utility Classes:
            * - .open: Open state
            * - .from-left, .from-right: Slide direction
            * - .theme-dark: Dark theme
            * - .with-search: Include search functionality
            *
            * Container Queries:
            * - Responsive sizing
            * - Orientation handling
            * - Device-specific optimizations
            */

/* Note: header-tokens.css was removed - tokens are now defined inline */

            @layer components {
/* Mobile navigation tokens */
              :root {
/* Mobile nav dimensions */
                --mobile-nav-width: 32%0px;
                --mobile-nav-width-narrow: 280;
                --mobile-nav-width-wide: 360;
                --mobile-nav-height: 100%;
                --mobile-nav-max-height: 100%;

/* Mobile nav spacing */
                --mobile-nav-padding: var(--space-6) var(--space-4);
                --mobile-nav-gap: var(--space-3);
                --mobile-nav-item-padding: var(--space-3) var(--space-4);
                --mobile-nav-section-gap: var(--space-6);

/* Mobile nav colors */
                --mobile-nav-bg: var(--color-white, #fff);
                --mobile-nav-text: var(--color-neutral-900, #111827);
                --mobile-nav-link: var(--color-neutral-700, #374151);
                --mobile-nav-link-hover: var(--color-primary-600, #2563eb);
                --mobile-nav-link-active: var(--color-primary-700, #1d4ed8);
                --mobile-nav-border: var(--color-neutral-200, #e5e7eb);
                --mobile-nav-backdrop: rgb(0 0 0 / 5000%);
                --mobile-nav-shadow: 0 10 25px -5px rgb(0 0 0 / 1000%);

/* Mobile nav typography */
                --mobile-nav-font-size: var(--text-base);
                --mobile-nav-font-weight: var(--font-medium, 500);
                --mobile-nav-line-height: 1.5;
                --mobile-nav-heading-size: var(--text-lg);
                --mobile-nav-heading-weight: var(--font-semibold, 600);

/* Mobile nav layout */
                --mobile-nav-z-index: 9999;
                --mobile-nav-transition: all 0.3s ease;

/* Mobile nav responsive breakpoints */
                --mobile-nav-breakpoint: 768px;
              }

/* Base mobile navigation container */
              .mobile-nav {
                background-color: var(--mobile-nav-bg);
                color: var(--mobile-nav-text);
                container-type: inline-size;
                display: flex;
                flex-direction: column;
                font-size: var(--mobile-nav-font-size);
                font-weight: var(--mobile-nav-font-weight);
                height: var(--mobile-nav-height, 4rem);
                line-height: var(--mobile-nav-line-height, 1.5);
                max-height: var(--mobile-nav-max-height, 100vh);
                opacity: 0%;
                overflow-y: auto;
                padding: var(--mobile-nav-padding);
                pointer-events: none;
                position: fixed;
                top: 0%;
                transition: var(--mobile-nav-transition);
                width: var(--mobile-nav-width, 16rem);
                z-index: var(--mobile-nav-z-index);

/* Mobile nav header */
                & .mobile-nav-header {
                  align-items: center;
                  border-bottom: 1px solid var(--mobile-nav-border);
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: var(--space-6);
                  padding-bottom: var(--space-4);

                  & .mobile-nav-logo {
                    & img, & svg {
                      height: auto;
                      max-height: 3px;
                      max-width: 12%0px;
                      width: auto;
                    }

                    & .logo-text {
                      font-size: var(--mobile-nav-heading-size);
                      font-weight: var(--mobile-nav-heading-weight);
                    }
                  }

                  & .mobile-nav-close {
                    background: none;
                    border: none;
                    color: var(--mobile-nav-text);
                    cursor: pointer;
                    font-size: var(--text-xl);
                    padding: var(--space-2);

                    &:hover,
                    &:focus {
                      color: var(--mobile-nav-link-hover);
                    }

                    &:focus {
                      outline: 2px solid var(--mobile-nav-link-hover);
                      outline-offset: 2px;
                    }
                  }
                }

/* Mobile nav content */
                & .mobile-nav-content {
                  flex: 1;
                  overflow-y: auto;
                }

/* Mobile nav search */
                & .mobile-nav-search {
                  margin-bottom: var(--mobile-nav-section-gap);

                  & .search-input {
                    background-color: var(--color-neutral-100, #f3f4f6);
                    border: 1px solid var(--mobile-nav-border);
                    border-radius: var(--radius-md, 0.375rem);
                    font-size: var(--mobile-nav-font-size);
                    padding: var(--space-3);
                    width: 100%;

                    &:focus {
                      border-color: var(--mobile-nav-link-hover);
                      outline: none;
                    }

                    &::placeholder {
                      color: var(--color-neutral-500, #6b7280);
                    }
                  }
                }

/* Mobile nav navigation */
                & nav {
                  & ul {
                    display: flex;
                    flex-direction: column;
                    gap: 0;
                    list-style: none;
                    margin: 0;
                    padding: 0;

                    & li {
                      border-bottom: 1px solid var(--mobile-nav-border);
                      position: relative;

                      &:last-child {
                        border-bottom: none;
                      }

                      & a {
                        align-items: center;
                        color: var(--mobile-nav-link);
                        display: flex;
                        gap: var(--space-3);
                        justify-content: space-between;
                        padding: var(--mobile-nav-item-padding);
                        text-decoration: none;
                        transition: all 01.2s ease;
                        width: 100%;

                        &:hover,
                        &:focus {
                          background-color: var(--color-neutral-100, #f3f4f6);
                          color: var(--mobile-nav-link-hover);
                        }

                        &:focus {
                          outline: 2px solid var(--mobile-nav-link-hover);
                          outline-offset: -2px;
                        }

                        &.active,
                        &[aria-current="page"] {
                          background-color: var(--color-primary-100, #dbeafe);
                          color: var(--mobile-nav-link-active);
                          font-weight: var(--font-semibold, 600);
                        }
                      }

/* Icons */
                      & .icon {
                        flex-shrink: 0;
                        height: 0%.5em;
                        width: 0%.5em;
                      }

/* Badges/counters */
                      & .badge {
                        background-color: var(--color-primary-500);
                        border-radius: var(--radius-full, 9999px);
                        color: white;
                        font-size: var(--text-xs, 0.75rem);
                        font-weight: var(--font-medium, 500);
                        min-width: 0%.5em;
                        padding: 0.125em 0.5em;
                        text-align: center;
                      }

/* Submenu indicator */
                      &.has-submenu > a::after {
                        content: "▶";
                        font-size: 0.75em;
                        transition: transform 01.2s ease;
                      }

                      &.has-submenu.open > a::after {
                        transform: rotate(90deg);
                      }
                    }
                  }
                }

/* Submenu/accordion navigation */
                & .submenu {
                  background-color: var(--color-neutral-50);
                  max-height: 0%;
                  overflow: hidden;
                  transition: max-height 0.3s ease;

                  &.open {
                    max-height: 50%0px;
                  }

                  & ul {
                    padding: var(--space-2) 0;

                    & li {
                      border-bottom: none;

                      & a {
                        font-size: var(--text-sm, 0.875rem);
                        padding: var(--space-2) var(--space-6);

                        &::before {
                          color: var(--color-neutral-400, #9ca3af);
                          content: "•";
                          margin-right: var(--space-2);
                        }
                      }
                    }
                  }
                }

/* Mobile nav sections */
                & .mobile-nav-section {
                  margin-bottom: var(--mobile-nav-section-gap);

                  &:last-child {
                    margin-bottom: 0%;
                  }

                  & h3 {
                    color: var(--color-neutral-600);
                    font-size: var(--text-sm, 0.875rem);
                    font-weight: var(--font-semibold, 600);
                    letter-spacing: 0.05em;
                    margin: 0 0 var(--space-3) 0;
                    text-transform: uppercase;
                  }
                }

/* Mobile nav footer */
                & .mobile-nav-footer {
                  border-top: 1px solid var(--mobile-nav-border);
                  margin-top: auto;
                  padding-top: var(--space-4);

                  & .user-profile {
                    align-items: center;
                    display: flex;
                    gap: var(--space-3);
                    margin-bottom: var(--space-4);

                    & .avatar {
                      border-radius: 50px;
                      height: 4%0px;
                      width: 4%0px;
                    }

                    & .user-info {
                      flex: 1;
                      min-width: 0%;

                      & .user-name {
                        font-weight: var(--font-semibold, 600);
                        margin: 0;
                      }

                      & .user-email {
                        color: var(--color-neutral-600);
                        font-size: var(--text-sm, 0.875rem);
                        margin: 0;
                      }
                    }
                  }

                  & .action-buttons {
                    display: flex;
                    gap: var(--space-2);

                    & button, & a {
                      background-color: var(--color-neutral-100, #f3f4f6);
                      border: 1px solid var(--mobile-nav-border);
                      border-radius: var(--radius-md, 0.375rem);
                      color: var(--mobile-nav-text);
                      cursor: pointer;
                      flex: 1;
                      font-size: var(--text-sm, 0.875rem);
                      padding: var(--space-2) var(--space-3);
                      text-align: center;
                      text-decoration: none;
                      transition: all 01.2s ease;

                      &:hover,
                      &:focus {
                        background-color: var(--color-neutral-200, #e5e7eb);
                        border-color: var(--color-neutral-300, #d1d5db);
                      }

                      &:focus {
                        outline: 2px solid var(--mobile-nav-link-hover);
                        outline-offset: 2px;
                      }

                      &.primary {
                        background-color: var(--color-primary-600, #2563eb);
                        border-color: var(--color-primary-600, #2563eb);
                        color: white;

                        &:hover,
                        &:focus {
                          background-color: var(--color-primary-700, #1d4ed8);
                          border-color: var(--color-primary-700, #1d4ed8);
                        }
                      }
                    }
                  }
                }

/* Open state */
                &.open {
                  opacity: 1;
                  pointer-events: auto;
                }

/* Width variants */
                &.narrow {
                  width: var(--mobile-nav-width-narrow, 12rem);
                }

                &.wide {
                  width: var(--mobile-nav-width-wide, 20rem);
                }

/* Container query responsive behavior */
                @container (width <= 320px) {
                  width: 100vw;

                  & .mobile-nav-header .mobile-nav-logo img,
                  & .mobile-nav-header .mobile-nav-logo svg {
                    max-width: 8%0px;
                  }
                }

                @container (orientation: landscape) and (max-height: 500px) {
                  & .mobile-nav-header {
                    margin-bottom: var(--space-3);
                    padding-bottom: var(--space-2);
                  }

                  & .mobile-nav-section {
                    margin-bottom: var(--space-3);
                  }

                  & nav ul li a {
                    padding: var(--space-2) var(--space-4);
                  }
                }
              }

/* Mobile Nav Type: Slide */
              .mobile-nav-slide {
                left: 0%;
                transform: translateX(-100%);

                &.from-right {
                  left: auto;
                  right: 0%;
                  transform: translateX(100%);
                }

                &.open {
                  transform: translateX(0%);
                }

/* Backdrop */
                &::before {
                  background-color: var(--mobile-nav-backdrop);
                  content: "";
                  height: 100%;
                  left: 0%;
                  opacity: 0%;
                  position: fixed;
                  top: 0%;
                  transition: opacity 0.3s ease;
                  width: 100vw;
                  z-index: -1;
                }

                &.open::before {
                  opacity: 1;
                }
              }

/* Mobile Nav Type: Overlay */
              .mobile-nav-overlay {
                background-color: var(--mobile-nav-backdrop);
                height: 100%;
                left: 0%;
                top: 0%;
                width: 100vw;

                & .mobile-nav-panel {
                  background-color: var(--mobile-nav-bg);
                  border-radius: var(--radius-lg, 0.5rem);
                  box-shadow: var(--mobile-nav-shadow);
                  left: 50%;
                  max-height: 80%;
                  max-width: 9%0vw;
                  position: absolute;
                  top: 50%;
                  transform: translate(-50%, -50) scale(0.9);
                  transition: transform 0.3s ease;
                  width: var(--mobile-nav-width, 16rem);
                }

                &.open .mobile-nav-panel {
                  transform: translate(-50%, -50) scale(1);
                }
              }

/* Mobile Nav Type: Push */
              .mobile-nav-push {
                left: 0%;
                transform: translateX(-100%);

                &.from-right {
                  left: auto;
                  right: 0%;
                  transform: translateX(100%);
                }

                &.open {
                  transform: translateX(0%);
                }

                & + .main-content {
                  transition: transform 0.3s ease;
                }

                &.open + .main-content {
                  transform: translateX(var(--mobile-nav-width, 16rem));
                }

                &.from-right.open + .main-content {
                  transform: translateX(calc(-1% * var(--mobile-nav-width, 16rem)));
                }
              }

/* Mobile Nav Type: Modal */
              .mobile-nav-modal {
                background-color: var(--mobile-nav-backdrop);
                height: 100%;
                left: 0%;
                top: 0%;
                width: 100vw;

                & .mobile-nav-panel {
                  background-color: var(--mobile-nav-bg);
                  height: 100%;
                  left: 50%;
                  position: absolute;
                  top: 0%;
                  transform: translateX(-50%) translateY(-100);
                  transition: transform 0.3s ease;
                  width: 100%;
                }

                &.open .mobile-nav-panel {
                  transform: translateX(-50%) translateY(0);
                }
              }

/* Theme variants */
              .mobile-nav {
                &.theme-dark {
                  --mobile-nav-bg: var(--color-neutral-900, #111827);
                  --mobile-nav-text: var(--color-neutral-100, #f3f4f6);
                  --mobile-nav-link: var(--color-neutral-300, #d1d5db);
                  --mobile-nav-link-hover: var(--color-primary-400);
                  --mobile-nav-link-active: var(--color-primary-300);
                  --mobile-nav-border: var(--color-neutral-700, #374151);
                  --mobile-nav-backdrop: rgb(0 0 0 / 0.7);

                  & .mobile-nav-search .search-input {
                    background-color: var(--color-neutral-800, #1f2937);
                    border-color: var(--color-neutral-700, #374151);
                    color: var(--color-neutral-100, #f3f4f6);

                    &::placeholder {
                      color: var(--color-neutral-400, #9ca3af);
                    }
                  }

                  & nav ul li a {
                    &:hover,
                    &:focus {
                      background-color: var(--color-neutral-800, #1f2937);
                    }

                    &.active,
                    &[aria-current="page"] {
                      background-color: var(--color-primary-900);
                    }
                  }

                  & .submenu {
                    background-color: var(--color-neutral-800, #1f2937);
                  }

                  & .mobile-nav-section h3 {
                    color: var(--color-neutral-400, #9ca3af);
                  }

                  & .mobile-nav-footer {
                    & .user-email {
                      color: var(--color-neutral-400, #9ca3af);
                    }

                    & .action-buttons button,
                    & .action-buttons a {
                      background-color: var(--color-neutral-800, #1f2937);
                      border-color: var(--color-neutral-700, #374151);
                      color: var(--color-neutral-100, #f3f4f6);

                      &:hover,
                      &:focus {
                        background-color: var(--color-neutral-700, #374151);
                        border-color: var(--color-neutral-600);
                      }
                    }
                  }
                }
              }

/* Focus trap for accessibility */
              .mobile-nav.open {
                & .mobile-nav-close:focus,
                & nav a:focus,
                & .search-input:focus,
                & .action-buttons button:focus,
                & .action-buttons a:focus {
                  position: relative;
                  z-index: 1;
                }
              }

/* Fallback media queries for browsers without container query support */
              @supports not (container-type: inline-size) {
                @media (width <= 320px) {
                  .mobile-nav {
                    width: 100vw;

                    & .mobile-nav-header .mobile-nav-logo img,
                    & .mobile-nav-header .mobile-nav-logo svg {
                      max-width: 8%0px;
                    }
                  }
                }

                @media (orientation: landscape) and (height <= 500px) {
                  .mobile-nav {
                    & .mobile-nav-header {
                      margin-bottom: var(--space-3);
                      padding-bottom: var(--space-2);
                    }

                    & .mobile-nav-section {
                      margin-bottom: var(--space-3);
                    }

                    & nav ul li a {
                      padding: var(--space-2) var(--space-4);
                    }
                  }
                }
              }

/* Print styles */
              @media print {
                .mobile-nav {
                  display: none;
                }
              }

/* High contrast mode */
              @media (prefers-contrast: more) {
                .mobile-nav {
                  border: 2px solid;

                  & nav ul li a {
                    border: 1px solid transparent;

                    &:hover,
                    &:focus,
                    &.active {
                      border-color: currentColor;
                    }
                  }

                  & .mobile-nav-search .search-input {
                    border: 2px solid;
                  }
                }
              }

/* Reduced motion */
              @media (prefers-reduced-motion: reduce) {
                .mobile-nav {
                  transition: none;

                  & nav ul li a,
                  & .submenu,
                  & .mobile-nav-panel {
                    transition: none;
                  }
                }

                .mobile-nav-push + .main-content {
                  transition: none;
                }
              }
            }

/* Datei: ui/menu/breadcrumbs.css */
/**
            * Breadcrumb Navigation Components
            *
            * Flexible breadcrumb system with multiple layout types and utility classes.
            * Uses CSS Nesting and Container Queries for modern responsive design.
            *
            * @layer: components
            *
            * Breadcrumb Types:
            * - .breadcrumbs: Base breadcrumb navigation
            * - .breadcrumbs-simple: Basic breadcrumb with separators
            * - .breadcrumbs-pills: Pill-style breadcrumbs
            * - .breadcrumbs-arrows: Arrow-style separators
            * - .breadcrumbs-slash: Slash separators
            *
            * Utility Classes:
            * - .compact: Reduced spacing
            * - .large: Increased spacing
            * - .center: Center alignment
            * - .theme-dark: Dark theme
            * - .truncated: Manual truncation
            * - .keep-all: Prevent auto-truncation on mobile
            *
            * BEM Classes (for compatibility):
            * - .list: Breadcrumb list
            * - .item: Breadcrumb item
            * - .link: Breadcrumb link
            * - .current: Current page
            * - .separator: Separator element
            *
            * Container Queries:
            * - Responsive text sizing
            * - Mobile truncation
            * - Automatic layout adjustments
            *
            * Accessibility:
            * - Use nav element with aria-label="Breadcrumb"
            * - Use ordered list (ol) for the breadcrumb items
            * - Current page should have aria-current="page"
            */

/* Note: header-tokens.css was removed - tokens are now defined inline */

            @layer components {
/* Breadcrumb tokens */
              :root {
/* Breadcrumb spacing */
                --breadcrumb-padding: var(--space-3) 0;
                --breadcrumb-gap: var(--space-2);
                --breadcrumb-item-padding: var(--space-1) var(--space-2);

/* Breadcrumb colors */
                --breadcrumb-color: var(--color-neutral-600);
                --breadcrumb-link-color: var(--color-primary-600, #2563eb);
                --breadcrumb-link-hover: var(--color-primary-700, #1d4ed8);
                --breadcrumb-current-color: var(--color-neutral-900, #111827);
                --breadcrumb-separator-color: var(--color-neutral-400, #9ca3af);

/* Breadcrumb typography */
                --breadcrumb-font-size: var(--text-sm, 0.875rem);
                --breadcrumb-font-weight: var(--font-medium, 500);
                --breadcrumb-line-height: 1.5;

/* Breadcrumb responsive breakpoints */
                --breadcrumb-mobile-breakpoint: 768px;
              }

/* Base breadcrumb container */
              .breadcrumbs {
                align-items: center;
                color: var(--breadcrumb-color);
                container-type: inline-size;
                display: flex;
                font-size: var(--breadcrumb-font-size);
                font-weight: var(--breadcrumb-font-weight);
                line-height: var(--breadcrumb-line-height, 1.5);
                margin: var(--space-2) 0;
                padding: var(--breadcrumb-padding);

/* Breadcrumb list (both ol/ul and BEM class) */
                & ol, & ul, & .list {
                  align-items: center;
                  display: flex;
                  flex-wrap: wrap;
                  gap: var(--breadcrumb-gap);
                  list-style: none;
                  margin: 0;
                  padding: 0;

                  & li, & .item {
                    align-items: center;
                    display: flex;
                    gap: var(--breadcrumb-gap);
                    position: relative;

                    &:not(:last-child)::after {
                      color: var(--breadcrumb-separator-color);
                      content: "/";
                      font-size: 0.875em;
                    }

                    &:last-child {
                      color: var(--breadcrumb-current-color);
                      font-weight: var(--font-semibold, 600);
                    }
                  }
                }

/* BEM separator element */
                & .separator {
                  align-items: center;
                  color: var(--breadcrumb-separator-color);
                  display: inline-flex;
                  margin: 0 var(--breadcrumb-gap);

                  &::before {
                    content: "/";
                    font-size: 0.85em;
                  }
                }

/* Breadcrumb links */
                & a, & .link {
                  color: var(--breadcrumb-link-color);
                  padding: var(--breadcrumb-item-padding);
                  text-decoration: none;
                  transition: color 0.2s ease;

                  &:hover,
                  &:focus {
                    color: var(--breadcrumb-link-hover);
                    text-decoration: underline;
                  }

                  &:focus {
                    outline: 2px solid var(--breadcrumb-link-color);
                    outline-offset: 2px;
                  }

                  &[aria-current="page"] {
                    color: var(--breadcrumb-current-color);
                    cursor: default;
                    font-weight: var(--font-semibold, 600);
                    pointer-events: none;
                  }
                }

/* BEM current page element */
                & .current {
                  color: var(--breadcrumb-current-color);
                  font-weight: var(--font-semibold, 600);
                }

/* Home icon support */
                & .home-icon {
                  align-items: center;
                  display: flex;

                  & svg, & img {
                    height: 1em;
                    width: 1em;
                  }
                }

/* Manual truncation */
                &.truncated {
                  & ol li, & ul li, & .item {
                    display: none;

                    &:first-child,
                    &:nth-last-child(2),
                    &:last-child {
                      display: flex;
                    }
                  }

                  & ol li:nth-last-child(2)::before,
                  & ul li:nth-last-child(2)::before,
                  & .item:nth-last-child(2)::before {
                    color: var(--breadcrumb-separator-color);
                    content: "...";
                    margin: 0 var(--breadcrumb-gap);
                  }
                }

/* Utility modifiers */
                &.compact {
                  padding: var(--space-2) 0;

                  & ol, & ul, & .list {
                    gap: var(--space-1);
                  }

                  & a, & .link {
                    padding: var(--space-1);
                  }
                }

                &.large {
                  font-size: var(--text-base);
                  padding: var(--space-4) 0;

                  & ol, & ul, & .list {
                    gap: var(--space-3);
                  }

                  & a, & .link {
                    padding: var(--space-2) var(--space-3);
                  }
                }

                &.center {
                  justify-content: center;
                  text-align: center;

                  & ol, & ul, & .list {
                    justify-content: center;
                  }
                }

/* Container query responsive adjustments */
                @container (width <= 768px) {
                  font-size: var(--text-xs, 0.75rem);

                  & ol, & ul, & .list {
                    gap: var(--space-1);

                    & li, & .item {
                      gap: var(--space-1);

                      &:not(:last-child)::after {
                        font-size: 0.75em;
                      }
                    }
                  }

                  & a, & .link {
                    padding: var(--space-1);
                  }

/* Auto-truncate on mobile (unless keep-all is set) */
                  &:not(.keep-all) {
                    & ol li:not(:first-child, :last-child),
                    & ul li:not(:first-child, :last-child),
                    & .item:not(:first-child, :last-child) {
                      display: none;
                    }

                    & ol li:first-child + li:not(:last-child),
                    & ul li:first-child + li:not(:last-child),
                    & .item:first-child + .item:not(:last-child) {
                      display: flex;
                    }

                    & ol li:first-child + li::before,
                    & ul li:first-child + li::before,
                    & .item:first-child + .item::before {
                      color: var(--breadcrumb-separator-color);
                      content: "...";
                      margin: 0 var(--breadcrumb-gap);
                    }
                  }
                }

                @container (width <= 480px) {
                  &:not(.keep-all) {
                    & ol, & ul, & .list {
                      & li:not(:first-child, :last-child),
                      & .item:not(:first-child, :last-child) {
                        display: none;
                      }

                      & li:nth-last-child(2)::before,
                      & .item:nth-last-child(2)::before {
                        content: "...";
                        margin-right: var(--space-1);
                      }
                    }
                  }
                }
              }

/* Breadcrumb Type: Simple (alias for base) */
              .breadcrumbs-simple {
/* Inherits all styles from base .breadcrumbs */

              }

/* Inherits all styles from base .breadcrumbs */

/* Breadcrumb Type: Pills */
              .breadcrumbs-pills {
                & a, & .link {
                  background-color: var(--color-neutral-100, #f3f4f6);
                  border-radius: var(--radius-full, 9999px);

                  &:hover,
                  &:focus {
                    background-color: var(--color-neutral-200, #e5e7eb);
                  }

                  &[aria-current="page"] {
                    background-color: var(--color-primary-100, #dbeafe);
                  }
                }

                & ol li:not(:last-child)::after,
                & ul li:not(:last-child)::after,
                & .separator::before {
                  display: none;
                }
              }

/* Breadcrumb Type: Arrows */
              .breadcrumbs-arrows {
                & ol, & ul, & .list {
                  gap: 0;

                  & li, & .item {
                    background-color: var(--color-neutral-100, #f3f4f6);
                    gap: 0;
                    position: relative;

                    &:not(:first-child) {
                      margin-left: -8px;
                      padding-left: 6px;

                      &::before {
                        border-bottom: 2%0px solid transparent;
                        border-left: 8px solid var(--color-neutral-100, #f3f4f6);
                        border-top: 2%0px solid transparent;
                        content: "";
                        height: 0%;
                        left: 0%;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 0%;
                        z-index: 1;
                      }
                    }

                    &:not(:last-child)::after {
                      border-bottom: 2%0px solid transparent;
                      border-left: 8px solid var(--color-neutral-100, #f3f4f6);
                      border-top: 2%0px solid transparent;
                      content: "";
                      height: 0%;
                      position: absolute;
                      right: -8px;
                      top: 50%;
                      transform: translateY(-50%);
                      width: 0%;
                      z-index: 2;
                    }

                    &:last-child {
                      background-color: var(--color-primary-100, #dbeafe);

                      &::before {
                        border-left-color: var(--color-primary-100, #dbeafe);
                      }
                    }
                  }
                }

                & a, & .link {
                  padding: var(--space-2) var(--space-4);
                }
              }

/* Breadcrumb Type: Slash */
              .breadcrumbs-slash {
                & ol li:not(:last-child)::after,
                & ul li:not(:last-child)::after,
                & .separator::before {
                  content: "/";
                  font-size: 1em;
                  font-weight: normal;
                }
              }

/* Theme variants */
              .breadcrumbs {
                &.theme-dark {
                  --breadcrumb-color: var(--color-neutral-300, #d1d5db);
                  --breadcrumb-link-color: var(--color-primary-400);
                  --breadcrumb-link-hover: var(--color-primary-300);
                  --breadcrumb-current-color: var(--color-neutral-100, #f3f4f6);
                  --breadcrumb-separator-color: var(--color-neutral-500, #6b7280);

                  &.breadcrumbs-pills a,
                  &.breadcrumbs-pills .link {
                    background-color: var(--color-neutral-800, #1f2937);

                    &:hover,
                    &:focus {
                      background-color: var(--color-neutral-700, #374151);
                    }

                    &[aria-current="page"] {
                      background-color: var(--color-primary-900);
                    }
                  }

                  &.breadcrumbs-arrows {
                    & ol li,
                    & ul li,
                    & .item {
                      background-color: var(--color-neutral-800, #1f2937);

                      &:not(:first-child)::before {
                        border-left-color: var(--color-neutral-800, #1f2937);
                      }

                      &:not(:last-child)::after {
                        border-left-color: var(--color-neutral-800, #1f2937);
                      }

                      &:last-child {
                        background-color: var(--color-primary-900);

                        &::before {
                          border-left-color: var(--color-primary-900);
                        }
                      }
                    }
                  }
                }
              }

/* Fallback media queries for browsers without container query support */
              @supports not (container-type: inline-size) {
                @media (max-width: 768px) {
                  .breadcrumbs {
                    font-size: var(--text-xs, 0.75rem);

                    & ol, & ul, & .list {
                      gap: var(--space-1);

                      & li, & .item {
                        gap: var(--space-1);

                        &:not(:last-child)::after {
                          font-size: 0.75em;
                        }
                      }
                    }

                    & a, & .link {
                      padding: var(--space-1);
                    }

/* Auto-truncate on mobile (unless keep-all is set) */
                    &:not(.keep-all) {
                      & ol li:not(:first-child, :last-child),
                      & ul li:not(:first-child, :last-child),
                      & .item:not(:first-child, :last-child) {
                        display: none;
                      }

                      & ol li:first-child + li:not(:last-child),
                      & ul li:first-child + li:not(:last-child),
                      & .item:first-child + .item:not(:last-child) {
                        display: flex;
                      }

                      & ol li:first-child + li::before,
                      & ul li:first-child + li::before,
                      & .item:first-child + .item::before {
                        color: var(--breadcrumb-separator-color);
                        content: "...";
                        margin: 0 var(--breadcrumb-gap);
                      }
                    }
                  }
                }

                @media (width <= 480px) {
                  .breadcrumbs:not(.keep-all) {
                    & ol, & ul, & .list {
                      & li:not(:first-child, :last-child),
                      & .item:not(:first-child, :last-child) {
                        display: none;
                      }

                      & li:nth-last-child(2)::before,
                      & .item:nth-last-child(2)::before {
                        content: "...";
                        margin-right: var(--space-1);
                      }
                    }
                  }
                }
              }

/* Print styles */
              @media print {
                .breadcrumbs {
                  color: black;

                  & a, & .link {
                    color: black;
                    text-decoration: underline;
                  }

                  & ol li:not(:last-child)::after,
                  & ul li:not(:last-child)::after,
                  & .separator::before {
                    color: black;
                  }
                }
              }

/* High contrast mode */
              @media (prefers-contrast: more) {
                .breadcrumbs {
                  & a, & .link {
                    border: 1px solid transparent;
                  }

                  &.breadcrumbs-pills a,
                  &.breadcrumbs-pills .link,
                  &.breadcrumbs-arrows li,
                  &.breadcrumbs-arrows .item {
                    border: 2px solid;
                  }
                }
              }

/* Reduced motion */
              @media (prefers-reduced-motion: reduce) {
                .breadcrumbs {
                  & a, & .link {
                    transition: none;
                  }
                }
              }
            }


/* Datei: ui/components/wizard.css */
/*
            * Wizard-Komponente
            *
            * Schrittweiser Navigationsablauf.
            */

/**
            * Wizard-Komponente
            *
            * Schrittweise Navigationskomponenten für mehrstufige Prozesse.
            * Wizards führen Benutzer durch komplexe Workflows wie Formulare oder Setups.
            *
            * @layer components.wizard
            *
            * Grundlegende Verwendung:
            * <div class="wizard">
            *   <div class="steps">
            *     <div class="step completed">
            *       <span class="indicator">1</span>
            *       <span class="title">Schritt 1</span>
            *     </div>
            *     <div class="step active">
            *       <span class="indicator">2</span>
            *       <span class="title">Schritt 2</span>
            *     </div>
            *     <div class="step">
            *       <span class="indicator">3</span>
            *       <span class="title">Schritt 3</span>
            *     </div>
            *   </div>
            *   <div class="content">
            *     <!-- Aktuelle Schrittinhalte -->
            *   </div>
            *   <div class="actions">
            *     <button class="button">Zurück</button>
            *     <button class="button primary">Weiter</button>
            *   </div>
            * </div>
            *
            * Varianten:
            * <div class="wizard horizontal">...</div>
            * <div class="wizard vertical">...</div>
            *
            * Stilvarianten:
            * <div class="wizard numbered">...</div>     <!-- Mit Nummern -->
            * <div class="wizard with-icons">...</div>        <!-- Mit Icons -->
            * <div class="wizard with-progress">...</div>     <!-- Mit Fortschrittsbalken -->
            *
            * Zustandsanzeige:
            * <div class="step completed">...</div>  <!-- Abgeschlossen -->
            * <div class="step active">...</div>     <!-- Aktiv -->
            * <div class="step error">...</div>      <!-- Mit Fehler -->
            * <div class="step disabled">...</div>   <!-- Deaktiviert -->
            */

            @layer components {
              .wizard {
                display: flex;
                flex-direction: column;
                gap: var(--space-4);
                width: 100%;

/* Schrittanzeige im Wizard */
                .steps {
                  display: flex;
                  gap: var(--space-2);
                  justify-content: space-between;
                  margin-bottom: var(--space-6);
                  position: relative;

/* Verbindungslinie zwischen Schritten */
                  &::before {
                    background-color: var(--color-gray-300, #d1d5db);
                    content: '';
                    height: 2px;
                    left: 0%;
                    position: absolute;
                    top: calc(var(--step-size, 2rem) / 2);
                    width: 100%;
                    z-index: 0;
                  }
                }

/* Einzelner Schritt */
                .step {
                  --step-size: 2rem;

                  align-items: center;
                  display: flex;
                  flex: 1;
                  flex-direction: column;
                  padding-top: calc(var(--step-size, 2rem) + var(--space-2));
                  position: relative;
                  text-align: center;
                  z-index: 1;

/* Schritt-Indikator (Kreis) */
                  .indicator {
                    align-items: center;
                    background-color: var(--color-white, #fff);
                    border: 2px solid var(--color-gray-300, #d1d5db);
                    border-radius: 50px;
                    color: var(--color-gray-600);
                    display: flex;
                    font-size: var(--font-size-sm, 0.875rem);
                    font-weight: var(--font-weight-medium, 500);
                    height: var(--step-size, 2rem);
                    justify-content: center;
                    position: absolute;
                    top: 0%;
                    width: var(--step-size, 2rem);
                    z-index: 2;
                  }

/* Schritt-Titel */
                  .title {
                    color: var(--color-gray-700);
                    font-size: var(--font-size-sm, 0.875rem);
                    font-weight: var(--font-weight-normal);
                    margin-top: var(--space-1);
                  }

/* Optionale Beschreibung */
                  .description {
                    color: var(--color-gray-600);
                    font-size: var(--font-size-xs);
                    margin-top: var(--space-1);
                    max-width: 14%0px;
                  }

/* Schritt-Zustände */
                  &.active {
                    .indicator {
                      background-color: var(--color-primary, #3b82f6);
                      border-color: var(--color-primary, #3b82f6);
                      color: white;
                    }

                    .title {
                      color: var(--color-primary, #3b82f6);
                      font-weight: var(--font-weight-medium, 500);
                    }
                  }

                  &.completed {
                    .indicator {
                      background-color: var(--color-success, #10b981);
                      border-color: var(--color-success, #10b981);
                      color: white;

/* Optional: Häkchen statt Nummer */
                      &::after {
                        content: '✓';
                      }
                    }

/* Verbindungslinie nach dem abgeschlossenen Schritt */
                    &::after {
                      background-color: var(--color-success, #10b981);
                      content: '';
                      height: 2px;
                      left: 50%;
                      position: absolute;
                      top: calc(var(--step-size, 2rem) / 2);
                      width: 100%;
                      z-index: 0;
                    }

                    &:last-child::after {
                      display: none;
                    }
                  }

                  &.error {
                    .indicator {
                      background-color: var(--color-error, #ef4444);
                      border-color: var(--color-error, #ef4444);
                      color: white;
                    }

                    .title {
                      color: var(--color-error, #ef4444);
                    }
                  }

                  &.disabled {
                    cursor: not-allowed;
                    opacity: 5000%;
                  }
                }

/* Inhaltsbereich */
                .content {
                  background-color: var(--color-white, #fff);
                  border: 1px solid var(--color-gray-200);
                  border-radius: var(--radius-md, 0.375rem);
                  padding: var(--space-6);
                }

/* Aktionsbuttons */
                .actions {
                  display: flex;
                  justify-content: space-between;
                  margin-top: var(--space-4);

/* Wenn nur ein Button (z.B. beim ersten Schritt) */
                  &.end {
                    justify-content: flex-end;
                  }
                }

/* Ausrichtungsvarianten */
                &.vertical {
                  align-items: flex-start;
                  flex-direction: row;

                  .steps {
                    flex-direction: column;
                    gap: var(--space-6);
                    margin-bottom: 0%;
                    margin-right: var(--space-8);
                    width: 24%0px;

                    &::before {
                      height: 100%;
                      left: calc(var(--step-size, 2rem) / 2);
                      top: 0%;
                      width: 2px;
                    }
                  }

                  .step {
                    align-items: flex-start;
                    flex-direction: row;
                    padding-left: calc(var(--step-size, 2rem) + var(--space-4));
                    padding-top: 0%;
                    text-align: left;

                    .indicator {
                      left: 0%;
                      top: 0%;
                    }

                    &.completed::after {
                      height: 100%;
                      left: calc(var(--step-size, 2rem) / 2);
                      top: 50%;
                      width: 2px;
                    }
                  }

                  .content {
                    flex: 1;
                  }
                }

/* Mit Fortschrittsbalken */
                &.with-progress {
                  .progress-bar {
                    background-color: var(--color-gray-200);
                    border-radius: var(--radius-full, 9999px);
                    height: 0%.5rem;
                    margin-bottom: var(--space-6);
                    overflow: hidden;

                    .fill {
                      background-color: var(--color-primary, #3b82f6);
                      height: 100%;
                      transition: width 0.3s ease-in-out;
                    }
                  }
                }
              }
            }

/* Datei: ui/components/tooltip.css */
/**
            * Tooltip-Komponente
            *
            * Informations-Tooltips und Hinweistexte für UI-Elemente.
            * Tooltips bieten zusätzliche Informationen oder Hilfestellungen zu Elementen.
            *
            * @layer components.tooltip
            *
            * Grundlegende Verwendung:
            * <div class="tooltip">
            *   <button class="trigger">Hover mich</button>
            *   <div class="content">Tooltip-Inhalt</div>
            * </div>
            *
            * Positionsvarianten:
            * <div class="tooltip top">Oben</div>
            * <div class="tooltip right">Rechts</div>
            * <div class="tooltip bottom">Unten</div>
            * <div class="tooltip left">Links</div>
            *
            * Größenvarianten:
            * <div class="tooltip sm">Klein</div>
            * <div class="tooltip md">Mittel (Standard)</div>
            * <div class="tooltip lg">Groß</div>
            *
            * Varianten:
            * <div class="tooltip light">Heller Hintergrund</div>
            * <div class="tooltip dark">Dunkler Hintergrund (Standard)</div>
            * <div class="tooltip primary">Primärfarbe</div>
            *
            * Mit Pfeil:
            * <div class="tooltip arrow">
            *   <button class="trigger">Mit Pfeil</button>
            *   <div class="content">Tooltip mit Pfeil</div>
            * </div>
            *
            * Mit HTML-Inhalt:
            * <div class="tooltip">
            *   <button class="trigger">Komplexer Inhalt</button>
            *   <div class="content">
            *     <h4>Überschrift</h4>
            *     <p>Mehrere Zeilen Text sind möglich.</p>
            *   </div>
            * </div>
            *
            * Flüssig skalierende Tooltips (nutzt interpolate-size):
            * <div class="tooltip adaptive">
            *   <button class="trigger">Adaptiver Tooltip</button>
            *   <div class="content">Dieser Tooltip skaliert flüssig mit der Container-Größe</div>
            * </div>
            *
            * Mit Schlüsselwort-Größen:
            * <div class="tooltip fluid small">Klein</div>
            * <div class="tooltip fluid medium">Mittel</div>
            * <div class="tooltip fluid large">Groß</div>
            */


/**
            * Tooltip Component Structure:
            *
            * <div class="tooltip" role="tooltip">
            *   <div class="tooltip-content">Tooltip text</div>
            *   <div class="tooltip-arrow"></div>
            * </div>
            *
            * Positions: .tooltip--top, .tooltip--bottom, .tooltip--left, .tooltip--right
            * Modifiers: .tooltip--sm, .tooltip--lg
            */
            @layer components {
              .tooltip {
                display: inline-block;
                position: relative;

                .trigger {
                  cursor: pointer;
                  display: inline-block;
                }

                .content {
                  background-color: var(--color-neutral-900, #111827);
                  border-radius: var(--radius-sm, 0.25rem);
                  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));
                  color: var(--color-text-inverse, white);
                  font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
                  max-width: var(--tooltip-max-width, 200px);
                  opacity: 0%;
                  padding: var(--tooltip-padding, 0.5rem 0.75rem);
                  position: absolute;
                  transition: opacity var(--transition-duration-fast, 200ms) var(--transition-timing-ease, ease),
                  visibility var(--transition-duration-fast, 200ms) var(--transition-timing-ease, ease);
                  visibility: hidden;
                  white-space: nowrap;
                  z-index: var(--z-index-tooltip, 1000);
                }

/* Trigger-Interaktion */
                &:hover .content,
                .trigger:focus + .content {
                  opacity: 1;
                  visibility: visible;
                }

/* Positionsvarianten */
                &.top .content {
                  bottom: 100%;
                  left: 50%;
                  margin-bottom: var(--space-1, 0.25rem);
                  transform: translateX(-50%) translateY(-8px);
                }

                &.right .content {
                  left: 100%;
                  margin-left: var(--space-1, 0.25rem);
                  top: 50%;
                  transform: translateY(-50%) translateX(8px);
                }

                &.bottom .content {
                  left: 50%;
                  margin-top: var(--space-1, 0.25rem);
                  top: 100%;
                  transform: translateX(-50%) translateY(8px);
                }

                &.left .content {
                  margin-right: var(--space-1, 0.25rem);
                  right: 100%;
                  top: 50%;
                  transform: translateY(-50%) translateX(-8px);
                }

/* Größenvarianten */
                &.sm .content {
                  font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
                  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
                }

                &.lg .content {
                  font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
                  max-width: 25%0px;
                  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
                  white-space: normal;
                }

/* Farbvarianten */
                &.light .content {
                  background-color: var(--color-background, white);
                  border: 1px solid var(--color-border, var(--color-neutral-200, #e5e7eb));
                  color: var(--color-text, var(--color-neutral-900, #111827));
                }

                &.dark .content {
                  background-color: var(--color-neutral-900, #111827);
                  color: var(--color-text-inverse, white);
                }

                &.primary .content {
                  background-color: var(--color-primary-500, #3b82f6);
                  color: var(--color-text-inverse, white);
                }

                &.success .content {
                  background-color: var(--color-success-500, #10b981);
                  color: var(--color-text-inverse, white);
                }

                &.warning .content {
                  background-color: var(--color-warning-500, #f59e0b);
                  color: var(--color-warning-900, #78350f);
                }

                &.error .content {
                  background-color: var(--color-error-500, #ef4444);
                  color: var(--color-text-inverse, white);
                }

/* Flüssig skalierende Tooltips mit interpolate-size: allow-keywords */
                &.fluid {
/* Basisgröße verwenden */
                  font-size: medium;

                  .content {
                    border-radius: 0.25em;
                    box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 2000%);
                    font-size: 0.8em;

/* em-Einheiten für flüssige Skalierung basierend auf font-size */
                    padding: 0.5em 0.75em;
                  }

/* Größenvarianten mit CSS-Schlüsselwörtern */
                  &.small {
                    font-size: small;
                  }

                  &.medium {
                    font-size: medium;
                  }

                  &.large {
                    font-size: large;
                  }

                  &.x-large {
                    font-size: x-large;
                  }
                }

/* Container-adaptive Tooltips */
                &.adaptive {
                  container-type: inline-size;

                  .content {
                    border-radius: clamp(var(--radius-sm, 0.25rem), 0.5cqi, var(--radius-md, 0.375rem));
                    font-size: clamp(var(--text-xs, 0.75rem), 2cqi, var(--text-base, 1rem));
                    max-width: 90%cqi; /* 90 der Container-Breite */
                    padding: clamp(var(--space-1, 0.25rem), 1cqi, var(--space-4, 1rem));
                    white-space: normal;
                  }

                  &.arrow .content::before {
                    height: clamp(6px, 1cqi, 12px);
                    width: clamp(6px, 1cqi, 12px);
                  }
                }

/* Mit Pfeil */
                &.arrow .content::before {
                  background-color: inherit;
                  border: inherit;
                  border-width: 1px;
                  content: "";
                  height: var(--tooltip-arrow-size, 8px);
                  position: absolute;
                  transform: rotate(45deg);
                  width: var(--tooltip-arrow-size, 8px);
                }

                &.arrow.top .content::before {
                  bottom: -4px;
                  left: 50%;
                  transform: translateX(-50%) rotate(45deg);
                }

                &.arrow.right .content::before {
                  left: -4px;
                  top: 50%;
                  transform: translateY(-50%) rotate(45deg);
                }

                &.arrow.bottom .content::before {
                  left: 50%;
                  top: -4px;
                  transform: translateX(-50%) rotate(45deg);
                }

                &.arrow.left .content::before {
                  right: -4px;
                  top: 50%;
                  transform: translateY(-50%) rotate(45deg);
                }
              }
            }




/* Datei: ui/components/toast.css */
/**
            * Toast-Komponente
            *
            * Toast-Benachrichtigungen für temporäre Hinweise.
            */

/**
            * Toast-Komponente
            *
            * Temporäre Benachrichtigungen, die automatisch verschwinden.
            * Toasts eignen sich für Systembenachrichtigungen, die den Benutzerfluss nicht unterbrechen sollen.
            *
            * @layer components.toast
            *
            * Grundlegende Verwendung:
            * <div class="toast">
            *   <div class="content">Einfache Benachrichtigung</div>
            * </div>
            *
            * Varianten:
            * <div class="toast success">Erfolg</div>
            * <div class="toast error">Fehler</div>
            * <div class="toast warning">Warnung</div>
            * <div class="toast info">Information</div>
            *
            * Mit Icon:
            * <div class="toast">
            *   <div class="icon"><!-- Icon hier --></div>
            *   <div class="content">Benachrichtigung mit Icon</div>
            * </div>
            *
            * Schließbar:
            * <div class="toast">
            *   <div class="content">Schließbare Benachrichtigung</div>
            *   <button class="close">&times;</button>
            * </div>
            */

/**
            * Toast Component Structure:
            *
            * <div class="toast toast--success" role="alert">
            *   <div class="toast-icon"><!-- Icon --></div>
            *   <div class="toast-content">
            *     <div class="toast-title">Success!</div>
            *     <div class="toast-message">Operation completed</div>
            *   </div>
            *   <button class="toast-close" aria-label="Close">&times;</button>
            * </div>
            *
            * Types: .toast--info, .toast--success, .toast--warning, .toast--error
            * Positions: .toast--top-right, .toast--top-left, .toast--bottom-right, .toast--bottom-left
            */

/* Animation - außerhalb von @layer definieren */

/* Komponenten-Styles */
            @layer components {
              .toast {
                align-items: center;
                background-color: var(--color-gray-800);
                border-radius: var(--radius-md, 0.375rem);
                box-shadow: var(--shadow-md);
                color: white;
                display: flex;
                gap: var(--space-3);
                margin-bottom: var(--space-3);
                max-width: 2%4rem;
                padding: var(--space-3) var(--space-4);

/* Inhaltselemente */
                .content {
                  flex: 1;
                }

                .icon {
                  flex-shrink: 0;
                  font-size: 1.25rem;
                }

                .close {
                  background: none;
                  border: none;
                  color: currentcolor;
                  cursor: pointer;
                  flex-shrink: 0;
                  font-size: 1.25rem;
                  opacity: 0.7;
                  padding: 0;

                  &:hover {
                    opacity: 1;
                  }
                }

/* Farbvarianten */
                &.success {
                  background-color: var(--color-success, #10b981);
                }

                &.error {
                  background-color: var(--color-error, #ef4444);
                }

                &.warning {
                  background-color: var(--color-warning, #f59e0b);
                  color: black;
                }

                &.info {
                  background-color: var(--color-info, #3b82f6);
                }

/* Positionen (als zusätzliche Klasse auf einem Container) */
                &-container {
                  display: flex;
                  flex-direction: column;
                  gap: var(--space-2);
                  padding: var(--space-4);
                  position: fixed;
                  z-index: var(--z-index-toast);

                  &.top-right {
                    right: 0%;
                    top: 0%;
                  }

                  &.top-left {
                    left: 0%;
                    top: 0%;
                  }

                  &.bottom-right {
                    bottom: 0%;
                    right: 0%;
                  }

                  &.bottom-left {
                    bottom: 0%;
                    left: 0%;
                  }
                }
              }
            }

/* Animations-Styles */
            @layer animations {
              .toast {
                animation: slideIn 0.3s ease-out;
              }
            }

/* Datei: ui/components/tag.css */
/**
            * Tags / Chips / Pills
            *
            * Tags, chips, and pills are compact elements used to represent attributes,
            * categories, or options. They often support interactions like removal,
            * selection, or filtering. Common in form inputs, filters, and categorization.
            *
            * @layer: components
            *
            * Accessibility:
            * - Include appropriate ARIA roles (e.g., option for selectable tags)
            * - Ensure keyboard accessibility for interactive tags
            * - Provide clear focus indicators
            * - Associate tags with their purpose using aria-label when needed
            */


/**
            * Tag Component Structure:
            *
            * <span class="tag tag--primary">
            *   <span class="tag-content">Tag text</span>
            *   <button class="tag-remove" aria-label="Remove">&times;</button>
            * </span>
            *
            * Types: .tag--primary, .tag--secondary, .tag--success, .tag--warning, .tag--error
            * Sizes: .tag--sm, .tag--md, .tag--lg
            * Modifiers: .tag--removable, .tag--rounded
            */
            @layer components {
/* Base tag styles */
              .tag {
                align-items: center;
                background-color: var(--color-neutral-100, #f3f4f6);
                border-radius: var(--radius-full, 9999px);
                color: var(--color-neutral-800, #1f2937);
                display: inline-flex;
                font-size: var(--text-sm, 0.875rem);
                font-weight: var(--font-medium, 500);
                justify-content: center;
                line-height: 1%;
                max-width: 100%;
                padding: 0.375rem 0.75rem;
                white-space: nowrap;
              }

/* Tag sizes */
              .tag--xs {
                font-size: var(--text-xs, 0.75rem);
                height: 1%.5rem;
                padding: 0.25rem 0.5rem;
              }

              .tag--sm {
                height: 1%.75rem;
                padding: 0.3125rem 0.625rem;
              }

              .tag--md {
                height: 2rem;
                padding: 0.375rem 0.75rem;
              }

              .tag--lg {
                font-size: var(--text-base);
                height: 2.5rem;
                padding: 0.5rem 1rem;
              }

/* Tag shapes */
              .tag--rounded {
                border-radius: var(--radius-md, 0.375rem);
              }

              .tag--square {
                border-radius: var(--radius-sm, 0.125rem);
              }

/* Tag with icon */
              & .icon {
                display: inline-flex;
                flex-shrink: 0;
                height: 1em;
                margin-right: 00%.5em;
                width: 1em;
              }

/* Tag with dismiss/close button */
              & .close {
                align-items: center;
                background: transparent;
                border: none;
                border-radius: var(--radius-full, 9999px);
                color: currentColor;
                cursor: pointer;
                display: inline-flex;
                flex-shrink: 0;
                height: 1%.25em;
                justify-content: center;
                margin-left: 00%.5em;
                margin-right: -0.25em;
                opacity: 0.7;
                padding: 0;
                transition: opacity 0.2s, background-color 0.2s;
                width: 1%.25em;
              }

              & .close:hover {
                background-color: rgb(0 0 0 / 1000%);
                opacity: 1;
              }

/* Tag color variants */
              .tag--primary {
                background-color: var(--color-primary-100, #dbeafe);
                color: var(--color-primary-800, #1e40af);
              }

              .tag--secondary {
                background-color: var(--color-secondary-100, #f1f5f9);
                color: var(--color-secondary-800, #1e293b);
              }

              .tag--success {
                background-color: var(--color-success-100, #d1fae5);
                color: var(--color-success-800, #065f46);
              }

              .tag--danger {
                background-color: var(--color-error-100, #fee2e2);
                color: var(--color-error-800, #991b1b);
              }

              .tag--warning {
                background-color: var(--color-warning-100, #fef3c7);
                color: var(--color-warning-800, #92400e);
              }

              .tag--info {
                background-color: var(--color-info-100, #dbeafe);
                color: var(--color-info-800, #1e40af);
              }

/* Solid color tags */
              .tag--solid.tag--primary {
                background-color: var(--color-primary-500);
                color: white;
              }

              .tag--solid.tag--secondary {
                background-color: var(--color-secondary-500);
                color: white;
              }

              .tag--solid.tag--success {
                background-color: var(--color-success-500);
                color: white;
              }

              .tag--solid.tag--danger {
                background-color: var(--color-error-500);
                color: white;
              }

              .tag--solid.tag--warning {
                background-color: var(--color-warning-500);
                color: var(--color-warning-900);
              }

              .tag--solid.tag--info {
                background-color: var(--color-info-500);
                color: white;
              }

/* Outlined tags */
              .tag--outlined {
                background-color: transparent;
                border: 1px solid currentColor;
                color: var(--color-neutral-600);
              }

              .tag--outlined.tag--primary {
                color: var(--color-primary-600, #2563eb);
              }

              .tag--outlined.tag--secondary {
                color: var(--color-secondary-600);
              }

              .tag--outlined.tag--success {
                color: var(--color-success-600);
              }

              .tag--outlined.tag--danger {
                color: var(--color-error-600);
              }

              .tag--outlined.tag--warning {
                color: var(--color-warning-600);
              }

              .tag--outlined.tag--info {
                color: var(--color-info-600);
              }

/* Interactive tags (chips) */
              .tag--interactive {
                cursor: pointer;
                transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
                user-select: none;
              }

              .tag--interactive:hover {
                background-color: var(--color-neutral-200, #e5e7eb);
              }

              .tag--interactive:focus {
                box-shadow: 0 0 0 2px var(--color-primary-200);
                outline: none;
              }

/* Selected state */
              .tag--selected {
                background-color: var(--color-primary-500);
                color: white;
              }

              .tag--selected:hover {
                background-color: var(--color-primary-600, #2563eb);
              }

/* Disabled state */
              .tag--disabled {
                cursor: not-allowed;
                opacity: 6000%;
              }

              .tag--disabled:hover {
                background-color: inherit;
              }

/* Avatar tag */
              .tag--avatar & .avatar {
                border-radius: var(--radius-full, 9999px);
                height: 1%.25em;
                margin-right: 00%.5em;
                object-fit: cover;
                width: 1%.25em;
              }

/* Counter tag */
              & .counter {
                align-items: center;
                background-color: rgb(0 0 0 / 1000%);
                border-radius: var(--radius-full, 9999px);
                display: inline-flex;
                font-size: 0.85em;
                font-weight: var(--font-bold);
                height: 1%.25em;
                justify-content: center;
                margin-left: 00%.5em;
                min-width: 1%.25em;
                padding: 0 0.25em;
              }

/* Tag container (for multiple tags) */
              .tag-container {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
              }

/* Responsive truncation for long tags */
              .tag--truncate {
                max-width: 16%0px;
              }

              .tag--truncate & .label {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

/* Responsive adjustments */
              @media (max-width: 640px) {
                .tag--responsive {
                  font-size: var(--text-xs, 0.75rem);
                  padding: 0.25rem 0.5rem;
                }

                .tag--truncate {
                  max-width: 12%0px;
                }
              }
            }

/* Datei: ui/components/tabs.css */
/**
            * Tabs-Komponente
            *
            * Tab-Navigation für das Umschalten zwischen verschiedenen Inhaltsbereichen.
            * Tabs ermöglichen ein platzsparendes Design für verschiedene Inhaltsgruppen.
            *
            * @layer components.tabs
            *
            * Grundlegende Verwendung:
            * <div class="tabs">
            *   <div class="nav">
            *     <button class="tab active">Tab 1</button>
            *     <button class="tab">Tab 2</button>
            *     <button class="tab">Tab 3</button>
            *   </div>
            *   <div class="content">
            *     <div class="panel active">Inhalt Tab 1</div>
            *     <div class="panel">Inhalt Tab 2</div>
            *     <div class="panel">Inhalt Tab 3</div>
            *   </div>
            * </div>
            *
            * Varianten:
            * <div class="tabs pills">...</div>  <!-- Pill-Style Tabs -->
            * <div class="tabs underline">...</div>  <!-- Unterstrichene Tabs -->
            * <div class="tabs boxed">...</div>  <!-- Box-Style Tabs -->
            *
            * Ausrichtungen:
            * <div class="tabs horizontal">...</div>  <!-- Horizontal (Standard) -->
            * <div class="tabs vertical">...</div>  <!-- Vertikale Tabs -->
            *
            * Größen:
            * <div class="tabs sm">...</div>  <!-- Klein -->
            * <div class="tabs md">...</div>  <!-- Medium (Standard) -->
            * <div class="tabs lg">...</div>  <!-- Groß -->
            */


/**
            * Tabs Component Structure:
            *
            * <div class="tabs">
            *   <div class="tabs-list" role="tablist">
            *     <button class="tab-item" role="tab" aria-selected="true">Tab 1</button>
            *     <button class="tab-item" role="tab">Tab 2</button>
            *   </div>
            *   <div class="tab-panels">
            *     <div class="tab-panel" role="tabpanel">Panel 1 content</div>
            *     <div class="tab-panel" role="tabpanel" hidden>Panel 2 content</div>
            *   </div>
            * </div>
            *
            * Variants: .tabs--vertical, .tabs--pills, .tabs--underlined
            * Modifiers: .tabs--justify, .tabs--center
            */
            @layer components {
              .tabs {
                display: flex;
                flex-direction: column;

/* Tab-Navigation */
                .nav {
                  border-bottom: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
                  display: flex;
                  gap: var(--tab-gap, var(--space-4, 1rem));
                }

/* Tab-Buttons */
                .tab {
                  background: none;
                  border: none;
                  color: var(--color-text-muted, var(--color-neutral-700, #374151));
                  cursor: pointer;
                  font-size: var(--text-base, var(--font-size-base, 1rem));
                  padding: var(--tab-padding, 0.5rem 1rem);
                  transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease),
                  border-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);

                  &.active {
                    border-bottom: 2px solid var(--color-primary-500, #3b82f6);
                    color: var(--color-primary-600, #2563eb);
                    font-weight: var(--font-medium, var(--font-weight-medium, 500));
                  }

                  &:hover:not(.active) {
                    color: var(--color-primary-500, #3b82f6);
                  }

                  &:focus {
                    box-shadow: 0 0 0 2px var(--color-primary-200, #bfdbfe);
                    outline: none;
                  }

                  &:disabled {
                    color: var(--color-neutral-400, #9ca3af);
                    cursor: not-allowed;

                    &:hover {
                      color: var(--color-neutral-400, #9ca3af);
                    }
                  }
                }

/* Inhaltsbereich */
                .content {
                  padding: var(--tab-content-padding, 1rem 0);
                }

/* Panel (Inhaltsbereich je Tab) */
                .panel {
                  display: none;

                  &.active {
                    display: block;
                  }
                }

/* Varianten */
                &.pills {
                  .nav {
                    border-bottom: none;
                    gap: var(--space-2, 0.5rem);
                  }

                  .tab {
                    border-radius: var(--radius-full, 9999px);
                    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);

                    &.active {
                      background-color: var(--color-primary-500, #3b82f6);
                      border-bottom: none;
                      color: var(--color-text-inverse, white);
                    }

                    &:hover:not(.active) {
                      background-color: var(--color-neutral-100, #f3f4f6);
                    }
                  }
                }

                &.underline {
                  .tab {
                    border-bottom: 2px solid transparent;
                    margin-bottom: -1px;

                    &.active {
                      border-bottom-color: var(--color-primary-500, #3b82f6);
                    }
                  }
                }

                &.boxed {
                  .nav {
                    border-bottom: none;
                    gap: 0;
                  }

                  .tab {
                    background-color: var(--color-neutral-50, #f9fafb);
                    border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
                    border-bottom: none;
                    border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0;
                    margin-right: -1px;

                    &.active {
                      background-color: var(--color-background, white);
                      position: relative;
                      z-index: 1;
                    }
                  }

                  .content {
                    border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
                    border-radius: 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) var(--radius-md, 0.375rem);
                    padding: var(--space-4, 1rem);
                  }
                }

/* Ausrichtungen */
                &.horizontal {
/* Standard (wie oben definiert) */
                }

                &.vertical {
                  align-items: flex-start;
                  flex-direction: row;

                  .nav {
                    border-bottom: none;
                    border-right: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
                    flex-direction: column;
                    gap: var(--space-2, 0.5rem);
                    margin-right: var(--space-4, 1rem);
                    padding-right: var(--space-4, 1rem);
                  }

                  .tab {
                    border-bottom: none;
                    text-align: left;
                    width: 100%;

                    &.active {
                      border-bottom: none;
                      border-right: 2px solid var(--color-primary-500, #3b82f6);
                      margin-right: -1px;
                    }
                  }
                }

/* Größenvarianten */
                &.sm {
                  .tab {
                    font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
                    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
                  }

                  .content {
                    padding: var(--space-2, 0.5rem) 0;
                  }
                }

                &.lg {
                  .tab {
                    font-size: var(--text-lg, var(--font-size-lg, 1.125rem));
                    padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
                  }

                  .content {
                    padding: var(--space-6, 1.5rem) 0;
                  }
                }

/* Farbvarianten */
                &.success .tab.active {
                  border-bottom-color: var(--color-success-500, #10b981);
                  color: var(--color-success-600, #059669);
                }

                &.warning .tab.active {
                  border-bottom-color: var(--color-warning-500, #f59e0b);
                  color: var(--color-warning-600, #d97706);
                }

                &.error .tab.active {
                  border-bottom-color: var(--color-error-500, #ef4444);
                  color: var(--color-error-600, #dc2626);
                }

                &.secondary .tab.active {
                  border-bottom-color: var(--color-secondary-500, #6b7280);
                  color: var(--color-secondary-600, #4b5563);
                }
              }
            }



/* Datei: ui/components/tables.css */
/**
            * Tabellen-Element Styles
            */

            @layer elements {
/* Tabellen */
              table {
                border-collapse: collapse;
                margin: 1rem 0;
                width: 100%;
              }

              th, td {
                border: 1px solid var(--color-border, #e5e7eb);
                padding: 0.75rem;
                text-align: left;
              }

              th {
                background-color: var(--color-background-alt, #f9fafb);
              }
            }

/* Datei: ui/components/table.css */
/*
            * Table-Komponente
            *
            * Gestylte Tabellen mit responsivem Verhalten.
            */

/**
            * Table-Komponente
            *
            * Tabellen und Datenraster für strukturierte Informationsdarstellung.
            * Tabellen eignen sich für den Vergleich von Daten und die Darstellung von strukturierten Informationen.
            *
            * @layer components.table
            *
            * Grundlegende Verwendung:
            * <table class="table">
            *   <thead>
            *     <tr>
            *       <th>Spalte 1</th>
            *       <th>Spalte 2</th>
            *     </tr>
            *   </thead>
            *   <tbody>
            *     <tr>
            *       <td>Zelle 1</td>
            *       <td>Zelle 2</td>
            *     </tr>
            *   </tbody>
            * </table>
            *
            * Varianten:
            * <table class="table striped">...</table>  <!-- Abwechselnd gefärbte Zeilen -->
            * <table class="table bordered">...</table>  <!-- Mit Rahmen -->
            * <table class="table hoverable">...</table> <!-- Hover-Effekt für Zeilen -->
            * <table class="table compact">...</table>   <!-- Kompaktes Layout -->
            * <table class="table responsive">...</table> <!-- Responsives Layout -->
            *
            * Zellenausrichtung:
            * <td class="left">Links ausgerichtet</td>
            * <td class="center">Zentriert</td>
            * <td class="right">Rechts ausgerichtet</td>
            *
            * Statuszeilen:
            * <tr class="success">...</tr>
            * <tr class="warning">...</tr>
            * <tr class="danger">...</tr>
            *
            * Flüssige Größenanpassung mit Schlüsselwörtern:
            * <table class="table fluid">...</table>
            * <table class="table fluid small">...</table>
            * <table class="table fluid medium">...</table>
            * <table class="table fluid large">...</table>
            *
            * Container-adaptive Tabelle:
            * <div class="container-query">
            *   <table class="table adaptive">...</table>
            * </div>
            */

            @layer components {
              .table {
                border-collapse: collapse;
                font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
                width: 100%;

/* Basiselemente */
                thead {
                  background-color: var(--color-neutral-100, #f3f4f6);
                }

                th,
                td {
                  border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
                  padding: var(--table-cell-padding, var(--space-3, 0.75rem));
                  text-align: left;
                }

                th {
                  color: var(--color-text, var(--color-neutral-900, #111827));
                  font-weight: var(--font-semibold, var(--font-weight-semibold, 600));
                  padding: var(--table-header-padding, 1rem 0.75rem);
                }

                td {
                  color: var(--color-text-muted, var(--color-neutral-700, #374151));
                }

/* Tabellen-Varianten */
                &.striped tbody tr:nth-child(odd) {
                  background-color: var(--color-neutral-50, #f9fafb);
                }

                &.hoverable tbody tr:hover {
                  background-color: var(--color-neutral-100, #f3f4f6);
                  transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
                }

                &.bordered th,
                &.bordered td {
                  border: 1px solid var(--color-border, var(--color-neutral-300, #d1d5db));
                }

                &.compact th,
                &.compact td {
                  padding: var(--space-2, 0.5rem);
                }

/* Flüssige Größenanpassung mit interpolate-size: allow-keywords */
                &.fluid {
/* Nutzt CSS-Schlüsselwörter für Größen - funktioniert mit interpolate-size: allow-keywords */
                  font-size: medium; /* Basis-Größe für Skalierungsfaktor */

                  th, td {
                    font-size: 0.875em;
                    padding: 0.75em;
                  }

                  thead {
                    font-weight: var(--font-semibold, 600);
                  }

/* Größenvarianten mit CSS-Schlüsselwörtern */
                  &.small {
                    font-size: small;
                  }

                  &.medium {
                    font-size: medium;
                  }

                  &.large {
                    font-size: large;
                  }

                  &.x-large {
                    font-size: x-large;
                  }
                }

/* Container-adaptive Größenanpassung */
                &.adaptive {
                  font-size: clamp(var(--text-xs, 0.75rem), 2cqi, var(--text-base, 1rem));

                  th, td {
                    padding: clamp(var(--space-1, 0.25rem), 1cqi, var(--space-4, 1rem));
                  }

                  @container (min-width: 300px) {
                    th {
                      font-weight: var(--font-bold, var(--font-weight-bold, 700));
                    }
                  }

                  @container (min-width: 500px) {
                    thead {
                      position: sticky;
                      top: 0%;
                      z-index: 1;
                    }
                  }

                  @container (min-width: 700px) {
                    &.hoverable tbody tr:hover {
                      box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));
                    }
                  }
                }

                &.responsive {
                  @media (max-width: 768px) {
                    display: block;
                    overflow-x: auto;
                    white-space: nowrap;
                  }
                }

/* Zellenausrichtungen */
                .left {
                  text-align: left;
                }

                .center {
                  text-align: center;
                }

                .right {
                  text-align: right;
                }

/* Statuszeilen */
                .success {
                  background-color: var(--color-success-100, #d1fae5);
                  color: var(--color-success-800, #065f46);
                }

                .warning {
                  background-color: var(--color-warning-100, #fef3c7);
                  color: var(--color-warning-800, #92400e);
                }

                .danger {
                  background-color: var(--color-error-100, #fee2e2);
                  color: var(--color-error-800, #991b1b);
                }
              }
            }



/* Datei: ui/components/spinner.css */
/**
            * Spinner
            *
            * Ladeanzeigen und Animationen für asynchrone Prozesse.
            * Spinner zeigen Benutzern an, dass eine Operation im Hintergrund ausgeführt wird.
            *
            * @layer: elements
            *
            * Accessibility:
            * - Verwende aria-busy für Container mit Ladezustand
            * - Füge textuelle Beschreibungen für Screenreader hinzu
            * - Vermeide blinkende Animationen, die Anfälle auslösen können
            */

/* Animationen */

            @layer elements {
/* Basis-Spinner */
              .spinner {
                animation: spin var(--spinner-duration, 0.6s) linear infinite;
                border: var(--spinner-border-width, 2px) solid var(--color-neutral-200, #e5e7eb);
                border-radius: 50px;
                border-top-color: var(--color-primary-500, #3b82f6);
                display: inline-block;
                height: var(--spinner-size, 1.5rem);
                width: var(--spinner-size, 1.5rem);
              }

/* Spinner Größen */
              .spinner--xs {
                border-width: 1px;
                height: 1rem;
                width: 1rem;
              }

              .spinner--sm {
                border-width: 2px;
                height: 1%.25rem;
                width: 1%.25rem;
              }

              .spinner--md {
                border-width: 2px;
                height: var(--spinner-size, 1.5rem);
                width: var(--spinner-size, 1.5rem);
              }

              .spinner--lg {
                border-width: 3px;
                height: 2rem;
                width: 2rem;
              }

              .spinner--xl {
                border-width: 4px;
                height: 3rem;
                width: 3rem;
              }

/* Spinner Varianten */
              .spinner--primary {
                border-top-color: var(--color-primary-500, #3b82f6);
              }

              .spinner--secondary {
                border-top-color: var(--color-secondary-500, #6b7280);
              }

              .spinner--success {
                border-top-color: var(--color-success-500, #10b981);
              }

              .spinner--warning {
                border-top-color: var(--color-warning-500, #f59e0b);
              }

              .spinner--danger {
                border-top-color: var(--color-error-500, #ef4444);
              }

              .spinner--info {
                border-top-color: var(--color-info-500, #3b82f6);
              }

/* Container mit Spinner und Text */
              .spinner-container {
                align-items: center;
                display: inline-flex;
                gap: var(--spinner-gap, 0.5rem);
              }

              .spinner-text {
                color: var(--color-text-muted, var(--color-neutral-600, #4b5563));
                font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
              }

/* Fullscreen-Overlay */
              .spinner-overlay {
                align-items: center;
                background-color: var(--spinner-overlay-bg, rgb(255 255 255 / 8000%));
                display: flex;
                inset: 0;
                justify-content: center;
                position: fixed;
                z-index: var(--z-index-overlay, 50);
              }

/* Dark Mode Overlay */
              .spinner-overlay--dark {
                background-color: var(--spinner-overlay-dark-bg, rgb(0 0 0 / 6000%));

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

/* Loading States für Buttons */
              .button--loading {
                pointer-events: none;
                position: relative;

                .spinner {
                  height: 1rem;
                  width: 1rem;
                }

/* Text ausblenden während Loading */
                &::after {
                  background-color: inherit;
                  content: '';
                  inset: 0;
                  position: absolute;
                }
              }

/* Pulse Animation als Alternative */
              .spinner--pulse {
                animation: pulse 1.5s ease-in-out infinite;
                background-color: var(--color-primary-500, #3b82f6);
                border: none;
                border-radius: 50px;
              }

            }

/* Datei: ui/components/progress-bar.css */
/**
            * Progress Bar
            *
            * Progress bars visualize the completion status of a task or process, showing
            * users how much has been completed and how much remains. They can include
            * percentages, labels, and different visual styles.
            *
            * @layer: components
            *
            * Accessibility:
            * - Use proper ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow)
            * - Include text alternatives for screen readers
            * - Ensure sufficient color contrast for all states
            * - Consider color blind users when choosing colors
            */

            @layer components {
/* Base progress bar container */
              .progress {
                background-color: var(--color-neutral-200, #e5e7eb);
                border-radius: var(--radius-full, 9999px);
                height: var(--progress-height, 0.5rem);
                overflow: hidden;
                position: relative;
                width: 100%;
              }

/* Progress bar fill */
              & .fill {
                background-color: var(--color-primary-500, #3b82f6);
                border-radius: var(--radius-full, 9999px);
                height: 100%;
                left: 0%;
                position: absolute;
                top: 0%;
                transition: width var(--transition-duration-normal, 300ms) var(--transition-timing-ease, ease);
              }

/* Progress with label */
              .progress--with-label {
                margin-bottom: var(--space-1, 0.25rem);
              }

/* Progress label */
              & .label {
                color: var(--color-text-muted, var(--color-neutral-700, #374151));
                display: flex;
                font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
                justify-content: space-between;
                margin-bottom: var(--space-2, 0.5rem);
              }

              & .title {
                font-weight: var(--font-medium, var(--font-weight-medium, 500));
              }

              & .value {
                font-variant-numeric: tabular-nums;
              }

/* Progress sizes */
              .progress--xs {
                height: 0%.25rem;
              }

              .progress--sm {
                height: 0%.375rem;
              }

              .progress--md {
                height: var(--progress-height, 0.5rem);
              }

              .progress--lg {
                height: 0%.75rem;
              }

              .progress--xl {
                height: 1rem;
              }

/* Progress shapes */
              .progress--square {
                border-radius: var(--radius-sm, 0.25rem);
              }

              .progress--square & .fill {
                border-radius: var(--radius-sm, 0.25rem);
              }

/* Progress colors */
              .progress--primary & .fill {
                background-color: var(--color-primary-500, #3b82f6);
              }

              .progress--secondary & .fill {
                background-color: var(--color-secondary-500, #6b7280);
              }

              .progress--success & .fill {
                background-color: var(--color-success-500, #10b981);
              }

              .progress--danger & .fill {
                background-color: var(--color-error-500, #ef4444);
              }

              .progress--warning & .fill {
                background-color: var(--color-warning-500, #f59e0b);
              }

              .progress--info & .fill {
                background-color: var(--color-info-500, #3b82f6);
              }

/* Progress with steps */
              .progress--stepped {
                background-color: transparent;
                display: flex;
                gap: var(--progress-step-gap, 4px);
                height: auto;
                justify-content: space-between;
              }

              & .step {
                background-color: var(--color-neutral-200, #e5e7eb);
                border-radius: var(--radius-full, 9999px);
                flex: 1;
                height: var(--progress-height, 0.5rem);
                transition: background-color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
              }

              & .step--completed {
                background-color: var(--color-primary-500, #3b82f6);
              }

              & .step--active {
                background-color: var(--color-primary-300, #93c5fd);
              }

              .progress--stepped.progress--square & .step {
                border-radius: var(--radius-sm, 0.25rem);
              }

/* Progress with steps and labels */
              .progress--with-step-labels {
                margin-bottom: var(--space-6, 1.5rem);
              }

              & .steps-container {
                display: flex;
                justify-content: space-between;
                margin-top: var(--space-2, 0.5rem);
                position: relative;
              }

              & .step-label {
                color: var(--color-neutral-500, #6b7280);
                font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
                position: absolute;
                text-align: center;
                top: var(--space-2, 0.5rem);
                transform: translateX(-50%);
                white-space: nowrap;
              }

              & .step-label--completed {
                color: var(--color-primary-600, #2563eb);
                font-weight: var(--font-medium, var(--font-weight-medium, 500));
              }

/* Indeterminate progress animation */
              .progress--indeterminate & .fill {
                animation: progressIndeterminate 1.5s infinite;
                transform-origin: left;
                width: 40% !important;
              }

/* Progress with stripes */
              .progress--striped & .fill {
                background-image: linear-gradient(
                45deg,
                rgb(255 255 255 / 15%) 25%,
                transparent 25%,
                transparent 50,
                rgb(255 255 255 / 15%) 50,
                rgb(255 255 255 / 15%) 75%,
                transparent 75%,
                transparent
                );
                background-size: 1rem 1rem;
              }

              .progress--animated & .fill {
                animation: progressStripes 1s linear infinite;
              }

/* Progress with value inside */
              .progress--with-value-inside {
                position: relative;
              }

              & .value-inside {
                color: var(--color-text-inverse, white);
                font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
                font-weight: var(--font-medium, var(--font-weight-medium, 500));
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50);
                z-index: 1;
              }

/* Buffer progress */
              .progress--buffer {
                background-color: transparent;
              }

              & .buffer {
                background-color: var(--color-neutral-300, #d1d5db);
                border-radius: var(--radius-full, 9999px);
                height: 100%;
                left: 0%;
                position: absolute;
                top: 0%;
                transition: width var(--transition-duration-normal, 300ms) var(--transition-timing-ease, ease);
              }

              .progress--buffer & .fill {
                z-index: 1;
              }

/* Gradient progress */
              .progress--gradient & .fill {
                background: linear-gradient(
                90deg,
                var(--color-primary-400, #60a5fa),
                var(--color-primary-600, #2563eb)
                );
              }

              .progress--gradient.progress--success & .fill {
                background: linear-gradient(
                90deg,
                var(--color-success-400, #34d399),
                var(--color-success-600, #059669)
                );
              }

              .progress--gradient.progress--warning & .fill {
                background: linear-gradient(
                90deg,
                var(--color-warning-400, #fbbf24),
                var(--color-warning-600, #d97706)
                );
              }

              .progress--gradient.progress--danger & .fill {
                background: linear-gradient(
                90deg,
                var(--color-error-400, #f87171),
                var(--color-error-600, #dc2626)
                );
              }
            }

/* Datei: ui/components/popover.css */
/**
            * Popover-Komponente
            *
            * Eine Komponente zur Erstellung von Popover-Elementen mit der nativen HTML Popover API.
            * Unterstützt Hover-Effekte, Animationen, Pfeile und Dark Mode.
            *
            * @nutzung
            * <button popovertarget="myPopover">Follow Me</button>
            * <div id="myPopover" popover class="popover">Thank you for following me!</div>
            *
            * @eigenschaften
            * - Automatische Positionierung unter dem Trigger-Element
            * - Smooth Animation beim Öffnen/Schließen mit @starting-style
            * - Pfeil-Element für visuelle Verbindung zum Trigger
            * - Responsive Design (max-width: 9%0vw)
            * - Unterstützung für Light/Dark Mode
            *
            * @browser-kompatibilität
            * Die native HTML Popover API wird unterstützt in:
            * - Chrome/Edge ab Version 114
            * - Safari ab Version 16.4
            * - Firefox ab Version 114 (mit Aktivierung über Flag)
            *
            * Für ältere Browser sollte ein Fallback-Mechanismus implementiert werden,
            * z.B. mit JavaScript-basierten Popover-Lösungen.
            */

            @layer components {
              .popover {
                animation: slideIn var(--animation-duration-normal, 300ms) cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
                background: var(--color-background, #fff);
                border: 1px solid var(--color-border, #e5e7eb);
                border-radius: 0.5rem;
                box-shadow: 0 8px 32px rgb(0 0 0 / 18%), 0 1.5px 4px rgb(0 0 0 / 8%);
                color: var(--color-text, #222);
                max-width: 9%0vw;
                min-width: 20%0px;
                padding: 1rem;
                position: absolute;
                z-index: 1000;
              }

              @starting-style {
                .popover {
                  opacity: 0%;
                  transform: translateY(8px) scale(0.98%);
                }
              }

              .popover[popover] {
                display: block;

/* Ermöglicht Styling für native Popover-API */
                inset: unset;
                left: 0%;
                margin-top: 0%.5rem;
                top: 100%;
              }

/* Optional: Arrow */
              .popover::before {
                background: var(--color-background, #fff);
                border-left: 1px solid var(--color-border, #e5e7eb);
                border-top: 1px solid var(--color-border, #e5e7eb);
                clip-path: polygon(50% 0, 0 100, 100 100);
                content: '';
                height: 8px;
                left: 2rem;
                position: absolute;
                top: -8px;
                width: 1%6px;
                z-index: 1;
              }
            }

/* Darkmode Support */
            @media (prefers-color-scheme: dark) {
              @layer components {
                .popover {
                  background: var(--color-background-dark, #222);
                  border-color: var(--color-border-dark, #444);
                  color: var(--color-text-dark, #fff);
                }

                .popover::before {
                  background: var(--color-background-dark, #222);
                  border-color: var(--color-border-dark, #444);
                }
              }
            }

/* Datei: ui/components/pagination.css */
/**
            * Pagination
            *
            * Pagination components allow users to navigate between pages of content,
            * indicating the current page, total number of pages, and providing navigation
            * controls to move between pages.
            *
            * @layer: components
            *
            * Accessibility:
            * - Use proper semantic markup (nav, ul, li)
            * - Include proper ARIA attributes (aria-current="page")
            * - Ensure keyboard navigability
            * - Include descriptive text for screen readers
            */

            @layer components {
/* Pagination container */
              .pagination {
                align-items: center;
                display: flex;
                font-size: var(--text-sm, 0.875rem);
                justify-content: center;
                margin: var(--space-4) 0;
              }

/* Pagination list */
              & .list {
                display: flex;
                gap: var(--space-1);
                list-style: none;
                margin: 0;
                padding: 0;
              }

/* Pagination item */
              & .item {
                display: inline-flex;
              }

/* Pagination link/button */
              & .link {
                align-items: center;
                background-color: var(--color-surface-100, #f3f4f6);
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-md, 0.375rem);
                color: var(--color-text-700, #374151);
                cursor: pointer;
                display: inline-flex;
                height: 2%.25rem;
                justify-content: center;
                min-width: 2%.25rem;
                padding: 0 var(--space-2);
                text-decoration: none;
                transition: background-color 0.2s, border-color 0.2s, color 0.2s;
              }

              & .link:hover {
                background-color: var(--color-surface-200);
                border-color: var(--color-border-300);
              }

              & .link:focus {
                box-shadow: 0 0 0 2px var(--color-primary-200);
                outline: none;
              }

/* Current page */
              & .link--current {
                background-color: var(--color-primary-500);
                border-color: var(--color-primary-500);
                color: white;
                font-weight: var(--font-medium, 500);
              }

              & .link--current:hover {
                background-color: var(--color-primary-600, #2563eb);
                border-color: var(--color-primary-600, #2563eb);
              }

/* Disabled state */
              & .link--disabled {
                cursor: not-allowed;
                opacity: 5000%;
                pointer-events: none;
              }

/* Previous/next buttons */
              & .prev,
              & .next {
                align-items: center;
                display: inline-flex;
              }

              & .prev-icon,
              & .next-icon {
                height: 1rem;
                width: 1rem;
              }

              & .prev-text,
              & .next-text {
                margin: 0 var(--space-1);
              }

/* Pagination truncation (ellipsis) */
              & .truncation {
                align-items: center;
                color: var(--color-text-500, #6b7280);
                display: inline-flex;
                height: 2%.25rem;
                justify-content: center;
                min-width: 2%.25rem;
                user-select: none;
              }

/* Pagination sizes */
              .pagination--sm & .link {
                font-size: var(--text-xs, 0.75rem);
                height: 1%.75rem;
                min-width: 1%.75rem;
              }

              .pagination--lg & .link {
                font-size: var(--text-base);
                height: 2%.75rem;
                min-width: 2%.75rem;
              }

/* Pagination with input */
              .pagination--with-input {
                gap: var(--space-3);
              }

              & .input-container {
                align-items: center;
                display: flex;
                margin: 0 var(--space-2);
              }

              & .input-label {
                color: var(--color-text-500, #6b7280);
                margin-right: var(--space-2);
              }

              & .input {
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-md, 0.375rem);
                font-size: var(--text-sm, 0.875rem);
                height: 2%.25rem;
                padding: 0 var(--space-2);
                text-align: center;
                width: 3rem;
              }

              & .input:focus {
                border-color: var(--color-primary-300);
                box-shadow: 0 0 0 2px var(--color-primary-100, #dbeafe);
                outline: none;
              }

              & .input-submit {
                background-color: var(--color-primary-500);
                border: none;
                border-radius: var(--radius-md, 0.375rem);
                color: white;
                cursor: pointer;
                height: 2%.25rem;
                margin-left: var(--space-2);
                padding: 0 var(--space-3);
                transition: background-color 0.2s;
              }

              & .input-submit:hover {
                background-color: var(--color-primary-600, #2563eb);
              }

/* Pagination info */
              & .info {
                color: var(--color-text-500, #6b7280);
                font-size: var(--text-sm, 0.875rem);
                margin: 0 var(--space-3);
              }

/* Compact pagination */
              .pagination--compact & .link {
                border-radius: 0;
                margin-left: -1px;
                min-width: 1%.75rem;
              }

              .pagination--compact & .item:first-child & .link {
                border-bottom-left-radius: var(--radius-md, 0.375rem);
                border-top-left-radius: var(--radius-md, 0.375rem);
              }

              .pagination--compact & .item:last-child & .link {
                border-bottom-right-radius: var(--radius-md, 0.375rem);
                border-top-right-radius: var(--radius-md, 0.375rem);
              }

/* Borderless variant */
              .pagination--borderless & .link {
                background-color: transparent;
                border: none;
              }

              .pagination--borderless & .link:hover {
                background-color: var(--color-surface-200);
              }

              .pagination--borderless & .link--current {
                background-color: var(--color-primary-100, #dbeafe);
                color: var(--color-primary-700, #1d4ed8);
              }

/* Rounded variant */
              .pagination--rounded & .link {
                border-radius: var(--radius-full, 9999px);
              }

/* Circle variant */
              .pagination--circle & .link {
                border-radius: var(--radius-full, 9999px);
                padding: 0;
              }

/* Responsive */
              @media (max-width: 640px) {
                & .prev-text,
                & .next-text {
                  display: none;
                }

                & .item--mobile-hidden {
                  display: none;
                }

                & .info {
                  margin: 0 var(--space-1);
                }
              }
            }

/* Datei: ui/components/notification.css */
/*
            * Notification Module
            *
            * Benachrichtigungen und Systemmeldungen (Toast/Messages).
            */

/**
            * Notification-Komponente
            *
            * System- und Benutzermeldungen für wichtige Mitteilungen und Updates.
            * Notifications informieren Benutzer über Ereignisse, Aktivitäten oder Statusänderungen.
            *
            * @layer components.notification
            *
            * Grundlegende Verwendung:
            * <div class="notification">
            *   <div class="icon"><!-- Icon hier --></div>
            *   <div class="content">
            *     <div class="title">Neue Nachricht</div>
            *     <div class="message">Sie haben eine neue Nachricht erhalten.</div>
            *   </div>
            *   <button class="close">&times;</button>
            * </div>
            *
            * Varianten:
            * <div class="notification info">Informativ</div>
            * <div class="notification success">Erfolg</div>
            * <div class="notification warning">Warnung</div>
            * <div class="notification error">Fehler</div>
            *
            * Positionen:
            * <div class="notification top-right">Oben rechts</div>
            * <div class="notification top-left">Oben links</div>
            * <div class="notification bottom-right">Unten rechts</div>
            * <div class="notification bottom-left">Unten links</div>
            *
            * Mit Aktionen:
            * <div class="notification">
            *   <div class="content">Neue Anfrage</div>
            *   <div class="actions">
            *     <button class="button small primary">Annehmen</button>
            *     <button class="button small">Ablehnen</button>
            *   </div>
            * </div>
            *
            * Mit Timer:
            * <div class="notification with-timer">
            *   <div class="content">Diese Meldung verschwindet in 5 Sekunden</div>
            *   <div class="timer"></div>
            * </div>
            *
            * Gruppierte Benachrichtigungen:
            * <div class="notification-center">
            *   <div class="notification">Benachrichtigung 1</div>
            *   <div class="notification">Benachrichtigung 2</div>
            * </div>
            */

/* Animationen - außerhalb von @layer definieren */
            @keyframes notification-timer {
              from { width: 100%; }

              to { width: 0%; }
            }

/* Komponenten-Styles */
            @layer components {
              .notification {
                align-items: start;
                background-color: var(--color-gray-100, #f3f4f6);
                border: 1px solid var(--color-gray-300, #d1d5db);
                border-radius: var(--radius-md, 0.375rem);
                box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
                display: flex;
                font-size: var(--font-size-sm, 0.875rem);
                gap: var(--space-3);
                max-width: 100%;
                padding: var(--space-3);

/* Varianten */
                &.success {
                  background-color: var(--color-success, #10b981);
                  color: white;
                }

                &.error {
                  background-color: var(--color-error, #ef4444);
                  color: white;
                }

                &.warning {
                  background-color: var(--color-warning, #f59e0b);
                  color: black;
                }

                &.info {
                  background-color: var(--color-info, #3b82f6);
                  color: white;
                }

/* Icon */
                .icon {
                  flex-shrink: 0;
                  font-size: 1.25rem;
                  line-height: 1%;
                  margin-top: 2px;
                }

/* Inhalt */
                .content {
                  flex: 1;

                  .title {
                    font-weight: var(--font-weight-medium, 500);
                    margin-bottom: var(--space-1);
                  }

                  .message {
                    color: inherit;
                    opacity: 9000%;
                  }
                }

/* Schließen-Knopf */
                .close {
                  background: none;
                  border: none;
                  color: currentcolor;
                  cursor: pointer;
                  flex-shrink: 0;
                  font-size: 1.25rem;
                  line-height: 1%;
                  margin-left: auto;
                  opacity: 0.7;
                  padding: 0.25rem;
                  transition: opacity var(--transition-fast, 150ms ease);

                  &:hover {
                    opacity: 1;
                  }
                }

/* Aktionen */
                .actions {
                  display: flex;
                  gap: var(--space-2);
                  margin-top: var(--space-2);
                }

/* Timer */
                .timer {
                  background-color: rgb(255 255 255 / 5000%);
                  bottom: 0%;
                  height: 3px;
                  left: 0%;
                  position: absolute;
                }

/* Positionen */
                &.top-right,
                &.top-left,
                &.bottom-right,
                &.bottom-left {
                  margin: var(--space-4);
                  position: fixed;
                  z-index: var(--z-index-notification, 1070);
                }

                &.top-right {
                  right: 0%;
                  top: 0%;
                }

                &.top-left {
                  left: 0%;
                  top: 0%;
                }

                &.bottom-right {
                  bottom: 0%;
                  right: 0%;
                }

                &.bottom-left {
                  bottom: 0%;
                  left: 0%;
                }

                &.with-timer {
                  overflow: hidden;
                  position: relative;
                }
              }

/* Notification-Center */
              .notification-center {
                display: flex;
                flex-direction: column;
                gap: var(--space-2);
                max-width: 100%;
                position: fixed;
                width: 35%0px;
                z-index: var(--z-index-notification, 1070);

                &.top-right {
                  margin: var(--space-4);
                  right: 0%;
                  top: 0%;
                }

                &.top-left {
                  left: 0%;
                  margin: var(--space-4);
                  top: 0%;
                }

                &.bottom-right {
                  bottom: 0%;
                  margin: var(--space-4);
                  right: 0%;
                }

                &.bottom-left {
                  bottom: 0%;
                  left: 0%;
                  margin: var(--space-4);
                }
              }
            }

/* Animations-Styles */
            @layer animations {
              .notification {
                &.animate-in {
                  animation-duration: 0.3s;
                  animation-name: slideIn;
                  animation-timing-function: ease-out;
                }

                &.animate-out {
                  animation-duration: 0.3s;
                  animation-fill-mode: forwards;
                  animation-name: slideOut;
                  animation-timing-function: ease-in;
                }

                .timer {
                  animation: notification-timer 5s linear forwards;
                }
              }
            }

/* Datei: ui/components/modal.css */
/*
            * Modal Module
            *
            * Zentrale Komponente für modale Dialoge.
            */

/**
            * Modal-Komponente
            *
            * Dialogfenster und Overlays für fokussierte Benutzerinteraktionen.
            * Modals werden verwendet, um wichtige Informationen anzuzeigen oder Benutzerentscheidungen zu erfordern.
            *
            * @layer components.modal
            *
            * Grundlegende Verwendung:
            * <div class="modal">
            *   <div class="backdrop"></div>
            *   <div class="container">
            *     <div class="header">
            *       <h3 class="title">Modaltitel</h3>
            *       <button class="close">&times;</button>
            *     </div>
            *     <div class="body">
            *       Modalinhalt
            *     </div>
            *     <div class="footer">
            *       <button class="button">Abbrechen</button>
            *       <button class="button primary">Bestätigen</button>
            *     </div>
            *   </div>
            * </div>
            *
            * Größenvarianten:
            * <div class="modal small">...</div>
            * <div class="modal medium">...</div>
            * <div class="modal large">...</div>
            * <div class="modal fullscreen">...</div>
            *
            * Position:
            * <div class="modal center">...</div>
            * <div class="modal top">...</div>
            * <div class="modal bottom">...</div>
            *
            * Animation (erfordert JS):
            * <div class="modal fade">...</div>
            * <div class="modal slide">...</div>
            *
            * Flüssige Größenanpassung mit Schlüsselwörtern:
            * <div class="modal fluid">...</div>
            * <div class="modal fluid small">...</div>
            * <div class="modal fluid medium">...</div>
            * <div class="modal fluid large">...</div>
            *
            * Container-adaptive Größenanpassung:
            * <div class="modal adaptive">...</div>
            */

/* Animationen - außerhalb von @layer definieren */

/* Komponenten-Styles */
            @layer components {
              .modal {
                align-items: center;
                display: flex;
                inset: 0;
                justify-content: center;
                position: fixed;
                z-index: var(--z-index-modal, 1000);

/* Hintergrund-Overlay */
                .backdrop {
                  background: rgb(0 0 0 / 5000%);
                  inset: 0;
                  position: fixed;
                  z-index: var(--z-index-modal-backdrop, 999);
                }

/* Modal-Container */
                .container {
                  background: var(--color-background, var(--color-surface-elevated, #fff));
                  border-radius: var(--radius-modal, var(--radius-lg, 0.75rem));
                  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 1000%));
                  display: flex;
                  flex-direction: column;
                  gap: var(--space-4, 1rem);
                  max-width: var(--modal-max-width, 32rem);
                  overflow: hidden;
                  padding: var(--modal-padding, var(--space-6, 1.5rem));
                  position: relative;
                  width: 100%;
                  z-index: var(--z-index-modal, 1000);
                }

/* Modal-Header */
                .header {
                  align-items: center;
                  display: flex;
                  justify-content: space-between;
                  padding: var(--modal-header-padding, 0);

                  .title {
                    color: var(--color-text, var(--color-neutral-900, #111827));
                    font-size: var(--text-lg, var(--font-size-lg, 1.125rem));
                    font-weight: var(--font-semibold, var(--font-weight-semibold, 600));
                    margin: 0;
                  }

                  .close {
                    background: none;
                    border: none;
                    color: var(--color-neutral-500, #6b7280);
                    cursor: pointer;
                    font-size: 1.5rem;
                    line-height: 1%;
                    padding: 0.25rem;
                    transition: color var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);

                    &:hover {
                      color: var(--color-neutral-800, #1f2937);
                    }
                  }
                }

/* Modal-Inhalt */
                .body {
                  color: var(--color-text-muted, var(--color-neutral-700, #374151));
                  font-size: var(--text-base, var(--font-size-base, 1rem));
                  max-height: 70%;
                  overflow-y: auto;
                }

/* Modal-Footer */
                .footer {
                  display: flex;
                  gap: var(--space-3, 0.75rem);
                  justify-content: flex-end;
                  margin-top: var(--space-2, 0.5rem);
                  padding: var(--modal-footer-padding, 0);
                }

/* Größenvarianten */
                &.small .container {
                  max-width: 2%4rem;
                }

                &.medium .container {
                  max-width: var(--modal-max-width, 32rem);
                }

                &.large .container {
                  max-width: 4%8rem;
                }

                &.fullscreen .container {
                  border-radius: 0;
                  height: 100%;
                  max-width: 100%;
                  width: 100%;
                }

/* Flüssige Größenanpassung mit interpolate-size: allow-keywords */
                &.fluid {
/* Nutzt CSS-Schlüsselwörter für Größen - funktioniert mit interpolate-size: allow-keywords */
                  font-size: medium; /* Basis-Größe für Skalierungsfaktor */


/**
                  * Modal Component Structure:
                  *
                  * <div class="modal" role="dialog">
                  *   <div class="modal-overlay"></div>
                  *   <div class="modal-container">
                  *     <div class="modal-header">
                  *       <h2 class="modal-title">Title</h2>
                  *       <button class="modal-close" aria-label="Close">&times;</button>
                  *     </div>
                  *     <div class="modal-content">
                  *       <!-- Modal body content -->
                  *     </div>
                  *     <div class="modal-footer">
                  *       <button class="button button--secondary">Cancel</button>
                  *       <button class="button button--primary">Confirm</button>
                  *     </div>
                  *   </div>
                  * </div>
                  *
                  * Modifiers: .modal--sm, .modal--lg, .modal--fullscreen
                  * States: .modal--open, .modal--closing
                  */
                  .container {
                    border-radius: 0.75em;
                    gap: 1em;
                    padding: 1.5em;
                  }

                  .header .title {
                    font-size: 1.25em;
                  }

                  .body {
                    font-size: 1em;
                  }

                  .footer {
                    gap: 0.75em;
                    margin-top: 0%.5em;
                  }

/* Größenvarianten mit CSS-Schlüsselwörtern */
                  &.small {
                    font-size: small;

                    .container {
                      max-width: 2%4em;
                    }
                  }

                  &.medium {
                    font-size: medium;

                    .container {
                      max-width: 3%2em;
                    }
                  }

                  &.large {
                    font-size: large;

                    .container {
                      max-width: 4%8em;
                    }
                  }

                  &.x-large {
                    font-size: x-large;

                    .container {
                      max-width: 6%4em;
                    }
                  }
                }

/* Container-adaptive Größenanpassung */
                &.adaptive {
                  container-name: modal;
                  container-type: inline-size;

                  .container {
                    max-width: clamp(24rem, 80cqi, 48rem);
                    padding: clamp(var(--space-4, 1rem), 4cqi, var(--space-8, 2rem));
                  }

                  .header .title {
                    font-size: clamp(var(--text-base, 1rem), 3cqi, var(--text-xl, 1.25rem));
                  }

                  .body {
                    font-size: clamp(var(--text-sm, 0.875rem), 2.5cqi, var(--text-base, 1rem));
                  }

/* Container-Query für größere Modals */
                  @container modal (min-width: 40rem) {
                    .container {
                      gap: var(--space-6, 1.5rem);
                    }
                  }
                }

/* Positionierung */
                &.center {
                  align-items: center;
                  justify-content: center;
                }

                &.top {
                  align-items: flex-start;

                  .container {
                    margin-top: var(--space-16, 4rem);
                  }
                }

                &.bottom {
                  align-items: flex-end;

                  .container {
                    margin-bottom: var(--space-16, 4rem);
                  }
                }
              }
            }

/* Animationen */
            @layer animations {
              .modal {
                &.fade .container {
                  animation: fadeIn 0.2s ease-out;
                }

                &.slide .container {
                  animation: slideUp 0.3s ease-out;
                }
              }
            }


/* Datei: ui/components/media.css */
/**
            * Medien-Element Styles
            */

            @layer elements {
/* Bilder */
              img {
                border-radius: var(--radius-media, var(--radius-sm, 0.25rem));
                display: block;
                height: auto;
                max-width: 100%;
              }

/* Videos */
              video {
                border-radius: var(--radius-media, var(--radius-sm, 0.25rem));
                display: block;
                height: auto;
                max-width: 100%;
              }

/* Iframes */
              iframe {
                border: var(--border-width, 1px) solid var(--color-border, var(--color-neutral-200, #e5e7eb));
                border-radius: var(--radius-media, var(--radius-sm, 0.25rem));
                max-width: 100%;
              }

/* Media Container */
              .media {
                border-radius: var(--radius-media, var(--radius-sm, 0.25rem));
                overflow: hidden;

                img, video {
                  border-radius: 0;
                }
              }

/* Responsive Media */
              .media--responsive {
                aspect-ratio: var(--media-aspect-ratio, 16/9);
                position: relative;

                img, video, iframe {
                  height: 100%;
                  inset: 0;
                  object-fit: cover;
                  position: absolute;
                  width: 100%;
                }
              }

/* Media Sizes */
              .media--xs {
                max-width: 4rem;
              }

              .media--sm {
                max-width: 8rem;
              }

              .media--md {
                max-width: 1%6rem;
              }

              .media--lg {
                max-width: 2%4rem;
              }

              .media--xl {
                max-width: 3%2rem;
              }
            }

/* Datei: ui/components/lists.css */
/**
            * Listen-Element Styles
            */

            @layer elements {
/* Listen */
              ul, ol {
                color: var(--color-text, var(--color-neutral-900, #111827));
                margin: var(--space-4, 1rem) 0;
                padding-left: var(--space-8, 2rem);
              }

              li {
                color: var(--color-text, var(--color-neutral-900, #111827));
                line-height: var(--line-height-relaxed, 1.625);
                margin: var(--space-2, 0.5rem) 0;
              }

/* Beschreibungslisten */
              dl {
                margin: var(--space-4, 1rem) 0;
              }

              dt {
                color: var(--color-text, var(--color-neutral-900, #111827));
                font-weight: var(--font-semibold, var(--font-weight-semibold, 600));
                margin-top: var(--space-4, 1rem);
              }

              dd {
                color: var(--color-text-muted, var(--color-neutral-700, #374151));
                margin-left: var(--space-4, 1rem);
                margin-top: var(--space-2, 0.5rem);
              }

/* List Variants */
              .list--unstyled {
                list-style: none;
                padding-left: 0%;
              }

              .list--inline {
                display: flex;
                flex-wrap: wrap;
                gap: var(--space-2, 0.5rem);
                list-style: none;
                padding-left: 0%;
              }

              .list--spaced li {
                margin: var(--space-3, 0.75rem) 0;
              }

              .list--compact li {
                margin: var(--space-1, 0.25rem) 0;
              }
            }

/* Datei: ui/components/hamburger.css */
/*
            * Hamburger-Komponente
            *
            * Hamburger-Menü-Icon mit Animation und Toggle-Zustand.
            */

/**
            * Hamburger-Komponente
            *
            * Mobile Menü-Icons für Navigation auf kleinen Bildschirmen.
            * Hamburger-Icons dienen als kompakte Schaltfläche für das Aus- und Einklappen von Navigationsmenüs.
            *
            * @layer components
            *
            * Grundlegende Verwendung:
            * <button class="hamburger" aria-label="Menü öffnen">
            *   <span class="line"></span>
            *   <span class="line"></span>
            *   <span class="line"></span>
            * </button>
            *
            * Aktiver Zustand (geöffnet):
            * <button class="hamburger active" aria-label="Menü schließen">
            *   <span class="line"></span>
            *   <span class="line"></span>
            *   <span class="line"></span>
            * </button>
            *
            * Varianten:
            * <button class="hamburger spin">...</button>      <!-- Drehanimation -->
            * <button class="hamburger squeeze">...</button>   <!-- Quetschanimation -->
            * <button class="hamburger arrow">...</button>     <!-- Pfeilanimation -->
            * <button class="hamburger collapse">...</button>  <!-- Einklappen -->
            *
            * Größen:
            * <button class="hamburger sm">...</button>  <!-- Klein -->
            * <button class="hamburger md">...</button>  <!-- Mittel (Standard) -->
            * <button class="hamburger lg">...</button>  <!-- Groß -->
            *
            * Farben:
            * <button class="hamburger light">...</button>  <!-- Heller Hintergrund -->
            * <button class="hamburger dark">...</button>   <!-- Dunkler Hintergrund -->
            * <button class="hamburger primary">...</button> <!-- Primärfarbe -->
            */

            @layer components {
              .hamburger {
                background: transparent;
                border: none;
                cursor: pointer;
                display: inline-flex;
                flex-direction: column;
                height: 2%4px;
                justify-content: space-between;
                padding: 4px 0;
                width: 2%4px;

                .line {
                  background-color: var(--color-gray-800);
                  border-radius: 2px;
                  display: block;
                  height: 2px;
                  transition: all var(--transition-fast, 150ms ease) ease-in-out;
                  width: 100%;
                }

/* Aktiver Zustand */
                &.active {
                  .line:nth-child(1) {
                    transform: translateY(8px) rotate(45deg);
                  }

                  .line:nth-child(2) {
                    opacity: 0%;
                  }

                  .line:nth-child(3) {
                    transform: translateY(-8px) rotate(-45deg);
                  }
                }

/* Varianten */
                &.spin {
                  &.active {
                    .line:nth-child(1) {
                      margin-top: 8px;
                      transform: rotate(135deg);
                    }

                    .line:nth-child(2) {
                      opacity: 0%;
                    }

                    .line:nth-child(3) {
                      margin-top: -16px;
                      transform: rotate(-135deg);
                    }
                  }
                }

                &.squeeze {
                  &.active {
                    .line:nth-child(1) {
                      transform: translateY(8px) rotate(45deg);
                    }

                    .line:nth-child(2) {
                      transform: scaleX(0%);
                    }

                    .line:nth-child(3) {
                      transform: translateY(-8px) rotate(-45deg);
                    }
                  }
                }

                &.arrow {
                  &.active {
                    .line:nth-child(1) {
                      transform: translateY(3px) translateX(6px) rotate(45deg);
                      width: 50%;
                    }

                    .line:nth-child(2) {
                      opacity: 1;
                    }

                    .line:nth-child(3) {
                      transform: translateY(-3px) translateX(6px) rotate(-45deg);
                      width: 50%;
                    }
                  }
                }

/* Größenvarianten */
                &.sm {
                  height: 1%8px;
                  width: 1%8px;

                  .line {
                    height: 1px;
                  }
                }

                &.lg {
                  height: 3%0px;
                  width: 3%0px;

                  .line {
                    height: 3px;
                  }
                }

/* Farbvarianten */
                &.light .line {
                  background-color: var(--color-white, #fff);
                }

                &.dark .line {
                  background-color: var(--color-gray-900, #111827);
                }

                &.primary .line {
                  background-color: var(--color-primary, #3b82f6);
                }
              }
            }



/* Datei: ui/components/drawer.css */
/**
            * Drawer/Accordion
            *
            * Drawers and accordions are expandable containers that allow users to show
            * or hide content sections. They help organize content, save screen space,
            * and allow users to focus on specific information.
            *
            * @layer: components
            *
            * Accessibility:
            * - Use appropriate ARIA attributes (aria-expanded, aria-controls)
            * - Ensure keyboard operability
            * - Headers should be properly labeled as buttons
            * - Include focus states for interactive elements
            */

            @layer components {
/* ===== Accordion ===== */

/* Accordion container */
              .accordion {
                background-color: var(--color-surface-50);
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-md, 0.375rem);
                overflow: hidden;
              }

/* Accordion item */
              & .item {
                border-bottom: 1px solid var(--color-border-200, #e5e7eb);
              }

              & .item:last-child {
                border-bottom: none;
              }

/* Accordion header/trigger */
              & .header {
                align-items: center;
                background-color: var(--color-surface-100, #f3f4f6);
                border: none;
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                padding: var(--space-4);
                text-align: left;
                transition: background-color 0.2s;
                width: 100%;
              }

              & .header:hover {
                background-color: var(--color-surface-200);
              }

              & .header:focus {
                box-shadow: 0 0 0 2px var(--color-primary-200);
                outline: none;
              }

/* Accordion title */
              & .title {
                color: var(--color-text-900, #111827);
                flex: 1;
                font-weight: var(--font-medium, 500);
              }

/* Accordion icon */
              & .icon {
                color: var(--color-text-500, #6b7280);
                transition: transform 0.3s;
              }

              & .header[aria-expanded="true"] & .icon {
                transform: rotate(180deg);
              }

/* Accordion content panel */
              & .panel {
                max-height: 0%;
                overflow: hidden;
                transition: max-height 0.3s ease-out;
              }

              & .panel[aria-hidden="false"] {
                max-height: 100%0px; /* Arbitrary large value, will be controlled by JS */
              }

              & .content {
                padding: var(--space-4);
              }

/* Accordion variations */
              .accordion--bordered & .item {
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-md, 0.375rem);
                margin-bottom: var(--space-3);
              }

              .accordion--bordered & .item:last-child {
                margin-bottom: 0%;
              }

/* ===== Drawer ===== */

/* Drawer container */
              .drawer {
                background-color: var(--color-surface-100, #f3f4f6);
                box-shadow: var(--shadow-lg);
                position: fixed;
                transition: transform 0.3s ease;
                z-index: var(--z-drawer, 90);
              }

/* Drawer positions */
              .drawer--left {
                height: 100%;
                left: 0%;
                top: 0%;
                transform: translateX(-100%);
              }

              .drawer--right {
                height: 100%;
                right: 0%;
                top: 0%;
                transform: translateX(100%);
              }

              .drawer--top {
                left: 0%;
                top: 0%;
                transform: translateY(-100%);
                width: 100%;
              }

              .drawer--bottom {
                bottom: 0%;
                left: 0%;
                transform: translateY(100%);
                width: 100%;
              }

/* Drawer sizes */
              .drawer--left.drawer--sm,
              .drawer--right.drawer--sm {
                width: 25%0px;
              }

              .drawer--left.drawer--md,
              .drawer--right.drawer--md {
                width: 35%0px;
              }

              .drawer--left.drawer--lg,
              .drawer--right.drawer--lg {
                width: 45%0px;
              }

              .drawer--top.drawer--sm,
              .drawer--bottom.drawer--sm {
                height: 20%0px;
              }

              .drawer--top.drawer--md,
              .drawer--bottom.drawer--md {
                height: 30%0px;
              }

              .drawer--top.drawer--lg,
              .drawer--bottom.drawer--lg {
                height: 40%0px;
              }

/* Opened state */
              .drawer--opened {
                transform: translate(0%);
              }

/* Drawer backdrop */
              .drawer-backdrop {
                background-color: rgb(0 0 0 / 5000%);
                inset: 0;
                opacity: 0%;
                position: fixed;
                transition: opacity 0.3s, visibility 0.3s;
                visibility: hidden;
                z-index: var(--z-drawer-backdrop, 80);
              }

              .drawer-backdrop--visible {
                opacity: 1;
                visibility: visible;
              }

/* Drawer header */
              & .header {
                align-items: center;
                border-bottom: 1px solid var(--color-border-200, #e5e7eb);
                display: flex;
                justify-content: space-between;
                padding: var(--space-4);
              }

              & .title {
                font-weight: var(--font-semibold, 600);
                margin: 0;
              }

              & .close {
                align-items: center;
                background: transparent;
                border: none;
                border-radius: var(--radius-full, 9999px);
                color: var(--color-text-500, #6b7280);
                cursor: pointer;
                display: flex;
                height: 3%2px;
                justify-content: center;
                transition: background-color 0.2s;
                width: 3%2px;
              }

              & .close:hover {
                background-color: var(--color-surface-200);
                color: var(--color-text-700, #374151);
              }

/* Drawer body */
              & .body {
                height: calc(100 - 60px); /* Adjust based on header + footer height */
                overflow-y: auto;
                padding: var(--space-4);
              }

/* Drawer footer */
              & .footer {
                border-top: 1px solid var(--color-border-200, #e5e7eb);
                display: flex;
                gap: var(--space-3);
                justify-content: flex-end;
                padding: var(--space-4);
              }

/* Responsive adjustments */
              @media (max-width: 640px) {
                .drawer--left,
                .drawer--right {
                  width: 100%;
                }
              }
            }

/* Datei: ui/components/dialog.css */
/**
            * Dialog
            *
            * Dialogs are overlays that require user interaction. They appear in front of
            * app content to provide critical information or request input, and typically
            * block interactions with the page until explicitly dismissed.
            *
            * @layer: components
            *
            * Accessibility:
            * - Use role="dialog" or role="alertdialog" as appropriate
            * - Set aria-modal="true" for modal dialogs
            * - Use aria-labelledby to reference the dialog title
            * - Focus should be trapped inside the dialog when open
            * - Return focus to the triggering element when closed
            * - Support closing via Escape key
            */

            @layer components {
/* Dialog overlay/backdrop */
              .dialog-backdrop {
                align-items: center;
                background-color: rgb(0 0 0 / 5000%);
                display: flex;
                inset: 0;
                justify-content: center;
                opacity: 0%;
                position: fixed;
                transition: opacity 0.2s, visibility 0.2s;
                visibility: hidden;
                z-index: var(--z-dialog-backdrop, 100);
              }

              .dialog-backdrop--visible {
                opacity: 1;
                visibility: visible;
              }

/* Dialog container */
              .dialog {
                background-color: var(--color-surface-100, #f3f4f6);
                border-radius: var(--radius-lg, 0.5rem);
                box-shadow: var(--shadow-xl);
                display: flex;
                flex-direction: column;
                max-height: calc(100 - 80px);
                max-width: 50%0px;
                opacity: 0%;
                overflow: hidden;
                position: relative;
                transform: translateY(20px);
                transition: transform 0.3s, opacity 0.3s;
                width: 100%;
              }

              .dialog--visible {
                opacity: 1;
                transform: translateY(0%);
              }

/* Dialog sizes */
              .dialog--sm {
                max-width: 40%0px;
              }

              .dialog--lg {
                max-width: 80%0px;
              }

              .dialog--xl {
                max-width: 100%0px;
              }

              .dialog--fullscreen {
                border-radius: 0;
                height: 100%;
                max-height: 100%;
                max-width: none;
                width: 100%;
              }

/* Dialog header */
              & .header {
                align-items: center;
                border-bottom: 1px solid var(--color-border-200, #e5e7eb);
                display: flex;
                justify-content: space-between;
                padding: var(--space-4) var(--space-5);
              }

              & .title {
                color: var(--color-text-900, #111827);
                font-size: var(--text-lg);
                font-weight: var(--font-semibold, 600);
                margin: 0;
              }

/* Dialog close button */
              & .close {
                align-items: center;
                background: transparent;
                border: none;
                border-radius: var(--radius-full, 9999px);
                color: var(--color-text-500, #6b7280);
                cursor: pointer;
                display: flex;
                height: 3%2px;
                justify-content: center;
                transition: background-color 0.2s, color 0.2s;
                width: 3%2px;
              }

              & .close:hover {
                background-color: var(--color-surface-200);
                color: var(--color-text-700, #374151);
              }

/* Dialog body */
              & .body {
                flex: 1;
                overflow-y: auto;
                padding: var(--space-5);
              }

/* Dialog footer */
              & .footer {
                align-items: center;
                background-color: var(--color-surface-50);
                border-top: 1px solid var(--color-border-200, #e5e7eb);
                display: flex;
                gap: var(--space-3);
                justify-content: flex-end;
                padding: var(--space-4) var(--space-5);
              }

/* Dialog variants */
              .dialog--danger & .header {
                background-color: var(--color-error-50);
                color: var(--color-error-900);
              }

              .dialog--info & .header {
                background-color: var(--color-info-50);
                color: var(--color-info-900);
              }

              .dialog--warning & .header {
                background-color: var(--color-warning-50);
                color: var(--color-warning-900);
              }

              .dialog--success & .header {
                background-color: var(--color-success-50);
                color: var(--color-success-900);
              }

/* Dialog animations */
              .dialog--slide-up {
                transform: translateY(100%);
              }

              .dialog--slide-up.dialog--visible {
                transform: translateY(0%);
              }

              .dialog--slide-down {
                transform: translateY(-100%);
              }

              .dialog--slide-down.dialog--visible {
                transform: translateY(0%);
              }

              .dialog--zoom {
                transform: scale(0.9%);
              }

              .dialog--zoom.dialog--visible {
                transform: scale(1);
              }

/* Simple confirmation dialog */
              .dialog--confirmation & .body {
                padding: var(--space-6) var(--space-5);
                text-align: center;
              }

/* Responsive adjustments */
              @media (max-width: 640px) {
                .dialog {
                  max-height: calc(100 - 64px);
                  max-width: calc(100vw - 32px);
                }

                .dialog--lg,
                .dialog--xl {
                  max-width: calc(100vw - 32px);
                }
              }
            }

/* Datei: ui/components/data-table.css */
/**
            * Data Tables
            *
            * Data tables display structured data in rows and columns with advanced features
            * like sorting, filtering, pagination, and row selection. They're designed for
            * complex data sets that require user interaction and data manipulation.
            *
            * @layer: components
            *
            * Accessibility:
            * - Use proper table semantics (th, caption, scope attributes)
            * - Include ARIA attributes for interactive features
            * - Support keyboard navigation for sorting, selection, etc.
            * - Provide clear visual focus indicators
            */

            @layer components {
/* Data table container */
              .data-table-container {
                background-color: var(--color-surface-100, #f3f4f6);
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-md, 0.375rem);
                overflow-x: auto;
                width: 100%;
              }

/* Data table */
              .data-table {
                border-collapse: separate;
                border-spacing: 0;
                font-size: var(--text-sm, 0.875rem);
                width: 100%;
              }

/* Table caption */
              & .caption {
                background-color: var(--color-surface-50);
                border-bottom: 1px solid var(--color-border-200, #e5e7eb);
                color: var(--color-text-900, #111827);
                font-weight: var(--font-semibold, 600);
                padding: var(--space-3) var(--space-4);
                text-align: left;
              }

/* Table header */
              & .header {
                background-color: var(--color-surface-50);
                border-bottom: 2px solid var(--color-border-300);
              }

              & .header-cell {
                color: var(--color-text-700, #374151);
                font-weight: var(--font-semibold, 600);
                padding: var(--space-3) var(--space-4);
                position: relative;
                text-align: left;
                white-space: nowrap;
              }

/* Sortable header cells */
              & .header-cell--sortable {
                cursor: pointer;
                padding-right: var(--space-8);
                user-select: none;
              }

              & .header-cell--sortable:hover {
                background-color: var(--color-surface-100, #f3f4f6);
              }

/* Sort indicators */
              & .sort-icon {
                color: var(--color-text-400);
                position: absolute;
                right: var(--space-3);
                top: 50%;
                transform: translateY(-50%);
                transition: transform 0.2s, color 0.2s;
              }

              & .header-cell--sorted-asc & .sort-icon {
                color: var(--color-primary-600, #2563eb);
                transform: translateY(-50%) rotate(180deg);
              }

              & .header-cell--sorted-desc & .sort-icon {
                color: var(--color-primary-600, #2563eb);
              }

/* Table body */
              & .body {
                background-color: var(--color-surface-100, #f3f4f6);
              }

              & .row {
                transition: background-color 0.2s;
              }

              & .row:hover {
                background-color: var(--color-surface-200);
              }

              & .cell {
                border-bottom: 1px solid var(--color-border-100, #f3f4f6);
                padding: var(--space-3) var(--space-4);
              }

/* Row states */
              & .row--selected {
                background-color: var(--color-primary-50);
              }

              & .row--selected:hover {
                background-color: var(--color-primary-100, #dbeafe);
              }

/* Cell variants */
              & .cell--numeric {
                text-align: right;
              }

              & .cell--action {
                padding: var(--space-2);
                white-space: nowrap;
                width: 1%;
              }

/* Empty state */
              & .empty {
                color: var(--color-text-500, #6b7280);
                padding: var(--space-8);
                text-align: center;
              }

/* Data table controls */
              & .controls {
                align-items: center;
                background-color: var(--color-surface-50);
                border-top: 1px solid var(--color-border-200, #e5e7eb);
                display: flex;
                justify-content: space-between;
                padding: var(--space-3) var(--space-4);
              }

/* Search and filter */
              & .search {
                margin-bottom: var(--space-4);
                position: relative;
              }

              & .search-input {
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-md, 0.375rem);
                padding: var(--space-2) var(--space-3);
                padding-left: var(--space-8);
                width: 100%;
              }

              & .search-icon {
                color: var(--color-text-400);
                left: var(--space-3);
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
              }

/* Column filter button */
              & .filter-button {
                background: none;
                border: none;
                color: var(--color-text-500, #6b7280);
                cursor: pointer;
                margin-left: var(--space-1);
                padding: var(--space-1);
              }

              & .filter-button--active {
                color: var(--color-primary-600, #2563eb);
              }

/* Column visibility menu */
              & .column-menu {
                background-color: var(--color-surface-100, #f3f4f6);
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-md, 0.375rem);
                box-shadow: var(--shadow-lg);
                min-width: 18%0px;
                padding: var(--space-2);
                position: absolute;
                right: var(--space-3);
                top: calc(100 + var(--space-2));
                z-index: 10;
              }

              & .column-item {
                align-items: center;
                cursor: pointer;
                display: flex;
                padding: var(--space-2);
              }

              & .column-checkbox {
                margin-right: var(--space-2);
              }

/* Row selection */
              & .select-cell {
                padding: var(--space-2) var(--space-4);
                width: 1%;
              }

              & .select-all {
                margin: 0;
              }

/* Pagination */
              & .pagination {
                align-items: center;
                display: flex;
                gap: var(--space-2);
              }

              & .page-info {
                color: var(--color-text-500, #6b7280);
                font-size: var(--text-sm, 0.875rem);
                margin-right: var(--space-4);
              }

              & .page-button {
                align-items: center;
                background-color: var(--color-surface-100, #f3f4f6);
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-md, 0.375rem);
                cursor: pointer;
                display: inline-flex;
                height: 3%2px;
                justify-content: center;
                transition: background-color 0.2s, border-color 0.2s;
                width: 3%2px;
              }

              & .page-button:hover {
                background-color: var(--color-surface-200);
                border-color: var(--color-border-300);
              }

              & .page-button:disabled {
                cursor: not-allowed;
                opacity: 5000%;
              }

              & .page-button--active {
                background-color: var(--color-primary-500);
                border-color: var(--color-primary-500);
                color: white;
              }

/* Rows per page selector */
              & .per-page {
                align-items: center;
                display: flex;
                font-size: var(--text-sm, 0.875rem);
                gap: var(--space-2);
                margin-right: var(--space-4);
              }

              & .per-page-select {
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-md, 0.375rem);
                padding: var(--space-1) var(--space-2);
              }

/* Responsive adjustments */
              @media (max-width: 768px) {
                & .controls {
                  align-items: flex-start;
                  flex-direction: column;
                  gap: var(--space-3);
                }

                & .pagination {
                  justify-content: space-between;
                  width: 100%;
                }
              }

/* Collapsible table for mobile */
              @media (max-width: 640px) {
                .data-table--responsive & .header {
                  display: none;
                }

                .data-table--responsive & .row {
                  border-bottom: 1px solid var(--color-border-200, #e5e7eb);
                  display: block;
                  padding: var(--space-3);
                }

                .data-table--responsive & .cell {
                  border-bottom: none;
                  display: flex;
                  padding: var(--space-2) 0;
                  text-align: right;
                }

                .data-table--responsive & .cell::before {
                  content: attr(data-label);
                  font-weight: var(--font-semibold, 600);
                  margin-right: auto;
                  padding-right: var(--space-4);
                }
              }
            }

/* Datei: ui/components/comment.css */
/**
            * Comments
            *
            * Comment components display user-generated responses, feedback, or discussions
            * related to content. They typically include the commenter's information, content,
            * timestamp, and interactive elements like reply or like buttons.
            *
            * @layer: components
            *
            * Accessibility:
            * - Use proper heading structure for comment threads
            * - Ensure adequate color contrast for all text
            * - Use semantic HTML (article, header, footer) for comment structure
            * - Make interactive elements keyboard accessible
            */

            @layer components {
/* Comment container */
              .comment {
                border-bottom: 1px solid var(--color-border-100, #f3f4f6);
                display: flex;
                padding: var(--space-4);
              }

/* Nested comments */
              & .replies {
                margin-left: var(--space-10);
                margin-top: var(--space-4);
              }

/* Comment avatar */
              & .avatar {
                border-radius: var(--radius-full, 9999px);
                flex-shrink: 0;
                height: 4%0px;
                margin-right: var(--space-3);
                object-fit: cover;
                width: 4%0px;
              }

/* Comment content area */
              & .content {
                flex: 1;
                min-width: 0%; /* Prevent flex item from overflowing */
              }

/* Comment header with author info */
              & .header {
                align-items: baseline;
                display: flex;
                flex-wrap: wrap;
                margin-bottom: var(--space-2);
              }

              & .author {
                color: var(--color-text-900, #111827);
                font-weight: var(--font-semibold, 600);
                margin-right: var(--space-2);
              }

              & .meta {
                color: var(--color-text-500, #6b7280);
                font-size: var(--text-xs, 0.75rem);
              }

/* Author badge for special users */
              & .badge {
                border-radius: var(--radius-full, 9999px);
                display: inline-block;
                font-size: var(--text-xs, 0.75rem);
                font-weight: var(--font-medium, 500);
                line-height: 1.5;
                margin-left: var(--space-2);
                padding: 0 var(--space-2);
                text-transform: uppercase;
              }

              & .badge--author {
                background-color: var(--color-primary-100, #dbeafe);
                color: var(--color-primary-700, #1d4ed8);
              }

              & .badge--moderator {
                background-color: var(--color-success-100, #d1fae5);
                color: var(--color-success-700, #047857);
              }

/* Comment body */
              & .body {
                line-height: 1.5;
                margin-bottom: var(--space-3);
                overflow-wrap: break-word;
                word-wrap: break-word;
              }

/* Comment attachment (image, link preview, etc.) */
              & .attachment {
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-md, 0.375rem);
                margin: var(--space-3) 0;
                overflow: hidden;
              }

              & .image {
                display: block;
                height: auto;
                max-width: 100%;
              }

/* Comment footer with actions */
              & .footer {
                align-items: center;
                display: flex;
                gap: var(--space-4);
                margin-top: var(--space-2);
              }

/* Comment action button */
              & .action {
                align-items: center;
                background: none;
                border: none;
                border-radius: var(--radius-md, 0.375rem);
                color: var(--color-text-500, #6b7280);
                cursor: pointer;
                display: inline-flex;
                font-size: var(--text-xs, 0.75rem);
                padding: var(--space-1) var(--space-2);
                transition: color 0.2s, background-color 0.2s;
              }

              & .action:hover {
                background-color: var(--color-surface-100, #f3f4f6);
                color: var(--color-text-700, #374151);
              }

              & .action-icon {
                margin-right: var(--space-1);
              }

/* Comment action states */
              & .action--active {
                color: var(--color-primary-600, #2563eb);
                font-weight: var(--font-medium, 500);
              }

/* Comment editor */
              .comment-editor {
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-lg, 0.5rem);
                margin: var(--space-4) 0;
                overflow: hidden;
              }

              & .content {
                border: none;
                color: var(--color-text-900, #111827);
                font-family: inherit;
                font-size: var(--text-sm, 0.875rem);
                min-height: 10%0px;
                padding: var(--space-3);
                resize: vertical;
                width: 100%;
              }

              & .content:focus {
                outline: none;
              }

              & .footer {
                align-items: center;
                background-color: var(--color-surface-100, #f3f4f6);
                border-top: 1px solid var(--color-border-100, #f3f4f6);
                display: flex;
                justify-content: space-between;
                padding: var(--space-2) var(--space-3);
              }

              & .actions {
                display: flex;
                gap: var(--space-2);
              }

/* Empty state */
              .comments-empty {
                color: var(--color-text-500, #6b7280);
                padding: var(--space-8) var(--space-4);
                text-align: center;
              }

/* Comment states */
              .comment--highlighted {
                background-color: var(--color-primary-50);
              }

              .comment--deleted {
                opacity: 0.7;
              }

              .comment--deleted & .body {
                color: var(--color-text-400);
                font-style: italic;
              }

/* Responsive adjustments */
              @media (max-width: 640px) {
                & .replies {
                  margin-left: var(--space-6);
                }

                & .avatar {
                  height: 3%2px;
                  width: 3%2px;
                }
              }
            }

/* Datei: ui/components/code.css */
/**
            * Code-Element Styles
            */

            @layer elements {
/* Code */
              code {
                background-color: var(--color-background-alt, #f9fafb);
                border-radius: 3px;
                padding: 01.2em 0.4em;
              }

              pre {
                background-color: var(--color-background-alt, #f9fafb);
                border-radius: 4px;
                margin: 1rem 0;
                overflow-x: auto;
                padding: 1rem;
              }

              pre code {
                background-color: transparent;
                padding: 0;
              }
            }

/* Datei: ui/components/code-block.css */
/**
            * Code Block
            *
            * Code blocks display programming code snippets with syntax highlighting,
            * line numbers, and copy functionality. They help users understand and
            * implement technical examples within documentation or tutorials.
            *
            * @layer: components
            *
            * Accessibility:
            * - Use appropriate semantic elements (pre, code)
            * - Ensure sufficient color contrast for syntax highlighting
            * - Make copy functionality accessible via keyboard
            * - Consider adding aria-label for language identification
            */

            @layer components {
/* Code block container */
              .code-block {
                background-color: var(--color-code-bg, var(--color-neutral-900, #111827));
                border-radius: var(--radius-md, 0.375rem);
                color: var(--color-code-text, var(--color-neutral-100, #f3f4f6));
                font-family: var(--font-family-mono);
                font-size: var(--text-sm, 0.875rem);
                margin: var(--space-4) 0;
                overflow: hidden;
                position: relative;
              }

/* Code block header with language label and actions */
              & .header {
                align-items: center;
                background-color: var(--color-code-header-bg, var(--color-neutral-800, #1f2937));
                border-bottom: 1px solid var(--color-code-border, var(--color-neutral-700, #374151));
                color: var(--color-code-header-text, var(--color-neutral-300, #d1d5db));
                display: flex;
                font-family: var(--font-family-sans);
                font-size: var(--text-xs, 0.75rem);
                justify-content: space-between;
                padding: var(--space-2) var(--space-4);
              }

/* Language label */
              & .language {
                font-weight: var(--font-medium, 500);
                letter-spacing: 0.05em;
                text-transform: uppercase;
              }

/* Header actions container */
              & .actions {
                display: flex;
                gap: var(--space-2);
              }

/* Action button (e.g., copy, expand) */
              & .action {
                align-items: center;
                background: transparent;
                border: none;
                border-radius: var(--radius-sm, 0.125rem);
                color: var(--color-code-action, var(--color-neutral-400, #9ca3af));
                cursor: pointer;
                display: flex;
                justify-content: center;
                padding: var(--space-1);
                transition: color 0.2s, background-color 0.2s;
              }

              & .action:hover {
                background-color: var(--color-code-action-bg-hover, rgb(255 255 255 / 1000%));
                color: var(--color-code-action-hover, var(--color-neutral-100, #f3f4f6));
              }

/* Copy success state */
              & .action--copied {
                color: var(--color-success-500) !important;
              }

/* Code content area */
              & .content {
                counter-reset: line;
                overflow-x: auto;
                padding: var(--space-4);
                position: relative;
              }

/* Code with line numbers */
              .code-block--numbered & .content {
                padding-left: 3%.5rem;
              }

/* Code lines */
              & .line {
                display: block;
                line-height: 1%.6;
                position: relative;
              }

/* Line numbers */
              .code-block--numbered & .line::before {
                color: var(--color-code-line-number, var(--color-neutral-500, #6b7280));
                content: counter(line);
                counter-increment: line;
                left: -2.5rem;
                position: absolute;
                text-align: right;
                user-select: none;
                width: 1%.5rem;
              }

/* Highlighted line */
              & .line--highlighted {
                background-color: var(--color-code-highlight-bg, rgb(255 255 255 / 1000%));
                border-left: 2px solid var(--color-primary-500);
                margin: 0 -1rem;
                padding: 0 1rem;
              }

/* Line with error */
              & .line--error {
                background-color: var(--color-code-error-bg, rgb(220 38 38 / 2000%));
                border-left: 2px solid var(--color-error-500);
                margin: 0 -1rem;
                padding: 0 1rem;
              }

/* Syntax highlighting - basic theme */
              & .keyword {
                color: var(--color-code-keyword, #c792ea);
              }

              & .string {
                color: var(--color-code-string, #c3e88d);
              }

              & .function {
                color: var(--color-code-function, #82aaff);
              }

              & .number {
                color: var(--color-code-number, #f78c6c);
              }

              & .comment {
                color: var(--color-code-comment, #676e95);
                font-style: italic;
              }

              & .operator {
                color: var(--color-code-operator, #89ddff);
              }

              & .punctuation {
                color: var(--color-code-punctuation, #89ddff);
              }

              & .tag {
                color: var(--color-code-tag, #f07178);
              }

              & .attribute {
                color: var(--color-code-attribute, #ffcb6b);
              }

/* Code block variations */
              .code-block--inline {
                border-radius: var(--radius-sm, 0.125rem);
                display: inline-block;
                font-size: 0.9em;
                margin: 0;
                padding: 01.2em 0.4em;
                vertical-align: middle;
                white-space: nowrap;
              }

/* Expandable code block */
              .code-block--expandable & .content {
                max-height: 30%0px;
                overflow-y: auto;
                transition: max-height 0.3s ease;
              }

              .code-block--expanded & .content {
                max-height: 100%0px;
              }

/* Fade effect for expandable code blocks */
              .code-block--expandable::after {
                background: linear-gradient(to bottom, transparent, var(--color-code-bg, var(--color-neutral-900, #111827)));
                bottom: 0%;
                content: "";
                height: 6%0px;
                left: 0%;
                pointer-events: none;
                position: absolute;
                right: 0%;
                transition: opacity 0.3s ease;
              }

              .code-block--expanded::after {
                opacity: 0%;
              }

/* Expand toggle button */
              & .expand-toggle {
                background: var(--color-code-expand-bg, var(--color-neutral-700, #374151));
                border: none;
                border-radius: var(--radius-full, 9999px);
                bottom: var(--space-2);
                color: var(--color-code-expand-text, var(--color-neutral-200, #e5e7eb));
                cursor: pointer;
                font-size: var(--text-xs, 0.75rem);
                left: 50%;
                padding: var(--space-1) var(--space-3);
                position: absolute;
                transform: translateX(-50%);
                transition: background-color 0.2s;
                z-index: 1;
              }

              & .expand-toggle:hover {
                background-color: var(--color-code-expand-hover-bg, var(--color-neutral-600));
              }

/* Light theme variation */
              .code-block--light {
                background-color: var(--color-code-light-bg, var(--color-neutral-100, #f3f4f6));
                color: var(--color-code-light-text, var(--color-neutral-900, #111827));
              }

              .code-block--light & .header {
                background-color: var(--color-code-light-header-bg, var(--color-neutral-200, #e5e7eb));
                border-color: var(--color-code-light-border, var(--color-neutral-300, #d1d5db));
                color: var(--color-code-light-header-text, var(--color-neutral-700, #374151));
              }

/* Responsive adjustments */
              @media (max-width: 640px) {
                .code-block {
                  font-size: var(--text-xs, 0.75rem);
                }

                .code-block--numbered & .content {
                  padding-left: 3rem;
                }

                .code-block--numbered & .line::before {
                  left: -2rem;
                }
              }
            }

/* Datei: ui/components/chip.css */
/*
            * Chip-Komponente
            *
            * Interaktive Chips oder Tags, optional mit Remove-Button.
            */

/**
            * Chips / Tags
            *
            * Kompakte Kennzeichnungselemente für Filterbedingungen, Auswahloptionen oder Status.
            * Chips (auch bekannt als "Tokens") sind interaktive Elemente, die Auswahlen oder Eigenschaften darstellen.
            *
            * @layer: elements
            *
            * Accessibility:
            * - Für auswählbare Chips role="option" verwenden
            * - Fokuszustände gut sichtbar gestalten
            * - Bei löschbaren Chips beschreibende aria-label hinzufügen
            * - Tastaturnavigation unterstützen
            */

            @layer elements {
/* Basis-Chip */
              .chip {
                align-items: center;
                background-color: var(--color-neutral-100, #f3f4f6);
                border-radius: var(--radius-full, 9999px);
                color: var(--color-neutral-800, #1f2937);
                display: inline-flex;
                font-size: var(--text-sm, 0.875rem);
                font-weight: var(--font-medium, 500);
                gap: 0.5rem;
                padding: 0.25rem 0.75rem;
                transition: background-color 0.2s, box-shadow 0.2s;
              }

/* Chip-Größen */
              .chip--sm {
                font-size: var(--text-xs, 0.75rem);
                padding: 0.125rem 0.5rem;
              }

              .chip--md {
                padding: 0.25rem 0.75rem;
              }

              .chip--lg {
                font-size: var(--text-base);
                padding: 0.375rem 1rem;
              }

/* Chip-Farben */
              .chip--primary {
                background-color: var(--color-primary-100, #dbeafe);
                color: var(--color-primary-800, #1e40af);
              }

              .chip--secondary {
                background-color: var(--color-secondary-100, #f1f5f9);
                color: var(--color-secondary-800, #1e293b);
              }

              .chip--success {
                background-color: var(--color-success-100, #d1fae5);
                color: var(--color-success-800, #065f46);
              }

              .chip--warning {
                background-color: var(--color-warning-100, #fef3c7);
                color: var(--color-warning-800, #92400e);
              }

              .chip--danger {
                background-color: var(--color-error-100, #fee2e2);
                color: var(--color-error-800, #991b1b);
              }

              .chip--info {
                background-color: var(--color-info-100, #dbeafe);
                color: var(--color-info-800, #1e40af);
              }

/* Solid-Varianten */
              .chip--solid {
                background-color: var(--color-neutral-600);
                color: white;
              }

              .chip--solid.chip--primary {
                background-color: var(--color-primary-500);
                color: white;
              }

              .chip--solid.chip--secondary {
                background-color: var(--color-secondary-500);
                color: white;
              }

              .chip--solid.chip--success {
                background-color: var(--color-success-500);
                color: white;
              }

              .chip--solid.chip--warning {
                background-color: var(--color-warning-500);
                color: var(--color-warning-900);
              }

              .chip--solid.chip--danger {
                background-color: var(--color-error-500);
                color: white;
              }

              .chip--solid.chip--info {
                background-color: var(--color-info-500);
                color: white;
              }

/* Outline-Varianten */
              .chip--outline {
                background-color: transparent;
                border: 1px solid currentColor;
              }

/* Icon im Chip */
              & .icon {
                display: inline-flex;
                font-size: 1em;
                height: 1em;
                width: 1em;
              }

/* Remove-Button */
              & .remove {
                align-items: center;
                background: transparent;
                border: none;
                border-radius: 50px;
                color: currentColor;
                cursor: pointer;
                display: inline-flex;
                height: 11%.2em;
                justify-content: center;
                margin-right: -0.25rem;
                opacity: 0.7;
                padding: 0;
                transition: opacity 0.2s, background-color 0.2s;
                width: 11%.2em;
              }

              & .remove:hover {
                background-color: rgb(0 0 0 / 1000%);
                opacity: 1;
              }

/* Avatar im Chip */
              & .avatar {
                border-radius: 50px;
                height: 10%.5em;
                margin-left: -0.25rem;
                object-fit: cover;
                width: 10%.5em;
              }

/* Interaktiver Chip */
              .chip--interactive {
                cursor: pointer;
              }

              .chip--interactive:hover {
                background-color: var(--color-neutral-200, #e5e7eb);
              }

              .chip--interactive:focus {
                box-shadow: 0 0 0 2px var(--color-primary-200);
                outline: none;
              }

/* Ausgewählter Chip */
              .chip--selected {
                background-color: var(--color-primary-100, #dbeafe);
                border: 1px solid var(--color-primary-300);
                color: var(--color-primary-800, #1e40af);
              }

              .chip--selected:hover {
                background-color: var(--color-primary-200);
              }

/* Deaktivierter Chip */
              .chip--disabled {
                cursor: not-allowed;
                opacity: 5000%;
              }

              .chip--disabled & .remove {
                cursor: not-allowed;
              }

/* Chip-Gruppe */
              .chip-group {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
              }

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

              .chip-group--vertical {
                flex-direction: column;
              }
            }



/* Datei: ui/components/chat.css */
/**
            * Chat (Live)
            *
            * A live chat interface allows users to exchange messages in real-time.
            * This component includes message bubbles, input area, and conversation layout,
            * suitable for customer support chats, messaging applications, or community discussions.
            *
            * @layer: components
            *
            * Accessibility:
            * - Ensure proper focus management for new messages
            * - Provide clear visual distinctions between sent and received messages
            * - Include proper ARIA roles and labels
            * - Support keyboard navigation throughout the chat interface
            */

            @layer components {
/* Chat container */
              .chat {
                background-color: var(--color-surface-50);
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-lg, 0.5rem);
                display: flex;
                flex-direction: column;
                height: 100%;
                max-height: 60%0px;
                overflow: hidden;
              }

/* Chat header */
              & .header {
                align-items: center;
                background-color: var(--color-surface-100, #f3f4f6);
                border-bottom: 1px solid var(--color-border-200, #e5e7eb);
                display: flex;
                padding: var(--space-3) var(--space-4);
              }

              & .avatar {
                border-radius: var(--radius-full, 9999px);
                height: 3%6px;
                margin-right: var(--space-3);
                object-fit: cover;
                width: 3%6px;
              }

              & .info {
                flex: 1;
              }

              & .name {
                color: var(--color-text-900, #111827);
                font-weight: var(--font-semibold, 600);
                margin: 0;
              }

              & .status {
                align-items: center;
                color: var(--color-text-500, #6b7280);
                display: flex;
                font-size: var(--text-xs, 0.75rem);
              }

              & .status-indicator {
                border-radius: var(--radius-full, 9999px);
                display: inline-block;
                height: 8px;
                margin-right: var(--space-1);
                width: 8px;
              }

              & .status-indicator--online {
                background-color: var(--color-success-500);
              }

              & .status-indicator--offline {
                background-color: var(--color-neutral-400, #9ca3af);
              }

              & .status-indicator--typing {
                animation: pulse 1.5s infinite;
                background-color: var(--color-warning-500);
              }

/* Chat body - message container */
              & .body {
                display: flex;
                flex: 1;
                flex-direction: column;
                overflow-y: auto;
                padding: var(--space-4);
              }

/* Message groups */
              & .message-group {
                margin-bottom: var(--space-4);
              }

              & .message-group--sent {
                align-self: flex-end;
                max-width: 80%;
              }

              & .message-group--received {
                align-self: flex-start;
                max-width: 80%;
              }

/* Individual message */
              & .message {
                border-radius: var(--radius-lg, 0.5rem);
                margin-bottom: var(--space-2);
                padding: var(--space-3);
                position: relative;
                word-wrap: break-word;
              }

              & .message--sent {
                background-color: var(--color-primary-500);
                border-bottom-right-radius: var(--radius-xs);
                color: white;
              }

              & .message--received {
                background-color: var(--color-surface-200);
                border-bottom-left-radius: var(--radius-xs);
                color: var(--color-text-900, #111827);
              }

/* Message metadata */
              & .message-time {
                font-size: var(--text-xs, 0.75rem);
                margin-top: var(--space-1);
                opacity: 8000%;
                text-align: right;
              }

/* System messages */
              & .system-message {
                align-self: center;
                background-color: var(--color-surface-100, #f3f4f6);
                border-radius: var(--radius-md, 0.375rem);
                color: var(--color-text-400);
                font-size: var(--text-xs, 0.75rem);
                margin: var(--space-4) 0;
                padding: var(--space-2);
                text-align: center;
              }

/* Typing indicator */
              & .typing {
                align-items: center;
                color: var(--color-text-500, #6b7280);
                display: flex;
                font-size: var(--text-xs, 0.75rem);
                margin-top: var(--space-2);
              }

              & .typing-dots {
                display: flex;
                margin-left: var(--space-2);
              }

              & .typing-dot {
                animation: typingAnimation 1.4s infinite;
                animation-fill-mode: both;
                background-color: var(--color-text-400);
                border-radius: var(--radius-full, 9999px);
                height: 6px;
                margin-right: 3px;
                width: 6px;
              }

              & .typing-dot:nth-child(2) {
                animation-delay: 0.2s;
              }

              & .typing-dot:nth-child(3) {
                animation-delay: 0.4s;
              }

              @keyframes typingAnimation {
                0 { opacity: 4000%; transform: translateY(0%); }

                50 { opacity: 1; transform: translateY(-4px); }

                100 { opacity: 4000%; transform: translateY(0%); }
              }

/* Chat footer - input area */
              & .footer {
                background-color: var(--color-surface-100, #f3f4f6);
                border-top: 1px solid var(--color-border-200, #e5e7eb);
                padding: var(--space-3);
              }

              & .input-container {
                align-items: flex-end;
                display: flex;
              }

              & .input {
                background-color: var(--color-surface-50);
                border: 1px solid var(--color-border-200, #e5e7eb);
                border-radius: var(--radius-lg, 0.5rem);
                flex: 1;
                max-height: 12%0px;
                min-height: 4%4px;
                overflow-y: auto;
                padding: var(--space-2) var(--space-3);
                resize: none;
              }

              & .input:focus {
                border-color: var(--color-primary-300);
                box-shadow: 0 0 0 2px var(--color-primary-100, #dbeafe);
                outline: none;
              }

              & .send {
                align-items: center;
                background-color: var(--color-primary-500);
                border: none;
                border-radius: var(--radius-full, 9999px);
                color: white;
                cursor: pointer;
                display: flex;
                height: 4%0px;
                justify-content: center;
                margin-left: var(--space-2);
                transition: background-color 0.2s;
                width: 4%0px;
              }

              & .send:hover {
                background-color: var(--color-primary-600, #2563eb);
              }

              & .send:disabled {
                background-color: var(--color-neutral-300, #d1d5db);
                cursor: not-allowed;
              }

/* Attachment button */
              & .attachment {
                background: none;
                border: none;
                border-radius: var(--radius-full, 9999px);
                color: var(--color-text-500, #6b7280);
                cursor: pointer;
                margin-right: var(--space-2);
                padding: var(--space-2);
              }

              & .attachment:hover {
                background-color: var(--color-surface-200);
              }

/* Empty state */
              & .empty {
                align-items: center;
                color: var(--color-text-400);
                display: flex;
                flex-direction: column;
                height: 100%;
                justify-content: center;
                padding: var(--space-4);
                text-align: center;
              }

/* Responsive adjustments */
              @media (max-width: 640px) {
                & .message-group--sent,
                & .message-group--received {
                  max-width: 90%;
                }
              }
            }

/* Datei: ui/components/card.css */
/*
            * Cards Module
            *
            * Layoutregeln für ein responsives Card-Grid. Nutzt Flexbox und Grid für flexible Layouts.
            */

/**
            * Card-Modul
            *
            * Container für Inhaltsblöcke, die zusammengehörende Informationen präsentieren.
            * Cards bieten eine visuelle Gruppierung von zusammengehörigen Inhalten und Aktionen.
            *
            * @layer components.card
            *
            * Grundlegende Verwendung:
            * <div class="card">
            *   <h3>Kartentitel</h3>
            *   <p>Karteninhalt</p>
            * </div>
            *
            * Mit Grid-Layout:
            * <div class="card-grid">
            *   <div class="card">Karte 1</div>
            *   <div class="card">Karte 2</div>
            *   <div class="card">Karte 3</div>
            * </div>
            *
            * Varianten (können mit Utility-Klassen kombiniert werden):
            * <div class="card primary">Primäre Karte</div>
            * <div class="card surface">Karte mit Hintergrundfarbe</div>
            * <div class="card border">Karte mit Rahmen</div>
            * <div class="card shadow-lg">Karte mit stärkerem Schatten</div>
            * <div class="card p-6">Karte mit mehr Padding</div>
            *
            * Flüssig skalierende Karte:
            * <div class="card fluid">
            *   <h3>Adaptive Karte</h3>
            *   <p>Diese Karte skaliert flüssig mit der Container-Größe</p>
            * </div>
            */


/**
            * Card Component Structure:
            *
            * <div class="card">
            *   <div class="card-header">
            *     <h3 class="card-title">Card Title</h3>
            *     <div class="card-actions"><!-- Actions --></div>
            *   </div>
            *   <div class="card-content">
            *     <!-- Main card content -->
            *   </div>
            *   <div class="card-footer">
            *     <!-- Footer content -->
            *   </div>
            * </div>
            *
            * Modifiers: .card--bordered, .card--elevated, .card--compact
            * Layout: .card--horizontal, .card--vertical
            */
            @layer components {
              .card-grid {
                display: grid;
                gap: var(--card-grid-gap, var(--space-4, 1rem));
                grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width, 250px), 1fr));
              }

              .card {
                background-color: var(--color-surface, var(--color-surface-elevated, #fff));
                border-radius: var(--radius-card, var(--radius-md, 0.375rem));
                box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));
                display: flex;
                flex-direction: column;
                gap: var(--card-gap, var(--space-3, 0.75rem));
                padding: var(--card-padding, var(--space-4, 1rem));

/* Element-Styling */
                h3 {
                  font-size: var(--font-size-lg);
                  margin: 0;
                }

                img {
                  border-radius: var(--radius-sm, 0.125rem);
                  object-fit: cover;
                  width: 100%;
                }

/* Flüssig skalierende Karte mit interpolate-size */
                &.fluid {
                  container-name: card;
                  container-type: inline-size;

/* Font-Größen mit CSS-Schlüsselwörtern für flüssige Interpolation */
                  h3 {
                    font-size: large; /* Wird durch interpolate-size flüssiger */
                  }

                  p {
                    font-size: medium; /* Wird durch interpolate-size flüssiger */
                  }

/* Flüssige Container-basierte Anpassungen */
                  @container card (min-width: 300px) {
                    padding: var(--space-5);

                    h3 {
                      font-size: x-large;
                    }

                    p {
                      font-size: large;
                    }
                  }

                  @container card (min-width: 400px) {
                    padding: var(--space-6);

                    h3 {
                      font-size: xx-large;
                    }

                    p {
                      font-size: x-large;
                    }
                  }
                }

/* Varianten */
                &.primary {
                  background-color: var(--color-primary, #3b82f6);
                  color: white;
                }

                &.surface {
                  background-color: var(--color-surface);
                }

                &.border {
                  border: 1px solid var(--color-gray-200);
                  box-shadow: none;
                }

/* Layout-Varianten */
                &.horizontal {
                  align-items: center;
                  flex-direction: row;

                  img {
                    height: 12%0px;
                    width: 12%0px;
                  }
                }

/* Interaktive Varianten */
                &.interactive {
                  cursor: pointer;
                  transition: transform 0.2s ease, box-shadow 0.2s ease;

                  &:hover {
                    box-shadow: var(--shadow-md);
                    transform: translateY(-4px);
                  }
                }
              }
            }




/* Datei: ui/components/caption.css */
/**
            * Caption
            *
            * Captions provide additional contextual information for images, tables, figures,
            * or other media content. They help users understand the content and provide
            * necessary explanations or attributions.
            *
            * @layer: components
            *
            * Accessibility:
            * - Use appropriate HTML semantics (figcaption with figure)
            * - Maintain sufficient text contrast
            * - Don't rely on captions alone for conveying critical information
            */

            @layer components {
/* Base caption style */
              .caption {
                color: var(--color-text-500, #6b7280);
                font-size: var(--text-xs, 0.75rem);
                line-height: 1.5;
                margin-top: var(--space-2);
                max-width: 100%;
              }

/* Figure with caption */
              .figure {
                display: inline-block;
                margin: 0;
                max-width: 100%;
              }

              & .image {
                display: block;
                height: auto;
                max-width: 100%;
              }

              & .caption {
                padding: var(--space-2);
                text-align: center;
              }

/* Caption alignments */
              .caption--start {
                text-align: left;
              }

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

              .caption--end {
                text-align: right;
              }

/* Caption with attribution */
              & .attribution {
                color: var(--color-text-400);
                display: inline-block;
                font-style: italic;
                margin-top: var(--space-1);
              }

/* Caption for tables */
              .table-caption {
                border-top: 1px solid var(--color-border-100, #f3f4f6);
                caption-side: bottom;
                padding: var(--space-2);
              }

/* Extended caption with title and description */
              .caption--extended {
                display: flex;
                flex-direction: column;
                gap: var(--space-1);
              }

              & .title {
                color: var(--color-text-900, #111827);
                font-weight: var(--font-medium, 500);
              }

              & .description {
                color: var(--color-text-500, #6b7280);
              }

/* Variants */
              .caption--bordered {
                border-top: 1px solid var(--color-border-200, #e5e7eb);
                padding-top: var(--space-2);
              }

              .caption--boxed {
                background-color: var(--color-surface-50);
                border-radius: var(--radius-sm, 0.125rem);
                padding: var(--space-2);
              }

/* Caption with interaction (e.g., for expandable captions) */
              .caption--interactive {
                cursor: pointer;
                padding-right: var(--space-6);
                position: relative;
              }

              .caption--interactive::after {
                border-color: var(--color-text-400) transparent transparent transparent;
                border-style: solid;
                border-width: 5px;
                content: "";
                position: absolute;
                right: var(--space-2);
                top: 50%;
                transform: translateY(-50%);
                transition: transform 0.2s ease;
              }

              .caption--interactive.caption--expanded::after {
                transform: translateY(-50%) rotate(180deg);
              }

/* Expandable caption content */
              & .expandable {
                display: none;
                margin-top: var(--space-2);
              }

              .caption--expanded & .expandable {
                display: block;
              }
            }

/* Datei: ui/components/breadcrumbs.css */
/**
            * Breadcrumbs
            *
            * Breadcrumbs show the hierarchical path to the current page, helping users
            * understand their location within the site structure and navigate back to
            * higher-level pages.
            *
            * @layer: components
            *
            * Accessibility:
            * - Use nav element with aria-label="Breadcrumb"
            * - Use ordered list (ol) for the breadcrumb items
            * - Current page should have aria-current="page"
            */

            @layer components {
/* Breadcrumbs container */
              .breadcrumbs {
                align-items: center;
                color: var(--color-text-500, #6b7280);
                display: flex;
                font-size: var(--text-sm, 0.875rem);
                margin: var(--space-2) 0;
                padding: var(--space-2);
              }

/* Breadcrumbs list */
              & .list {
                align-items: center;
                display: flex;
                flex-wrap: wrap;
                list-style: none;
                margin: 0;
                padding: 0;
              }

/* Breadcrumb item */
              & .item {
                align-items: center;
                display: flex;
              }

/* Breadcrumb separator */
              & .separator {
                align-items: center;
                color: var(--color-text-300);
                display: inline-flex;
                margin: 0 var(--space-2);
              }

/* Default separator icon (can be customized) */
              & .separator::before {
                content: "/";
                font-size: 0.85em;
              }

/* Breadcrumb link */
              & .link {
                color: var(--color-primary-500);
                text-decoration: none;
                transition: color 0.2s ease;
              }

              & .link:hover {
                color: var(--color-primary-700, #1d4ed8);
                text-decoration: underline;
              }

/* Current page (last item) */
              & .current {
                color: var(--color-text-900, #111827);
                font-weight: var(--font-medium, 500);
              }

/* Truncated breadcrumbs for narrow viewports */
              .breadcrumbs--truncated & .item {
                display: none;
              }

              .breadcrumbs--truncated & .item:first-child,
              .breadcrumbs--truncated & .item:nth-last-child(2),
              .breadcrumbs--truncated & .item:last-child {
                display: flex;
              }

/* Ellipsis for truncated items */
              .breadcrumbs--truncated & .item:nth-last-child(2)::before {
                color: var(--color-text-300);
                content: "...";
                margin: 0 var(--space-2);
              }

/* Responsive adjustments */
              @media (max-width: 640px) {
                .breadcrumbs {
                  font-size: var(--text-xs, 0.75rem);
                }

/* Auto-truncate on mobile */
                .breadcrumbs:not(.breadcrumbs--keep-all) & .item:not(:first-child, :last-child) {
                  display: none;
                }

                .breadcrumbs:not(.breadcrumbs--keep-all) & .item:first-child + & .item:not(:last-child) {
                  display: flex;
                }

                .breadcrumbs:not(.breadcrumbs--keep-all) & .item:first-child + & .item::before {
                  color: var(--color-text-300);
                  content: "...";
                  margin: 0 var(--space-2);
                }
              }
            }

/* Datei: ui/components/blockquote.css */
/**
            * Blockquote-Element Styles
            */

            @layer elements {
/* Zitate */
              blockquote {
                background-color: var(--color-background-alt, #f9fafb);
                border-left: 4px solid var(--color-primary, #3b82f6);
                margin: 1rem 0;
                padding: 1rem;
              }

              q {
                quotes: '"' '"' "'" "'";
              }
            }

/* Datei: ui/components/badge.css */
/**
            * Badges
            *
            * Badges are small visual indicators typically used to display counts,
            * status, or labels. They can highlight new or unread items, categorize
            * content, or show the status of an item.
            *
            * @layer: components
            *
            * Accessibility:
            * - Ensure sufficient color contrast
            * - For status indicators, consider using aria-label to convey meaning
            * - For count badges, ensure numbers are announced properly
            */


/**
            * Badge Component Structure:
            *
            * <span class="badge badge--primary">
            *   <span class="badge-content">Badge text</span>
            * </span>
            *
            * Types: .badge--primary, .badge--secondary, .badge--success, .badge--warning, .badge--error
            * Sizes: .badge--xs, .badge--sm, .badge--md, .badge--lg
            * Shapes: .badge--rounded, .badge--pill
            */
            @layer components {
/* Base badge styles */
              .badge {
                align-items: center;
                background-color: var(--color-primary-500);
                border-radius: var(--radius-full, 9999px);
                color: var(--color-text-inverse, white);
                display: inline-flex;
                font-size: var(--text-xs, 0.75rem);
                font-weight: var(--font-medium, 500);
                justify-content: center;
                line-height: 1%;
                padding: var(--badge-padding-md, 0.25rem 0.5rem);
                white-space: nowrap;
              }

/* Badge sizes */
              .badge--xs {
                font-size: 0.65rem;
                height: var(--badge-min-width-xs, 1.2rem);
                min-width: var(--badge-min-width-xs, 1.2rem);
                padding: var(--badge-padding-xs, 0.15rem 0.35rem);
              }

              .badge--sm {
                height: var(--badge-min-width-sm, 1.5rem);
                min-width: var(--badge-min-width-sm, 1.5rem);
                padding: var(--badge-padding-sm, 0.2rem 0.4rem);
              }

              .badge--md {
                height: var(--badge-min-width-md, 1.75rem);
                min-width: var(--badge-min-width-md, 1.75rem);
                padding: var(--badge-padding-md, 0.25rem 0.5rem);
              }

              .badge--lg {
                font-size: var(--text-sm, 0.875rem);
                height: var(--badge-min-width-lg, 2rem);
                min-width: var(--badge-min-width-lg, 2rem);
                padding: var(--badge-padding-lg, 0.3rem 0.6rem);
              }

/* Badge shapes */
              .badge--rounded {
                border-radius: var(--radius-md, 0.375rem);
              }

              .badge--square {
                border-radius: var(--radius-sm, 0.125rem);
              }

/* Dot variant (no content, just a colored dot) */
              .badge--dot {
                height: 0%.5rem;
                min-width: auto;
                padding: 0;
                width: 0%.5rem;
              }

              .badge--dot.badge--sm {
                height: 0%.375rem;
                width: 0%.375rem;
              }

              .badge--dot.badge--lg {
                height: 0%.75rem;
                width: 0%.75rem;
              }

/* Badge with icon */
              & .icon {
                height: 0%.875em;
                margin-right: 0%.25em;
                width: 0%.875em;
              }

              .badge--icon-only {
                padding: 0.25rem;
              }

              .badge--icon-only & .icon {
                margin-right: 0%;
              }

/* Badge color variants */
              .badge--primary {
                background-color: var(--color-primary-500);
                color: var(--color-text-inverse, white);
              }

              .badge--secondary {
                background-color: var(--color-secondary-500);
                color: var(--color-text-inverse, white);
              }

              .badge--success {
                background-color: var(--color-success-500);
                color: var(--color-text-inverse, white);
              }

              .badge--danger {
                background-color: var(--color-error-500);
                color: var(--color-text-inverse, white);
              }

              .badge--warning {
                background-color: var(--color-warning-500);
                color: var(--color-warning-900);
              }

              .badge--info {
                background-color: var(--color-info-500);
                color: var(--color-text-inverse, white);
              }

              .badge--neutral {
                background-color: var(--color-neutral-500, #6b7280);
                color: var(--color-text-inverse, white);
              }

/* Badge soft/pastel variants */
              .badge--primary-soft {
                background-color: var(--color-primary-100, #dbeafe);
                color: var(--color-primary-800, #1e40af);
              }

              .badge--secondary-soft {
                background-color: var(--color-secondary-100, #f1f5f9);
                color: var(--color-secondary-800, #1e293b);
              }

              .badge--success-soft {
                background-color: var(--color-success-100, #d1fae5);
                color: var(--color-success-800, #065f46);
              }

              .badge--danger-soft {
                background-color: var(--color-error-100, #fee2e2);
                color: var(--color-error-800, #991b1b);
              }

              .badge--warning-soft {
                background-color: var(--color-warning-100, #fef3c7);
                color: var(--color-warning-800, #92400e);
              }

              .badge--info-soft {
                background-color: var(--color-info-100, #dbeafe);
                color: var(--color-info-800, #1e40af);
              }

              .badge--neutral-soft {
                background-color: var(--color-neutral-100, #f3f4f6);
                color: var(--color-neutral-800, #1f2937);
              }

/* Badge outline variants */
              .badge--outline {
                background-color: transparent;
                border: 1px solid currentColor;
              }

              .badge--primary-outline {
                border-color: var(--color-primary-500);
                color: var(--color-primary-500);
              }

              .badge--secondary-outline {
                border-color: var(--color-secondary-500);
                color: var(--color-secondary-500);
              }

              .badge--success-outline {
                border-color: var(--color-success-500);
                color: var(--color-success-500);
              }

              .badge--danger-outline {
                border-color: var(--color-error-500);
                color: var(--color-error-500);
              }

              .badge--warning-outline {
                border-color: var(--color-warning-500);
                color: var(--color-warning-500);
              }

              .badge--info-outline {
                border-color: var(--color-info-500);
                color: var(--color-info-500);
              }

              .badge--neutral-outline {
                border-color: var(--color-neutral-500, #6b7280);
                color: var(--color-neutral-500, #6b7280);
              }

/* Badge positioning (for overlays) */
              .badge-container {
                position: relative;
              }

              .badge--top-right {
                position: absolute;
                right: -0.375rem;
                top: -0.375rem;
              }

              .badge--top-left {
                left: -0.375rem;
                position: absolute;
                top: -0.375rem;
              }

              .badge--bottom-right {
                bottom: -0.375rem;
                position: absolute;
                right: -0.375rem;
              }

              .badge--bottom-left {
                bottom: -0.375rem;
                left: -0.375rem;
                position: absolute;
              }

/* Animated badge */
              .badge--overlap {
                border: 2px solid var(--color-background, white);
              }

              .badge--pulse {
                animation: pulse 2s infinite;
              }

/* Max count display */
              .badge--max-count::after {
                content: '+';
              }
            }

/* Datei: ui/components/back-to-top.css */
/**
            * Back to Top
            *
            * A back-to-top button allows users to quickly navigate to the top of a page,
            * especially useful for long-scrolling content. It typically appears after
            * the user scrolls down a certain distance.
            *
            * @layer: components
            *
            * Accessibility:
            * - Include descriptive text or aria-label
            * - Ensure keyboard accessibility
            * - Consider adding a focus state
            * - Provide sufficient contrast for visibility
            */

            @layer components {
/* Back to top button container */
              .back-to-top {
                bottom: var(--space-4);
                opacity: 0%;
                position: fixed;
                right: var(--space-4);
                transform: translateY(10px);
                transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
                visibility: hidden;
                z-index: var(--z-back-to-top, 50);
              }

/* Visible state (activated on scroll) */
              .back-to-top--visible {
                opacity: 1;
                transform: translateY(0%);
                visibility: visible;
              }

/* Button element */
              & .button {
                align-items: center;
                background-color: var(--color-primary-500);
                border: none;
                border-radius: var(--radius-full, 9999px);
                box-shadow: var(--shadow-md);
                color: white;
                cursor: pointer;
                display: flex;
                height: 4%8px;
                justify-content: center;
                transition: background-color 0.2s, transform 0.2s;
                width: 4%8px;
              }

              & .button:hover {
                background-color: var(--color-primary-600, #2563eb);
                transform: translateY(-2px);
              }

              & .button:active {
                transform: translateY(0%);
              }

              & .button:focus {
                box-shadow: 0 0 0 3px var(--color-primary-200), var(--shadow-md);
                outline: none;
              }

/* Icon */
              & .icon {
                height: 2%4px;
                width: 2%4px;
              }

/* Text variant (with label) */
              .back-to-top--with-text & .button {
                padding: 0 var(--space-4);
                width: auto;
              }

              & .text {
                font-size: var(--text-sm, 0.875rem);
                font-weight: var(--font-medium, 500);
                margin-left: var(--space-2);
              }

/* Button shape variants */
              .back-to-top--square & .button {
                border-radius: var(--radius-md, 0.375rem);
              }

/* Button color variants */
              .back-to-top--secondary & .button {
                background-color: var(--color-secondary-500);
              }

              .back-to-top--secondary & .button:hover {
                background-color: var(--color-secondary-600);
              }

              .back-to-top--secondary & .button:focus {
                box-shadow: 0 0 0 3px var(--color-secondary-200), var(--shadow-md);
              }

              .back-to-top--neutral & .button {
                background-color: var(--color-neutral-700, #374151);
              }

              .back-to-top--neutral & .button:hover {
                background-color: var(--color-neutral-800, #1f2937);
              }

              .back-to-top--neutral & .button:focus {
                box-shadow: 0 0 0 3px var(--color-neutral-300, #d1d5db), var(--shadow-md);
              }

/* Positions */
              .back-to-top--bottom-center {
                right: 50%;
                transform: translateX(50%) translateY(10px);
              }

              .back-to-top--bottom-center.back-to-top--visible {
                transform: translateX(50%) translateY(0);
              }

              .back-to-top--bottom-left {
                left: var(--space-4);
                right: auto;
              }

/* Size variants */
              .back-to-top--sm & .button {
                height: 4%0px;
                width: 4%0px;
              }

              .back-to-top--sm & .icon {
                height: 2%0px;
                width: 2%0px;
              }

              .back-to-top--lg & .button {
                height: 5%6px;
                width: 5%6px;
              }

              .back-to-top--lg & .icon {
                height: 2%8px;
                width: 2%8px;
              }

/* Progress variant (circular progress indicator) */
              .back-to-top--progress & .button {
                position: relative;
              }

              & .progress {
                border-radius: var(--radius-full, 9999px);
                height: 100%;
                left: 0%;
                pointer-events: none;
                position: absolute;
                top: 0%;
                width: 100%;
              }

              & .progress-circle {
                fill: none;
                stroke: var(--color-primary-300);
                stroke-linecap: round;
                stroke-width: 3%;
                transform: rotate(-90deg);
                transform-origin: 50% 50;
                transition: stroke-dashoffset 0.2s;
              }

/* Responsive adjustments */
              @media (max-width: 640px) {
                .back-to-top {
                  bottom: var(--space-3);
                  right: var(--space-3);
                }

                & .button {
                  height: 4%0px;
                  width: 4%0px;
                }

                & .icon {
                  height: 2%0px;
                  width: 2%0px;
                }

                .back-to-top--bottom-left {
                  left: var(--space-3);
                }
              }
            }

/* Datei: ui/components/avatar.css */
/*
            * Avatar
            *
            * Circular user images with optional status indicators.
            */

/**
            * Component Documentation
            *
            * Avatars visually represent users or entities, typically as profile pictures,
            * initials, or icons. They can be displayed in various sizes and shapes and
            * can include status indicators.
            *
            * @layer: elements
            *
            * Compatibility:
            * - Full support in modern browsers
            * - Fallbacks for older browsers without CSS variables
            * - Functional in high-contrast mode
            *
            * Basic usage:
            * <div class="avatar">
            *   <img class="image" src="user.jpg" alt="User Name">
            * </div>
            *
            * With status:
            * <div class="avatar">
            *   <img class="image" src="user.jpg" alt="User Name">
            *   <span class="status status--online" aria-label="Online status"></span>
            * </div>
            *
            * With initials:
            * <div class="avatar avatar--placeholder">JD</div>
            *
            * Sizes:
            * <div class="avatar avatar--xs">...</div>
            * <div class="avatar avatar--sm">...</div>
            * <div class="avatar avatar--md">...</div> (default)
            * <div class="avatar avatar--lg">...</div>
            * <div class="avatar avatar--xl">...</div>
            *
            * Shapes:
            * <div class="avatar">...</div> (circular)
            * <div class="avatar avatar--rounded">...</div> (rounded corners)
            * <div class="avatar avatar--square">...</div> (square with slight rounding)
            *
            * Colors:
            * <div class="avatar avatar--primary">...</div>
            * <div class="avatar avatar--secondary">...</div>
            * <div class="avatar avatar--success">...</div>
            * <div class="avatar avatar--warning">...</div>
            * <div class="avatar avatar--danger">...</div>
            * <div class="avatar avatar--info">...</div>
            */

            @layer elements {
/* Base Avatar */
              .avatar {
                align-items: center;
                background-color: var(--color-neutral-200, #e5e7eb);
                border-radius: var(--radius-full, 9999px);
                color: var(--color-neutral-700, #374151);
                display: inline-flex;
                font-weight: var(--font-medium, 500);
                height: 3rem;
                justify-content: center;
                overflow: hidden;
                position: relative;
                width: 3rem;
              }

/* Avatar Sizes */
              .avatar--xs {
                font-size: var(--text-xs, 0.75rem);
                height: 1%.5rem;
                width: 1%.5rem;
              }

              .avatar--sm {
                font-size: var(--text-sm, 0.875rem);
                height: 2rem;
                width: 2rem;
              }

              .avatar--md {
                font-size: var(--text-base);
                height: 3rem;
                width: 3rem;
              }

              .avatar--lg {
                font-size: var(--text-lg);
                height: 4rem;
                width: 4rem;
              }

              .avatar--xl {
                font-size: var(--text-xl);
                height: 6rem;
                width: 6rem;
              }

/* Avatar Shapes */
              .avatar--rounded {
                border-radius: var(--radius-lg, 0.5rem);
              }

              .avatar--square {
                border-radius: var(--radius-md, 0.375rem);
              }

/* Avatar Image */
              & .image {
                height: 100%;
                object-fit: cover;
                width: 100%;
              }

/* Status Indicator */
              & .status {
                background-color: var(--color-neutral-400, #9ca3af);
                border: 2px solid var(--color-surface-100, #f3f4f6);
                border-radius: var(--radius-full, 9999px);
                bottom: 0%;
                height: 2%5%;
                max-height: 1rem;
                max-width: 1rem;
                min-height: 0%.5rem;
                min-width: 0%.5rem;
                position: absolute;
                right: 0%;
                width: 2%5%;
              }

              & .status--online {
                background-color: var(--color-success-500);
              }

              & .status--busy {
                background-color: var(--color-error-500);
              }

              & .status--away {
                background-color: var(--color-warning-500);
              }

              & .status--offline {
                background-color: var(--color-neutral-400, #9ca3af);
              }

/* Avatar Group */
              .avatar-group {
                display: inline-flex;
              }

              .avatar-group .avatar {
                border: 2px solid var(--color-surface-100, #f3f4f6);
                margin-left: -0.75rem;
              }

              .avatar-group .avatar:first-child {
                margin-left: 0%;
              }

/* Avatar with Placeholder */
              .avatar--placeholder {
                background-color: var(--color-neutral-200, #e5e7eb);
                color: var(--color-neutral-700, #374151);
                font-weight: var(--font-medium, 500);
              }

/* Colored Avatars */
              .avatar--primary {
                background-color: var(--color-primary-100, #dbeafe);
                color: var(--color-primary-800, #1e40af);
              }

              .avatar--secondary {
                background-color: var(--color-secondary-100, #f1f5f9);
                color: var(--color-secondary-800, #1e293b);
              }

              .avatar--success {
                background-color: var(--color-success-100, #d1fae5);
                color: var(--color-success-800, #065f46);
              }

              .avatar--warning {
                background-color: var(--color-warning-100, #fef3c7);
                color: var(--color-warning-800, #92400e);
              }

              .avatar--danger {
                background-color: var(--color-error-100, #fee2e2);
                color: var(--color-error-800, #991b1b);
              }

              .avatar--info {
                background-color: var(--color-info-100, #dbeafe);
                color: var(--color-info-800, #1e40af);
              }
            }

/* Datei: ui/components/alert.css */
/*
            * Alert Component
            *
            * Visual cues for success, warning, error, or information messages.
            */

/**
            * Alert Component
            *
            * Information and warning messages for important notifications to users.
            * Alerts can be used to display success, error, warning, or informative messages.
            *
            * @layer: components
            *
            * Compatibility:
            * - Full support in modern browsers
            * - Fallbacks for CSS variables
            * - Uses CSS animation with standard keyframes
            *
            * Usage:
            * <div class="alert">Standard alert</div>
            *
            * Variants:
            * <div class="alert-info">Info alert</div>
            * <div class="alert-success">Success alert</div>
            * <div class="alert-warning">Warning alert</div>
            * <div class="alert-error">Error alert</div>
            *
            * Sizes:
            * <div class="alert-info alert--sm">Small alert</div>
            * <div class="alert-info">Default size alert</div>
            * <div class="alert-info alert--lg">Large alert</div>
            *
            * With Icon:
            * <div class="alert-info alert--with-icon">
            *   <span class="icon"><!-- Icon here --></span>
            *   <div class="alert-content">Alert with icon</div>
            * </div>
            *
            * Dismissible:
            * <div class="alert-info alert--dismissible">
            *   <div class="alert-content">Dismissible alert</div>
            *   <button class="alert-close">×</button>
            * </div>
            */

/**
            * Alert Component Structure:
            *
            * <div class="alert alert--info" role="alert">
            *   <div class="alert-icon"><!-- Icon --></div>
            *   <div class="alert-content">
            *     <div class="alert-title">Alert Title</div>
            *     <div class="alert-message">Alert message content</div>
            *   </div>
            *   <button class="alert-close" aria-label="Close">&times;</button>
            * </div>
            *
            * Types: .alert--info, .alert--success, .alert--warning, .alert--error
            * Modifiers: .alert--dismissible, .alert--compact
            */

/* Animations - defined outside of @layer */

/* Component styles */
            @layer components {
/* Base component style */
              .alert {
                align-items: start;
                background-color: var(--color-neutral-100, #f3f4f6);
                border-radius: var(--alert-border-radius, var(--radius-md, 0.5rem));
                display: flex;
                font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
                gap: var(--alert-gap, var(--space-3, 0.75rem));
                padding: var(--alert-padding, var(--space-4, 1rem));
              }

/* Variants */
              .alert-info {
                background-color: var(--color-info-100, #e0f2fe);
                color: var(--color-info-800, #1e40af);
                composes: alert;
              }

              .alert-success {
                background-color: var(--color-success-100, #dcfce7);
                color: var(--color-success-800, #166534);
                composes: alert;
              }

              .alert-warning {
                background-color: var(--color-warning-100, #fef3c7);
                color: var(--color-warning-800, #854d0e);
                composes: alert;
              }

              .alert-error {
                background-color: var(--color-error-100, #fee2e2);
                color: var(--color-error-800, #991b1b);
                composes: alert;
              }

/* Sizes */
              .alert--sm {
                font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
                padding: var(--alert-padding-sm, var(--space-2, 0.5rem));
              }

              .alert--lg {
                font-size: var(--text-base, var(--font-size-base, 1rem));
                padding: var(--alert-padding-lg, var(--space-5, 1.25rem));
              }

/* Icon integration */
              .alert--with-icon {
                padding-left: var(--space-3, 0.75rem);
              }

              .alert--with-icon .icon {
                flex-shrink: 0;
                font-size: 1.25rem;
                line-height: 1%;
              }

/* Dismissible state */
              .alert--dismissible {
                padding-right: var(--space-3, 0.75rem);
              }

/* Internal elements */
              .alert-content {
                flex: 1;
              }

              .alert-close {
                background: none;
                border: none;
                color: currentcolor;
                cursor: pointer;
                flex-shrink: 0;
                font-size: 1.25rem;
                line-height: 1%;
                margin-left: auto;
                opacity: 5000%;
                transition: opacity var(--transition-duration-fast, 150ms) var(--transition-timing-ease, ease);
              }

              .alert-close:hover {
                opacity: 75%;
              }
            }

/* Animation styles */
            @layer animations {
              .alert--animate {
                animation-duration: 0.3s;
                animation-name: fadeIn;
                animation-timing-function: ease-out;
              }
            }

/* Datei: ui/components/action-bar.css */
/**
            * Action Bar/Sheet
            *
            * An action bar or sheet provides quick access to common actions or navigation options,
            * typically displayed at the bottom of the screen (mobile) or as a popover menu.
            *
            * @layer: components
            *
            * Accessibility:
            * - Ensure all interactive elements are keyboard accessible
            * - Use appropriate ARIA roles (e.g., menu, menuitem)
            * - Provide clear focus states
            */

            @layer components {
/* Base action bar */
              .action-bar {
                align-items: center;
                background-color: var(--color-surface-100, #f3f4f6);
                box-shadow: var(--shadow-md);
                display: flex;
                justify-content: space-between;
                padding: var(--space-4);
                z-index: var(--z-action-bar, 40);
              }

/* Fixed position at bottom */
              .action-bar--fixed {
                border-top: 1px solid var(--color-border-200, #e5e7eb);
                bottom: 0%;
                left: 0%;
                position: fixed;
                right: 0%;
              }

/* Action sheet (full-width expandable panel) */
              .action-sheet {
                background-color: var(--color-surface-100, #f3f4f6);
                border-top-left-radius: var(--radius-lg, 0.5rem);
                border-top-right-radius: var(--radius-lg, 0.5rem);
                bottom: 0%;
                box-shadow: var(--shadow-lg);
                left: 0%;
                position: fixed;
                right: 0%;
                transform: translateY(100%);
                transition: transform 0.3s ease;
                z-index: var(--z-action-sheet, 50);
              }

/* Visible state */
              .action-sheet--visible {
                transform: translateY(0%);
              }

/* Sheet header with drag indicator */
              & .header {
                align-items: center;
                display: flex;
                justify-content: center;
                padding: var(--space-2);
              }

/* Drag indicator */
              & .indicator {
                background-color: var(--color-neutral-300, #d1d5db);
                border-radius: 2px;
                height: 4px;
                width: 3%6px;
              }

/* Sheet content */
              & .content {
                max-height: 80%;
                -webkit-overflow-scrolling: touch;
                overflow-y: auto;
                padding: var(--space-4);
              }

/* Action items */
              .action-item {
                align-items: center;
                border-radius: var(--radius-md, 0.375rem);
                cursor: pointer;
                display: flex;
                padding: var(--space-3);
                transition: background-color 0.2s ease;
              }

              .action-item:hover {
                background-color: var(--color-surface-200);
              }

/* Action item with icon */
              & .icon {
                color: var(--color-primary-500);
                margin-right: var(--space-3);
              }

/* Action item label */
              & .label {
                font-size: var(--text-sm, 0.875rem);
                font-weight: var(--font-medium, 500);
              }

/* Responsive adjustments */
              @media (min-width: 768px) {
                .action-sheet {
                  border-radius: var(--radius-lg, 0.5rem);
                  left: 50%;
                  max-width: 48%0px;
                  transform: translateX(-50%) translateY(100);
                }

                .action-sheet--visible {
                  transform: translateX(-50%) translateY(0);
                }
              }
            }