/*
 * WDT Components - Standalone Theme
 *
 * Vollstaendiges Standalone-Theme fuer WDT-Komponenten.
 * Enthaelt alle Kendo CSS-Variablen UND Komponent-Klassen (k-*),
 * die von WDTComponents benoetigt werden.
 *
 * Extrahiert aus dem Kendo Fluent Light Theme (wdt30light.css, 1.7 MB)
 * auf nur die benoetigten ~80 Variablen und ~27 Komponent-Klassen.
 *
 * Verwendung in index.html / App.razor:
 *   <link href="_content/WDT30.WDTComponents/wdt-theme-standalone.css" rel="stylesheet" />
 *
 * WICHTIG: Diese Datei ist NUR noetig, wenn KEIN Telerik/Kendo-Theme geladen ist.
 * Bei geladenem Telerik-Theme werden die hier definierten Styles ueberschrieben.
 *
 * Zum Anpassen: Einfach die Werte in :root ueberschreiben.
 */


/* ============================================================================
   TEIL 1: CSS CUSTOM PROPERTIES (:root Variablen)
   ============================================================================ */

:root {
    /* ================================================================
       PRIMARY COLORS
       ================================================================ */
    --kendo-color-primary: #0078d4;
    --kendo-color-primary-hover: #106ebe;
    --kendo-color-primary-active: #005a9e;
    --kendo-color-primary-emphasis: #004578;
    --kendo-color-primary-subtle: rgba(0, 120, 212, 0.1);
    --kendo-color-primary-subtle-hover: rgba(0, 120, 212, 0.2);
    --kendo-color-primary-subtle-active: rgba(0, 120, 212, 0.3);
    --kendo-color-primary-on-subtle: #004578;
    --kendo-color-primary-on-surface: #005a9e;
    --kendo-color-primary-rgb: 0, 120, 212;
    --kendo-color-on-primary: #ffffff;
    --kendo-color-primary-darker: #005a9e;

    /* ================================================================
       SECONDARY / TERTIARY
       ================================================================ */
    --kendo-color-secondary: #979593;
    --kendo-color-secondary-hover: #8a8886;
    --kendo-color-secondary-active: #797775;
    --kendo-color-on-secondary: #ffffff;
    --kendo-color-tertiary: #2b88d8;
    --kendo-color-tertiary-hover: #1a78c8;
    --kendo-color-tertiary-active: #0f6cbd;
    --kendo-color-on-tertiary: #ffffff;

    /* ================================================================
       SURFACE & BASE COLORS
       ================================================================ */
    --kendo-color-app-surface: #ffffff;
    --kendo-color-surface: #faf9f8;
    --kendo-color-surface-alt: #ffffff;
    --kendo-color-base: #ffffff;
    --kendo-color-base-hover: #f3f2f1;
    --kendo-color-base-active: #edebe9;
    --kendo-color-base-emphasis: #605e5c;
    --kendo-color-base-subtle: #edebe9;
    --kendo-color-on-base: #323130;
    --kendo-color-on-surface: #323130;

    /* ================================================================
       TEXT COLORS
       ================================================================ */
    --kendo-color-on-app-surface: #323130;
    --kendo-color-subtle: #605e5c;
    --kendo-color-subtle-text: #605e5c;

    /* ================================================================
       BORDER COLORS
       ================================================================ */
    --kendo-color-border: #8a8886;
    --kendo-color-border-alt: #323130;

    /* ================================================================
       DARK / LIGHT / INVERSE
       ================================================================ */
    --kendo-color-dark: #323130;
    --kendo-color-on-dark: #ffffff;
    --kendo-color-light: #d2d0ce;
    --kendo-color-on-light: #323130;
    --kendo-color-inverse: #323130;
    --kendo-color-on-inverse: #ffffff;

    /* ================================================================
       SEMANTIC COLORS - SUCCESS
       ================================================================ */
    --kendo-color-success: #55a554;
    --kendo-color-success-hover: #3e973e;
    --kendo-color-success-active: #278a27;
    --kendo-color-success-emphasis: #107c10;
    --kendo-color-success-subtle: rgba(85, 165, 84, 0.1);
    --kendo-color-success-on-surface: #107c10;
    --kendo-color-on-success: #ffffff;

    /* ================================================================
       SEMANTIC COLORS - ERROR
       ================================================================ */
    --kendo-color-error: #c2666b;
    --kendo-color-error-hover: #b85156;
    --kendo-color-error-active: #ae3b41;
    --kendo-color-error-emphasis: #a4262c;
    --kendo-color-error-subtle: rgba(194, 102, 107, 0.1);
    --kendo-color-error-on-surface: #a4262c;
    --kendo-color-on-error: #ffffff;

    /* ================================================================
       SEMANTIC COLORS - WARNING
       ================================================================ */
    --kendo-color-warning: #ffc80a;
    --kendo-color-warning-hover: #f5c000;
    --kendo-color-warning-active: #e0b000;
    --kendo-color-warning-emphasis: #c19c00;
    --kendo-color-warning-subtle: rgba(255, 200, 10, 0.1);
    --kendo-color-warning-on-surface: #c19c00;
    --kendo-color-on-warning: #323130;

    /* ================================================================
       SEMANTIC COLORS - INFO
       ================================================================ */
    --kendo-color-info: #0a7eff;
    --kendo-color-info-hover: #096edf;
    --kendo-color-info-active: #085ebf;
    --kendo-color-info-emphasis: #074ea0;
    --kendo-color-info-subtle: rgba(10, 126, 255, 0.1);
    --kendo-color-info-on-surface: #074ea0;
    --kendo-color-on-info: #ffffff;

    /* ================================================================
       TYPOGRAPHY
       ================================================================ */
    --kendo-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --kendo-font-size: 0.875rem;
    --kendo-font-size-xs: 0.625rem;
    --kendo-font-size-sm: 0.75rem;
    --kendo-font-size-md: 0.875rem;
    --kendo-font-size-lg: 1rem;
    --kendo-font-size-xl: 1.25rem;
    --kendo-font-weight: 400;
    --kendo-font-weight-bold: 600;
    --kendo-line-height: 1.4285714286;
    --kendo-line-height-sm: 1.25;
    --kendo-line-height-lg: 1.5;

    /* ================================================================
       BORDER RADIUS
       ================================================================ */
    --kendo-border-radius-none: 0px;
    --kendo-border-radius-sm: 0.125rem;
    --kendo-border-radius-md: 0.25rem;
    --kendo-border-radius-lg: 0.375rem;
    --kendo-border-radius-xl: 0.5rem;
    --kendo-border-radius-full: 9999px;

    /* ================================================================
       SPACING
       ================================================================ */
    --kendo-spacing-0: 0px;
    --kendo-spacing-0\.5: 0.125rem;
    --kendo-spacing-1: 0.25rem;
    --kendo-spacing-1\.5: 0.375rem;
    --kendo-spacing-2: 0.5rem;
    --kendo-spacing-2\.5: 0.625rem;
    --kendo-spacing-3: 0.75rem;
    --kendo-spacing-3\.5: 0.875rem;
    --kendo-spacing-4: 1rem;
    --kendo-spacing-5: 1.25rem;
    --kendo-spacing-6: 1.5rem;
    --kendo-spacing-7: 1.75rem;
    --kendo-spacing-8: 2rem;
    --kendo-spacing-9: 2.25rem;
    --kendo-spacing-10: 2.5rem;
    --kendo-spacing-12: 3rem;
    --kendo-spacing-1px: 1px;

    /* ================================================================
       ICON SIZING
       ================================================================ */
    --kendo-icon-size: 1rem;
    --kendo-icon-size-xs: 0.75rem;
    --kendo-icon-size-sm: 0.875rem;
    --kendo-icon-size-lg: 1.25rem;
    --kendo-icon-size-xl: 1.5rem;
    --kendo-icon-size-xxl: 2rem;
    --kendo-icon-size-xxxl: 3rem;
    --kendo-icon-spacing: 0.5rem;

    /* ================================================================
       INPUT COMPONENTS
       ================================================================ */
    --kendo-input-border-width: 1px;
    --kendo-input-focus-border-width: 2px;
    --kendo-input-button-border-width: 1px;

    /* ================================================================
       ELEVATION / SHADOWS
       ================================================================ */
    --kendo-elevation-1: 0 0.3px 0.9px rgba(0, 0, 0, 0.1), 0 1.6px 3.6px rgba(0, 0, 0, 0.13);
    --kendo-elevation-2: 0 0.6px 1.8px rgba(0, 0, 0, 0.1), 0 3.2px 7.2px rgba(0, 0, 0, 0.13);
    --kendo-elevation-3: 0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);
    --kendo-elevation-4: 0 2.4px 7.4px rgba(0, 0, 0, 0.18), 0 12.8px 28.8px rgba(0, 0, 0, 0.22);
    --kendo-elevation-5: 0 4.8px 14.4px rgba(0, 0, 0, 0.18), 0 25.6px 57.6px rgba(0, 0, 0, 0.22);
    --kendo-elevation-6: 0 4.8px 14.4px rgba(0, 0, 0, 0.18), 0 25.6px 57.6px rgba(0, 0, 0, 0.22);

    /* ================================================================
       DISABLED STATES
       ================================================================ */
    --kendo-disabled-opacity: 1;
    --kendo-disabled-filter: none;

    /* ================================================================
       SPLITTER
       ================================================================ */
    --kendo-splitter-splitbar-size: var(--kendo-spacing-3);
}


/* ============================================================================
   TEIL 2: BUTTON KOMPONENTEN
   ============================================================================ */

/* --- Button Base --- */
.k-button {
    margin: 0;
    padding-inline: var(--kendo-button-padding-x, var(--kendo-spacing-5, 1.25rem));
    padding-block: var(--kendo-button-padding-y, var(--kendo-spacing-1\.5, 0.375rem));
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    box-sizing: border-box;
    font-family: var(--kendo-font-family, inherit);
    font-size: var(--kendo-font-size, 0.875rem);
    font-weight: var(--kendo-font-weight-bold, 600);
    line-height: var(--kendo-line-height, 1.4285714286);
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--kendo-spacing-2, 0.5rem);
    position: relative;
    cursor: pointer;
    color: inherit;
    background: none;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    border-radius: var(--kendo-border-radius-md, 0.25rem);
    transition: color 0.1s ease, background-color 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}

.k-button:hover,
.k-button:focus {
    outline: 0;
    text-decoration: none;
}

.k-button:focus::after,
.k-button.k-focus::after {
    content: "";
    position: absolute;
    border: none;
    inset: var(--kendo-spacing-0\.5, 0.125rem);
    outline-width: 1px;
    outline-style: solid;
    outline-color: currentColor;
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

/* --- Button Sizes --- */
.k-button-sm {
    padding-inline: var(--kendo-spacing-5, 1.25rem);
    padding-block: var(--kendo-spacing-1, 0.25rem);
    font-size: var(--kendo-font-size, 0.875rem);
    line-height: var(--kendo-line-height, 1.4285714286);
}

.k-button-md {
    padding-inline: var(--kendo-spacing-5, 1.25rem);
    padding-block: var(--kendo-spacing-1\.5, 0.375rem);
    font-size: var(--kendo-font-size, 0.875rem);
    line-height: var(--kendo-line-height, 1.4285714286);
}

.k-button-lg {
    padding-inline: var(--kendo-spacing-5, 1.25rem);
    padding-block: var(--kendo-spacing-2, 0.5rem);
    font-size: var(--kendo-font-size, 0.875rem);
    line-height: var(--kendo-line-height, 1.4285714286);
}

/* --- Button Children (Text/Icon wrappers) --- */
.k-button-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.k-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--kendo-icon-size, 1rem) * 1);
    min-height: calc(var(--kendo-icon-size, 1rem) * 1);
}

.k-button-icon > i,
.k-button-icon > .fa,
.k-button-icon > .fas,
.k-button-icon > .far,
.k-button-icon > .fab {
    font-size: inherit;
}

/* --- Icon-Only Button --- */
.k-icon-button {
    gap: 0;
}

.k-icon-button.k-button-sm {
    padding: var(--kendo-spacing-1, 0.25rem);
}

.k-icon-button.k-button-md {
    padding: var(--kendo-spacing-1\.5, 0.375rem);
}

.k-icon-button.k-button-lg {
    padding: var(--kendo-spacing-2, 0.5rem);
}

/* --- Button Solid Variant (Base) --- */
.k-button-solid {
    border-color: var(--kendo-button-border, transparent);
    color: var(--kendo-button-text, inherit);
    background-color: var(--kendo-button-bg, transparent);
}

.k-button-solid:hover,
.k-button-solid.k-hover {
    border-color: var(--kendo-button-hover-border, var(--kendo-button-border, transparent));
    color: var(--kendo-button-hover-text, var(--kendo-button-text, inherit));
    background-color: var(--kendo-button-hover-bg, var(--kendo-button-bg, transparent));
}

.k-button-solid:active,
.k-button-solid.k-active {
    border-color: var(--kendo-button-active-border, var(--kendo-button-border, transparent));
    color: var(--kendo-button-active-text, var(--kendo-button-text, inherit));
    background-color: var(--kendo-button-active-bg, var(--kendo-button-bg, transparent));
}

.k-button-solid:disabled,
.k-button-solid.k-disabled {
    border-color: var(--kendo-button-disabled-border, transparent);
    color: var(--kendo-button-disabled-text, inherit);
    background-color: var(--kendo-button-disabled-bg, transparent);
    cursor: default;
    pointer-events: none;
    opacity: var(--kendo-disabled-opacity, 1);
}

/* --- Button Solid Color: Base --- */
.k-button-solid-base {
    --kendo-button-text: var(--kendo-color-on-base, #323130);
    --kendo-button-bg: var(--kendo-color-base, #ffffff);
    --kendo-button-border: var(--kendo-color-border, #8a8886);
    --kendo-button-hover-text: var(--kendo-color-on-base, #323130);
    --kendo-button-hover-bg: var(--kendo-color-base-hover, #f3f2f1);
    --kendo-button-hover-border: var(--kendo-color-border, #8a8886);
    --kendo-button-active-text: var(--kendo-color-on-base, #323130);
    --kendo-button-active-bg: var(--kendo-color-base-active, #edebe9);
    --kendo-button-active-border: var(--kendo-color-border, #8a8886);
    --kendo-button-disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent);
    --kendo-button-disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent);
    --kendo-button-disabled-border: transparent;
}

/* --- Button Solid Color: Primary --- */
.k-button-solid-primary {
    --kendo-button-text: var(--kendo-color-on-primary, #ffffff);
    --kendo-button-bg: var(--kendo-color-primary, #0078d4);
    --kendo-button-border: var(--kendo-color-primary, #0078d4);
    --kendo-button-hover-text: var(--kendo-color-on-primary, #ffffff);
    --kendo-button-hover-bg: var(--kendo-color-primary-hover, #106ebe);
    --kendo-button-hover-border: var(--kendo-color-primary-hover, #106ebe);
    --kendo-button-active-text: var(--kendo-color-on-primary, #ffffff);
    --kendo-button-active-bg: var(--kendo-color-primary-active, #005a9e);
    --kendo-button-active-border: var(--kendo-color-primary-active, #005a9e);
    --kendo-button-disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent);
    --kendo-button-disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent);
    --kendo-button-disabled-border: transparent;
}

/* --- Button Solid Color: Secondary --- */
.k-button-solid-secondary {
    --kendo-button-text: var(--kendo-color-on-secondary, #ffffff);
    --kendo-button-bg: var(--kendo-color-secondary, #979593);
    --kendo-button-border: var(--kendo-color-secondary, #979593);
    --kendo-button-hover-text: var(--kendo-color-on-secondary, #ffffff);
    --kendo-button-hover-bg: var(--kendo-color-secondary-hover, #8a8886);
    --kendo-button-hover-border: var(--kendo-color-secondary-hover, #8a8886);
    --kendo-button-active-text: var(--kendo-color-on-secondary, #ffffff);
    --kendo-button-active-bg: var(--kendo-color-secondary-active, #797775);
    --kendo-button-active-border: var(--kendo-color-secondary-active, #797775);
    --kendo-button-disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent);
    --kendo-button-disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent);
    --kendo-button-disabled-border: transparent;
}

/* --- Button Solid Color: Success --- */
.k-button-solid-success {
    --kendo-button-text: var(--kendo-color-on-success, #ffffff);
    --kendo-button-bg: var(--kendo-color-success, #55a554);
    --kendo-button-border: var(--kendo-color-success, #55a554);
    --kendo-button-hover-text: var(--kendo-color-on-success, #ffffff);
    --kendo-button-hover-bg: var(--kendo-color-success-hover, #3e973e);
    --kendo-button-hover-border: var(--kendo-color-success-hover, #3e973e);
    --kendo-button-active-text: var(--kendo-color-on-success, #ffffff);
    --kendo-button-active-bg: var(--kendo-color-success-active, #278a27);
    --kendo-button-active-border: var(--kendo-color-success-active, #278a27);
    --kendo-button-disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent);
    --kendo-button-disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent);
    --kendo-button-disabled-border: transparent;
}

/* --- Button Solid Color: Error --- */
.k-button-solid-error {
    --kendo-button-text: var(--kendo-color-on-error, #ffffff);
    --kendo-button-bg: var(--kendo-color-error, #c2666b);
    --kendo-button-border: var(--kendo-color-error, #c2666b);
    --kendo-button-hover-text: var(--kendo-color-on-error, #ffffff);
    --kendo-button-hover-bg: var(--kendo-color-error-hover, #b85156);
    --kendo-button-hover-border: var(--kendo-color-error-hover, #b85156);
    --kendo-button-active-text: var(--kendo-color-on-error, #ffffff);
    --kendo-button-active-bg: var(--kendo-color-error-active, #ae3b41);
    --kendo-button-active-border: var(--kendo-color-error-active, #ae3b41);
    --kendo-button-disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent);
    --kendo-button-disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent);
    --kendo-button-disabled-border: transparent;
}

/* --- Button Solid Color: Warning --- */
.k-button-solid-warning {
    --kendo-button-text: var(--kendo-color-on-warning, #323130);
    --kendo-button-bg: var(--kendo-color-warning, #ffc80a);
    --kendo-button-border: var(--kendo-color-warning, #ffc80a);
    --kendo-button-hover-text: var(--kendo-color-on-warning, #323130);
    --kendo-button-hover-bg: var(--kendo-color-warning-hover, #f5c000);
    --kendo-button-hover-border: var(--kendo-color-warning-hover, #f5c000);
    --kendo-button-active-text: var(--kendo-color-on-warning, #323130);
    --kendo-button-active-bg: var(--kendo-color-warning-active, #e0b000);
    --kendo-button-active-border: var(--kendo-color-warning-active, #e0b000);
    --kendo-button-disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent);
    --kendo-button-disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent);
    --kendo-button-disabled-border: transparent;
}

/* --- Button Solid Color: Info --- */
.k-button-solid-info {
    --kendo-button-text: var(--kendo-color-on-info, #ffffff);
    --kendo-button-bg: var(--kendo-color-info, #0a7eff);
    --kendo-button-border: var(--kendo-color-info, #0a7eff);
    --kendo-button-hover-text: var(--kendo-color-on-info, #ffffff);
    --kendo-button-hover-bg: var(--kendo-color-info-hover, #096edf);
    --kendo-button-hover-border: var(--kendo-color-info-hover, #096edf);
    --kendo-button-active-text: var(--kendo-color-on-info, #ffffff);
    --kendo-button-active-bg: var(--kendo-color-info-active, #085ebf);
    --kendo-button-active-border: var(--kendo-color-info-active, #085ebf);
    --kendo-button-disabled-text: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent);
    --kendo-button-disabled-bg: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent);
    --kendo-button-disabled-border: transparent;
}

/* --- Button Flat Variant --- */
.k-button-flat {
    color: inherit;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
}

.k-button-flat:focus::after,
.k-button-flat.k-focus::after {
    border-radius: inherit;
    inset: 1px;
    outline-width: var(--kendo-spacing-0\.5, 0.125rem);
}

.k-button-flat-base {
    color: var(--kendo-color-on-app-surface, #323130);
    background: transparent !important;
    border-color: transparent !important;
}

.k-button-flat-base::before {
    content: "";
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    display: block;
    pointer-events: none;
    position: absolute;
    inset: -1px;
    z-index: 0;
    transition: opacity 0.2s ease-in-out;
}

.k-button-flat-base:hover::before,
.k-button-flat-base.k-hover::before {
    opacity: 0.05;
}

.k-button-flat-base:active::before,
.k-button-flat-base.k-active::before {
    opacity: 0.1;
}

.k-button-flat-primary {
    color: var(--kendo-color-primary, #0078d4);
    background: transparent !important;
    border-color: transparent !important;
}

.k-button-flat-primary:hover {
    color: var(--kendo-color-primary-hover, #106ebe);
}

.k-button-flat-error {
    color: var(--kendo-color-error, #c2666b);
    background: transparent !important;
    border-color: transparent !important;
}

.k-button-flat-error:hover {
    color: var(--kendo-color-error-hover, #b85156);
}


/* ============================================================================
   TEIL 3: INPUT KOMPONENTEN
   ============================================================================ */

/* --- Input Base --- */
.k-input,
.k-picker {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-width: var(--kendo-input-border-width, 1px);
    border-style: solid;
    border-color: var(--kendo-input-border, var(--kendo-color-border, #8a8886));
    outline: 0;
    font-family: var(--kendo-font-family, inherit);
    font-size: var(--kendo-font-size, 0.875rem);
    line-height: var(--kendo-line-height, 1.4285714286);
    font-weight: var(--kendo-font-weight, 400);
    text-align: start;
    box-shadow: none;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: stretch;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    border-radius: var(--kendo-border-radius-md, 0.25rem);
    color: var(--kendo-input-text, var(--kendo-color-on-app-surface, #323130));
    background-color: var(--kendo-input-bg, var(--kendo-color-app-surface, #ffffff));
}

/* --- Input Solid Variant --- */
.k-input-solid {
    --kendo-input-text: var(--kendo-color-on-app-surface, #323130);
    --kendo-input-bg: var(--kendo-color-app-surface, #ffffff);
    --kendo-input-border: var(--kendo-color-border, #8a8886);
}

/* --- Input Medium Size --- */
.k-input-md,
.k-picker-md {
    font-size: var(--kendo-font-size, 0.875rem);
    line-height: var(--kendo-line-height, 1.4285714286);
}

/* --- Input Inner Element --- */
.k-input-inner {
    padding-inline: var(--kendo-spacing-2, 0.5rem);
    padding-block: var(--kendo-spacing-1\.5, 0.375rem);
    width: 100%;
    border: 0;
    outline: 0;
    color: inherit;
    background: none;
    font: inherit;
    flex: 1;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    white-space: nowrap;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 0;
    box-sizing: content-box;
}

/* --- Input Button (z.B. Dropdown-Pfeil) --- */
.k-input-button {
    padding: var(--kendo-spacing-1\.5, 0.375rem);
    border-width: 0;
    border-radius: 0;
    border-color: inherit;
    flex: none;
    box-shadow: none;
    border-inline-start-width: var(--kendo-input-button-border-width, 1px);
    border-inline-start-style: solid;
    color: inherit;
    background: none;
    border-inline-start-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.k-input-button > .k-button-icon {
    min-width: auto !important;
}

/* --- Input Focus State --- */
.k-input:focus::after,
.k-input.k-focus::after,
.k-input:focus-within::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    border-width: var(--kendo-input-focus-border-width, 2px);
    border-style: solid;
    border-color: var(--kendo-color-primary, #0078d4);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.k-input:focus,
.k-input.k-focus,
.k-input:focus-within {
    border-color: var(--kendo-color-primary, #0078d4);
    z-index: 2;
}

/* --- Input Hover State --- */
.k-input:hover,
.k-input.k-hover {
    border-color: var(--kendo-color-border-alt, #323130);
}

/* --- Input Disabled State --- */
.k-input:disabled,
.k-input[disabled],
.k-input.k-disabled {
    color: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent);
    background-color: var(--kendo-color-base-subtle, #edebe9);
    border-color: transparent;
    cursor: default;
    pointer-events: none;
}

/* --- Input Invalid State --- */
.k-input.k-invalid {
    border-color: var(--kendo-color-error-emphasis, #a4262c);
}

.k-input.k-invalid:focus::after,
.k-input.k-invalid.k-focus::after {
    border-color: var(--kendo-color-error-emphasis, #a4262c);
}

/* --- Textbox --- */
.k-textbox {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-width: var(--kendo-input-border-width, 1px);
    border-style: solid;
    border-color: var(--kendo-color-border, #8a8886);
    border-radius: var(--kendo-border-radius-md, 0.25rem);
    outline: 0;
    font-family: var(--kendo-font-family, inherit);
    font-size: var(--kendo-font-size, 0.875rem);
    line-height: var(--kendo-line-height, 1.4285714286);
    color: var(--kendo-color-on-app-surface, #323130);
    background-color: var(--kendo-color-app-surface, #ffffff);
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: stretch;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}

.k-textbox:focus,
.k-textbox:focus-within {
    border-color: var(--kendo-color-primary, #0078d4);
}

.k-textbox:disabled,
.k-textbox[disabled] {
    color: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent);
    background-color: var(--kendo-color-base-subtle, #edebe9);
    border-color: transparent;
}

/* --- Textarea --- */
.k-textarea {
    margin: 0;
    padding: var(--kendo-spacing-1\.5, 0.375rem) var(--kendo-spacing-2, 0.5rem);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-width: var(--kendo-input-border-width, 1px);
    border-style: solid;
    border-color: var(--kendo-color-border, #8a8886);
    border-radius: var(--kendo-border-radius-md, 0.25rem);
    outline: 0;
    font-family: var(--kendo-font-family, inherit);
    font-size: var(--kendo-font-size, 0.875rem);
    line-height: var(--kendo-line-height, 1.4285714286);
    color: var(--kendo-color-on-app-surface, #323130);
    background-color: var(--kendo-color-app-surface, #ffffff);
    resize: vertical;
}

.k-textarea:focus {
    border-color: var(--kendo-color-primary, #0078d4);
}


/* ============================================================================
   TEIL 4: CHECKBOX / RADIO / SWITCH
   ============================================================================ */

/* --- Checkbox --- */
.k-checkbox {
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    line-height: initial;
    border-width: 1px;
    border-style: solid;
    border-color: var(--kendo-color-border, #8a8886);
    border-radius: var(--kendo-border-radius-sm, 0.125rem);
    outline: 0;
    background-color: var(--kendo-color-app-surface, #ffffff);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    flex: none;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    color: var(--kendo-color-on-app-surface, #323130);
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.k-checkbox::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    mask-size: 100%;
    mask-position: center;
    mask-repeat: no-repeat;
}

.k-checkbox:hover {
    border-color: var(--kendo-color-border-alt, #323130);
}

.k-checkbox:focus {
    outline: 2px solid var(--kendo-color-primary, #0078d4);
    outline-offset: 2px;
}

.k-checkbox:checked,
.k-checkbox.k-checked {
    border-color: var(--kendo-color-primary, #0078d4);
    color: var(--kendo-color-on-primary, #ffffff);
    background-color: var(--kendo-color-primary, #0078d4);
}

.k-checkbox:checked::before,
.k-checkbox.k-checked::before {
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e");
}

.k-checkbox:checked:hover,
.k-checkbox.k-checked:hover {
    border-color: var(--kendo-color-primary-hover, #106ebe);
    background-color: var(--kendo-color-primary-hover, #106ebe);
}

.k-checkbox:disabled,
.k-checkbox.k-disabled {
    border-color: transparent;
    background-color: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 14%, transparent);
    cursor: default;
    pointer-events: none;
}

.k-checkbox:checked:disabled,
.k-checkbox.k-checked.k-disabled {
    border-color: transparent;
    color: var(--kendo-color-app-surface, #ffffff);
    background-color: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent);
}

/* --- Checkbox Indeterminate --- */
.k-checkbox:indeterminate::before,
.k-checkbox.k-indeterminate::before {
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3crect fill='%23ffffff' x='3' y='7' width='10' height='2' rx='0.5'/%3e%3c/svg%3e");
}

.k-checkbox:indeterminate,
.k-checkbox.k-indeterminate {
    border-color: var(--kendo-color-primary, #0078d4);
    color: var(--kendo-color-on-primary, #ffffff);
    background-color: var(--kendo-color-primary, #0078d4);
}

/* --- Radio --- */
.k-radio {
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    line-height: initial;
    border-width: 1px;
    border-style: solid;
    border-color: var(--kendo-color-border, #8a8886);
    border-radius: 50%;
    outline: 0;
    background-color: var(--kendo-color-app-surface, #ffffff);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    flex: none;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.k-radio::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: currentColor;
    overflow: hidden;
    transform: scale(0) translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform 0.1s ease;
}

.k-radio:hover {
    border-color: var(--kendo-color-border-alt, #323130);
}

.k-radio:focus {
    outline: 2px solid var(--kendo-color-primary, #0078d4);
    outline-offset: 2px;
}

.k-radio:checked,
.k-radio.k-checked {
    border-color: var(--kendo-color-primary, #0078d4);
    color: var(--kendo-color-primary, #0078d4);
}

.k-radio:checked::before,
.k-radio.k-checked::before {
    transform: scale(1) translate(-50%, -50%);
}

.k-radio:disabled,
.k-radio.k-disabled {
    border-color: transparent;
    background-color: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 14%, transparent);
    cursor: default;
    pointer-events: none;
}

/* --- Switch --- */
.k-switch {
    box-sizing: border-box;
    font-family: var(--kendo-font-family, inherit);
    font-size: var(--kendo-font-size, 0.875rem);
    outline: 0;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.k-switch-track {
    width: 40px;
    height: 20px;
    border-width: 1px;
    border-style: solid;
    border-radius: 9999px;
    outline: 0;
    display: flex;
    flex-flow: row nowrap;
    flex: 1 0 auto;
    position: relative;
    transition: all 100ms ease-in-out;
}

.k-switch-thumb-wrap {
    width: 0;
    height: 0;
    overflow: visible;
    position: absolute;
    transition: inset-inline-start 100ms ease-in-out;
    top: 50%;
}

.k-switch-thumb {
    width: 14px;
    height: 14px;
    border-width: 0;
    border-style: solid;
    border-radius: 50%;
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: all 100ms ease-in-out;
}

/* Switch OFF State */
.k-switch.k-switch-off .k-switch-track {
    border-color: var(--kendo-color-border, #8a8886);
    background-color: var(--kendo-color-app-surface, #ffffff);
}

.k-switch.k-switch-off .k-switch-thumb {
    background-color: var(--kendo-color-on-app-surface, #323130);
}

.k-switch.k-switch-off .k-switch-thumb-wrap {
    inset-inline-start: calc(14px / 2 + 3px);
}

/* Switch ON State */
.k-switch.k-switch-on .k-switch-track {
    border-color: var(--kendo-color-primary, #0078d4);
    background-color: var(--kendo-color-primary, #0078d4);
}

.k-switch.k-switch-on .k-switch-thumb {
    background-color: var(--kendo-color-on-primary, #ffffff);
}

.k-switch.k-switch-on .k-switch-thumb-wrap {
    inset-inline-start: calc(100% - 14px / 2 - 3px);
}

/* Switch Hover */
.k-switch:hover .k-switch-track {
    border-color: var(--kendo-color-border-alt, #323130);
}

.k-switch.k-switch-on:hover .k-switch-track {
    border-color: var(--kendo-color-primary-hover, #106ebe);
    background-color: var(--kendo-color-primary-hover, #106ebe);
}

/* Switch Focus */
.k-switch:focus::after,
.k-switch.k-focus::after {
    content: "";
    position: absolute;
    inset: -2px;
    outline: 2px solid var(--kendo-color-primary, #0078d4);
    outline-offset: 2px;
    border-radius: 9999px;
    z-index: 1;
    pointer-events: none;
}

/* Switch Disabled */
.k-switch:disabled,
.k-switch.k-disabled {
    cursor: default;
    pointer-events: none;
    opacity: var(--kendo-disabled-opacity, 1);
}

.k-switch.k-disabled.k-switch-off .k-switch-track {
    border-color: transparent;
    background-color: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 14%, transparent);
}

.k-switch.k-disabled.k-switch-off .k-switch-thumb {
    background-color: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent);
}

.k-switch.k-disabled.k-switch-on .k-switch-track {
    border-color: transparent;
    background-color: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent);
}

.k-switch.k-disabled.k-switch-on .k-switch-thumb {
    background-color: var(--kendo-color-app-surface, #ffffff);
}


/* ============================================================================
   TEIL 5: UTILITY KLASSEN
   ============================================================================ */

/* --- Border Radius --- */
.k-rounded-none {
    border-radius: 0;
}

.k-rounded-sm {
    border-radius: var(--kendo-border-radius-sm, 0.125rem);
}

.k-rounded-md {
    border-radius: var(--kendo-border-radius-md, 0.25rem);
}

.k-rounded-lg {
    border-radius: var(--kendo-border-radius-lg, 0.375rem);
}

.k-rounded-full {
    border-radius: var(--kendo-border-radius-full, 9999px);
}

/* --- Disabled State --- */
.k-disabled,
.k-widget[disabled] {
    outline: none;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
    opacity: var(--kendo-disabled-opacity, 1);
}

/* --- Checked State (Utility) --- */
.k-checked {
    border-color: var(--kendo-color-primary, #0078d4);
    color: var(--kendo-color-on-primary, #ffffff);
    background-color: var(--kendo-color-primary, #0078d4);
}

.k-checked:hover,
.k-checked.k-hover {
    border-color: var(--kendo-color-primary-hover, #106ebe);
    color: var(--kendo-color-on-primary, #ffffff);
    background-color: var(--kendo-color-primary-hover, #106ebe);
}

.k-checked:disabled,
.k-checked.k-disabled {
    border-color: transparent;
    color: var(--kendo-color-app-surface, #ffffff);
    background-color: color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent);
}

/* --- Selected Background (Utility) --- */
.k-selected-bg {
    background-color: var(--kendo-color-primary-subtle, rgba(0, 120, 212, 0.1));
}

/* --- Icon Sizes --- */
.k-icon {
    width: var(--kendo-icon-size, 1rem);
    height: var(--kendo-icon-size, 1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    font-size: var(--kendo-icon-size, 1rem);
    line-height: 1;
}

.k-icon-xs {
    width: var(--kendo-icon-size-xs, 0.75rem);
    height: var(--kendo-icon-size-xs, 0.75rem);
    font-size: var(--kendo-icon-size-xs, 0.75rem);
}

.k-icon-sm {
    width: var(--kendo-icon-size-sm, 0.875rem);
    height: var(--kendo-icon-size-sm, 0.875rem);
    font-size: var(--kendo-icon-size-sm, 0.875rem);
}

.k-icon-md {
    width: var(--kendo-icon-size, 1rem);
    height: var(--kendo-icon-size, 1rem);
    font-size: var(--kendo-icon-size, 1rem);
}

.k-icon-lg {
    width: var(--kendo-icon-size-lg, 1.25rem);
    height: var(--kendo-icon-size-lg, 1.25rem);
    font-size: var(--kendo-icon-size-lg, 1.25rem);
}

.k-icon-xl {
    width: var(--kendo-icon-size-xl, 1.5rem);
    height: var(--kendo-icon-size-xl, 1.5rem);
    font-size: var(--kendo-icon-size-xl, 1.5rem);
}

.k-icon-xxl {
    width: var(--kendo-icon-size-xxl, 2rem);
    height: var(--kendo-icon-size-xxl, 2rem);
    font-size: var(--kendo-icon-size-xxl, 2rem);
}

.k-icon-xxxl {
    width: var(--kendo-icon-size-xxxl, 3rem);
    height: var(--kendo-icon-size-xxxl, 3rem);
    font-size: var(--kendo-icon-size-xxxl, 3rem);
}