/* =========================================================
   Hafen Core — Answer-Engine block styles (front-end + editor).
   Nutzt die Hafen-Theme-Tokens, fällt aber auf eigene Werte
   zurück, damit die Blöcke auch ohne das Theme gut aussehen.
   ========================================================= */

.hafen-faq,
.hafen-howto,
.hafen-tldr,
.hafen-def {
	--hc-brand: var(--wp--preset--color--brand, #14a08c);
	--hc-brand-dark: var(--wp--preset--color--brand-dark, #0d7d6e);
	--hc-ai: var(--wp--preset--color--ai, #6d5efc);
	--hc-ai-dark: var(--wp--preset--color--ai-dark, #4f46e5);
	--hc-adjet: var(--wp--preset--color--adjet, #f2994a);
	--hc-surface: var(--wp--preset--color--surface, #f5f7f9);
	--hc-border: var(--wp--preset--color--border, #e5e8ec);
	--hc-soft: var(--wp--preset--color--text-soft, #3c4c60);
	--hc-brand-light: var(--wp--preset--color--brand-light, #e6f6f3);
}

/* ---------- FAQ ---------- */
.hafen-faq__title,
.hafen-howto__title { font-weight: 800; letter-spacing: -.01em; margin: 0 0 .9rem; }

.hafen-faq__item {
	border: 1px solid var(--hc-border);
	border-radius: 12px;
	margin-bottom: .6rem;
	background: #fff;
	overflow: hidden;
}
.hafen-faq__q {
	cursor: pointer;
	font-weight: 700;
	padding: .85rem 1rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.hafen-faq__q::-webkit-details-marker { display: none; }
.hafen-faq__q::after {
	content: "+";
	font-size: 1.4rem;
	line-height: 1;
	font-weight: 300;
	color: var(--hc-brand-dark);
	transition: transform .2s ease;
}
.hafen-faq__item[open] .hafen-faq__q::after { transform: rotate(45deg); }
.hafen-faq__a { padding: 0 1rem 1rem; color: var(--hc-soft); }
.hafen-faq__a > :first-child { margin-top: 0; }

/* ---------- HowTo ---------- */
.hafen-howto__steps { list-style: none; margin: 0; padding: 0; counter-reset: hc-step; display: grid; gap: .6rem; }
.hafen-howto__step {
	position: relative;
	padding-left: 2.6rem;
	min-height: 1.9rem;
	color: var(--hc-soft);
}
.hafen-howto__step::before {
	counter-increment: hc-step;
	content: counter( hc-step );
	position: absolute;
	left: 0;
	top: 0;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 8px;
	display: grid;
	place-items: center;
	font-size: .85rem;
	font-weight: 800;
	color: #fff;
	background: linear-gradient( 135deg, var(--hc-adjet), #dd7f2f );
}

/* ---------- TL;DR ---------- */
.hafen-tldr {
	border: 1px solid var(--hc-border);
	border-left: 4px solid var(--hc-brand);
	border-radius: 14px;
	padding: 1rem 1.2rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 12, 27, 46, .05 );
}
.hafen-tldr__label {
	margin: 0 0 .3rem;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hc-brand-dark);
}
.hafen-tldr__content { color: var(--hc-soft); }
.hafen-tldr__content > :first-child { margin-top: 0; }
.hafen-tldr__content > :last-child { margin-bottom: 0; }

/* ---------- Definition ---------- */
.hafen-def {
	border: 1px solid var(--hc-border);
	border-left: 4px solid var(--hc-ai);
	border-radius: 14px;
	padding: 1rem 1.2rem;
	background: #fff;
}
.hafen-def__list { margin: 0; }
.hafen-def__term { font-weight: 800; margin: 0 0 .25rem; }
.hafen-def__desc { margin: 0; color: var(--hc-soft); }

/* =========================================================
   Editor-only UI for the repeater blocks
   ========================================================= */
.hafen-editor .hafen-editor__row {
	border: 1px dashed var(--hc-border);
	border-radius: 10px;
	padding: .7rem .8rem;
	margin-bottom: .5rem;
	background: var(--hc-surface);
}
.hafen-editor__row--step { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .6rem; }
.hafen-editor__q { font-weight: 700; margin: 0 0 .25rem; }
.hafen-editor__a { margin: 0; color: var(--hc-soft); }
.hafen-editor__step { margin: 0; }
.hafen-editor__num {
	width: 1.6rem; height: 1.6rem; border-radius: 7px;
	display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #fff;
	background: linear-gradient( 135deg, var(--hc-adjet), #dd7f2f );
}
.hafen-editor__remove { margin-top: .2rem; }
.hafen-editor__add { margin-top: .3rem; }