/* GOOGLE FONTS INTEGRATION */
/* Lokale Font-Definitionen mit heruntergeladenen WOFF2-Dateien */

/* === ROBOTO === */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/roboto-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/roboto-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/roboto-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/roboto-700.woff2') format('woff2');
}

/* === OPEN SANS === */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/open-sans-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/open-sans-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/open-sans-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/open-sans-700.woff2') format('woff2');
}

/* === LATO === */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/lato-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/lato-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/lato-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/lato-900.woff2') format('woff2');
}

/* === MONTSERRAT === */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/montserrat-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/montserrat-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/montserrat-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/montserrat-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/montserrat-700.woff2') format('woff2');
}

/* === OSWALD === */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/oswald-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/oswald-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/oswald-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/oswald-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/oswald-700.woff2') format('woff2');
}

/* === PT SERIF === */
@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/pt-serif-400.woff2') format('woff2');
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/pt-serif-700.woff2') format('woff2');
}

/* === LORA === */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/lora-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/lora-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/lora-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/lora-700.woff2') format('woff2');
}

/* === SPECTRAL === */
@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/spectral-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/spectral-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/spectral-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/spectral-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Spectral';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/spectral-700.woff2') format('woff2');
}

/* === NOTO SANS === */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/noto-sans-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/noto-sans-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/noto-sans-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/noto-sans-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/noto-sans-700.woff2') format('woff2');
}

/* === FRAUNCES === */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/fraunces-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/fraunces-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/fraunces-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/fraunces-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/fraunces-700.woff2') format('woff2');
}

/* === INSTRUMENT SERIF === */
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-serif-400.woff2') format('woff2');
}

/* === SOURCE SANS PRO === */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/source-sans-pro-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/source-sans-pro-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/source-sans-pro-700.woff2') format('woff2');
}

/* === IBM PLEX SANS === */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-300.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-400.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-500.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-600.woff2') format('woff2');
}

/* === RUBIK === */
@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/rubik-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/rubik-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/rubik-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/rubik-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/rubik-700.woff2') format('woff2');
}

/* === ARCHIVO NARROW === */
@font-face {
    font-family: 'Archivo Narrow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/archivo-narrow-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo Narrow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/archivo-narrow-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo Narrow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/archivo-narrow-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo Narrow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/archivo-narrow-700.woff2') format('woff2');
}

/* === RALEWAY === */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/raleway-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/raleway-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/raleway-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/raleway-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/raleway-700.woff2') format('woff2');
}

/* === WORK SANS === */
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/work-sans-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/work-sans-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/work-sans-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/work-sans-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/work-sans-700.woff2') format('woff2');
}

/* === TITILLIUM WEB === */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/titillium-web-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/titillium-web-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/titillium-web-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/titillium-web-700.woff2') format('woff2');
}

/* === EXO 2 === */
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/exo-2-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/exo-2-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/exo-2-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/exo-2-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/exo-2-700.woff2') format('woff2');
}

/* === PROMPT === */
@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/prompt-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/prompt-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/prompt-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/prompt-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/prompt-700.woff2') format('woff2');
}

/* Font-Familie CSS-Klassen */
.font-roboto { font-family: 'Roboto', sans-serif; }
.font-open-sans { font-family: 'Open Sans', sans-serif; }
.font-lato { font-family: 'Lato', sans-serif; }
.font-montserrat { font-family: 'Montserrat', sans-serif; }
.font-oswald { font-family: 'Oswald', sans-serif; }
.font-pt-serif { font-family: 'PT Serif', serif; }
.font-lora { font-family: 'Lora', serif; }
.font-spectral { font-family: 'Spectral', serif; }
.font-noto-sans { font-family: 'Noto Sans', sans-serif; }
.font-fraunces { font-family: 'Fraunces', serif; }
.font-instrument-serif { font-family: 'Instrument Serif', serif; }
.font-source-sans-pro { font-family: 'Source Sans Pro', sans-serif; }
.font-ibm-plex-sans { font-family: 'IBM Plex Sans', sans-serif; }
.font-rubik { font-family: 'Rubik', sans-serif; }
.font-archivo-narrow { font-family: 'Archivo Narrow', sans-serif; }
.font-raleway { font-family: 'Raleway', sans-serif; }
.font-work-sans { font-family: 'Work Sans', sans-serif; }
.font-titillium-web { font-family: 'Titillium Web', sans-serif; }
.font-exo-2 { font-family: 'Exo 2', sans-serif; }
.font-prompt { font-family: 'Prompt', sans-serif; }

/* Tahoma (System-Font, kein Import nötig) */
.font-tahoma { font-family: 'Tahoma', sans-serif; }

/* Font-Weight-Klassen */
.font-weight-100 { font-weight: 100; }
.font-weight-200 { font-weight: 200; }
.font-weight-300 { font-weight: 300; }
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }
.font-weight-800 { font-weight: 800; }
.font-weight-900 { font-weight: 900; }

/* Font-Style-Klassen */
.font-style-normal { font-style: normal; }
.font-style-italic { font-style: italic; }

/* NEW WIDGETS CSS - DESIGN ONLY */

/* ===== SEPARATOR WIDGET ===== */

.widget-separator {
    /* Basis-Styles werden via JavaScript gesetzt */
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Horizontaler Separator */
.widget-separator[data-orientation="horizontal"] {
    width: 100%;
    min-height: 1px;
}

/* Vertikaler Separator */
.widget-separator[data-orientation="vertical"] {
    height: 100%;
    min-width: 1px;
    display: inline-block;
}

/* Theme-spezifische Farben */
.widget-separator {
    border-color: var(--widget-border-color, #e0e0e0);
}

.dark-theme .widget-separator {
    border-color: var(--widget-border-color, #404040);
}

/* Separator in verschiedenen Kontexten */
.widget-popup-menu .widget-separator {
    margin: 4px 0;
    border-top-color: var(--widget-border-light, #e0e0e0);
}

.widget-toolbar .widget-separator {
    margin: 0 8px;
    border-left-color: var(--widget-border-light, #e0e0e0);
}

.widget-sidebar .widget-separator {
    margin: 8px 16px;
    border-top-color: var(--widget-border-light, #e0e0e0);
}

/* Responsive Verhalten */
@media (max-width: 768px) {
    .widget-separator[data-orientation="vertical"] {
        display: block;
        width: 100%;
        height: 1px;
        margin: 8px 0;
        border-top: 1px solid var(--widget-border-light, #e0e0e0);
        border-left: none;
    }
}

/* ===== CONTAINER WIDGETS ===== */

/* HeaderedCard Widget */
.widget-headered-card {
    border: 1px solid var(--widget-border-color);
    border-radius: var(--widget-border-radius);
    background-color: var(--widget-background);
    box-shadow: var(--widget-box-shadow);
    transition: var(--widget-transition);
}

.widget-headered-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.widget-headered-card-header {
    background-color: var(--widget-light-background);
    border-bottom: 1px solid var(--widget-border-color);
    padding: 12px 16px;
    border-radius: var(--widget-border-radius) var(--widget-border-radius) 0 0;
}

.widget-headered-card-content {
    padding: 16px;
}

/* Accordion Widget */
.widget-accordion {
    border: 1px solid var(--widget-border-color);
    border-radius: 4px;
    background-color: var(--widget-background);
}

.widget-accordion-panel {
    border-bottom: 1px solid var(--widget-border-light);
}

.widget-accordion-panel:last-child {
    border-bottom: none;
}

.widget-accordion-header {
    background-color: var(--widget-light-background);
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--widget-transition);
}

.widget-accordion-header:hover {
    background-color: var(--widget-hover-background);
}

.widget-accordion-content {
    padding: 16px;
    background-color: var(--widget-background);
}

/* ===== UI WIDGETS ===== */

/* SiteFooter Widget */
.widget-site-footer {
    min-height: 60px;
    background-color: var(--footer-background);
    border-top: 1px solid var(--widget-border-color);
    padding: 20px 0;
    color: var(--widget-text-color);
}

.widget-site-footer-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.widget-site-footer-links {
    display: flex;
    gap: 20px;
}

.widget-site-footer-link {
    color: var(--widget-text-muted);
    text-decoration: none;
    transition: var(--widget-transition);
}

.widget-site-footer-link:hover {
    color: var(--widget-primary);
}

.widget-site-footer-copyright {
    color: var(--widget-text-muted);
    font-size: 14px;
}

/* SiteHeader Widget */
.widget-site-header {
    background-color: var(--header-background);
    border-bottom: 1px solid var(--widget-border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* SiteSidebar Widget */
.widget-site-sidebar {
    background-color: var(--sidebar-background);
    border-right: 1px solid var(--widget-border-color);
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}

.widget-site-sidebar-collapsed {
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
}

/* ===== WIDGET LIBRARY CSS ===== */
/* Nur Design/Theming - Layout erfolgt via JavaScript style="" */

/* ===== CSS VARIABLES ===== */
:root {
    /* Theme Colors - Widget Library Internal */
    --widget-primary: #1BF58F;
    --widget-secondary: #7690C9;
    --widget-tertiary: #666666;
    --widget-text-color: #2d3748;
    --widget-background: #ffffff;
    --widget-light-background: #e2e8f0;
    --widget-border-color: #d1d5db;
    
    /* Theme API Variables - Integration mit ThemeManager */
    --corporate-primary: var(--widget-primary);
    --corporate-secondary: var(--widget-secondary);
    --corporate-tertiary: var(--widget-tertiary);
    --corporate-text: var(--widget-text-color);
    --corporate-white: var(--widget-background);
    --corporate-light-gray: var(--widget-light-background);
    --corporate-border: var(--widget-border-color);
    
    /* Layout Colors */
    --header-background: #ffffff;
    --sidebar-background: #fafafa;
    --footer-background: #ffffff;
    
    /* Typography */
    --widget-font-family: 'Roboto', sans-serif;
    --widget-heading-font: 'Roboto', sans-serif;
    --font-family-base: var(--widget-font-family);
    --font-family-heading: var(--widget-heading-font);
    
    /* Dimensions */
    --sidebar-width: 280px;
    --header-height: 64px;
    --footer-height: 60px;
    
    /* UI Options */
    --widget-border-radius: 5px;
    --widget-box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    --widget-transition: all 0.3s ease;
    
    /* Additional Widget Colors */
    --widget-border-light: #cbd5e1;
    --widget-hover-background: #e2e8f0;
    --widget-text-muted: #64748b;
    --widget-primary-rgb: 27, 245, 143;
    
    /* Grauschattierungen (Theme Manager konfigurierbar) */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
}

/* Theme API Override - Wenn Theme-API geladen wird */
:root[data-theme-loaded="true"] {
    --widget-primary: var(--corporate-primary, var(--widget-primary));
    --widget-secondary: var(--corporate-secondary, var(--widget-secondary));
    --widget-tertiary: var(--corporate-tertiary, var(--widget-tertiary));
    --widget-text-color: var(--corporate-text, var(--widget-text-color));
    --widget-background: var(--corporate-white, var(--widget-background));
    --widget-light-background: var(--corporate-light-gray, var(--widget-light-background));
    --widget-border-color: var(--corporate-border, var(--widget-border-color));
    --widget-font-family: var(--font-family-base, var(--widget-font-family));
    --widget-heading-font: var(--font-family-heading, var(--widget-heading-font));
}

/* Theme Integration Status Indicator */
:root[data-theme-source="api"]::before {
    content: "Theme: API";
    position: fixed;
    top: 0;
    right: 0;
    background: var(--widget-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    z-index: 10000;
    opacity: 0.7;
    pointer-events: none;
}

/* Debug-Modus: Theme-Status anzeigen */
:root[data-theme-debug="true"] :root[data-theme-source="api"]::before {
    opacity: 1;
    font-weight: 600;
}

/* Dark Theme Variables */
.dark-theme {
    --widget-text-color: #ffffff;
    --widget-background: #1a202c;
    --widget-light-background: #2d3748;
    --widget-border-color: #4a5568;
    --widget-border-light: #4a5568;
    --widget-hover-background: var(--gray-700);
    --widget-text-muted: var(--gray-400);
    --header-background: #2d3748;
    --sidebar-background: #1a202c;
    --footer-background: #2d3748;
}

/* ===== DESIGN-ONLY RULES ===== */

/* Body Design (Layout comes via JavaScript) */
body {
    font-family: var(--widget-font-family);
    color: var(--widget-text-color);
    background: var(--widget-background);
}

/* TabbedPane Design (Layout comes via style="") */
.widget-tabbed-control .tab-navigation {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem;
}

.widget-tabbed-control .tab-content-container {
    /* Layout-Eigenschaften werden in JavaScript gesetzt */
}

.widget-tabbed-control .tab-content {
    /* Layout-Eigenschaften werden in JavaScript gesetzt */
}

.widget-tabbed-control .tab-item {
    border-radius: 0.375rem 0.375rem 0 0;
    background: #e9ecef;
    border: 1px solid #dee2e6;
    border-bottom: none;
    margin-right: 2px;
}

.widget-tabbed-control .tab-item.active {
    background: white;
    border-color: #dee2e6;
    position: relative;
    z-index: 1;
}

.widget-tabbed-control .tab-button {
    background: transparent;
    border: none;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 0.375rem 0.375rem 0 0;
}

.widget-tabbed-control .tab-button:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #495057;
}

.widget-tabbed-control .tab-item.active .tab-button {
    background: transparent;
    color: #495057;
    font-weight: 600;
}

.widget-tabbed-control .tab-button i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.widget-tabbed-control .tab-item.active .tab-button i {
    color: #007bff;
}

.widget-tabbed-control .tab-text {
    font-size: 0.9rem;
}

/* Button Design (Layout comes via style="") */
.widget-button {
    /* Design-Eigenschaften (gehören ins CSS) */
    background-color: #007bff;
    color: white;
    border: 1px solid #007bff;
    font-family: Roboto, system-ui, sans-serif;
}

.widget-button:hover {
    background-color: #0056b3;
    border-color: #004085;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.widget-button.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: white;
}

.widget-button:active {
    background-color: #004085;
    border-color: #003d82;
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.widget-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.widget-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Button Variants (nur Farben) */
.widget-button.btn-default {
    background-color: #f8f9fa;
    border: 1px solid #6c757d;
    color: #495057;
}

.widget-button.btn-default:hover {
    background-color: #e2e6ea;
    border-color: #5a6268;
    color: #495057;
}

.widget-button.btn-primary {
    background-color: #007bff;
    border: 1px solid #007bff;
    color: white;
}

.widget-button.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

.widget-button.btn-secondary {
    background-color: #6c757d;
    border: 1px solid #6c757d;
    color: white;
}

.widget-button.btn-success {
    background-color: #28a745;
    border: 1px solid #28a745;
    color: white;
}

.widget-button.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.widget-button.btn-danger {
    background-color: #dc3545;
    border: 1px solid #dc3545;
    color: white;
}

.widget-button.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.widget-button.btn-warning {
    background-color: #ffc107;
    border: 1px solid #ffc107;
    color: #212529;
}

.widget-button.btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

.widget-button.btn-info {
    background-color: #17a2b8;
    border: 1px solid #17a2b8;
    color: white;
}

.widget-button.btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

/* Icon-Abstände (Design-Eigenschaft) */
.widget-button i {
    margin-right: 6px;
}

.widget-button.btn-icon-only i {
    margin-right: 0;
}

/* InputField Design (Layout comes via style="") */
.widget-input-group .widget-label {
    color: #495057;
}

.widget-input-group .widget-input {
    background-color: #fff;
    color: #495057;
    font-family: inherit;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.widget-input-group .widget-input:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.widget-input-group .help-text {
    color: #6c757d;
}

/* Textarea Design */
.widget-textarea-group .widget-textarea {
    background-color: #fff;
    color: #495057;
    font-family: inherit;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    /* Layout-Eigenschaften (padding, border, border-radius, resize) werden in JavaScript gesetzt */
}

.widget-textarea-group .widget-textarea:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Dropdown Design */
.widget-dropdown-group .widget-dropdown {
    background-color: #fff;
    color: #495057;
    font-family: inherit;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    /* Layout-Eigenschaften (padding, border, border-radius) werden in JavaScript gesetzt */
}

.widget-dropdown-group .widget-dropdown:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Modal Design (Layout comes via style="") */
.widget-modal .modal-dialog {
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    /* Layout-Eigenschaften (position, width, max-width, margin) werden in JavaScript gesetzt */
}

/* Modal Sizes */
.widget-modal .modal-dialog.modal-sm {
    max-width: 300px;
}

.widget-modal .modal-dialog.modal-lg {
    max-width: 800px;
    width: 80vw;
    height: 80vh;
}

.widget-modal .modal-dialog.modal-xl {
    max-width: 1400px;
    width: 95vw;
    height: 90vh;
}

.widget-modal .modal-dialog.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100vh;
    margin: 0;
}

.widget-modal .modal-content {
    border: none;
    border-radius: 0.5rem;
    background: white;
    /* Layout-Eigenschaften (display, flex-direction, width, height, position, overflow) werden in JavaScript gesetzt */
}



.widget-modal .modal-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-radius: 0.5rem 0.5rem 0 0;
}

.widget-modal .modal-title {
    font-weight: 600;
    color: #495057;
}

.widget-modal .modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #6c757d;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.widget-modal .modal-close:hover {
    color: #495057;
}

.widget-modal .modal-body {
    background: white;
    /* Layout-Eigenschaften (flex, overflow, padding, min-height) werden in JavaScript gesetzt */
}

.widget-modal .modal-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-radius: 0 0 0.5rem 0.5rem;
}

/* Container Design */
.widget-container {
    background: transparent;
}

/* Layout Helper Classes - Notwendig für Widget-Strukturen */
.box-layout-container {
    display: flex;
    box-sizing: border-box;
}

.horizontal-box-container {
    flex-direction: row;
}

.vertical-box-container {
    flex-direction: column;
}

.grid-layout-container {
    display: grid;
    box-sizing: border-box;
}

/* Spacer Design */
.widget-spacer {
    background-color: transparent;
    border: none;
    outline: none;
}

/* Statistics Cards Design */
.stat-card {
    background-color: #f7fafc;
    border: 2px solid #4a5568;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.15s ease-in-out;
}

.stat-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.stat-icon-container {
    border-radius: 0.5rem;
    background-color: #e2e8f0;
}

.stat-value-container {
    font-size: 2rem;
    font-weight: 700;
    color: #4a5568;
}

.stat-label-container {
    font-size: 0.875rem;
    font-weight: 500;
    color: #718096;
}

.stat-change-container {
    font-size: 0.75rem;
    color: #a0aec0;
}

/* Quick Access Section Design */
.quick-access-section {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Tenant Card Design */
.tenant-card {
    background-color: white;
    border: 2px solid #4a5568;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.headered-card-header {
    background-color: #4a5568;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

.headered-card-content {
    background-color: white;
}

.tenant-info-table {
    font-size: 0.875rem;
}

/* Badge Design */
.badge {
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 500;
}

.badge-active {
    background-color: #10b981;
    color: white;
}

/* Action Card Design */
.action-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.15s ease-in-out;
}

.action-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.action-card-header {
    border-bottom: 1px solid #f3f4f6;
}

.action-card-title {
    font-weight: 600;
    color: #1f2937;
}

.action-card-description {
    color: #6b7280;
        font-size: 0.875rem;
}

.action-card-expanded {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
}

/* Info Box Design */
.info-box {
    border-radius: 0.5rem;
    border: 1px solid;
}

.info-box-info {
    background-color: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}

.info-box-success {
    background-color: #f0fdf4;
    border-color: #22c55e;
    color: #166534;
}

.info-box-warning {
    background-color: #fffbeb;
    border-color: #f59e0b;
    color: #92400e;
}

.info-box-error {
    background-color: #fef2f2;
    border-color: #ef4444;
    color: #b91c1c;
}

/* Toggle Switch Design */
.widget-toggle-label {
    cursor: pointer;
}

.widget-toggle-input {
    opacity: 0;
}

.widget-toggle-switch {
    background-color: #cbd5e1;
    border-radius: 1rem;
    transition: background-color 0.3s;
}

.widget-toggle-slider {
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.widget-toggle-input:checked + .widget-toggle-switch {
    background-color: #3b82f6;
}

.widget-toggle-input:checked + .widget-toggle-switch .widget-toggle-slider {
    transform: translateX(1rem);
}

.widget-toggle-switch:hover {
    background-color: #94a3b8;
}

.widget-toggle-input:checked + .widget-toggle-switch:hover {
    background-color: #2563eb;
}

/* Tab Content Wrapper Design */
.tab-content-wrapper {
    background: white;
}

/* Sidebar Design */
.sidebar-toggle-container {
    background-color: transparent;
}

.sidebar-title {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
}

.sidebar-toggle-btn {
    background-color: transparent;
    color: #64748b;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
}

.sidebar-toggle-btn:hover {
    background-color: #f1f5f9;
    color: #475569;
}

.sidebar-menu-item {
    background-color: transparent;
    color: #64748b;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-weight: 400;
    transition: all 0.15s ease-in-out;
}

.sidebar-menu-item:hover {
    background-color: #f1f5f9;
    color: #475569;
}

.sidebar-menu-item.active {
    background-color: #e2e8f0;
    color: #1e293b;
    font-weight: 500;
}

/* Footer Design */
.footer-copyright {
    color: #64748b;
    font-size: 0.875rem;
}

.footer-link {
    color: #64748b;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.footer-link:hover {
    color: #475569;
    text-decoration: underline;
}

/* User Dropdown Design */
.user-dropdown-menu {
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.dropdown-user-section {
    border-bottom: 1px solid #f3f4f6;
}

.dropdown-user-name {
    color: #1e293b;
    font-weight: 600;
}

.dropdown-user-role {
    color: #64748b;
    font-size: 0.875rem;
}

.dropdown-menu-item {
    color: #374151;
    background-color: transparent;
    border: none;
    border-radius: 0;
    transition: all 0.15s ease-in-out;
}

.dropdown-menu-item:hover {
    background-color: #f9fafb;
    color: #1f2937;
}

.dropdown-divider {
    background-color: #e2e8f0;
}

.text-danger {
    color: #dc2626 !important;
}

/* Search Bar Design */
.search-bar {
    background: transparent;
}

.search-bar .widget-input-group {
    margin-bottom: 0 !important;
}

.search-bar .widget-input {
    border-radius: 0.375rem 0 0 0.375rem;
}

.search-bar .widget-button {
    border-radius: 0 0.375rem 0.375rem 0;
    border-left: none;
}

/* Header Search Styles */
.header-search {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.15s ease-in-out;
}

.header-search:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.header-search i {
    color: #94a3b8;
    font-size: 0.875rem;
}

.header-search .search-input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 0.875rem;
    color: var(--widget-text-color);
}

.header-search .search-input::placeholder {
    color: #94a3b8;
}

/* Sidebar Toggle Button ohne grauen Rand */
.sidebar-toggle-btn {
    background-color: transparent;
    color: #64748b;
    border: none !important;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
}

.sidebar-toggle-btn:hover {
    background-color: #f1f5f9;
    color: #475569;
}

/* Empty State Design */
.logs-empty-icon {
    color: #94a3b8;
}

.logs-empty-title {
    color: #475569;
    font-size: 1.5rem;
    font-weight: 600;
}

.logs-empty-message {
    color: #64748b;
    font-size: 1rem;
}

/* Responsive Design Helpers */
@media (max-width: 768px) {
    .widget-modal .modal-dialog {
        margin: 1rem;
    }
    
    .widget-tabbed-control .tab-content-wrapper {
    padding: 1rem;
    }
}

/* Utility Classes */
.widget-rounded {
    border-radius: 0.375rem;
}

.widget-shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.widget-shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.widget-border {
    border: 1px solid #e5e7eb;
}

.widget-bg-light {
    background-color: #f8f9fa;
}

.widget-bg-white {
    background-color: white;
}

.widget-text-muted {
    color: #6c757d;
}

/* Slider Design */
.widget-slider-group {
    margin-bottom: 1rem;
}

.widget-slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.widget-slider {
    flex: 1;
    height: 6px;
    background: #dee2e6;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

.widget-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
}

.widget-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.widget-slider-value {
    min-width: 40px;
    font-weight: 500;
    color: #495057;
}

/* Icon Design */
.widget-icon {
    display: inline-block;
    line-height: 1;
}

.widget-icon:hover {
    opacity: 0.8;
}

/* Image Design */
.widget-image {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.widget-image-rounded {
    border-radius: 8px;
}

.widget-image-border {
    border: 2px solid #dee2e6;
}

.widget-image-shadow {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Avatar Design */
.widget-avatar {
    position: relative;
    display: inline-block;
}

.widget-avatar-content {
    position: relative;
    overflow: hidden;
}

.widget-avatar-small .widget-avatar-content {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.widget-avatar-medium .widget-avatar-content {
    width: 48px;
    height: 48px;
    font-size: 18px;
}

.widget-avatar-large .widget-avatar-content {
    width: 64px;
    height: 64px;
    font-size: 24px;
}

.widget-avatar-xl .widget-avatar-content {
    width: 96px;
    height: 96px;
    font-size: 36px;
}

.widget-avatar-circle .widget-avatar-content {
    border-radius: 50%;
}

.widget-avatar-rounded .widget-avatar-content {
    border-radius: 8px;
}

.widget-avatar-status {
    position: absolute;
    border-radius: 50%;
}

.widget-avatar-clickable {
    cursor: pointer;
}

.widget-avatar-clickable:hover {
    opacity: 0.9;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

/* TitleLabel Design */
.widget-title-label {
    color: #333;
    margin: 1rem 0;
}

.widget-title-underline {
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
}

.widget-title-bold {
    font-weight: bold;
}

.widget-title-light {
    font-weight: 300;
}

.widget-title-small {
    font-size: 0.9em;
}

.widget-title-large {
    font-size: 1.2em;
}

.widget-title-xl {
    font-size: 1.5em;
}

/* Progressbar Design */
.widget-progressbar-group {
    margin-bottom: 1rem;
}

.widget-progressbar-container {
    width: 100%;
    height: 20px;
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.widget-progressbar {
    height: 100%;
    background-color: #007bff;
    transition: width 0.3s ease;
    border-radius: 10px;
    position: relative;
}

.widget-progressbar-primary {
    background-color: #007bff;
}

.widget-progressbar-success {
    background-color: #28a745;
}

.widget-progressbar-warning {
    background-color: #ffc107;
}

.widget-progressbar-danger {
    background-color: #dc3545;
}

.widget-progressbar-info {
    background-color: #17a2b8;
}

.widget-progressbar-striped {
    background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.widget-progressbar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% { background-position: 1rem 0; }
    100% { background-position: 0 0; }
}

.widget-progressbar-small {
    height: 12px;
}

.widget-progressbar-large {
    height: 28px;
}

.widget-progressbar-value {
    text-align: center;
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Checkbox Design */
.widget-checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.widget-checkbox-inline {
    display: inline-flex;
    margin-right: 1rem;
    margin-bottom: 0;
}

.widget-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.widget-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-right: 0.5rem;
}

.widget-checkbox-checkmark {
    color: transparent;
    font-size: 12px;
    transition: color 0.2s ease;
}

.widget-checkbox-checked {
    background-color: #007bff;
    border-color: #007bff;
}

.widget-checkbox-checked .widget-checkbox-checkmark {
    color: white;
}

.widget-checkbox-primary.widget-checkbox-checked {
    background-color: #007bff;
    border-color: #007bff;
}

.widget-checkbox-success.widget-checkbox-checked {
    background-color: #28a745;
    border-color: #28a745;
}

.widget-checkbox-warning.widget-checkbox-checked {
    background-color: #ffc107;
    border-color: #ffc107;
}

.widget-checkbox-danger.widget-checkbox-checked {
    background-color: #dc3545;
    border-color: #dc3545;
}

.widget-checkbox-info.widget-checkbox-checked {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.widget-checkbox-indeterminate {
    background-color: #6c757d;
    border-color: #6c757d;
}

.widget-checkbox-indeterminate .widget-checkbox-checkmark {
    color: white;
}

.widget-checkbox-label {
    user-select: none;
    color: #495057;
}

.widget-checkbox-disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

.widget-checkbox-small .widget-checkbox-custom {
    width: 16px;
    height: 16px;
}

.widget-checkbox-small .widget-checkbox-checkmark {
    font-size: 10px;
}

.widget-checkbox-large .widget-checkbox-custom {
    width: 24px;
    height: 24px;
}

.widget-checkbox-large .widget-checkbox-checkmark {
    font-size: 14px;
}

/* Multiselect Design */
.widget-multiselect-group {
    margin-bottom: 1rem;
}

.widget-multiselect-container {
    position: relative;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    min-height: 38px;
    cursor: pointer;
}

.widget-multiselect-container:hover {
    border-color: #80bdff;
}

.widget-multiselect-open {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.widget-multiselect-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 8px;
    min-height: 30px;
    align-items: center;
}

.widget-multiselect-placeholder {
    color: #6c757d;
    font-style: italic;
}

.widget-multiselect-tag {
    display: flex;
    align-items: center;
    background-color: #007bff;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.875rem;
    gap: 4px;
}

.widget-multiselect-tag-text {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-multiselect-tag-remove {
    cursor: pointer;
    opacity: 0.8;
}

.widget-multiselect-tag-remove:hover {
    opacity: 1;
}

.widget-multiselect-count {
    background-color: #6c757d;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.875rem;
}

.widget-multiselect-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

.widget-multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.widget-multiselect-search {
    width: 100%;
    padding: 8px;
    border: none;
    border-bottom: 1px solid #dee2e6;
    outline: none;
}

.widget-multiselect-options {
    max-height: 150px;
    overflow-y: auto;
}

.widget-multiselect-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    gap: 8px;
}

.widget-multiselect-option:hover {
    background-color: #f8f9fa;
}

.widget-multiselect-option-selected {
    background-color: #e3f2fd;
}

.widget-multiselect-option-icon {
    color: #007bff;
    width: 16px;
}

.widget-multiselect-option-text {
    flex: 1;
}

.widget-multiselect-no-options {
    padding: 12px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* SortableTable Design */
.widget-sortable-table-container {
    /* Nur Design-Properties - Layout-Properties sind im Widget */
}

.widget-table-search {
    /* Nur Design-Properties - Layout-Properties sind im Widget */
}

.widget-table-search-input {
    border: 1px solid #ced4da;
    border-radius: 4px;
    outline: none;
}

.widget-table-search-input:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.widget-table-responsive {
    overflow-x: auto;
}

.widget-sortable-table {
    border-collapse: collapse;
    background-color: #fff;
}

.widget-table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}

.widget-table-bordered {
    border: 1px solid #dee2e6;
}

.widget-table-bordered th,
.widget-table-bordered td {
    border: 1px solid #dee2e6;
}

.widget-table-hover tbody tr:hover {
    background-color: rgba(0,0,0,.075);
}

.widget-table-header {
    padding: 12px;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    font-weight: 600;
    color: #495057;
}

.widget-table-sortable {
    cursor: pointer;
    user-select: none;
}

.widget-table-sortable:hover {
    background-color: #e9ecef;
}

.widget-table-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.widget-table-cell {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
    color: #495057;
}

.widget-table-row {
    transition: background-color 0.15s ease;
}

.widget-table-row-selected {
    background-color: #e3f2fd !important;
}

.widget-table-select-header,
.widget-table-select-cell {
    width: 40px;
    text-align: center;
}

.widget-table-no-data {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

.widget-table-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 1rem;
}

.widget-pagination-btn {
    padding: 6px 12px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    color: #007bff;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.widget-pagination-btn:hover:not(:disabled) {
    background-color: #e9ecef;
}

.widget-pagination-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.widget-pagination-active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.widget-pagination-active:hover {
    background-color: #0056b3;
}

/* Button mit Icon und Text */
.widget-button i {
    margin-right: 6px;
}

.widget-button.btn-icon-only i {
    margin-right: 0;
}

/* Toggle Widget */
.widget-toggle-container {
    /* Layout-Properties sind im Widget - nur Design hier */
}

.widget-toggle-switch {
    background-color: #ccc;
    border: none;
    outline: none;
}

.widget-toggle-switch:hover {
    background-color: #bbb;
}

.widget-toggle-switch.widget-toggle-primary {
    background-color: #007bff;
}

.widget-toggle-switch.widget-toggle-success {
    background-color: #28a745;
}

.widget-toggle-switch.widget-toggle-warning {
    background-color: #ffc107;
}

.widget-toggle-switch.widget-toggle-danger {
    background-color: #dc3545;
}

.widget-toggle-label {
    font-weight: 500;
    color: #333;
}

/* SmartImage Widget */
.widget-smart-image {
    transition: all 0.3s ease;
}

.widget-image-responsive {
    /* Layout-Properties sind im Widget - nur Design hier */
}

.widget-image-rounded {
    border-radius: 8px;
}

.widget-image-border {
    border: 1px solid #dee2e6;
}

.widget-image-shadow {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ToggleCard Widget */
.widget-toggle-card {
    transition: all 0.3s ease;
    font-family: inherit;
}

.widget-toggle-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.widget-toggle-card-checked {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.widget-toggle-card-disabled {
    cursor: not-allowed !important;
}

.widget-toggle-card-disabled:hover {
    transform: none;
    box-shadow: none;
}

.widget-toggle-card-content {
    /* Layout-Properties sind im Widget - nur Design hier */
}

.widget-toggle-card-icon {
    transition: color 0.3s ease;
}

.widget-toggle-card-title {
    font-weight: 600;
}

.widget-toggle-card-description {
    opacity: 0.8;
}

.widget-toggle-card-switch {
    border: none;
    outline: none;
}

.widget-toggle-card-thumb {
    pointer-events: none;
}

/* TreeView Widget */
.widget-tree-view {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.widget-tree-node {
    transition: background-color 0.2s ease;
}

.widget-tree-node:hover {
    background-color: #f8f9fa;
}

.widget-tree-node.selected {
    background-color: #e3f2fd;
    color: #1976d2;
}

.widget-tree-expand {
    color: #666;
    transition: transform 0.2s ease;
}

.widget-tree-icon {
    color: #666;
}

.widget-tree-label {
    color: #333;
}

.widget-tree-loading {
    color: #666;
    font-style: italic;
}

.widget-tree-error {
    color: #dc3545;
}

/* PopupMenu Widget */
.widget-popup-menu {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.widget-popup-menu-item {
    transition: background-color 0.2s ease;
}

.widget-popup-menu-item:hover:not(.disabled) {
    background-color: #f8f9fa;
}

.widget-popup-menu-item.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.widget-popup-menu-separator {
    height: 1px;
    background: #eee;
    margin: 4px 0;
}

.widget-popup-menu-icon {
    color: #666;
}

.widget-popup-menu-shortcut {
    color: #999;
    font-size: 12px;
}

.widget-popup-menu-arrow {
    color: #999;
}

/* Tooltip Widget */
.widget-tooltip {
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.widget-tooltip-dark {
    background: #333;
    color: white;
}

.widget-tooltip-light {
    background: white;
    color: #333;
    border: 1px solid #ddd;
}

.widget-tooltip-arrow {
    color: inherit;
}

/* Upload Widget */
.widget-upload {
    border: 2px dashed #ddd;
    border-radius: 8px;
    background: #fafafa;
    transition: all 0.3s ease;
}

.widget-upload:hover {
    border-color: #007bff;
    background: #f0f8ff;
}

.widget-upload-area {
    transition: all 0.3s ease;
}

.widget-upload-icon {
    color: #ccc;
}

.widget-upload-text {
    color: #666;
}

.widget-upload-button {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.widget-upload-button:hover {
    background: #0056b3;
}

.widget-upload-file-item {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.widget-upload-file-item:hover {
    background: #e9ecef;
}

.widget-upload-progress-bar {
    background: #f0f0f0;
    border-radius: 3px;
}

.widget-upload-progress-fill {
    background: #007bff;
    transition: width 0.3s ease;
}

/* ColorPicker Widget */
.widget-color-picker {
    /* Nur Design-Properties - Layout ist im Widget */
}

.widget-color-preview {
    border: 2px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

.widget-color-preview:hover {
    border-color: #007bff;
}

.widget-color-input {
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
}

.widget-color-input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.widget-color-picker-container {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.widget-color-swatch {
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.widget-color-swatch:hover {
    transform: scale(1.1);
}

.widget-color-hue-slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 2px solid #333;
    cursor: pointer;
}

.widget-color-saturation-slider::-webkit-slider-thumb,
.widget-color-value-slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 2px solid #333;
    cursor: pointer;
}

/* Carousel Widget */
.widget-carousel {
    background: #f8f9fa;
    border-radius: 8px;
}

.widget-carousel-control {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.widget-carousel-control:hover {
    background: rgba(0,0,0,0.7);
    transform: scale(1.1);
}

.widget-carousel-indicator {
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.widget-carousel-indicator.active {
    background: white;
}

.widget-carousel-caption {
    background: rgba(0,0,0,0.7);
    color: white;
    border-radius: 4px;
}

/* ListView Widget */
.widget-list-view {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.widget-list-search-input {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.widget-list-search-input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.widget-list-item {
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.widget-list-item:hover {
    background-color: #f8f9fa;
}

.widget-list-item.selected {
    background-color: #e3f2fd;
    color: #1976d2;
}

.widget-list-icon {
    color: #666;
}

.widget-list-badge {
    background: #007bff;
    color: white;
    border-radius: 10px;
}

.widget-list-empty {
    color: #999;
    font-style: italic;
}

/* ComplexListView Widget */
.widget-complex-list-view {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.widget-complex-list-header {
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.widget-complex-list-search {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.widget-complex-list-search:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.widget-complex-list-item {
    transition: all 0.2s ease;
    border-radius: 6px;
}

.widget-complex-list-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.widget-complex-list-item.selected {
    box-shadow: 0 0 0 2px #007bff;
}

.widget-complex-list-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    transition: all 0.2s ease;
}

.widget-complex-list-card:hover {
    border-color: #007bff;
}

.widget-complex-list-tile {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    transition: all 0.2s ease;
}

.widget-complex-list-row {
    background: white;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.widget-complex-list-row:hover {
    background: #f8f9fa;
}

.widget-complex-list-empty {
    color: #999;
    font-style: italic;
}

/* Calendar Widget */
.widget-calendar {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.widget-calendar-header {
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.widget-calendar-nav-btn {
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.widget-calendar-nav-btn:hover {
    background: #f8f9fa;
    border-color: #007bff;
}

.widget-calendar-today-btn {
    border: 1px solid #007bff;
    background: #007bff;
    color: white;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.widget-calendar-today-btn:hover {
    background: #0056b3;
}

.widget-calendar-view-btn {
    border: none;
    transition: all 0.2s ease;
}

.widget-calendar-view-btn:hover {
    background: #f8f9fa;
}

.widget-calendar-title {
    color: #333;
    font-weight: 600;
}

.widget-calendar-day-header {
    background: #f8f9fa;
    border: 1px solid #eee;
    color: #666;
    font-weight: 600;
}

.widget-calendar-day-cell {
    border: 1px solid #eee;
    background: white;
    transition: all 0.2s ease;
}

.widget-calendar-day-cell:hover {
    background: #f8f9fa;
}

.widget-calendar-day-cell.selected {
    background: #e3f2fd;
    border-color: #2196f3;
}

.widget-calendar-day-number {
    font-weight: 500;
    color: #333;
}

.widget-calendar-event {
    background: #007bff;
    color: white;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.widget-calendar-event:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.widget-calendar-loading {
    background: rgba(255,255,255,0.8);
    color: #666;
}

/* RichTextEditor Widget */
.widget-rich-text-editor {
    display: block;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    font-family: Roboto, system-ui, sans-serif;
}

.rich-text-editor-container {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.rich-text-editor-container:focus-within {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.rich-text-editor-toolbar {
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
    padding: 8px 12px;
}

.rich-text-editor-content {
    background: #fff;
    min-height: 200px;
    padding: 12px;
}

.rich-text-editor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
}

.rich-text-editor-loading .fa-spinner {
    margin-right: 8px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* CKEditor 5 Anpassungen */
.widget-rich-text-editor .ck.ck-editor {
    border: none;
}

.widget-rich-text-editor .ck.ck-toolbar {
    border: none;
    background: transparent;
    padding: 0;
}

.widget-rich-text-editor .ck.ck-content {
    border: none;
    box-shadow: none;
    min-height: 150px;
}

.widget-rich-text-editor .ck.ck-content:focus {
    box-shadow: none;
    border: none;
}

/* Dark Theme Support */
.dark-theme .rich-text-editor-container {
    border-color: #444;
    background: #2d3748;
}

.dark-theme .rich-text-editor-toolbar {
    background: #1a202c;
    border-bottom-color: #444;
    color: #e2e8f0;
}

.dark-theme .rich-text-editor-content {
    background: #2d3748;
    color: #e2e8f0;
}

.dark-theme .rich-text-editor-container:focus-within {
    border-color: #4299e1;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.25);
}


/* === Erweiterte Webfonts (aus webfonts.css konsolidiert, lokal in fonts/) === */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Barlow/Barlow-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Barlow/Barlow-6.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Barlow/Barlow-12.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Barlow/Barlow-15.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Barlow/Barlow-18.woff2') format('woff2');
}

@font-face {
  font-family: 'Slabo 27px';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Slabo27px/Slabo27px-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Neuton';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Neuton/Neuton-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Neuton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Neuton/Neuton-3.woff2') format('woff2');
}

@font-face {
  font-family: 'Neuton';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Neuton/Neuton-8.woff2') format('woff2');
}

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/AmaticSC/AmaticSC-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/AmaticSC/AmaticSC-6.woff2') format('woff2');
}

@font-face {
  font-family: 'Rancho';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Rancho/Rancho-1.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/DMSans/DMSans-1.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/DMSans/DMSans-4.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/DMSans/DMSans-7.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/DMSans/DMSans-10.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/DMSans/DMSans-13.woff2') format('woff2');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Mulish/Mulish-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Mulish/Mulish-8.woff2') format('woff2');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Mulish/Mulish-16.woff2') format('woff2');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Mulish/Mulish-24.woff2') format('woff2');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Mulish/Mulish-32.woff2') format('woff2');
}

@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Prata/Prata-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/PoiretOne/PoiretOne-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/AbrilFatface/AbrilFatface-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Arvo/Arvo-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Arvo/Arvo-2.woff2') format('woff2');
}

@font-face {
  font-family: 'Andada Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/AndadaPro/AndadaPro-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Andada Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/AndadaPro/AndadaPro-4.woff2') format('woff2');
}

@font-face {
  font-family: 'Andada Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/AndadaPro/AndadaPro-7.woff2') format('woff2');
}

@font-face {
  font-family: 'Andada Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/AndadaPro/AndadaPro-10.woff2') format('woff2');
}

@font-face {
  font-family: 'Andada Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/AndadaPro/AndadaPro-13.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Cormorant/Cormorant-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Cormorant/Cormorant-6.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Cormorant/Cormorant-11.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Cormorant/Cormorant-16.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Cormorant/Cormorant-21.woff2') format('woff2');
}

@font-face {
  font-family: 'Hahmlet';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Hahmlet/Hahmlet-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Hahmlet';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Hahmlet/Hahmlet-200.woff2') format('woff2');
}

@font-face {
  font-family: 'Hahmlet';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Hahmlet/Hahmlet-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Hahmlet';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Hahmlet/Hahmlet-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Hahmlet';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Hahmlet/Hahmlet-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Vollkorn/Vollkorn-1.woff2') format('woff2');
}

@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Vollkorn/Vollkorn-5.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/roboto-600.woff2') format('woff2');
}




/* ============================================================================
   WEBIX x WINDOWS 11 RESTYLE  (angehaengt 2026-07 — reversibel: Block entfernen)
   Neutral-graue Oberflaeche, graue Buttons, Blau NUR fuer Fokus/Selektion.
   Ueberschreibt per Cascade-Reihenfolge (spaeter = gewinnt bei gleicher Spez.).
   ========================================================================== */

:root {
  /* Palette (ueberschreibt die Werte oben) */
  --widget-primary: #0f6cbd;
  --widget-primary-rgb: 15, 108, 189;
  --widget-secondary: #5b6270;
  --widget-tertiary: #878e9b;
  --widget-text-color: #1b1f27;
  --widget-text-muted: #5b6270;
  --widget-background: #ffffff;
  --widget-light-background: #f3f4f7;
  --widget-hover-background: #eef0f4;
  --widget-border-color: #c6cbd4;
  --widget-border-light: #e3e6ec;
  --widget-border-radius: 4px;
  --widget-box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --widget-transition: all .15s ease;
  --sidebar-background: #fafbfc;

  /* Neue Restyle-Tokens */
  --widget-accent: #0f6cbd;
  --widget-accent-strong: #115ea3;
  --widget-accent-soft: #eff6fc;
  --widget-focus-ring: rgba(15,108,189,.35);
  --widget-card-radius: 8px;
  --widget-elevated-shadow: 0 4px 16px rgba(16,24,40,.12);
  --widget-btn-bg: #f6f7f9;
  --widget-btn-hover: #eef0f4;
  --widget-btn-active: #e4e7ed;
  --widget-btn-border: #c6cbd4;
  --widget-btn-text: #262b33;
}

/* ===== BUTTONS — durchgehend grau (kein Farbverlauf, kein Lift) ===== */
.widget-button {
  background-color: var(--widget-btn-bg);
  color: var(--widget-btn-text);
  border: 1px solid var(--widget-btn-border);
  border-radius: var(--widget-border-radius);
  font-weight: 600;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.widget-button:hover {
  background-color: var(--widget-btn-hover);
  border-color: #b9bfca;
  transform: none;
  box-shadow: none;
}
.widget-button:active {
  background-color: var(--widget-btn-active);
  border-color: #b0b6c2;
  transform: none;
}
.widget-button:focus, .widget-button:focus-visible {
  outline: none;
  border-color: var(--widget-accent);
  box-shadow: 0 0 0 3px var(--widget-focus-ring);
}
.widget-button:disabled {
  color: var(--widget-tertiary);
  background-color: #fafbfc;
  border-color: var(--widget-border-light);
  box-shadow: none;
}
/* Alle Farbvarianten -> grau */
.widget-button.btn-default, .widget-button.btn-primary, .widget-button.btn-secondary,
.widget-button.btn-success, .widget-button.btn-danger, .widget-button.btn-warning,
.widget-button.btn-info {
  background-color: var(--widget-btn-bg);
  border: 1px solid var(--widget-btn-border);
  color: var(--widget-btn-text);
}
.widget-button.btn-default:hover, .widget-button.btn-primary:hover, .widget-button.btn-secondary:hover,
.widget-button.btn-success:hover, .widget-button.btn-danger:hover, .widget-button.btn-warning:hover,
.widget-button.btn-info:hover {
  background-color: var(--widget-btn-hover);
  border-color: #b9bfca;
  color: var(--widget-btn-text);
}
/* Primaer = betonter (grau), Sekundaer = ruhig */
.widget-button.btn-primary { border-color: #9aa2b1; box-shadow: inset 0 -1px 0 rgba(16,24,40,.06); }
.widget-button.btn-secondary { background-color: transparent; border-color: transparent; color: var(--widget-secondary); }
.widget-button.btn-secondary:hover { background-color: var(--widget-btn-hover); border-color: transparent; color: var(--widget-text-color); }
/* Destruktiv: grau + roter Text/Fokus als dezenter Hinweis */
.widget-button.btn-danger { color: #c42b1c; }
.widget-button.btn-danger:hover { color: #a72218; }
.widget-button.btn-danger:focus, .widget-button.btn-danger:focus-visible { border-color: #c42b1c; box-shadow: 0 0 0 3px rgba(196,43,28,.22); }

/* ===== INPUTS / DROPDOWN ===== */
.widget-input, .widget-input-group .widget-input, .search-bar .widget-input {
  background: #fff;
  border: 1px solid var(--widget-btn-border);
  border-radius: var(--widget-border-radius);
  color: var(--widget-text-color);
}
.widget-input:focus, .widget-input-group .widget-input:focus {
  border-color: var(--widget-accent);
  box-shadow: 0 0 0 3px var(--widget-focus-ring);
  outline: none;
}
.widget-input::placeholder { color: var(--widget-tertiary); }

/* ===== ACCORDION (beide Namensschemata abdecken) ===== */
.widget-accordion, .accordion {
  border: 1px solid var(--widget-border-light);
  border-radius: var(--widget-border-radius);
  background: #fff;
  box-shadow: var(--widget-box-shadow);
}
.widget-accordion-header, .accordion-header { background: #fff; color: var(--widget-text-color); }
.widget-accordion-header:hover, .accordion-header:hover { background: #fafbfc; }
.widget-accordion-panel.active > .widget-accordion-header,
.widget-accordion-panel.expanded > .widget-accordion-header,
.accordion-panel.open > .accordion-header,
.accordion-panel.active > .accordion-header {
  background: var(--widget-accent-soft);
  color: var(--widget-accent-strong);
}

/* ===== TABVIEW (mit Rahmen) — Klassen: .widget-tabbed-pane / .widget-tab-* ===== */
.widget-tabbed-pane {
  border: 1px solid var(--widget-border-light);
  border-radius: var(--widget-card-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--widget-box-shadow);
}
.widget-tabbed-pane .widget-tab-header {
  background: #fafbfc;
  border-bottom: 1px solid var(--widget-border-light);
}
.widget-tabbed-pane .widget-tab-button {
  color: var(--widget-secondary);
  background: transparent;
  border: none;
}
.widget-tabbed-pane .widget-tab-button:hover { color: var(--widget-text-color); background: transparent; }
.widget-tabbed-pane .widget-tab-button.active,
.widget-tabbed-pane .widget-tab-button[aria-selected="true"] {
  color: var(--widget-accent-strong);
  box-shadow: inset 0 -2px 0 var(--widget-accent);
  background: transparent;
}
.widget-tabbed-pane .widget-tab-button.active i,
.widget-tabbed-pane .widget-tab-button[aria-selected="true"] i { color: var(--widget-accent-strong); }

/* ===== SLIDER + RANGESLIDER ===== */
.widget-slider { accent-color: var(--widget-accent); }
.widget-slider::-webkit-slider-thumb { background: #fff; border: 1px solid var(--widget-btn-border); }
.widget-slider::-webkit-slider-thumb:hover { border-color: var(--widget-accent); }
.widget-slider::-moz-range-thumb { background: #fff; border: 1px solid var(--widget-btn-border); }
.widget-slider-value { color: var(--widget-text-color); font-weight: 600; }

/* ===== CHECKBOX (alle Farbvarianten -> Akzent) ===== */
.widget-checkbox-custom { border: 1px solid var(--widget-btn-border); border-radius: 3px; background: #fff; }
.widget-checkbox-checked .widget-checkbox-custom,
.widget-checkbox-primary.widget-checkbox-checked .widget-checkbox-custom,
.widget-checkbox-success.widget-checkbox-checked .widget-checkbox-custom,
.widget-checkbox-warning.widget-checkbox-checked .widget-checkbox-custom,
.widget-checkbox-danger.widget-checkbox-checked .widget-checkbox-custom,
.widget-checkbox-info.widget-checkbox-checked .widget-checkbox-custom,
.widget-checkbox-indeterminate .widget-checkbox-custom {
  background: var(--widget-accent);
  border-color: var(--widget-accent);
}

/* ===== TOGGLE / SWITCH (an = Akzent) ===== */
.widget-toggle-switch { background: var(--widget-border-color); }
.widget-toggle-input:checked + .widget-toggle-switch,
.widget-toggle-switch.widget-toggle-primary.active, .widget-toggle-switch.active,
.widget-toggle-switch.widget-toggle-success, .widget-toggle-switch.widget-toggle-warning,
.widget-toggle-switch.widget-toggle-danger, .widget-toggle-switch.widget-toggle-primary {
  background: var(--widget-accent);
}

/* ===== MULTISELECT ===== */
.widget-multiselect-container { border: 1px solid var(--widget-btn-border); border-radius: var(--widget-border-radius); background: #fff; }
.widget-multiselect-open, .widget-multiselect-container:focus-within {
  border-color: var(--widget-accent); box-shadow: 0 0 0 3px var(--widget-focus-ring);
}
.widget-multiselect-tag {
  background: var(--widget-btn-bg); border: 1px solid var(--widget-btn-border);
  border-radius: 3px; color: var(--widget-btn-text);
}
.widget-multiselect-dropdown { border: 1px solid var(--widget-btn-border); border-radius: var(--widget-border-radius); box-shadow: var(--widget-elevated-shadow); }
.widget-multiselect-option-selected, .widget-multiselect-option:hover { background: var(--widget-accent-soft); color: var(--widget-accent-strong); }

/* ===== DATEPICKER (Kalender) ===== */
.widget-calendar { border: 1px solid var(--widget-btn-border); border-radius: var(--widget-card-radius); box-shadow: var(--widget-elevated-shadow); background: #fff; }
.widget-calendar-nav-btn { border: 1px solid var(--widget-border-light); border-radius: 4px; background: #fff; color: var(--widget-secondary); }
.widget-calendar-nav-btn:hover { background: var(--widget-btn-hover); }
.widget-calendar-day.selected, .widget-calendar-day.active { background: var(--widget-accent); color: #fff; }
.widget-calendar-day.today { box-shadow: inset 0 0 0 1px var(--widget-accent); color: var(--widget-accent-strong); }
.widget-calendar-day:hover { background: var(--widget-btn-hover); }

/* ===== COLORPICKER ===== */
.widget-color-picker { border: 1px solid var(--widget-btn-border); border-radius: var(--widget-border-radius); }
.widget-color-picker-container { border-radius: var(--widget-card-radius); box-shadow: var(--widget-elevated-shadow); }

/* Native Radios/Checkboxen: Akzentfarbe */
input[type="radio"], input[type="checkbox"] { accent-color: var(--widget-accent); }


/* ===== DROPDOWN-MENUE (Kosmetik; Layout via dropdown.js) ===== */
.widget-dropdown-option:hover { background: var(--widget-btn-hover) !important; }
.widget-dropdown-option.selected { background: var(--widget-accent-soft) !important; color: var(--widget-accent-strong) !important; }
.widget-dropdown-options::-webkit-scrollbar { width: 12px; }
.widget-dropdown-options::-webkit-scrollbar-track { background: transparent; }
.widget-dropdown-options::-webkit-scrollbar-thumb { background: #c6cbd4; border-radius: 8px; border: 3px solid #fff; }

/* ===== MOCKUP-ALIGNMENT: Roboto + Typografie/Abstaende (wie widget-restyle-mockup.html) ===== */
:root {
  --widget-font-family: Roboto, system-ui, sans-serif;
  --widget-heading-font: Roboto, system-ui, sans-serif;
  --font-family-base: Roboto, system-ui, sans-serif;
  --font-family-heading: Roboto, system-ui, sans-serif;
  --widget-label-font-size: 13px;
}
/* Roboto erzwingen (falls Elemente von Nicht-Widget-Eltern erben) */
.widget-input, .widget-textarea, .widget-label, .help-text, .widget-button,
.widget-dropdown-trigger, .widget-dropdown-value, .widget-dropdown-option, .widget-dropdown-menu,
.widget-tab-button, .accordion-title, .widget-checkbox-label {
  font-family: Roboto, system-ui, sans-serif;
}
/* Label wie im Mockup: 13px, weight 600, kompakter Abstand zum Feld */
.widget-label {
  font-size: var(--widget-label-font-size, 13px) !important;
  font-weight: 600 !important;
  margin-bottom: 5px !important;
  color: var(--widget-text-color);
  line-height: 1.4;
}
/* Help-Text 11px (Mockup) */
.help-text { font-size: 11px !important; color: var(--widget-text-muted) !important; }
/* Kontroll-Schrift konsistent 13px */
.widget-input, .widget-textarea, .widget-dropdown-trigger, .widget-dropdown-value { font-size: var(--widget-control-font-size, 13px); }

/* Dropdown-Menue/Optionen auf Kontroll-Schriftgroesse (13px) */
.widget-dropdown-menu, .widget-dropdown-option, .widget-dropdown-search-input { font-size: var(--widget-control-font-size, 13px); }

/* ===== ERROR-PAGE (portiert aus main.css, main.css nicht mehr referenziert) ===== */
.error-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60vh; text-align: center; padding: 2rem;
}
.error-code { font-size: 6rem; font-weight: 700; color: var(--widget-accent, #0f6cbd); margin-bottom: 1rem; line-height: 1; }
.error-title { font-size: 2rem; font-weight: 600; color: var(--widget-text-color, #1b1f27); margin-bottom: 1rem; }
.error-description { font-size: 1.125rem; color: var(--widget-text-muted, #5b6270); margin-bottom: 2rem; max-width: 500px; line-height: 1.6; }
.error-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
@media (max-width: 768px) {
  .error-code { font-size: 4rem; }
  .error-title { font-size: 1.5rem; }
  .error-actions { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .error-code { font-size: 3rem; }
  .error-title { font-size: 1.25rem; }
  .error-description { font-size: 1rem; }
}