/*
 * Accordion Simpel container – Layout 0
 * Wird nur geladen, wenn der Container gerendert wird (via f:asset.css).
 * Plain CSS mit Bootstrap-CSS-Variablen (--bs-*).
 */

.pp-accordion-simpel .card-body > .frame > header:first-child,
.pp-accordion-simpel .card-body > header:first-child {
    display: none;
}

.pp-accordion-simpel--layout0 {
    --pp-accordion-simpel-toggle-size: 2.25rem;
    --pp-accordion-simpel-toggle-icon-size: 1.5rem;
    --pp-accordion-simpel-body-indent: 3.25rem;
    --pp-accordion-simpel-item-bg: var(--bs-body-bg, #fff);
    --pp-accordion-simpel-border-color: var(--bs-border-color, #e0e0e0);
    --pp-accordion-simpel-title-color: var(--bs-body-color, #212529);
    --pp-accordion-simpel-body-color: var(--bs-body-color, #555);
}

.pp-accordion-simpel--layout0 .pp-accordion-simpel-item {
    background-color: var(--pp-accordion-simpel-item-bg);
}

/* Ganze Kopfzeile ist der Ausloeser (Button-Reset, volle Breite) */
.pp-accordion-simpel--layout0 .pp-accordion-simpel-row--toggle {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
    box-shadow: none !important;
}

/* Aufklapp-Button: Kreis mit +/− (SVG, wie calendar-event).
   Hintergrund kommt aus der Bootstrap-Utility bg-{token} (z.B. .bg-primary, !important)
   am Button selbst; hier nur Form + Icon-Farbe. Icon ist immer weiss. */
.pp-accordion-simpel--layout0 .pp-accordion-simpel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pp-accordion-simpel-toggle-size);
    height: var(--pp-accordion-simpel-toggle-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #fff;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Helle Hintergruende: Icon dunkel, damit es sichtbar bleibt */
.pp-accordion-simpel--layout0 .pp-accordion-simpel-toggle.bg-light,
.pp-accordion-simpel--layout0 .pp-accordion-simpel-toggle.bg-warning {
    color: var(--bs-dark, #212529);
}

.pp-accordion-simpel--layout0 .pp-accordion-simpel-toggle-icon {
    display: block;
    width: var(--pp-accordion-simpel-toggle-icon-size);
    height: var(--pp-accordion-simpel-toggle-icon-size);
}

.pp-accordion-simpel--layout0 .pp-accordion-simpel-toggle-icon line {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* aufgeklappt → Minus: vertikale Linie ausblenden (aria-expanded sitzt jetzt auf der Zeile) */
.pp-accordion-simpel--layout0 .pp-accordion-simpel-row[aria-expanded="true"] .pp-accordion-simpel-toggle-v {
    opacity: 0;
}

.pp-accordion-simpel--layout0 .pp-accordion-simpel-row--toggle:hover .pp-accordion-simpel-toggle,
.pp-accordion-simpel--layout0 .pp-accordion-simpel-row--toggle:focus-visible .pp-accordion-simpel-toggle {
    filter: brightness(0.92);
}

.pp-accordion-simpel--layout0 .pp-accordion-simpel-toggle--empty {
    display: inline-block;
    width: var(--pp-accordion-simpel-toggle-size);
    height: var(--pp-accordion-simpel-toggle-size);
    background-color: transparent;
}

.pp-accordion-simpel--layout0 .pp-accordion-simpel-title {
    color: var(--pp-accordion-simpel-title-color);
    line-height: 1.4;
}

.pp-accordion-simpel--layout0 .pp-accordion-simpel-body {
    color: var(--pp-accordion-simpel-body-color);
    padding-left: var(--pp-accordion-simpel-body-indent);
}

/* Bei textpic/textmedia: Header wird im Accordion-Titel gezeigt, FSC-Header ausblenden */
.pp-accordion-simpel--layout0 .pp-accordion-simpel-body header {
    display: none !important;
}