/* ===================================================================== */
/*                                                                     */
/*        FINALE, PROFESSIONELLE & VOLLSTÄNDIGE CSS FÜR PROJEKT          */
/*         (Optimiert mit CSS-Variablen für einfache Wartung)          */
/*                                                                     */
/* ===================================================================== */


/* ===================================================================== */
/* 1. THEME-VARIABLEN (DAS KONTROLLZENTRUM FÜR FARBEN)
/* ===================================================================== */

:root {
    /* -- HINTERGRÜNDE -- */
    --bg-card: #ffffff;
    --bg-card-subtle: #f9f9f9;
    --bg-accent-box: #f8f9fa;
    --bg-format-controls: #f5f5f5;

    /* -- TEXTFARBEN -- */
    --text-headline: #333333;
    --text-primary: #555555;
    --text-label: #333333;
    --text-inverted: #ffffff;

    /* -- CI & AKZENTFARBEN -- */
    --accent-primary: #A81802;
    --accent-primary-hover: #8a1402;
    --accent-secondary-green: #28a745;
    --accent-secondary-green-hover: #218838;
    --status-passed-bg: rgba(0, 128, 0, 0.15);
    --status-passed-text: #006400;

    /* -- RÄNDER & LINIEN -- */
    --border-color: #ccc;
    --border-accent: #A81802;
}

[data-theme="dark"] {
    /* -- HINTERGRÜNDE -- */
    --bg-card: #2a2a2a;
    --bg-card-subtle: #333333;
    --bg-accent-box: #333333;
    --bg-format-controls: #3a3a3a;

    /* -- TEXTFARBEN -- */
    --text-headline: #f0f0f0;
    --text-primary: #dcdcdc;
    --text-label: #dcdcdc;
    --text-inverted: #1e1e1e;

    /* -- CI & AKZENTFARBEN -- */
    --accent-primary: #ff6347;
    --accent-primary-hover: #ff8a75;
    --accent-secondary-green: #20c997;
    --accent-secondary-green-hover: #1db98a;
    --status-passed-bg: rgba(76, 255, 76, 0.2);
    --status-passed-text: #4cff4c;

    /* -- RÄNDER & LINIEN -- */
    --border-color: #555555;
    --border-accent: #ff6347;
}


/* ===================================================================== */
/* 2. GRUND-LAYOUT & KOMPONENTEN-STYLING
/* ===================================================================== */

/* --- Layout-Container --- */
#open-source-info, #formloses-schreiben, #sicherheitsinfo, #testdokumentation { margin: 30px auto; max-width: 900px; padding: 0 15px; }

/* --- Wiederverwendbare Komponenten --- */
.info-card { display: flex; flex-direction: row; background-color: var(--bg-card); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; margin: 20px 0; }
.info-icon { display: flex; align-items: center; justify-content: center; background-color: var(--accent-primary); color: var(--text-inverted); padding: 30px; font-size: 3rem; }
.info-content { padding: 25px; flex: 1; }
.quiz-container { padding: 20px; background-color: var(--bg-card); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.seo-compatibility-notice, .usage-note, .solution-summary, .features-list, .advantages-section, .disadvantages-section, .security-tips, .conclusion { background-color: var(--bg-accent-box); border-left: 4px solid var(--border-accent); padding: 15px 20px; margin: 20px 0; border-radius: 0 5px 5px 0; }

/* --- Typografie --- */
.info-content h3 { font-size: 1.4rem; margin-top: 0; margin-bottom: 15px; color: var(--text-headline); border-bottom: 2px solid var(--border-accent); padding-bottom: 10px; display: inline-block; }
.info-content h4 { font-size: 1.1rem; margin-top: 20px; margin-bottom: 10px; color: var(--text-headline); display: flex; align-items: center; gap: 8px; }
.info-content p, .info-content li { font-size: 1rem; line-height: 1.6; color: var(--text-primary); }
.info-content strong { color: var(--accent-primary); }
.info-content ul { list-style-type: none; padding-left: 0; }
.info-content ul li { position: relative; padding-left: 25px; margin-bottom: 10px; }
.info-content ul li::before { content: "•"; color: var(--accent-primary); font-weight: bold; font-size: 1.2rem; position: absolute; left: 5px; top: 0; }
#open-source-info #typewriter-heading { min-height: 4rem; display: flex; align-items: center; justify-content: flex-start; }

/* --- Formular --- */
#formloses-schreiben .form-group { margin-bottom: 15px; }
#formloses-schreiben label { display: block; margin-bottom: 5px; font-weight: bold; font-size: 0.9rem; color: var(--text-label); }
#formloses-schreiben .form-control { width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; box-sizing: border-box; font-size: 0.95rem; background-color: var(--bg-card); color: var(--text-headline); }
.format-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 5px; flex-wrap: wrap; background-color: var(--bg-format-controls); padding: 5px; border-radius: 4px; }
.format-controls select, .format-controls button { padding: 4px 8px; border-radius: 3px; border: 1px solid var(--border-color); font-size: 0.8rem; background-color: var(--bg-card); color: var(--text-primary); cursor: pointer; }
.file-upload-container { display: flex; align-items: center; gap: 15px; margin-top: 5px; }
.file-upload-input { display: none; }
#file-name-display { font-size: 0.9rem; color: var(--text-primary); font-style: italic; }

/* --- Buttons --- */
.start-button, .toggle-tests-btn, #formloses-schreiben .quiz-submit { padding: 10px 20px; font-size: 1rem; font-weight: bold; background-color: var(--accent-primary); color: var(--text-inverted); border: none; border-radius: 5px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: background-color 0.3s; }
.start-button:hover, .toggle-tests-btn:hover, #formloses-schreiben .quiz-submit:hover { background-color: var(--accent-primary-hover); }
.file-upload-label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; font-size: 0.9rem; font-weight: bold; background-color: var(--accent-secondary-green); color: var(--text-inverted); border-radius: 5px; cursor: pointer; transition: background-color 0.3s; }
.file-upload-label:hover { background-color: var(--accent-secondary-green-hover); }

/* --- Testdokumentation --- */
#testdokumentation .test-card { border-left: 4px solid var(--border-accent); background-color: var(--bg-card); }
#testdokumentation .test-card-header { background-color: var(--bg-card-subtle); cursor: pointer; }
#testdokumentation .status-passed { background-color: var(--status-passed-bg); color: var(--status-passed-text); }
#testdokumentation .test-content { display: none; padding: 20px; border-top: 1px solid var(--border-color); }
#testdokumentation .test-card.expanded .test-content { display: block; }
#testdokumentation .test-label { font-weight: 600; color: var(--text-primary); }


/* ===================================================================== */
/* 3. RESPONSIVE & DRUCK-STYLES
/* ===================================================================== */
@media (max-width: 768px) {
    .info-card { flex-direction: column; }
    #open-source-info #typewriter-heading { min-height: 6rem; justify-content: center; text-align: center; }
}

@media print {
    body > *:not(#formloses-schreiben), .print-hide, #open-source-info, #sicherheitsinfo, #testdokumentation, nav, header, footer { display: none !important; }
    #formloses-schreiben { max-width: 100%; margin: 0; box-shadow: none; }
}






/* ===================================================================== */
/* STYLING FÜR DIE "HINWEIS ZUM DRUCKEN"-BOX
/* ===================================================================== */

.print-hinweis {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px 15px;
    background-color: #e7f3fe; /* Hellblauer Hintergrund */
    border-left: 6px solid #2196F3; /* Blauer linker Rand */
    border-radius: 0 5px 5px 0;
    
    /* Sorgt dafür, dass der Text immer dunkel ist */
    color: #333; /* Dunkelgrau für den normalen Text */
}

.print-hinweis strong {
    /* Sorgt dafür, dass der fette Text immer schwarz ist */
    color: #000; 
}


/* ===================================================================== */
/* DARK MODE FIX FÜR DIE HINWEISBOX
/* ===================================================================== */

/* Diese Regel stellt sicher, dass die Textfarbe auch im Dark Mode 
   dunkel bleibt, da der Hintergrund der Box hell ist. 
   `!important` wird hier als Sicherheitsnetz verwendet, um 
   jede globale Dark-Mode-Regel zu überschreiben. */

[data-theme="dark"] .print-hinweis {
    color: #333 !important;
}

[data-theme="dark"] .print-hinweis strong {
    color: #000 !important;
}