/* Akkordeon-Grid fuer die Gruppenphase.
   Spalten/Struktur werden von gruppen-accordion.js aufgebaut. */

:root {
    --tp-akk-bg: #e3f2fd;
    --tp-akk-border: #a4dbf5;
    --tp-akk-hover: #d4e9f7;
}
html[data-bs-theme="dark"] {
    --tp-akk-bg: #1e2d3a;
    --tp-akk-border: #2a4a60;
    --tp-akk-hover: #253545;
}

/* Vor dem JS-Aufbau verstecken, damit die rohen Karten nicht kurz
   als hohe Liste aufblitzen. */
#gruppen-grid:not(.bereit) {
    visibility: hidden;
}

.gruppen-akk {
    margin-bottom: .5rem;
}

.gruppen-akk-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .6rem;
    border: 1px solid var(--tp-akk-border);
    border-radius: .375rem;
    background-color: var(--tp-akk-bg);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.gruppen-akk-header:hover {
    background-color: var(--tp-akk-hover);
}

.gruppen-akk-titel {
    flex: 1 1 auto;
}

.gruppen-akk-chevron {
    flex: 0 0 auto;
    transition: transform .15s ease;
}

/* Eingeklappt -> Chevron zeigt nach rechts */
.gruppen-akk-header.zu .gruppen-akk-chevron {
    transform: rotate(-90deg);
}

.gruppen-akk-body {
    display: grid;
    gap: .5rem;
    padding: .5rem 0 0;
    align-items: start;
}

.gruppen-akk-body.collapsed {
    display: none;
}

.gruppe-card .gruppe-titel {
    margin-top: .25rem;
}