/* =============================================================
   BUNDESVERBAND DER WERTPAPIERFIRMEN e.V.
   Konsolidiertes Indico-CSS 2026 (3.3.12)
   Für YunoHost – Corporate Identity + Mobile-Optimierung
   ============================================================= */

@font-face {
    font-family: "TheSansC5-Light";
    src: url("https://wertpapierfirmen.org/fileadmin/bwf-verband.de/sitedesign/Style/fonts/TheSansC5-3_Light/TheSansC5-3_Light.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "TheSansC5-Bold";
    src: url("https://wertpapierfirmen.org/fileadmin/bwf-verband.de/sitedesign/Style/fonts/TheSansC5-7_Bold/TheSansC5-3_Bold.woff2") format("woff2");
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "TheSansC5-Bold-Italic";
    src: url("https://wertpapierfirmen.org/fileadmin/bwf-verband.de/sitedesign/Style/fonts/TheSansC5-7iBoldItalic/TheSansC5-7iBoldItalic.woff2") format("woff2");
    font-weight: normal; font-style: italic; font-display: swap;
}

/* ── CSS VARIABLEN ─────────────────────────────────────────── */
:root {
    --color-red:        rgba(153,14,41,1);
    --color-red-50:     rgba(153,14,41,0.5);
    --color-red-30:     rgba(153,14,41,0.33);
    --color-grey:       rgba(160,165,168,1);
    --color-grey-50:    rgba(160,165,168,0.5);
    --color-grey-30:    rgba(160,165,168,0.33);
    --color-blue:       rgba(0,69,137,1);
    --color-blue-50:    rgba(0,69,137,0.5);
    --color-blue-30:    rgba(0,69,137,0.33);
    --color-petrol:     rgba(0,104,128,1);
    --color-petrol-50:  rgba(0,104,128,0.5);
    --color-petrol-30:  rgba(0,104,128,0.33);
    --font-light:       "TheSansC5-Light", Verdana, sans-serif;
    --font-bold:        "TheSansC5-Bold", Verdana, sans-serif;
    --font-bold-italic: "TheSansC5-Bold-Italic", Verdana, sans-serif;
    --font-features:    "kern" 1, "liga" 1, "calt" 1, "locl" 1;
}

/* ── TYPOGRAFIE & ALLGEMEIN ─────────────────────────────────── */
body, p, div, td, th, li, span, input, select, textarea, button {
    font-family: var(--font-light) !important;
    font-feature-settings: var(--font-features);
}

p { font-weight: 100; font-size: 1rem; line-height: 1.65rem; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-bold) !important;
    color: var(--color-red);
}

article h2 {
    font-family: var(--font-bold-italic) !important;
    font-weight: 100;
    font-size: 1.3rem;
    line-height: 2rem;
}

a, p a { color: var(--color-red) !important; text-decoration: underline; }
a:hover { color: rgba(100,9,27,1) !important; }

/* ── HEADER & NAVIGATION ────────────────────────────────────── */
#header, .header { background-color: #ffffff !important; border-bottom: 2px solid var(--color-red-30) !important; }
.toolbar, .toolbars { border-bottom: 1px solid var(--color-red-30) !important; }

/* ── BUTTONS (alle Varianten) ───────────────────────────────── */
[type=button], [type=reset], [type=submit], button,
.i-button.accept, .i-button.highlight, .btn-custom,
.btn, .btn-primary {
    background: var(--color-red) !important;
    border: none !important;
    color: white !important;
    font-size: 1.2rem;
    border-radius: 5px;
    padding: .3rem 1rem;
    margin-top: 1rem;
}
[type=button]:hover, button:hover, .i-button:hover, .btn:hover {
    background: var(--color-grey) !important;
    color: var(--color-red) !important;
}

/* Weitere BWF-Button-Varianten */
.btn-custom-light, .btn-petrol, .btn-blue, .btn-custom-grey { /* ... alle Varianten aus deinen Dateien */ }
.btn-custom-light { background: var(--color-red-50) !important; }
.btn-petrol { background: var(--color-petrol) !important; }
.btn-blue { background: var(--color-blue) !important; }
.btn-custom-grey { background: rgba(151,153,155,1) !important; }

/* ── TABELLEN, FORMS, ACCORDION, FOOTER ─────────────────────── */
table thead th, .i-table thead th { background-color: rgba(153,14,41,0.08) !important; color: var(--color-red) !important; }
.regform-section-title { color: var(--color-red) !important; border-bottom: 2px solid var(--color-red-30) !important; font-family: var(--font-bold) !important; }
.date, .event-date, .item-date { color: var(--color-grey) !important; }
.accordion-button:not(.collapsed) { background-color: var(--color-grey-30); }
#footer, footer { border-top: 1px solid var(--color-red-30) !important; text-align: center; padding: 1rem; }

/* ── ADMIN-BEREICH (aus bwf_admin.css) ──────────────────────── */
body.admin, .indico-admin, .management-page, .page-management {
    background-color: #f8f9fa !important;
    font-family: var(--font-light) !important;
}
.navbar.admin-navbar, .header-management {
    background-color: rgba(153,14,41,1) !important;
    color: white !important;
}
.btn-primary { background-color: rgba(153,14,41,1) !important; border-color: rgba(153,14,41,1) !important; }
.btn-primary:hover { background-color: rgba(160,165,168,1) !important; color: rgba(153,14,41,1) !important; }

/* ── MOBILE-OPTIMIERUNGEN (Indico 3.3 + BWF) ───────────────── */
@media (max-width: 768px) {
    :root { --indico-font-size-base: 15px; }

    /* Agenda & Zeitplan */
    .agenda .entry, .agenda .block, .timetable-block {
        display: block !important;
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 8px;
    }

    /* Formulare & Registration */
    .form-group, .indico-input, .regform-section { margin-bottom: 1.2rem; }
    .regform-section-title { font-size: 1.2rem; }

    /* Material-Listen & Downloads */
    .material-list .btn, .attachment, .i-button {
        min-height: 52px;
        padding: 14px;
        font-size: 1.1em;
        width: 100%;
        margin-bottom: 8px;
    }

    /* Header & Navigation */
    .header, .navbar, .toolbar { flex-wrap: wrap; padding: 10px 12px; }
    .navbar-brand img { max-width: 180px; }

    /* Allgemeiner Inhalt */
    .page-content, .event-page, .main-content { padding: 14px; }
    .container { min-width: 95%; }

    /* Tabellen scrollbar & lesbar */
    .table-responsive, table { display: block; overflow-x: auto; white-space: nowrap; }

    /* Scroll-to-top Button (falls vorhanden) */
    #myBtn { width: 48px; height: 48px; font-size: 1.6rem; bottom: 15px; right: 15px; }
}