/* raindoc.css
 * =====================================================================
 * Zentrales Design-System der RainDoc-Web-App (Single Source of Truth).
 *
 * Enthält:
 *   1. Design-Tokens (:root) — Farben, Typografie, Radien, Schatten, Spacing
 *   2. Basis/Reset + App-Shell
 *   3. Komponenten im rd-Namespace (rd-header, rd-card, rd-btn, …)
 *   4. Kompatibilitäts-Layer für bestehende Klassennamen
 *      (.container/.header/.navigation/.stat-card/.btn/.floating-legal-btn …),
 *      damit vorhandene Seiten ohne großen Markup-Umbau einheitlich werden.
 *
 * Primärfarbe = App-Blau (#2980b9 → #3498db), konsistent mit PWA-theme-color,
 * Service-Worker und iOS-App. Grüner Akzent #27ae60, Gefahr #e74c3c.
 *
 * Wird von allen App-, Auth-, Recht- und Marketing-Seiten geladen:
 *   <link rel="stylesheet" href="raindoc.css?v=1">
 * Muss VOR app-nav.css stehen (app-nav.css nutzt die --rd-*-Tokens).
 * ===================================================================== */

/* ---------- 1. Design-Tokens ---------- */
:root {
    /* Marken-/Primärfarben */
    --rd-primary:        #2980b9;
    --rd-primary-2:      #3498db;
    --rd-primary-dark:   #1e3d6f;
    --rd-gradient:       linear-gradient(135deg, #2980b9 0%, #3498db 100%);

    /* Akzent & semantische Farben */
    --rd-accent:         #27ae60;   /* Erfolg / grün */
    --rd-accent-dark:    #1e8449;
    --rd-warn:           #f39c12;
    --rd-danger:         #e74c3c;
    --rd-danger-dark:    #c0392b;

    /* Neutrale Skala */
    --rd-ink:            #2c3e50;   /* Haupttext / Überschriften */
    --rd-body:           #333;      /* Fließtext */
    --rd-muted:          #7f8c8d;   /* sekundärer Text */
    --rd-border:         #e0e0e0;
    --rd-border-soft:    #ecf0f1;
    --rd-bg:             #f5f7fa;   /* neutraler Seitengrund (nicht-Gradient) */
    --rd-surface:        #ffffff;
    --rd-surface-glass:  rgba(255, 255, 255, 0.95);
    --rd-surface-muted:  #f8f9fa;

    /* Typografie */
    --rd-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --rd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Radien */
    --rd-r-sm: 8px;
    --rd-r-md: 12px;
    --rd-r-lg: 16px;
    --rd-r-pill: 999px;

    /* Schatten */
    --rd-shadow:    0 4px 16px rgba(0, 0, 0, 0.08);
    --rd-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);

    /* Spacing-Skala */
    --rd-s-1: 4px;
    --rd-s-2: 8px;
    --rd-s-3: 12px;
    --rd-s-4: 16px;
    --rd-s-5: 20px;
    --rd-s-6: 30px;

    /* Übergänge */
    --rd-transition: .2s ease;
}

/* ---------- 2. Basis / Reset ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--rd-font);
    color: var(--rd-body);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* App-Shell: Seiten hinter Login nutzen den Gradient-Hintergrund. */
body.rd-app {
    background: var(--rd-gradient);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* Neutraler Hintergrund (z. B. Zuordnungs-/Tool-Seiten, Marketing-Subseiten). */
body.rd-plain {
    background: var(--rd-bg);
}

a { color: var(--rd-primary); }

/* Zentrierter Inhaltscontainer (bestehender Klassenname .container beibehalten). */
.container,
.rd-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--rd-s-5);
}

/* ---------- 3a. Kopf-Karte ---------- */
.rd-header,
.header {
    background: var(--rd-surface-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--rd-r-lg);
    padding: var(--rd-s-6);
    margin-bottom: var(--rd-s-6);
    box-shadow: var(--rd-shadow-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--rd-s-4);
    flex-wrap: wrap;
}

.rd-header h1,
.header h1 {
    color: var(--rd-ink);
    font-size: 2.2em;
    font-weight: 300;
    margin: 0;
}

/* ---------- 3b. Navigations-Container ---------- */
/* app-nav.js mountet in #appNavRoot mit Klasse .navigation. */
.navigation,
.rd-navcard {
    background: var(--rd-surface-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--rd-r-lg);
    padding: var(--rd-s-5);
    margin-bottom: var(--rd-s-5);
    box-shadow: var(--rd-shadow-lg);
}

/* ---------- 3c. Karten ---------- */
.rd-card,
.content-card,
.stat-card,
.summary-card {
    background: var(--rd-surface-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--rd-r-lg);
    padding: var(--rd-s-6);
    box-shadow: var(--rd-shadow-lg);
}

.stat-card,
.rd-card--stat {
    text-align: center;
    transition: transform .3s ease;
}
.stat-card:hover,
.rd-card--stat:hover { transform: translateY(-5px); }

/* ---------- 3d. Buttons ---------- */
/* Basis; .btn bleibt als Kompatibilitäts-Alias erhalten. */
.rd-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rd-s-2);
    background: var(--rd-primary-2);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: var(--rd-r-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--rd-transition), transform var(--rd-transition), opacity var(--rd-transition);
}
.rd-btn:hover,
.btn:hover { background: var(--rd-primary); transform: translateY(-1px); }
.rd-btn:disabled,
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Varianten — sowohl rd-btn--x als auch bestehende .btn.x / .btn-x */
.rd-btn--secondary, .btn.secondary, .btn-secondary { background: var(--rd-muted); }
.rd-btn--secondary:hover, .btn.secondary:hover, .btn-secondary:hover { background: #6c7a7d; }

.rd-btn--success, .btn.success, .btn-success,
.btn.btn-yes { background: var(--rd-accent); }
.rd-btn--success:hover, .btn.success:hover, .btn-success:hover,
.btn.btn-yes:hover { background: var(--rd-accent-dark); }

.rd-btn--danger, .btn.danger, .btn-danger,
.btn.btn-no { background: var(--rd-danger); }
.rd-btn--danger:hover, .btn.danger:hover, .btn-danger:hover,
.btn.btn-no:hover { background: var(--rd-danger-dark); }

.rd-btn--ghost, .btn.ghost {
    background: transparent;
    color: var(--rd-primary);
    border: 1px solid var(--rd-primary);
}
.rd-btn--ghost:hover, .btn.ghost:hover { background: rgba(41,128,185,.08); }

.rd-btn--sm, .btn.small { padding: 6px 12px; font-size: 12px; }
.rd-btn--pill, .btn.pill { border-radius: var(--rd-r-pill); }

/* Abmelden/Logout-Button-Alias */
.logout-btn {
    background: var(--rd-danger);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: var(--rd-r-pill);
    cursor: pointer;
    font-size: 14px;
    transition: background var(--rd-transition), transform var(--rd-transition);
}
.logout-btn:hover { background: var(--rd-danger-dark); transform: translateY(-2px); }

/* ---------- 3e. Formular-Controls ---------- */
.rd-input, .rd-select, .rd-textarea,
.rd-field input, .rd-field select, .rd-field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    color: var(--rd-ink);
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-r-sm);
    padding: 10px 12px;
    transition: border-color var(--rd-transition), box-shadow var(--rd-transition);
}
.rd-input:focus, .rd-select:focus, .rd-textarea:focus,
.rd-field input:focus, .rd-field select:focus, .rd-field textarea:focus {
    outline: none;
    border-color: var(--rd-primary-2);
    box-shadow: 0 0 0 3px rgba(52,152,219,.15);
}
.rd-label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--rd-ink); font-size: 14px; }

/* ---------- 3f. Tabellen ---------- */
.rd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rd-table th, .rd-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--rd-border-soft); }
.rd-table th { color: var(--rd-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; }
.rd-table tbody tr:hover { background: var(--rd-surface-muted); }

/* ---------- 3g. Modal ---------- */
.rd-modal-backdrop {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    padding: var(--rd-s-4);
}
.rd-modal {
    background: var(--rd-surface);
    border-radius: var(--rd-r-lg);
    box-shadow: var(--rd-shadow-lg);
    max-width: 520px; width: 100%;
    max-height: 90vh; overflow: auto;
    padding: var(--rd-s-6);
}

/* ---------- 3h. Floating-Legal-Button ---------- */
.rd-floating-legal,
.floating-legal-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background: var(--rd-primary-2);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform var(--rd-transition), box-shadow var(--rd-transition), background var(--rd-transition);
    cursor: pointer;
    border: none;
}
.rd-floating-legal:hover,
.floating-legal-btn:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    background: var(--rd-primary);
}
.rd-floating-legal img,
.floating-legal-btn img {
    width: 30px; height: 30px;
    filter: invert(1);
    mix-blend-mode: screen;
    opacity: .9;
    transition: opacity var(--rd-transition);
}
.rd-floating-legal:hover img,
.floating-legal-btn:hover img { opacity: 1; }

/* ---------- 4. Print ---------- */
@media print {
    body.rd-app { background: #fff; }
    .rd-floating-legal, .floating-legal-btn,
    .navigation, .rd-navcard { display: none !important; }
}