/* =====================================================================
   MailFish 2.0 – Theme (Bootstrap 5, Hauptfarbe Hellblau)
   ===================================================================== */
:root {
    --mf-primary: #4aa3df;
    --mf-primary-rgb: 74, 163, 223;
    --mf-primary-dark: #2f86c2;
    --mf-primary-darker: #1d6597;
    --mf-primary-light: #eaf5fc;
    --mf-primary-subtle: #d4ebf9;

    --bs-primary: var(--mf-primary);
    --bs-primary-rgb: var(--mf-primary-rgb);
    --bs-primary-text-emphasis: #17557f;
    --bs-primary-bg-subtle: var(--mf-primary-light);
    --bs-primary-border-subtle: #a9d5f2;
    --bs-link-color: var(--mf-primary-darker);
    --bs-link-color-rgb: 29, 101, 151;
    --bs-link-hover-color: #134a70;
    --bs-link-hover-color-rgb: 19, 74, 112;
    --bs-body-bg: #f6fafd;
    --bs-border-radius: .5rem;
    --bs-focus-ring-color: rgba(var(--mf-primary-rgb), .3);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mf-primary);
    --bs-btn-border-color: var(--mf-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mf-primary-dark);
    --bs-btn-hover-border-color: var(--mf-primary-dark);
    --bs-btn-active-bg: var(--mf-primary-darker);
    --bs-btn-active-border-color: var(--mf-primary-darker);
    --bs-btn-disabled-bg: var(--mf-primary);
    --bs-btn-disabled-border-color: var(--mf-primary);
    --bs-btn-focus-shadow-rgb: var(--mf-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--mf-primary-darker);
    --bs-btn-border-color: var(--mf-primary);
    --bs-btn-hover-bg: var(--mf-primary);
    --bs-btn-hover-border-color: var(--mf-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--mf-primary-dark);
    --bs-btn-active-border-color: var(--mf-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--mf-primary-rgb);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #92caee;
    box-shadow: 0 0 0 .25rem rgba(var(--mf-primary-rgb), .25);
}
.form-check-input:checked { background-color: var(--mf-primary); border-color: var(--mf-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--mf-primary); }
.pagination { --bs-pagination-active-bg: var(--mf-primary); --bs-pagination-active-border-color: var(--mf-primary); --bs-pagination-color: var(--mf-primary-darker); }
.progress { --bs-progress-bar-bg: var(--mf-primary); }
.bg-primary { background-color: var(--mf-primary) !important; }
.navbar.bg-primary { background: linear-gradient(90deg, var(--mf-primary-dark), var(--mf-primary)) !important; }
.text-primary { color: var(--mf-primary-dark) !important; }

.card { border-color: #e1eef8; }
.card-header { background: var(--mf-primary-light); border-bottom-color: #d8eaf7; font-weight: 600; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th { background: var(--mf-primary-light); color: #17557f; font-weight: 600; white-space: nowrap; }

/* ---------- Frontend ---------- */
.mf-hero {
    background: linear-gradient(135deg, var(--mf-primary-light), #fff);
    border: 1px solid #e1eef8;
    border-radius: 1rem;
}
.mf-card { transition: transform .15s ease, box-shadow .15s ease; }
.mf-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.5rem rgba(29, 101, 151, .12) !important; }
.mf-card .card-img-top { aspect-ratio: 16 / 9; object-fit: cover; }
.mf-card-placeholder { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--mf-primary-subtle), var(--mf-primary-light)); color: var(--mf-primary); }
.mf-cat-badge { font-weight: 500; color: #fff; text-decoration: none; }
.mf-cat-badge:hover { filter: brightness(.92); color: #fff; }
.mf-cat-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; }
.mf-article { background: #fff; border-radius: 1rem; border: 1px solid #e1eef8; }
.mf-content img { max-width: 100%; height: auto; border-radius: .5rem; }
.mf-content table { max-width: 100%; }
.mf-content p:last-child { margin-bottom: 0; }
.mf-footer { background: #fff; border-top: 1px solid #e1eef8; color: #5b6b78; }
.mf-footer a { color: #5b6b78; text-decoration: none; }
.mf-footer a:hover { color: var(--mf-primary-darker); }
.mf-auth { background: linear-gradient(160deg, var(--mf-primary-light), #fff 60%); }
.mf-option-card { cursor: pointer; }
.mf-option-card:has(input:checked) { border-color: var(--mf-primary); background: var(--mf-primary-light); }
.mf-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Backend ---------- */
.mf-stat { border-left: 4px solid var(--mf-primary); }
.mf-stat .display-6 { font-weight: 600; color: #17557f; }
.mf-element { border-left: 4px solid var(--mf-primary); }
.mf-element .mf-element-handle { cursor: grab; }
.mf-element.mf-collapsed .mf-element-body { display: none; }
.mf-element .tox-tinymce { border-radius: .5rem; }
.mf-thumb { max-height: 120px; border-radius: .5rem; border: 1px solid #e1eef8; }
.mf-preview-frame { width: 100%; height: 80vh; border: 1px solid #d8eaf7; border-radius: .75rem; background: #fff; }
.mf-preview-frame.mobile { max-width: 400px; display: block; margin: 0 auto; }
.mf-tpl-frame { width: 100%; height: 420px; border: 0; pointer-events: none; }
.mf-log-context { font-size: .78rem; max-width: 380px; white-space: pre-wrap; word-break: break-word; }
.mf-bar { height: .5rem; border-radius: 1rem; background: var(--mf-primary-light); overflow: hidden; }
.mf-bar > span { display: block; height: 100%; background: var(--mf-primary); }
.mf-chart { display: flex; align-items: flex-end; gap: 4px; height: 140px; }
.mf-chart > div { flex: 1; background: var(--mf-primary); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.mf-chart > div:hover { background: var(--mf-primary-dark); }