/* Automatisch generierte CSS-Konfiguration */
/* Generiert am: 2025-09-09 */

:root {
    /* =========================== */
    /*         FARB-SYSTEM         */
    /* =========================== */

    --primary: #8b0000;
    --secondary: #333333;
    --accent: #007AFF;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-light: #999999;
    --text-inverted: #ffffff;
    --background-main: #ffffff;
    --background-light: #f8f9fa;
    --background-dark: #2c2c2c;
    --header-bg: #8b0000;
    --header-text: #ffffff;
    --header-nav: #ffffff;
    --header-nav-hover: #660000;
    --header-logo: #ffffff;
    --footer-bg: #ffffff;
    --footer-text: #333333;
    --footer-link: #007AFF;
    --footer-border: #8b0000;
    --footer-icon: #8b0000;
    --admin-bg: #f8f9fa;
    --admin-sidebar: #2c2c2c;
    --admin-text: #333333;
    --admin-border: #dee2e6;
    --admin-accent: #8b0000;
    --btn-primary: #8b0000;
    --btn-secondary: #6c757d;
    --btn-success: #28a745;
    --btn-warning: #ffc107;
    --btn-danger: #dc3545;
    --frontend-card: #ffffff;
    --frontend-border: #dee2e6;
    --frontend-hover: #f8f9fa;
    --frontend-shadow: rgba(0,0,0,0.1);
    --frontend-active: #8b0000;
    --viewer-bg: #000000;
    --viewer-controls: #ffffff;
    --viewer-overlay: rgba(0,0,0,0.7);
    --viewer-text: #ffffff;
    --viewer-accent: #8b0000;
    --status-success: #28a745;
    --status-error: #dc3545;
    --status-warning: #ffc107;
    --status-info: #17a2b8;
    --status-neutral: #6c757d;
    --form-bg: #ffffff;
    --form-border: #ced4da;
    --form-focus: #8b0000;
    --form-error: #dc3545;
    --form-success: #28a745;

    /* =========================== */
    /*       SCHRIFT-SYSTEM        */
    /* =========================== */

    --font-primary: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-secondary: Georgia, "Times New Roman", serif;
    --font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* =========================== */
    /*      TYPOGRAFIE-SYSTEM      */
    /* =========================== */

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* Zeilenhöhen */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Abstände */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
}

/* =========================== */
/*    ANWENDUNGS-SPEZIFISCHES CSS   */
/* =========================== */

/* Header-Bereich */
.header, .site-header, .admin-header {
    background-color: var(--header-bg) !important;
    color: var(--header-text) !important;
    border-bottom: 3px solid var(--primary) !important;
}

.header nav a, .site-header nav a {
    color: var(--header-nav) !important;
    transition: color 0.2s ease;
}

.header nav a:hover, .site-header nav a:hover {
    color: var(--header-nav-hover) !important;
}

.header .logo, .site-header .logo {
    color: var(--header-logo) !important;
}

/* Footer-Bereich */
.footer, .site-footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text) !important;
    border-top: 3px solid var(--footer-border) !important;
}

.footer a, .site-footer a {
    color: var(--footer-link) !important;
}

.footer-icon {
    color: var(--footer-icon) !important;
}

/* Admin-Bereich */
.admin-container, .admin-panel {
    background-color: var(--admin-bg) !important;
    color: var(--admin-text) !important;
}

.admin-sidebar {
    background-color: var(--admin-sidebar) !important;
    border-right: 1px solid var(--admin-border);
}

.admin-content {
    border: 1px solid var(--admin-border);
}

/* Buttons */
.btn-primary, .btn {
    background-color: var(--btn-primary) !important;
    border-color: var(--btn-primary) !important;
    color: white !important;
}

.btn-secondary {
    background-color: var(--btn-secondary) !important;
    border-color: var(--btn-secondary) !important;
    color: white !important;
}

.btn-success {
    background-color: var(--btn-success) !important;
    border-color: var(--btn-success) !important;
}

.btn-warning {
    background-color: var(--btn-warning) !important;
    border-color: var(--btn-warning) !important;
}

.btn-danger {
    background-color: var(--btn-danger) !important;
    border-color: var(--btn-danger) !important;
}

/* Frontend-Elemente */
.card, .panel {
    background-color: var(--frontend-card) !important;
    border: 1px solid var(--frontend-border);
    box-shadow: 0 2px 4px var(--frontend-shadow);
}

.card:hover, .panel:hover {
    background-color: var(--frontend-hover) !important;
}

/* Viewer-Bereich */
.viewer-container {
    background-color: var(--viewer-bg) !important;
    color: var(--viewer-text) !important;
}

.viewer-controls {
    background-color: var(--viewer-controls) !important;
}

.viewer-overlay {
    background-color: var(--viewer-overlay) !important;
}

/* Status-Meldungen */
.message.success, .alert-success {
    color: var(--status-success) !important;
    border-color: var(--status-success) !important;
}

.message.error, .alert-danger {
    color: var(--status-error) !important;
    border-color: var(--status-error) !important;
}

.message.warning, .alert-warning {
    color: var(--status-warning) !important;
    border-color: var(--status-warning) !important;
}

.message.info, .alert-info {
    color: var(--status-info) !important;
    border-color: var(--status-info) !important;
}

/* Formulare */
.form-group {
    background-color: var(--form-bg) !important;
}

input, textarea, select {
    border: 1px solid var(--form-border) !important;
    background-color: var(--form-bg) !important;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--form-focus) !important;
    box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.1) !important;
}

.form-error {
    color: var(--form-error) !important;
    border-color: var(--form-error) !important;
}

/* Typografie */
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    color: var(--primary);
    margin-bottom: var(--spacing-md);
}

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

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

.font-bold {
    font-weight: var(--font-weight-bold);
}