:root {
    --eltrocon-blau: #024d85;
    --eltrocon-blau-dunkel: #01365c;
    --eltrocon-blau-rgb: 2, 77, 133;

    --bs-primary: var(--eltrocon-blau);
    --bs-primary-rgb: var(--eltrocon-blau-rgb);
    --bs-link-color: var(--eltrocon-blau);
    --bs-link-hover-color: var(--eltrocon-blau-dunkel);
}

html,
body {
    min-height: 100%;
}

body {
    font-family: "Segoe UI", system-ui, Calibri, Aptos, sans-serif;
    background-color: #f4f6f8;
    color: #1a1a1a;
}

.btn-primary,
.bg-primary {
    --bs-btn-bg: var(--eltrocon-blau);
    --bs-btn-border-color: var(--eltrocon-blau);
    --bs-btn-hover-bg: var(--eltrocon-blau-dunkel);
    --bs-btn-hover-border-color: var(--eltrocon-blau-dunkel);
    --bs-btn-active-bg: var(--eltrocon-blau-dunkel);
    --bs-btn-active-border-color: var(--eltrocon-blau-dunkel);
}

.app-header {
    background: #fff;
    border-bottom: 3px solid var(--eltrocon-blau);
}

.app-header .navbar-brand img {
    height: 28px;
    width: auto;
}

.app-header .nav-link.active {
    color: var(--eltrocon-blau);
    font-weight: 600;
}

.app-brotkrumen {
    margin-bottom: 1rem;
}

.app-brotkrumen .breadcrumb {
    margin-bottom: 0;
    padding: 0;
}

.app-brotkrumen .breadcrumb-item + .breadcrumb-item::before {
    color: #8a929a;
}

.app-brotkrumen .breadcrumb-item a {
    color: var(--eltrocon-blau);
    text-decoration: none;
}

.app-brotkrumen .breadcrumb-item a:hover {
    color: var(--eltrocon-blau-dunkel);
    text-decoration: underline;
}

.app-brotkrumen .breadcrumb-item.active {
    color: #5c6570;
}

.listen-filter .form-label {
    font-weight: 600;
}

.guest-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, var(--eltrocon-blau) 0%, var(--eltrocon-blau-dunkel) 100%);
}

.guest-page .card {
    border: 0;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.guest-page .logo {
    max-width: 240px;
    height: auto;
}

.guest-hint {
    font-size: 0.85rem;
    color: #5c6570;
}

.form-abschnitt:not(:first-child) {
    padding-top: 1.5rem;
    border-top: 1px solid #e4e8ec;
}

.form-abschnitt > .h6:first-child {
    color: var(--eltrocon-blau);
}

.mail-variablen {
    background: #f8f9fa;
    border-left: 3px solid var(--eltrocon-blau);
}

@media (min-width: 992px) {
    .mail-variablen {
        margin-top: 2rem;
    }
}

.form-label,
legend.col-form-label {
    font-weight: 600;
}

.form-label.required::after,
legend.required::after {
    content: "\00a0*";
    color: var(--bs-form-invalid-color, #dc3545);
}

.ts-wrapper.multi .ts-control > div {
    background: rgba(var(--eltrocon-blau-rgb), 0.08);
    color: var(--eltrocon-blau);
}

.ts-wrapper.multi .ts-control > div.active {
    background: var(--eltrocon-blau);
    color: #fff;
}

.focus .ts-control {
    border-color: var(--eltrocon-blau);
    box-shadow: 0 0 0 0.25rem rgba(var(--eltrocon-blau-rgb), 0.25);
}