/*
 * Theme "Erbach": Farben aus dem Ortswappen (Blau, Gold, Gruen).
 * Wird nach bootstrap.min.css geladen und ueberschreibt nur Bootstrap-Variablen,
 * damit auch die Admin-Templates des essentials-bundle automatisch mitziehen.
 */

@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
    --eb-blue: #1f4f9a;
    --eb-blue-dark: #163a73;
    --eb-blue-rgb: 31, 79, 154;
    --eb-blue-tint: #e8eef8;
    --eb-gold: #e8b923;
    --eb-gold-dark: #b8901a;
    --eb-green: #3f7d3a;
    --eb-surface: #f5f6f8;
    --eb-border: #e3e6eb;
    --eb-radius: .75rem;
    --eb-shadow: 0 .125rem .5rem rgba(22, 58, 115, .08);
    --eb-shadow-hover: 0 .5rem 1.25rem rgba(22, 58, 115, .14);

    --bs-primary: var(--eb-blue);
    --bs-primary-rgb: var(--eb-blue-rgb);
    --bs-primary-text-emphasis: var(--eb-blue-dark);
    --bs-primary-bg-subtle: var(--eb-blue-tint);
    --bs-primary-border-subtle: #b9c9e4;
    --bs-success: var(--eb-green);
    --bs-success-rgb: 63, 125, 58;
    --bs-link-color: var(--eb-blue);
    --bs-link-color-rgb: var(--eb-blue-rgb);
    --bs-link-hover-color: var(--eb-blue-dark);
    --bs-link-hover-color-rgb: 22, 58, 115;
    --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.6;
    --bs-body-color: #1f2933;
    --bs-border-color: var(--eb-border);
    --bs-border-radius: var(--eb-radius);
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
    --bs-focus-ring-color: rgba(232, 185, 35, .5);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--eb-blue-dark);
}

.btn-primary {
    --bs-btn-bg: var(--eb-blue);
    --bs-btn-border-color: var(--eb-blue);
    --bs-btn-hover-bg: var(--eb-blue-dark);
    --bs-btn-hover-border-color: var(--eb-blue-dark);
    --bs-btn-active-bg: var(--eb-blue-dark);
    --bs-btn-active-border-color: var(--eb-blue-dark);
    --bs-btn-disabled-bg: var(--eb-blue);
    --bs-btn-disabled-border-color: var(--eb-blue);
}

.btn-outline-primary {
    --bs-btn-color: var(--eb-blue);
    --bs-btn-border-color: var(--eb-blue);
    --bs-btn-hover-bg: var(--eb-blue);
    --bs-btn-hover-border-color: var(--eb-blue);
    --bs-btn-active-bg: var(--eb-blue);
    --bs-btn-active-border-color: var(--eb-blue);
    --bs-btn-disabled-color: var(--eb-blue);
    --bs-btn-disabled-border-color: var(--eb-blue);
}

.btn-success {
    --bs-btn-bg: var(--eb-green);
    --bs-btn-border-color: var(--eb-green);
    --bs-btn-hover-bg: #336630;
    --bs-btn-hover-border-color: #336630;
    --bs-btn-active-bg: #336630;
    --bs-btn-active-border-color: #336630;
    --bs-btn-disabled-bg: var(--eb-green);
    --bs-btn-disabled-border-color: var(--eb-green);
}

.card {
    --bs-card-border-color: var(--eb-border);
    --bs-card-border-radius: var(--eb-radius);
    --bs-card-inner-border-radius: calc(var(--eb-radius) - 1px);
    box-shadow: var(--eb-shadow);
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid var(--eb-gold);
    outline-offset: 2px;
    box-shadow: none;
}

.badge {
    font-weight: 600;
}

/* Formulare */
.form-control,
.form-select {
    padding: .6rem .85rem;
    border-color: #c9cfd8;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--eb-gold-dark);
}

.form-label,
label.required,
label:not(.form-check-label):not(.btn) {
    font-weight: 600;
}

label.required::after {
    content: " *";
    color: var(--eb-blue);
}

.form-text,
.help-text {
    color: #5b6773;
}

.invalid-feedback {
    font-weight: 600;
}