/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */


/* -------------------- */
/* ---- Overwrites ---- */
/* -------------------- */
:root {
    --electreeks-red: #d45050;
    --electreeks-red-active: #ff9099;
}

a {
    color: var(--electreeks-red) !important;
}

a:hover {
    color: var(--electreeks-red-active) !important;
}

.btn-primary {
    background-color: var(--electreeks-red) !important;
}

.btn:hover, .btn-primary:hover {
    background-color: var(--electreeks-red-active) !important;
}


/* ------------------- */
/* ---- Accordion ---- */
/* ------------------- */

.accordion {
    max-width: 600px; /* Maximalbreite des Accordions */
    margin: 20px auto; /* Zentriert die Accordion-Box */
    border: 1px solid #ddd; /* Leichter Rahmen um das gesamte Accordion */
    border-radius: 8px; /* Abrundung der Ecken */
    overflow: hidden;
}

/* Einzelne Accordion-Items */
.accordion-item {
    border-top: 1px solid #ddd;
}

.accordion-item:first-child {
    border-top: none; /* Entfernt die obere Linie des ersten Items */
}

/* Header des Accordions */
.accordion-header {
    display: block;
    cursor: pointer;
    padding: 15px;
    background-color: #f7f7f7 !important; /* Dezenter Hintergrund */
    font-weight: bold;
    transition: background-color 0.3s ease !important; /* Hintergrund-Übergang */
}

.accordion-header:hover {
    background-color: #e2e2e2; /* Hintergrundfarbe beim Hover */
}

/* Verstecke Checkboxen */
.accordion-checkbox {
    display: none;
}

/* Inhalt des Accordions */
.accordion-content {
    height: 0 !important;
    overflow: hidden;
    padding: 0 15px;
    background: #fafafa; /* Hintergrundfarbe für den Inhalt */
    border-radius: 0 0 8px 8px; /* Abrundung der unteren Ecken */
    transition: height 0.5s ease, padding 0.5s ease !important; /* Sanfter Ausklapp-Effekt */
}

/* Sichtbarkeit des Inhalts bei aktivem Accordion */
.accordion-checkbox:checked + .accordion-header + .accordion-content {
    height: auto; /* Inhalt dynamisch erweitern */
    padding: 15px; /* Innere Abstände hinzufügen */
}

/* Nachträgliche Anpassung, um die Höhe dynamisch zu berechnen */
.accordion-content p {
    margin: 0;
}