/* ============================================================
   Kreowsky Accordion – Frontend-Styles
   ============================================================ */

.kreowsky-accordion {
	width: 100%;
}

/* ── Item ────────────────────────────────────────────────── */
.kreowsky-accordion-item {
	border-top: 1px solid var( --wp--preset--color--accent-3 );
}

.kreowsky-accordion-item:last-child {
	border-bottom: 1px solid var( --wp--preset--color--accent-3 );
}

/* ── Header-Button ───────────────────────────────────────── */
.kreowsky-accordion-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var( --wp--preset--spacing--40 );
	width:           100%;
	padding-top:     var( --wp--preset--spacing--40 );
	padding-bottom:  var( --wp--preset--spacing--40 );
	padding-right:   var( --wp--preset--spacing--40 );
	padding-left:    0;
	background:      none;
	border:          none;
	border-radius:   0;
	box-shadow:      none;
	outline:         none;
	cursor:          pointer;
	text-align:      left;
	color:           inherit;
	/* Browser-Reset für <button>: Font vom Theme erben */
	font:            inherit;
}

.kreowsky-accordion-header:hover,
.kreowsky-accordion-header:focus,
.kreowsky-accordion-header:active {
	background:  none;
	box-shadow:  none;
	outline:     none;
	border:      none;
}

.kreowsky-accordion-header:focus-visible {
	outline:        2px solid var( --wp--preset--color--accent-1 );
	outline-offset: 2px;
	border-radius:  2px;
}

/* ── Titel ───────────────────────────────────────────────── */
.kreowsky-accordion-title {
	font-weight: 500;
	line-height: 1.4;
	transition:  color 0.25s ease;
	/* Farbe aus Container-Custom-Property, Fallback: inherit */
	color: var( --accordion-title-color, inherit );
}

.kreowsky-accordion-item.is-open .kreowsky-accordion-title {
	/* Farbe aus Container-Custom-Property, Fallback: Theme-Akzentfarbe */
	color: var( --accordion-title-color-open, var( --wp--preset--color--accent-1 ) );
}

/* ── Icon  (CSS-gezeichnetes + / −) ──────────────────────── */
.kreowsky-accordion-icon {
	position:     relative;
	flex-shrink:  0;
	display:      inline-flex;
	align-items:  center;
	justify-content: center;
	width:        1.5rem;
	height:       1.5rem;
	min-width:    1.5rem;
}

/* Horizontaler Balken – immer sichtbar */
.kreowsky-accordion-icon::before,
.kreowsky-accordion-icon::after {
	content:       '';
	position:      absolute;
	width:         18px;
	height:        2px;
	background:    var( --wp--preset--color--accent-1 );
	border-radius: 1px;
	transition:    transform 0.35s cubic-bezier( 0.4, 0, 0.2, 1 ),
	               opacity   0.25s ease;
}

/* Vertikaler Balken – dreht sich raus beim Öffnen */
.kreowsky-accordion-icon::after {
	transform: rotate( 90deg );
}

.kreowsky-accordion-item.is-open .kreowsky-accordion-icon::after {
	transform: rotate( 90deg ) scaleX( 0 );
	opacity:   0;
}

/* ── Content-Bereich (Grid-Animations-Trick) ─────────────── */
.kreowsky-accordion-content {
	display:            grid;
	grid-template-rows: 0fr;
	transition:         grid-template-rows 0.4s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.kreowsky-accordion-item.is-open .kreowsky-accordion-content {
	grid-template-rows: 1fr;
}

/* Inner-Wrapper: overflow: hidden schließt den Grid-Bereich ab */
.kreowsky-accordion-content-inner {
	overflow:        hidden;
	padding-bottom:  0;
	transition:      padding-bottom 0.4s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.kreowsky-accordion-item.is-open .kreowsky-accordion-content-inner {
	padding-bottom: var( --wp--preset--spacing--60 );
}

/* ── Bild ────────────────────────────────────────────────── */
.kreowsky-accordion-image-wrap {
	margin-bottom: var( --wp--preset--spacing--50 );
}

.kreowsky-accordion-image {
	display:       block;
	width:         100%;
	height:        auto;
	border-radius: 12px;
	object-fit:    cover;
}