/* =========================================================
   Akkordion 10 Einträge – Frontend Styles
   ========================================================= */

:root {
    --dac-row-gap:        12px;
    --dac-item-radius:    12px;
    --dac-item-padding:   24px;
    --dac-item-min-h:     auto;
    --dac-item-bg:        #fafafa;
    --dac-item-bg-hover:  #f0f0f0;
    --dac-item-bg-open:   #ffffff;
    --dac-pt-gap:         20px;
    --dac-prefix-color:   #999;
    --dac-prefix-color-a: #004CFF;
    --dac-prefix-color-h: #004CFF;
    --dac-prefix-size:    1.375rem;
    --dac-prefix-weight:  700;
    --dac-title-color:    #333;
    --dac-title-color-a:  #004CFF;
    --dac-title-size:     1.375rem;
    --dac-title-weight:   500;
    --dac-title-lh:       140%;
    --dac-icon-color:     #004CFF;
    --dac-icon-size:      24px;
    --dac-icon-stroke:    1.88;
    --dac-content-pt:     20px;
    --dac-content-mh:     none;
    --dac-transition:     0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wrapper ── */
.dac-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--dac-row-gap);
    font-family: inherit;
    width: 100%;
}

/* ── Einzelner Eintrag ── */
.dac-item {
    background:    var(--dac-item-bg);
    border-radius: var(--dac-item-radius);
    overflow: hidden;
    transition: background var(--dac-transition), box-shadow var(--dac-transition);
}

/* Hover-Effekt (nur geschlossene Einträge) */
.dac-item:not(.is-open):hover {
    background: var(--dac-item-bg-hover);
}

.dac-item.is-open {
    background: var(--dac-item-bg-open);
    box-shadow: 0 12px 36px var(--dac-item-shadow, rgba(0,0,0,0.10));
    position: relative;
    z-index: 10;
}

/* ── Kopfzeile (klickbar) ── */
.dac-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: var(--dac-item-padding);
    min-height: var(--dac-item-min-h);
    cursor: pointer;
    user-select: none;
    outline: none;
}

.dac-head:focus-visible {
    outline: 2px solid var(--dac-icon-color);
    outline-offset: -2px;
}

/* ── Text-Bereich: Präfix + Titel ── */
.dac-head-text {
    display: flex;
    align-items: center;
    gap: var(--dac-pt-gap);
    flex: 1;
    min-width: 0;
}

/* ── Präfix ── */
.dac-prefix {
    flex-shrink: 0;
    color:       var(--dac-prefix-color);
    font-size:   var(--dac-prefix-size);
    font-weight: var(--dac-prefix-weight);
    line-height: var(--dac-title-lh);
    transition:  color var(--dac-transition);
}

.dac-item.is-open .dac-prefix {
    color: var(--dac-prefix-color-a);
    font-weight: 700;
}
.dac-item:not(.is-open) .dac-head:hover .dac-prefix {
    color: var(--dac-prefix-color-h);
}

/* ── Titel ── */
.dac-title {
    color:       var(--dac-title-color);
    font-size:   var(--dac-title-size);
    font-weight: var(--dac-title-weight);
    line-height: var(--dac-title-lh);
    transition:  color var(--dac-transition);
}

.dac-item.is-open .dac-title,
.dac-head:hover .dac-title {
    color: var(--dac-title-color-a);
}

/* Im geöffneten Zustand bekommt der Titel die größere Inhalts-Typografie */
.dac-item.is-open .dac-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    font-style: normal;
    line-height: 150%;
    text-decoration: none;
    text-transform: none;
}

/* ── Plus/Kreuz Icon ── */
.dac-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      transparent;
    transition:      background 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
    opacity:         0.85;
}

/* Geöffnet + Hover: weißer Kreis mit Schatten */
.dac-item.is-open .dac-icon,
.dac-head:hover .dac-icon {
    background:  #ffffff;
    box-shadow:  0 2px 10px rgba(0,0,0,0.12);
    opacity:     1;
}

.dac-plus {
    display: block;
    color:   var(--dac-icon-color);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: rotate(0deg);
}

.dac-plus line {
    stroke-width: 2.4;
}

/* Hover auf geschlossenem Toggle: dreht sich zu × */
.dac-item:not(.is-open) .dac-head:hover .dac-plus {
    transform: rotate(45deg);
}

/* Geöffneter Zustand: bleibt als × */
.dac-item.is-open .dac-plus {
    transform: rotate(45deg);
}

/* Hover auf geöffnetem Toggle: dreht sich weiter */
.dac-item.is-open .dac-head:hover .dac-plus {
    transform: rotate(90deg);
}
.dac-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dac-transition);
}

.dac-item {
    scroll-margin-top: 80px;
}

.dac-item.is-open .dac-panel {
    /* max-height wird per JS dynamisch auf scrollHeight gesetzt */
}

.dac-panel-inner {
    padding: 56px 40px 40px;
}

.dac-content-divider {
    border: none;
    border-top: 1px solid #e2e2e2;
    margin: 0 0 28px;
}

/* Begrenzte Höhe mit Scroll (falls eingestellt) */
.dac-panel-inner {
    max-height: var(--dac-content-mh);
    overflow-y: auto;
}

/* ════════════════════════════════════════════
   INHALT (aufgeklappt): Bild + Bulletpoints + Text + Button
   Layout/Typografie identisch zu divi-toggle-2col v10
   ════════════════════════════════════════════ */

/* Body: Text-Spalte und Bild-Spalte – 50/50 */
.dac-content-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Bild-Position umkehrbar */
.dac-content-left .dac-content-body {
    grid-template-columns: 1fr 1fr;
}
.dac-content-left .dac-content-image-col { order: -1; }

.dac-content-text-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dac-content-bullets {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}
.dac-content-bullets li {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    font-style: normal;
    line-height: 150%;
    text-decoration: none;
    text-transform: none;
    color: #222;
    margin-bottom: 6px;
}

.dac-content-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    font-style: normal;
    line-height: 190%;
    text-decoration: none;
    text-transform: none;
    color: var(--dac-content-text-color, #333333);
}

/* ── Text rutscht links, Pfeil erscheint rechts bei Hover ── */
align-self: flex-start;
    margin-top: 8px;
.dac-content-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    padding: 12px 0;
    border-radius: 999px;
    background: var(--dac-content-btn-bg, #004CFF);
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.95rem;
    text-decoration: none !important;
    overflow: hidden;
    cursor: pointer;
    border: none;
}
.dac-content-button .btn-text {
    color: #ffffff !important;
    display: inline-block;
    transition: transform 0.3s ease;
    transform: translateX(0);
    white-space: nowrap;
}
.dac-content-button .btn-arrow {
    display: inline-flex;
    align-items: center;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-width 0.3s ease, margin-left 0.3s ease;
    margin-left: 0;
    flex-shrink: 0;
}
.dac-content-button:hover .btn-text {
    transform: translateX(-8px);
}
.dac-content-button:hover .btn-arrow {
    opacity: 1;
    max-width: 32px;
    margin-left: 6px;
}

.dac-content-image-col img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/* ── Mobile: Bild unter den Text ── */
@media (max-width: 700px) {
    .dac-content-body {
        grid-template-columns: 1fr !important;
    }
    .dac-content-image-col { order: 2 !important; }
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .dac-head { padding: 16px; gap: 10px; }
    .dac-head-text { gap: 12px; }
    .dac-panel-inner { padding: 0 16px 16px; }
}

to   { opacity: 1; }
}