/* ==========================================================================
   FONT DEFINITIONS (Variable Fonts - Nunito)
   ========================================================================== */

/* Nunito Regular / Bold / ExtraBold (Aufrecht) */
@font-face {
    font-family: 'Nunito';
    src: url('/Nunito-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

/* Nunito Italic (Kursiv) */
@font-face {
    font-family: 'Nunito';
    src: url('/Nunito-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   GLOBAL VARIABLES (:root Design Tokens)
   ========================================================================== */
:root {
    /* --- Brand & Status Colors --- */
    --kv-primary:               #0083ff;
    --kv-primary-hover:         #006dd4;
    --kv-primary-light:         #ecf5fe;
    --kv-accent:                #2E9CCA;
    --kv-accent-hover:          #2687af;

    /* --- Background Colors --- */
    --kv-bg-page:               #f7f9fc;
    --kv-bg-surface:            #ffffff;
    --kv-bg-subtle:             #f0f4f8;
    --kv-bg-muted:              #e8edf3;

    /* --- Border Colors --- */
    --kv-border-light:          #dde3ea;
    --kv-border-default:        #c4cdd8;
    --kv-border-strong:         #9aaabb;

    /* --- Text Colors --- */
    --kv-dark-text:             #273f5b;   /* Headings, starke Betonung */
    --kv-neutral-text:          #4b5d73;   /* Body-Text Standard       */
    --kv-alternative-text:      #6a85a6;   /* Sekundärer / Hilfstext   */
    --kv-disabled-text:         #a0b0c2;   /* Deaktivierte Elemente    */
    --kv-inverse-text:          #ffffff;   /* Text auf dunklem BG      */
    --kv-form-label-text: var(--kv-primary);

    /* --- Typography --- */
    --kv-font-family:           'Nunito', Arial, "Helvetica Neue", Helvetica, sans-serif;

    --kv-font-weight-light:     300;
    --kv-font-weight-regular:   400;
    --kv-font-weight-semibold:  600;
    --kv-font-weight-bold:      700;
    --kv-font-weight-extrabold: 800;

    /* Fluid-freundliche Skala – Basis: 1rem = Browser-Standard (16px) */
    --kv-font-size-xs:          0.75rem;    /* 12px */
    --kv-font-size-sm:          0.875rem;   /* 14px */
    --kv-font-size-base:        1rem;       /* 16px */
    --kv-font-size-md:          1.125rem;   /* 18px */
    --kv-font-size-lg:          1.25rem;    /* 20px */
    --kv-font-size-xl:          1.5rem;     /* 24px */
    --kv-font-size-xxl:         2rem;       /* 32px */
    --kv-font-size-hero:        2.5rem;     /* 40px */

    --kv-line-height-tight:     1.2;
    --kv-line-height-normal:    1.5;
    --kv-line-height-relaxed:   1.75;

    /* --- Spacing Scale --- */
    --kv-space-1:               0.25rem;    /*  4px */
    --kv-space-2:               0.5rem;     /*  8px */
    --kv-space-3:               0.75rem;    /* 12px */
    --kv-space-4:               1rem;       /* 16px */
    --kv-space-5:               1.25rem;    /* 20px */
    --kv-space-6:               1.5rem;     /* 24px */
    --kv-space-8:               2rem;       /* 32px */
    --kv-space-10:              2.5rem;     /* 40px */
    --kv-space-12:              3rem;       /* 48px */
    --kv-space-16:              4rem;       /* 64px */

    /* --- Border Radius --- */
    --kv-radius-sm:             4px;
    --kv-radius-md:             8px;
    --kv-radius-lg:             12px;
    --kv-radius-xl:             16px;
    --kv-radius-pill:           9999px;

    /* --- Shadows --- */
    --kv-shadow-sm:             0 1px 3px rgba(0, 0, 0, 0.08);
    --kv-shadow-md:             0 2px 8px rgba(0, 0, 0, 0.10);
    --kv-shadow-lg:             0 4px 16px rgba(0, 0, 0, 0.12);
    --kv-shadow-xl:             0 8px 32px rgba(0, 0, 0, 0.14);

    /* --- Motion --- */
    --kv-transition-fast:       150ms ease;
    --kv-transition-normal:     250ms ease-in-out;
    --kv-transition-slow:       400ms ease-in-out;

    /* --- Focus (Accessibility) --- */
    --kv-focus-outline:         2px solid var(--kv-accent);
    --kv-focus-offset:          2px;

    /* --- Z-Index Layering --- */
    --kv-z-base:                1;
    --kv-z-raised:              10;
    --kv-z-header:              1000;
    --kv-z-overlay:             1050;
    --kv-z-dropdown:            1100;
    --kv-z-modal:               1200;
    --kv-z-toast:               1300;
}

/* ==========================================================================
   BOX MODEL RESET
   Power Pages / Bootstrap interferiert mit box-sizing.
   Explizit überschreiben, um konsistente Layouts sicherzustellen.
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==========================================================================
   GLOBAL OVERRIDES (Power Pages Basis-Standardisierung)
   ========================================================================== */

/*
 * font-size auf html als % – respektiert Browsereinstellungen des Nutzers
 * (Accessibility: Nutzer mit 125% Zoom profitieren davon)
 */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body,
.pcf-container,
.pcf-wrapper {
    font-family: var(--kv-font-family);
    font-size: var(--kv-font-size-base);
    font-weight: var(--kv-font-weight-regular);
    line-height: var(--kv-line-height-normal);
    color: var(--kv-neutral-text);
    background-color: var(--kv-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings: dunklere Farbe für bessere Lesbarkeits-Hierarchie */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--kv-font-family);
    color: var(--kv-dark-text);
    font-weight: var(--kv-font-weight-bold);
    line-height: var(--kv-line-height-tight);
    margin-top: 0;
    margin-bottom: var(--kv-space-3);
}

h3, .h3 {
    font-size: var(--kv-font-size-lg);
}

p {
    margin-top: 0;
    margin-bottom: var(--kv-space-4);
}

a {
    color: var(--kv-primary) ;
    text-decoration: none !important;
    transition: color var(--kv-transition-fast);
}

a:hover {
    color: var(--kv-primary-hover);
    text-decoration: underline !important;
}

img,
svg {
    display: block;
    max-width: 100%;
}

.entity-grid .view-grid table a {
        color: var(--kv-dark-text);
}

/* ==========================================================================
   BUTTONS – Bootstrap Overrides & Custom KV Buttons
   Basis: --kv-* Design Tokens aus base.css
   ========================================================================== */
 
/* --------------------------------------------------------------------------
   SHARED BASE – gilt für .kv-btn und Bootstrap .btn
   -------------------------------------------------------------------------- */
.btn,
.kv-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--kv-space-2);
    font-family:     var(--kv-font-family);
    font-size:       var(--kv-font-size-sm);
    font-weight:     var(--kv-font-weight-bold);
    line-height:     1;
    text-decoration: none;
    white-space:     nowrap;
 
    padding:         var(--kv-space-3) var(--kv-space-6);
    border-radius:   var(--kv-radius-pill);
    border:          2px solid transparent;
    cursor:          pointer;
 
    transition:
        background-color var(--kv-transition-fast),
        border-color     var(--kv-transition-fast),
        color            var(--kv-transition-fast),
        box-shadow       var(--kv-transition-fast),
        transform        var(--kv-transition-fast);
 
    user-select: none;
}
 
.btn:active,
.kv-btn:active {
    transform: scale(0.97);
}
 
.btn:focus-visible,
.kv-btn:focus-visible {
    outline:        var(--kv-focus-outline);
    outline-offset: var(--kv-focus-offset);
}

.btn-default {
    color: var(--kv-primary);
    border-color: var(--kv-primary);
}
 
/* --------------------------------------------------------------------------
   PRIMARY BUTTON
   -------------------------------------------------------------------------- */
.btn-primary,
.kv-btn--primary {
    background-color: var(--kv-primary) !important;
    border-color:     var(--kv-primary) !important;
    color:            #ffffff !important;
}
 
.btn-primary:hover,
.kv-btn--primary:hover {
    background-color: var(--kv-primary-hover) !important;
    border-color:     var(--kv-primary-hover) !important;
    color:            #ffffff !important;
    box-shadow:       0 6px 20px rgba(0, 131, 255, 0.45);
    text-decoration: none !important;
}
 
.btn-primary:active,
.kv-btn--primary:active {
    background-color: var(--kv-primary-hover);
    box-shadow:       none;
}
 
/* --------------------------------------------------------------------------
   SECONDARY BUTTON (Outline-Stil mit Primary Color)
   -------------------------------------------------------------------------- */
.btn-secondary,
.kv-btn--secondary {
    background-color: transparent;
    border-color:     var(--kv-primary);
    color:            var(--kv-primary);
    box-shadow:       none;
}
 
.btn-secondary:hover,
.kv-btn--secondary:hover {
    background-color: var(--kv-primary-light);
    border-color:     var(--kv-primary);
    color:            var(--kv-primary);
    box-shadow:       none;
}
 
.btn-secondary:active,
.kv-btn--secondary:active {
    background-color: var(--kv-primary-light);
}
 
/* --------------------------------------------------------------------------
   DISABLED STATE – beide Varianten
   -------------------------------------------------------------------------- */
.btn:disabled,
.btn[aria-disabled="true"],
.kv-btn:disabled,
.kv-btn[aria-disabled="true"] {
    opacity:        0.45;
    cursor:         not-allowed;
    pointer-events: none;
    box-shadow:     none;
    transform:      none;
}

/* ==========================================================================
   ACCESSIBILITY – Universeller Tastatur-Fokus
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--kv-focus-outline);
    outline-offset: var(--kv-focus-offset);
    border-radius: var(--kv-radius-sm);
}

/* Fokus für Maus-Nutzer unterdrücken, ohne Accessibility zu brechen */
:focus:not(:focus-visible) {
    outline: none;
}


/* ------------------------------------------------------------------
   Header – Styles
   ------------------------------------------------------------------ */
#navbar > nav > ul > li.weblink.dropdown.open > a, #navbar > nav > ul > li.weblink.dropdown.open > ul.dropdown-menu, .navbar-inverse .navbar-nav > li > a:hover {
    background-color: var(--kv-primary) !important;
}

.navbar-static-top.navbar .menu-bar > .navbar-nav > li > a {
    font-family: var(--kv-font-family) !important;
}


/* ------------------------------------------------------------------
   KV Back Button – Styles
   ------------------------------------------------------------------ */

.kv-back-btn-wrapper {
    display: flex;
    align-items: center;
}

.kv-back-btn {
    /* Reset */
    all: unset;
    cursor: pointer;

    /* Layout */
    display: inline-flex;
    align-items: center;
    gap: var(--kv-space-2);

    /* Typografie */
    font-family:  var(--kv-font-family);
    font-size:    var(--kv-font-size-sm);
    font-weight:  var(--kv-font-weight-semibold);
    line-height:  1;
    color:        var(--kv-alternative-text);

    /* Spacing & Shape */
    padding:         var(--kv-space-2) var(--kv-space-4);
    border-radius:   var(--kv-radius-pill);
    background:      var(--kv-bg-subtle);
    border:          1.5px solid transparent;

    /* Motion */
    transition:
        color            var(--kv-transition-fast),
        background       var(--kv-transition-fast),
        border-color     var(--kv-transition-fast),
        transform        var(--kv-transition-fast);

    /* Kein User-Select beim Klicken */
    user-select: none;
    -webkit-user-select: none;
}

/* Icon */
.kv-back-btn__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform var(--kv-transition-fast);
}

/* Hover State */
.kv-back-btn:hover {
    color:        var(--kv-dark-text);
    background:   var(--kv-bg-subtle);
    border-color: var(--kv-border-light);
}

.kv-back-btn:hover .kv-back-btn__icon {
    transform: translateX(-3px);
}

/* Active / Pressed State */
.kv-back-btn:active {
    transform: scale(0.97);
    background: var(--kv-bg-muted);
}

/* Focus (Tastatur-Navigation) */
.kv-back-btn:focus-visible {
    outline:        var(--kv-focus-outline);
    outline-offset: var(--kv-focus-offset);
    color:          var(--kv-dark-text);
    background:     var(--kv-bg-subtle);
}


/* ------------------------------------------------------------------
   KV Detail Page – Layout & Form Overrides
   Kein Bootstrap. Kein col-*, kein container, kein row.
   Verwendet ausschließlich --kv-* Design Tokens.
   ------------------------------------------------------------------ */

/* ── Seitenlayout ─────────────────────────────────────────────── */
.kv-detail-page {
    max-width: 1200px;
    margin:  0 auto;
    padding: var(--kv-space-8) var(--kv-space-6);
}


.kv-detail-page section:nth-child(1) {
    margin-bottom: var(--kv-space-12);
}

/* ── Header ───────────────────────────────────────────────────── */
.kv-detail-page__header {
    margin-bottom: var(--kv-space-8);
    padding-bottom: var(--kv-space-6);
    border-bottom: 1px solid var(--kv-border-light);
}

.kv-detail-page__title {
    font-size:   var(--kv-font-size-xl);
    font-weight: var(--kv-font-weight-extrabold);
    color:       var(--kv-dark-text);
    margin:      0 0 var(--kv-space-2) 0;
    line-height: var(--kv-line-height-tight);
}

.kv-detail-page__description {
    font-size:  var(--kv-font-size-md);
    color:      var(--kv-alternative-text);
    margin:     0;
    line-height: var(--kv-line-height-relaxed);
}

/* ── Form Section ─────────────────────────────────────────────── */
.kv-detail-page__form-section {
    background:    var(--kv-bg-surface);
    border:        1px solid var(--kv-border-light);
    border-radius: var(--kv-radius-lg);
    box-shadow:    var(--kv-shadow-sm);
    padding:       var(--kv-space-8);
}

/* ----------------------------------------------------------------
   Power Pages Entity Form Overrides (Read-Only)
   Scoped auf .kv-detail-page__form-section, um globale
   Seiteneffekte zu vermeiden.
   ---------------------------------------------------------------- */

/* Form Table Layout */
.kv-detail-page__form-section .entity-form,
.kv-detail-page__form-section .entityFormTable,
.kv-detail-page__form-section form {
    width: 100%;
}

.kv-detail-page__form-section .crmEntityFormView {
    border: none;
}

/* Jede Zeile / Field Row */
.kv-detail-page__form-section .form-group,
.kv-detail-page__form-section .control,
.kv-detail-page__form-section .cell {
    margin-bottom: var(--kv-space-6);
}

/* Labels */
.kv-detail-page__form-section label,
.kv-detail-page__form-section .field-label {
    font-family: var(--kv-font-family);
    font-size:   var(--kv-font-size-base);
    font-weight: var(--kv-font-weight-bold);
    color:       var(--kv-form-label-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0;
}

/* Werte (read-only inputs, static text, disabled fields) */
.kv-detail-page__form-section input[readonly],
.kv-detail-page__form-section input[disabled],
.kv-detail-page__form-section textarea[readonly],
.kv-detail-page__form-section textarea[disabled],
.kv-detail-page__form-section select[disabled],
.kv-detail-page__form-section .form-control[readonly],
.kv-detail-page__form-section .form-control[disabled],
.kv-handlung-text {
    font-family:      var(--kv-font-family);
    font-size:        var(--kv-font-size-sm);
    font-weight:      var(--kv-font-weight-semibold);
    color:            var(--kv-dark-text);
    background:       transparent;
    border:           none;
    border-radius:    0;
    padding:          var(--kv-space-2) 0;
    box-shadow:       none;
    width:            100%;
    cursor:           default;
    resize:           none;
    -webkit-appearance: none;
    appearance:       none;
}

/* Leere Felder / null-Werte lesbar machen */
.kv-detail-page__form-section input[readonly]:placeholder-shown,
.kv-detail-page__form-section input[disabled]:placeholder-shown {
    color: var(--kv-disabled-text);
    font-weight: var(--kv-font-weight-regular);
    font-style: italic;
}


/* Submit-Button und alle Aktions-Buttons ausblenden
   (Read-Only Modus – keine Bearbeitung erlaubt) */
.kv-detail-page__form-section .submit-btn-wrapper,
.kv-detail-page__form-section [type="submit"],
.kv-detail-page__form-section .button-command-bar,
.kv-detail-page__form-section .navbar-footer,
.kv-detail-page__form-section input[type="submit"],
.kv-detail-page__form-section button[type="submit"],
.kv-detail-page__form-section .actions {
    display: none !important;
}

/* Section Divider innerhalb der Form */
.kv-detail-page__form-section .tab,
.kv-detail-page__form-section fieldset {
    border: none;
    padding: 0;
    margin-bottom: var(--kv-space-8);
}

.kv-detail-page__form-section .tab + .tab,
.kv-detail-page__form-section fieldset + fieldset {
    padding-top:  var(--kv-space-6);
    border-top:   1px solid var(--kv-border-light);
    margin-top:   var(--kv-space-2);
}

.kv-detail-page__form-section legend,
.kv-detail-page__form-section .tab-label {
    font-family:  var(--kv-font-family);
    font-size:    var(--kv-font-size-sm);
    font-weight:  var(--kv-font-weight-extrabold);
    color:        var(--kv-dark-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--kv-space-5);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    .kv-detail-page {
        padding: var(--kv-space-5) var(--kv-space-4);
    }

    .kv-detail-page__form-section {
        padding:       var(--kv-space-5);
        border-radius: var(--kv-radius-md);
    }

    .kv-detail-page__title {
        font-size: var(--kv-font-size-xl);
    }
}


/* ==========================================================================
   STATUS BADGES
   ========================================================================== */
.kv-status-badge {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    font-family: var(--kv-font-family);
    font-size:   12px;
    font-weight: 700;
    padding:     4px 12px;
    border-radius: 9999px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    line-height: 1.4;
}
.kv-status-badge::before {
    content:      '';
    display:      inline-block;
    width:        7px;
    height:       7px;
    border-radius: 50%;
    background:   currentColor;
    opacity:      0.7;
    flex-shrink:  0;
}
.kv-status--in-development { background: #ecf5fe; color: #0065c8; }
.kv-status--rolling-out    { background: #fff8e1; color: #b45309; }
.kv-status--launched       { background: #e6f4ec; color: #1a7c3e; }
.kv-status--cancelled      {
    background:      #fef2f2;
    color:           #b91c1c;
    text-decoration-color: rgba(185, 28, 28, 0.4);
}
.kv-status-field-replaced input[readonly],
.kv-status-field-replaced input[disabled] {
    display: none !important;
}

/* ==========================================================================
   RELEVANZ BADGES
   ========================================================================== */
.kv-relevanz-badge {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    font-family: var(--kv-font-family);
    font-size:   12px;
    font-weight: 700;
    padding:     4px 12px;
    border-radius: 9999px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    line-height: 1.4;
}
.kv-relevanz--keine    { background: #f0f4f8; color: #6a85a6; }
.kv-relevanz--moderat  { background: #fff8e1; color: #b45309; }
.kv-relevanz--relevant { background: #e6f4ec; color: #1a7c3e; font-weight: 800; }

.kv-relevanz-field-replaced select,
.kv-relevanz-field-replaced .aspNetDisabled {
    display: none !important;
}

/* ==========================================================================
   PILL TAGS (Kategorien, ReleasePhase)
   ========================================================================== */
.kv-pill-container {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    padding:   2px 0;
}
.kv-pill {
    display:      inline-flex;
    align-items:  center;
    font-family:  var(--kv-font-family);
    font-size:    11px;
    font-weight:  600;
    padding:      3px 10px;
    border-radius: 9999px;
    white-space:  nowrap;
    line-height:  1.4;
}

/* Kategorien: neutral blau */
.kv-pill--category {
    background: #ecf5fe;
    color:      #0065c8;
    border:     1px solid #c8e2fb;
}

/* ReleasePhase: farbige Varianten */
.kv-pill--general-availability { background: #e6f4ec; color: #1a7c3e; border: 1px solid #b8e0c6; }
.kv-pill--preview               { background: #fff8e1; color: #b45309; border: 1px solid #fde9a2; }
.kv-pill--limited-availability  { background: #fef2f2; color: #b91c1c; border: 1px solid #fdd;    }
.kv-pill--current-channel       { background: #f0f4f8; color: #273f5b; border: 1px solid #dde3ea; }
.kv-pill--default               { background: #f0f4f8; color: #4b5d73; border: 1px solid #dde3ea; }

/* Textarea direkt per ID ausblenden – zuverlässiger als scoped parent selector */
#kv_kategorien,
#kv_releasephase {
    display: none !important;
}


/* ==========================================================================
   MessageCenter-spezifische Styles
   Basis-Styles (kv-status-badge, kv-relevanz-badge, kv-pill*)
   kommen aus dem globalen CSS (wt-kv-field-badges).
   Hier nur Ergänzungen.
   ========================================================================== */

/* ActionType Badges */
.kv-actiontype-badge {
    display:      inline-flex;
    align-items:  center;
    gap:          5px;
    font-family:  var(--kv-font-family);
    font-size:    12px;
    font-weight:  700;
    padding:      4px 12px;
    border-radius: 9999px;
    letter-spacing: 0.03em;
    white-space:  nowrap;
    line-height:  1.4;
}
.kv-actiontype--action    { background: #ede9fe; color: #5b21b6; }
.kv-actiontype--awareness { background: #ecf5fe; color: #0065c8; }

/* Kategorie Badges */
.kv-category-badge {
    display:      inline-flex;
    align-items:  center;
    gap:          5px;
    font-family:  var(--kv-font-family);
    font-size:    12px;
    font-weight:  700;
    padding:      4px 12px;
    border-radius: 9999px;
    letter-spacing: 0.03em;
    white-space:  nowrap;
    line-height:  1.4;
}
.kv-category--plan-for-change { background: #fff8e1; color: #b45309; }
.kv-category--stay-informed   { background: #e6f4ec; color: #1a7c3e; }

/* Handlungsempfehlung: Badge + Text nebeneinander */
.kv-handlung-wrapper {
    display:     flex;
    align-items: flex-start;
    flex-direction: column;
    gap:         10px;
    flex-wrap:   wrap;
}


/* Externer Link */
.kv-external-link {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    font-family:  var(--kv-font-family);
    font-size:    13px;
    font-weight:  600;
    color:        var(--kv-primary, #0083ff);
    text-decoration: none;
    padding:      5px 12px;
    border:       1.5px solid var(--kv-primary, #0083ff);
    border-radius: var(--kv-radius-pill, 9999px);
    transition:   background 150ms ease, color 150ms ease;
    word-break:   break-all;
}
.kv-external-link:hover {
    background:   var(--kv-primary-light, #ecf5fe);
    text-decoration: none;
}
.kv-external-link svg {
    flex-shrink: 0;
}

/* Felder ausblenden wenn ersetzt */
#kv_relevance.replaced,
#kv_affectedworkload.replaced,
#kv_actiontype.replaced,
#kv_category.replaced,
#kv_handlungsempfehlung.replaced,
#kv_externallink.replaced {
    display: none !important;
}

/* ==========================================================================
   BEWERTUNGSÜBERSICHT – Konsolidierte Styles (SINGLE BLOCK)
   ========================================================================== */
.kv-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--kv-space-8); padding-bottom: var(--kv-space-6); border-bottom: 1px solid var(--kv-border-light); }
.kv-page-header__title { font-size: var(--kv-font-size-xl); font-weight: var(--kv-font-weight-extrabold); color: var(--kv-dark-text); margin: 0; }
.kv-page-header__subtitle { font-size: var(--kv-font-size-md); color: var(--kv-alternative-text); margin: 0; margin-top: var(--kv-space-2); }
.kv-table-card { background: var(--kv-bg-surface); border: 1px solid var(--kv-border-light); border-radius: var(--kv-radius-lg); box-shadow: var(--kv-shadow-sm); overflow: hidden; }
.kv-table-filter-bar { display: flex; align-items: flex-end; gap: var(--kv-space-4); padding: var(--kv-space-5) var(--kv-space-6); border-bottom: 1px solid var(--kv-border-light); flex-wrap: wrap; }
.kv-table-filter-bar__search { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 200px; max-width: 320px; }
.kv-table-filter-bar__dropdown { display: flex; flex-direction: column; gap: 0.25rem; min-width: 140px; }
.kv-table-filter-bar__label { font-family: var(--kv-font-family); font-size: var(--kv-font-size-xs); font-weight: var(--kv-font-weight-semibold); color: var(--kv-alternative-text); text-transform: uppercase; letter-spacing: 0.04em; }
.kv-table-filter-bar__input { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--kv-border-default); border-radius: var(--kv-radius-md); font-family: var(--kv-font-family); font-size: var(--kv-font-size-sm); color: var(--kv-dark-text); background: var(--kv-bg-surface); transition: border-color var(--kv-transition-fast), box-shadow var(--kv-transition-fast); }
.kv-table-filter-bar__input:focus { outline: none; border-color: var(--kv-primary); box-shadow: 0 0 0 3px rgba(0, 131, 255, 0.1); }
.kv-table-filter-bar__select { appearance: none; -webkit-appearance: none; width: 100%; padding: 0.55rem 2rem 0.55rem 0.75rem; border: 1px solid var(--kv-border-default); border-radius: var(--kv-radius-md); font-family: var(--kv-font-family); font-size: var(--kv-font-size-sm); color: var(--kv-dark-text); background: var(--kv-bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a85a6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center; cursor: pointer; transition: border-color var(--kv-transition-fast); }
.kv-table-filter-bar__select:focus { outline: none; border-color: var(--kv-primary); box-shadow: 0 0 0 3px rgba(0, 131, 255, 0.1); }
.kv-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kv-table { width: 100%; border-collapse: collapse; min-width: 800px; }
.kv-table thead { background: var(--kv-dark-text); color: #ffffff; position: sticky; top: 0; z-index: 10; }
.kv-table__th { padding: 0.875rem 1.25rem; text-align: left; font-family: var(--kv-font-family); font-size: var(--kv-font-size-xs); font-weight: var(--kv-font-weight-bold); letter-spacing: 0.06em; white-space: nowrap; }
.kv-table__sort-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: none; color: inherit; cursor: pointer; font: inherit; padding: 0; transition: opacity var(--kv-transition-fast); }
.kv-table__sort-btn:hover { opacity: 0.75; }
.kv-table__sort-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.kv-table__row { border-top: 1px solid var(--kv-border-light); transition: background var(--kv-transition-fast); }
.kv-table__row:hover { background: var(--kv-primary-light); }
.kv-table__td { padding: 0.875rem 1.25rem; font-family: var(--kv-font-family); font-size: var(--kv-font-size-sm); color: var(--kv-neutral-text); vertical-align: middle; }
.kv-table__td--actions { white-space: nowrap; }
.kv-table__td--center { text-align: center; }
.kv-table__link { color: var(--kv-primary); text-decoration: none; font-weight: var(--kv-font-weight-semibold); transition: color var(--kv-transition-fast); }
.kv-table__link:hover { text-decoration: underline; color: var(--kv-primary-hover); }
.kv-table__link:focus-visible { outline: 2px solid var(--kv-primary); outline-offset: 2px; border-radius: 2px; }
.kv-table__truncated { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-width: 200px; cursor: help; font-size: var(--kv-font-size-xs); color: var(--kv-alternative-text); }
.kv-table__actions { display: flex; gap: 0.4rem; align-items: center; }
.kv-table__empty { text-align: center; padding: 3.5rem 1rem; color: var(--kv-alternative-text); }
.kv-table__empty p { font-size: var(--kv-font-size-sm); margin: 0; }
.kv-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: var(--kv-radius-pill); font-family: var(--kv-font-family); font-size: var(--kv-font-size-xs); font-weight: var(--kv-font-weight-bold); white-space: nowrap; letter-spacing: 0.02em; }
.kv-badge--roadmap { background: #ecf5fe; color: #0065c8; }
.kv-badge--messagecenter { background: #ede9fe; color: #5b21b6; }
.kv-badge--klasse-a { background: #dcfce7; color: #166534; }
.kv-badge--klasse-b { background: #d1fae5; color: #065f46; }
.kv-badge--klasse-c { background: #fef9c3; color: #854d0e; }
.kv-badge--klasse-d { background: #fed7aa; color: #9a3412; }
.kv-badge--klasse-e { background: #fee2e2; color: #991b1b; }
.kv-badge--klasse-f { background: #fce7f3; color: #9d174d; }
.kv-badge--status-121630000 { background: #fef9c3; color: #854d0e; }
.kv-badge--status-121630001 { background: #dbeafe; color: #1e40af; }
.kv-badge--status-121630002 { background: #dcfce7; color: #166534; }
.kv-table-count { padding: 0.5rem var(--kv-space-6); font-family: var(--kv-font-family); font-size: var(--kv-font-size-sm); color: var(--kv-alternative-text); }
.kv-table-count__text { font-weight: var(--kv-font-weight-semibold); }
.kv-table-pagination { display: flex; justify-content: center; align-items: center; gap: 0.35rem; padding: 1rem 1.5rem; border-top: 1px solid var(--kv-border-light); flex-wrap: wrap; }
.kv-pagination__btn { min-width: 2.25rem; padding: 0.45rem 0.65rem; border: 1px solid var(--kv-border-default); border-radius: var(--kv-radius-md); background: var(--kv-bg-surface); color: var(--kv-neutral-text); font-family: var(--kv-font-family); font-size: var(--kv-font-size-sm); font-weight: var(--kv-font-weight-semibold); cursor: pointer; transition: all var(--kv-transition-fast); line-height: 1; }
.kv-pagination__btn:hover:not(:disabled) { background: var(--kv-primary-light); border-color: var(--kv-primary); color: var(--kv-primary); }
.kv-pagination__btn:focus-visible { outline: var(--kv-focus-outline); outline-offset: var(--kv-focus-offset); }
.kv-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.kv-pagination__btn--active { background: var(--kv-primary); color: #ffffff; border-color: var(--kv-primary); cursor: default; }
.kv-pagination__dots { padding: 0.45rem 0.3rem; color: var(--kv-alternative-text); font-size: var(--kv-font-size-sm); line-height: 1; }
.kv-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.75rem; border-radius: var(--kv-radius-md); font-family: var(--kv-font-family); font-size: var(--kv-font-size-xs); font-weight: var(--kv-font-weight-semibold); cursor: pointer; border: 1px solid transparent; transition: all var(--kv-transition-fast); white-space: nowrap; text-decoration: none; }
.kv-btn--small { padding: 0.35rem 0.6rem; font-size: var(--kv-font-size-xs); }
.kv-btn--primary { background: var(--kv-primary); color: #ffffff; border-color: var(--kv-primary); }
.kv-btn--primary:hover { background: var(--kv-primary-hover); transform: translateY(-1px); }

/* --- MODAL --- */
.kv-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: none; align-items: center; justify-content: center; }
.kv-modal-overlay--visible { display: flex; }
.kv-modal-content { background: var(--kv-bg-surface); width: 90%; max-width: 900px; height: 80vh; border-radius: var(--kv-radius-lg); box-shadow: var(--kv-shadow-md); display: flex; flex-direction: column; overflow: hidden; }
.kv-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--kv-border-light); flex-shrink: 0; }
.kv-modal-header__title { font-family: var(--kv-font-family); font-size: var(--kv-font-size-lg); font-weight: var(--kv-font-weight-bold); color: var(--kv-dark-text); margin: 0; }
.kv-modal-close { background: none; border: none; font-size: 1.75rem; color: var(--kv-neutral-text); cursor: pointer; line-height: 1; padding: 0.25rem 0.5rem; border-radius: var(--kv-radius-sm); transition: color var(--kv-transition-fast), background var(--kv-transition-fast); }
.kv-modal-close:hover { color: var(--kv-dark-text); background: var(--kv-bg-subtle); }
.kv-modal-loader { display: flex; align-items: center; justify-content: center; padding: 3rem; color: var(--kv-alternative-text); font-family: var(--kv-font-family); font-size: var(--kv-font-size-sm); flex: 1; }
.kv-modal-frame { width: 100%; flex: 1; border: none; display: none; }

/* --- RESPONSIVE --- */
@media (max-width: 640px) {
  .kv-table-filter-bar { flex-direction: column; align-items: stretch; padding: var(--kv-space-4); }
  .kv-table-filter-bar__search { max-width: 100%; }
  .kv-pagination__btn { min-width: 1.75rem; padding: 0.35rem 0.5rem; font-size: var(--kv-font-size-xs); }
  .kv-modal-content { width: 95%; height: 90vh; }
}
@media print {
  .kv-table-filter-bar, .kv-table-pagination, .kv-table__td--actions, .kv-modal-overlay { display: none !important; }
}