:root {
    interpolate-size: allow-keywords;
}

/* Buttons */
.wp-element-button {
    border-radius: var(--radius);
    color: white;
    background-color: var(--brand);
}

.wp-element-button:hover {
    color: white;
}

.wp-element-button:visited {
    color: white;
}

.wp-block-details {
    padding: 0.75rem 1rem;
    margin: 1em 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: box-shadow 0.25s ease, border-left-width 0.2s ease, border-left-color 0.2s ease;
}

.wp-block-details:hover,
.wp-block-details[open] {
    border-left: 4px solid var(--brand);   /* Akzentkante wächst leicht */
    box-shadow: var(--shadow-1);

}

.wp-block-details > summary {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;     /* Text und Marker mittig */
    cursor: pointer;         /* zeigt dass es klickbar ist */
    list-style: none;        /* Standard-Dreieck zuverlässig entfernen */
}

/* Standard-Marker in beiden Browser-Varianten entfernen */
.wp-block-details > summary::marker,
.wp-block-details > summary::-webkit-details-marker {
    display: none;
    content: none;
}

.wp-block-details > summary::after {
    content: "\F282";
    font-family: "bootstrap-icons";
    font-size: 1.5rem;
    color: var(--brand);
    margin-left: auto;                   
    transition: transform 0.25s ease; 
}

/* Wenn geöffnet: Marker drehen */
.wp-block-details[open] > summary::after {
    transform: rotate(180deg);
}

.wp-block-details::details-content {
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
}

.wp-block-details[open]::details-content {
    height: auto;
}



/* Accordion */
.wp-block-accordion-item {
    background-color: var(--light-grey);
    border-radius: var(--radius);
    padding: 0.5em 1em;
    margin: 0.6em 0;
}

.wp-block-accordion-heading {
    margin: 0;
    font-size: 1.2em;
}

/* Accordion minimal */
.is-style-minimal .wp-block-accordion-item {
    background-color: unset;
    margin: 0;
    border-bottom: 1px solid #bcbcbc;
    border-radius: 0;
    padding: 0.75em;
}

/* Erstes Item bekommt auch oben eine Linie */
.is-style-minimal .wp-block-accordion-item:first-child {
    border-top: 1px solid #bcbcbc;
}

/* Gruppe */
.is-style-karte {
    box-shadow: var(--shadow-1);
    border-radius: var(--radius);
    padding: 1em;
}