/* Führungsstab EM – Farbkonzept v1.6
   Rot / Weiß / Grau, bewusst sachlich und zurückhaltend. */

:root {
    --fe-red-dark: #8F1D24;
    --fe-red: #C62828;
    --fe-red-hover: #A91F24;
    --fe-bg: #F3F4F5;
    --fe-card: #FFFFFF;
    --fe-border: #D5D9DC;
    --fe-text: #292D32;
    --fe-muted: #555B61;
    --fe-soft-red: #F8ECEE;
    --fe-shadow: 0 3px 14px rgba(0, 0, 0, .07);
}

/* Grundfläche */
html, body {
    background: var(--fe-bg);
    color: var(--fe-text);
}

/* Kopfbereich */
header {
    background: var(--fe-red-dark) !important;
    color: #fff !important;
    border-bottom: 4px solid var(--fe-red);
}

header h1,
header h2,
header p,
header .eyebrow,
header a {
    color: #fff !important;
}

header .eyebrow {
    opacity: .86;
    letter-spacing: .08em;
}

/* Inhaltskarten */
.panel,
.card,
.legal,
.notice,
section {
    border-color: var(--fe-border);
}

.panel,
.card,
.legal {
    background: var(--fe-card);
    box-shadow: var(--fe-shadow);
}

/* Links */
a {
    color: var(--fe-red-dark);
}

a:hover,
a:focus {
    color: var(--fe-red);
}

/* Primäre Buttons */
button,
.button,
.btn,
input[type="submit"] {
    background: var(--fe-red-dark);
    color: #fff;
    border: 1px solid var(--fe-red-dark);
}

button:hover,
button:focus,
.button:hover,
.button:focus,
.btn:hover,
.btn:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    background: var(--fe-red-hover);
    border-color: var(--fe-red-hover);
    color: #fff;
}

/* Sekundäre Buttons, soweit vorhanden */
.button.secondary,
.btn.secondary,
button.secondary {
    background: #fff;
    color: var(--fe-red-dark);
    border: 1px solid var(--fe-red-dark);
}

.button.secondary:hover,
.btn.secondary:hover,
button.secondary:hover {
    background: var(--fe-soft-red);
    color: var(--fe-red-dark);
}

/* Formulare */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    background: #fff;
    color: var(--fe-text);
    border: 1px solid var(--fe-border);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(198, 40, 40, .22);
    border-color: var(--fe-red);
}

/* Tabellen */
table {
    background: #fff;
}

th {
    background: #ECEEEF;
    color: var(--fe-text);
}

td,
th {
    border-color: var(--fe-border);
}

/* Badges / Status */
.badge,
.status {
    border-color: var(--fe-border);
}

/* Hinweise: kein Alarm-Look, sondern sachlicher roter Akzent */
.notice,
.warning {
    background: #fff;
    border: 1px solid var(--fe-border);
    border-left: 5px solid var(--fe-red-dark) !important;
    color: var(--fe-text);
}

.notice strong,
.warning strong {
    color: var(--fe-red-dark);
}

/* Footer */
footer {
    background: #E7E9EB;
    color: var(--fe-muted);
    border-top: 1px solid var(--fe-border);
}

footer a {
    color: var(--fe-red-dark);
}

/* Cookie-Hinweis */
.cookie-notice-backdrop {
    background: rgba(41, 45, 50, .45) !important;
}

.cookie-notice {
    background: #fff !important;
    border-color: var(--fe-border) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .25) !important;
}

.cookie-notice h2 {
    color: var(--fe-red-dark);
}

.cookie-notice button {
    background: var(--fe-red-dark) !important;
    color: #fff !important;
}

.cookie-notice button:hover,
.cookie-notice button:focus {
    background: var(--fe-red-hover) !important;
}

/* Auswahlkarten der Software */
.software-item,
.software-card {
    background: #fff;
    border: 1px solid var(--fe-border);
    box-shadow: var(--fe-shadow);
}

.software-item:hover,
.software-card:hover {
    border-color: var(--fe-red);
}

/* Kleine sekundäre Texte */
.small,
.muted {
    color: var(--fe-muted);
}

/* Auswahlmarkierung */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--fe-red-dark);
}