/*

#c71748 fuchisa
#8e0038 KA Rot

*/

/* ==========================================================================
   Variablen
   ========================================================================== */
:root {
    /* Farben */
    --color-primary: #c71748;
    --color-primary-dark: #8e0038;
    --color-background: #ffffff;
    --color-background-soft: #f5f5f5;
    --color-text: #181818;
    --color-border: rgba(60, 60, 60, .12);
    --color-link: white;
    --color-link-hover: white;
    
    /* Typography */
    --font-family-base: 'Raleway', sans-serif;
    --font-family-light: 'Raleway Light', sans-serif;
    --font-weight-normal: 300;
    --font-weight-semibold: 500;
    
    /* Spacing */
    --spacing-base: 1rem;
    --spacing-large: 2rem;
    
    /* Border */
    --border-radius: 3px;

    /* Bootstrap Überschreibungen */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 134, 29, 72;
    --bs-primary-dark: var(--color-primary-dark);
    --bs-border-radius: var(--border-radius);
    --bs-font-sans-serif: var(--font-family-base);
    --bs-body-font-weight: var(--font-weight-normal);
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-background);
    --bs-link-color: var(--color-link);
    --bs-link-hover-color: var(--color-link-hover);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
body {
    font-family: var(--bs-font-sans-serif);
    color: var(--bs-body-color);
    line-height: 1.5;
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--bs-primary-dark);
    font-family: var(--bs-font-sans-serif);
}

h1 {
    font-size: 2rem;
    margin-left: var(--spacing-base);
    font-weight: var(--font-weight-normal);
}

h2 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    margin-top: var(--spacing-large);
}

h3 {
    font-family: var(--font-family-light);
    font-size: 1.5rem;
    font-weight: var(--font-weight-normal);
}

h5 {
    font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Bootstrap Komponenten Anpassungen
   ========================================================================== */
/* Buttons */
.btn {
    --bs-btn-font-weight: var(--font-weight-normal);
    --bs-btn-border-radius: var(--border-radius);
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
}

.btn-primary,
.btn-primary:disabled {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-disabled-bg: rgba(46, 51, 56, .05);
    --bs-btn-disabled-color: var(--color-primary);
    --bs-btn-disabled-border-color: rgba(46, 51, 56, .05);
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-primary-dark);
    --bs-btn-hover-bg: var(--color-background);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-color: var(--color-primary-dark);
    --bs-btn-active-bg: var(--color-background);
    --bs-btn-active-border-color: var(--color-primary-dark);
}

/* Cards */
.card {
    --bs-card-border-radius: var(--border-radius);
    --bs-card-bg: var(--color-background);
    --bs-card-border-color: var(--color-border);
    margin-bottom: var(--spacing-base);
}

.card-body {
    --bs-card-cap-bg: rgb(250, 250, 252);
    background-color: rgb(250, 250, 252);
    padding: var(--spacing-large);
}

/* Forms */
.form-control {
    --bs-border-radius: var(--border-radius);
}

.form-control:focus {
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
}

/* Accordion */
.accordion {
    --bs-accordion-border-radius: var(--border-radius);
    --bs-accordion-btn-bg: var(--color-background);
    --bs-accordion-active-bg: var(--color-primary);
    --bs-accordion-active-color: white;
}

/* ==========================================================================
   Custom Komponenten
   ========================================================================== */
/* Header */
.site-header {
    position: fixed;
    width: 100%;
    padding: 1rem;
    background-color: var(--color-background);
    border-top: 7px solid var(--color-primary);
    border-bottom: 1px solid #AFAFAF;
    line-height: 1.5;
    z-index: 1000;
}

.site-header .logo-container {
    display: flex;
}

.site-header .logo {
    height: 30px;
}

.site-header p {
    font-size: 17px;
    margin: 0;
    position: relative;
}

/* Buttons */
.btn-secondary {
    background-color: white;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-link {
    color: rgb(33, 37, 41);
}

.btn-link:hover {
    color: var(--color-primary);
}

/* Cards */
.card h2 {
    margin-top: 0;
}

/* Forms */
.form-select:focus {
    background-color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgb(199 23 72 / 25%);
}

.form-check-input:focus {
    background-color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgb(199 23 72 / 25%);
}

.form-check-input:checked {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Accordion */
.accordion-button:not(.collapsed) {
    color: white;
    background-color: var(--color-primary);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.accordion-button:focus {
    border-color: var(--color-primary-dark);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%), 0 0 0 0.25rem rgb(199 23 72 / 25%);
}

.accordion-body {
    background-color: var(--color-background-soft);
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.bg-grey {
    background-color: var(--color-background-soft);
    border: none;
}

.no-border {
    border: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
    background-color: rgb(55, 90, 100);
    color: white;
}