/* =====================================================================
   rocks Online – Theme für den EmpCo-Scanner
   Markenfarbe Gold #C8A26F · Überschriften Cal Sans · Text/UI Inter
   ===================================================================== */

@font-face {
    font-family: "Cal Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/gh/calcom/font/fonts/webfonts/CalSans-SemiBold.woff2") format("woff2");
}

:root {
    --rocks-gold:        #c8a26f;
    --rocks-gold-dark:   #b38b54;
    --rocks-gold-soft:   #f4ede2;
    --rocks-ink:         #191919;
    --rocks-bg:          #faf8f5;
    --rocks-surface:     #ffffff;
    --rocks-border:      #e9e4dc;
    --rocks-muted:       #6f6a62;

    /* Bootstrap-Variablen an die Marke anpassen */
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--rocks-ink);
    --bs-body-bg: var(--rocks-bg);
    --bs-emphasis-color: var(--rocks-ink);
    --bs-link-color: var(--rocks-gold-dark);
    --bs-link-color-rgb: 179, 139, 84;
    --bs-link-hover-color: var(--rocks-gold);
    --bs-border-color: var(--rocks-border);
    --bs-border-radius: .65rem;
    --bs-border-radius-lg: .9rem;
}

body {
    background-color: var(--rocks-bg);
    color: var(--rocks-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .rocks-display {
    font-family: "Cal Sans", "Inter", system-ui, sans-serif;
    letter-spacing: -0.01em;
}

/* --- Marke / Logo --------------------------------------------------- */
.rocks-logo {
    font-family: "Cal Sans", "Inter", sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--rocks-ink);
}
.rocks-logo--sm { font-size: .95rem; }
.rocks-dot { color: var(--rocks-gold); }
.rocks-sub {
    font-weight: 600;
    color: var(--rocks-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-left: .35rem;
}

/* --- Navigation ----------------------------------------------------- */
.rocks-navbar {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--rocks-border);
}
.rocks-navbar .navbar-brand { display: flex; align-items: baseline; }
.rocks-navbar .nav-link {
    color: var(--rocks-ink);
    font-weight: 500;
    padding-inline: .9rem;
    position: relative;
}
.rocks-navbar .nav-link:hover { color: var(--rocks-gold-dark); }
.rocks-navbar .nav-link.active { color: var(--rocks-gold-dark); font-weight: 600; }
.rocks-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: .9rem; right: .9rem; bottom: .1rem;
    height: 2px;
    background: var(--rocks-gold);
    border-radius: 2px;
}

/* --- Buttons: Pill-Form wie im Markenauftritt ----------------------- */
.btn {
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: .01em;
    padding-inline: 1.4rem;
}
.btn-lg { padding-inline: 1.8rem; }

.btn-success,
.btn-primary,
.btn-rocks {
    --bs-btn-bg: var(--rocks-gold);
    --bs-btn-border-color: var(--rocks-gold);
    --bs-btn-hover-bg: var(--rocks-gold-dark);
    --bs-btn-hover-border-color: var(--rocks-gold-dark);
    --bs-btn-active-bg: var(--rocks-gold-dark);
    --bs-btn-active-border-color: var(--rocks-gold-dark);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--rocks-gold);
    --bs-btn-disabled-border-color: var(--rocks-gold);
}

.btn-outline-primary {
    --bs-btn-color: var(--rocks-gold-dark);
    --bs-btn-border-color: var(--rocks-gold);
    --bs-btn-hover-bg: var(--rocks-gold);
    --bs-btn-hover-border-color: var(--rocks-gold);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--rocks-gold-dark);
    --bs-btn-active-border-color: var(--rocks-gold-dark);
}

.btn-outline-secondary {
    --bs-btn-color: var(--rocks-ink);
    --bs-btn-border-color: var(--rocks-border);
    --bs-btn-hover-bg: var(--rocks-ink);
    --bs-btn-hover-border-color: var(--rocks-ink);
    --bs-btn-hover-color: #fff;
}

/* --- Cards ---------------------------------------------------------- */
.card {
    --bs-card-bg: var(--rocks-surface);
    --bs-card-border-color: var(--rocks-border);
    --bs-card-border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 1px 2px rgba(25, 25, 25, .04), 0 8px 24px rgba(25, 25, 25, .04);
}
.card.shadow-sm { box-shadow: 0 1px 2px rgba(25, 25, 25, .04), 0 8px 24px rgba(25, 25, 25, .05) !important; }

/* --- Formulare ------------------------------------------------------ */
.form-control, .form-select {
    border-color: var(--rocks-border);
    border-radius: .55rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--rocks-gold);
    box-shadow: 0 0 0 .2rem rgba(200, 162, 111, .25);
}
.form-check-input:checked {
    background-color: var(--rocks-gold);
    border-color: var(--rocks-gold);
}
.form-check-input:focus {
    border-color: var(--rocks-gold);
    box-shadow: 0 0 0 .2rem rgba(200, 162, 111, .25);
}
.btn-check:focus + .btn, .btn:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(200, 162, 111, .3);
}

/* --- Fortschritt ---------------------------------------------------- */
.progress { background-color: var(--rocks-gold-soft); border-radius: 100px; }
.progress-bar.bg-success { background-color: var(--rocks-gold) !important; }

/* --- Badges: Risiko behält semantische Farben ----------------------- */
.badge { font-weight: 600; letter-spacing: .01em; }
.text-bg-light { background-color: var(--rocks-gold-soft) !important; color: var(--rocks-ink) !important; }

/* Akzent-Streifen der Kennzahlkarten in Markenfarbe, wenn neutral */
.border-secondary { border-color: var(--rocks-border) !important; }

/* --- Findings ------------------------------------------------------- */
.finding-item .card-header {
    cursor: pointer;
    background: var(--rocks-surface);
    border-bottom: 1px solid transparent;
}
.finding-item .card-header:hover { background-color: var(--rocks-gold-soft) !important; }
.finding-item .collapse.show + .card-header,
.finding-item .card-header[aria-expanded] { border-bottom-color: var(--rocks-border); }

mark {
    padding: .05rem .2rem;
    border-radius: .25rem;
    background-color: #fbe6c8;
    color: var(--rocks-ink);
}

code { word-break: break-all; color: var(--rocks-gold-dark); }

dl.row dt { font-weight: 500; }

/* --- Footer --------------------------------------------------------- */
.rocks-footer {
    border-top: 1px solid var(--rocks-border);
    background: var(--rocks-surface);
    margin-top: 4rem;
    color: var(--rocks-muted);
}

/* --- Tabellen ------------------------------------------------------- */
.table { --bs-table-bg: transparent; }
thead.table-light th, .table-light { background-color: var(--rocks-gold-soft); }