/*
 * Shared content styles — loaded BOTH on the front-end and in the block editor.
 *
 * Applies to every block-rendered context (Articles, Pages, future post types).
 * Edit visual rules here once; both views update.
 *
 * Front-end: enqueued via wp_enqueue_style (functions.php).
 * Editor:    loaded via add_editor_style — WP auto-scopes selectors under
 *            .editor-styles-wrapper inside the iframe.
 */

:root {
	/* Defaults; the Customizer overrides them on the front-end. Inside the
	   block editor these values stand, so the editor keeps the theme look. */
	--accent: #41ff00;
	--accent-rgb: 65, 255, 0;
}

/* Headings */
h1 {
	color: #fff;
}

h2,
h2.wp-block-heading {
	color: var(--accent);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
	font-size: clamp(1.4rem, 3.6vw, 1.7rem);
	margin-top: 2.4em;
	margin-bottom: 0.6em;
}

h3,
h3.wp-block-heading {
	color: #fff;
	font-weight: 600;
	line-height: 1.35;
	font-size: clamp(1.15rem, 2.8vw, 1.3rem);
	margin-top: 2em;
	margin-bottom: 0.5em;
}

h4,
h4.wp-block-heading {
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 1.05rem;
	margin-top: 2em;
	margin-bottom: 0.4em;
	opacity: 0.85;
}

/* Inline elements */
a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness 0.15s;
}

a:hover {
	text-decoration-thickness: 2px;
}

strong {
	color: #fff;
	font-weight: 600;
}

em {
	font-style: italic;
}

code {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	padding: 0.1em 0.4em;
	font-size: 0.92em;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Lists */
ul,
ol {
	padding-left: 1.4em;
}

li {
	margin-bottom: 0.4em;
}

li::marker {
	color: var(--accent);
}

/* Blockquote */
blockquote,
.wp-block-quote {
	border-left: 3px solid var(--accent);
	padding: 0.3em 0 0.3em 1.2em;
	margin-left: 0;
	margin-right: 0;
	font-size: 1.1em;
	font-style: italic;
	color: rgba(255, 255, 255, 0.85);
}

blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: 0.6em;
	font-size: 0.85em;
	opacity: 0.6;
	font-style: normal;
}

/* Horizontal separator */
hr,
.wp-block-separator {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
	margin: 2.5em 0;
}

/* Images & figures */
figure,
.wp-block-image {
	margin-left: 0;
	margin-right: 0;
}

figure img,
.wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 14px;
}

figcaption,
.wp-block-image figcaption {
	font-size: 0.85rem;
	opacity: 0.6;
	margin-top: 0.6em;
	text-align: center;
}

/* Video & embeds — responsive 16:9 */
.wp-block-embed,
.wp-block-video {
	margin-left: 0;
	margin-right: 0;
}

.wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 14px;
}

.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper embed,
.wp-block-embed__wrapper object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.wp-block-video video {
	width: 100%;
	height: auto;
	border-radius: 14px;
	display: block;
}

/* Galleries */
.wp-block-gallery img {
	border-radius: 10px;
}

/* Columns */
.wp-block-columns {
	gap: 1.25em;
}

@media (max-width: 600px) {
	.wp-block-columns {
		flex-wrap: wrap;
	}
	.wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Cover blocks */
.wp-block-cover {
	border-radius: 16px;
	overflow: hidden;
}

.wp-block-cover h1,
.wp-block-cover h2 {
	color: #fff;
	margin: 0;
}

/* Buttons (used inside CTA cards and elsewhere) */
.wp-block-button__link {
	background: var(--accent);
	color: #000 !important;
	border-radius: 999px;
	padding: 12px 28px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-decoration: none;
	display: inline-block;
	transition: background 0.15s, box-shadow 0.15s;
}

.wp-block-button__link:hover {
	background: #5fff2a;
	box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45);
	text-decoration: none;
}

/* ===========================================================
   Block patterns
   =========================================================== */

/* Pull quote */
.fb-pullquote {
	border: none !important;
	text-align: center;
	margin: 2.5em auto;
	padding: 0 0.5em;
	max-width: 32rem;
}

.fb-pullquote blockquote {
	border: none !important;
	padding: 0;
	margin: 0;
	font-style: normal;
}

.fb-pullquote p {
	font-size: clamp(1.3rem, 3.5vw, 1.7rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--accent);
	margin: 0 0 0.6em;
}

.fb-pullquote cite {
	display: block;
	font-size: 0.85rem;
	opacity: 0.6;
	font-style: normal;
	color: rgba(255, 255, 255, 0.7);
}

/* Key facts box */
.fb-keyfacts {
	background: rgba(var(--accent-rgb), 0.06);
	border: 1px solid rgba(var(--accent-rgb), 0.3);
	border-radius: 16px;
	padding: 1.4em 1.5em;
	margin: 2em 0;
}

.fb-keyfacts > * {
	margin-bottom: 0.8em;
}

.fb-keyfacts > *:last-child {
	margin-bottom: 0;
}

.fb-keyfacts .fb-keyfacts-title,
.fb-keyfacts h3 {
	color: var(--accent) !important;
	margin-top: 0;
	font-size: 1.15rem;
}

.fb-keyfacts ul {
	padding-left: 1.2em;
}

/* "Wusstest du?" callout */
.fb-callout {
	background: rgba(var(--accent-rgb), 0.05);
	border-left: 4px solid var(--accent);
	padding: 1em 1.25em;
	border-radius: 0 14px 14px 0;
	margin: 2em 0;
}

.fb-callout > * {
	margin-bottom: 0.6em;
}

.fb-callout > *:last-child {
	margin-bottom: 0;
}

.fb-callout-label {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 700;
	margin-bottom: 0.3em !important;
}

/* Numbered steps */
.fb-steps {
	counter-reset: fb-step;
	list-style: none;
	padding-left: 0;
	margin: 2em 0;
}

.fb-steps li {
	counter-increment: fb-step;
	position: relative;
	padding-left: 3.4em;
	margin-bottom: 1.5em;
	min-height: 2.4em;
	line-height: 1.55;
}

.fb-steps li::marker {
	content: none;
}

.fb-steps li::before {
	content: counter(fb-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.4em;
	height: 2.4em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: #000;
	border-radius: 50%;
	font-weight: 700;
	font-size: 1rem;
	box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
}

/* Two-column comparison */
.fb-compare {
	margin: 2em 0;
}

.fb-compare-col {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 1.4em 1.5em;
}

.fb-compare-col > * {
	margin-bottom: 0.8em;
}

.fb-compare-col > *:last-child {
	margin-bottom: 0;
}

.fb-compare-col h3 {
	color: var(--accent) !important;
	margin-top: 0;
	font-size: 1.15rem;
}

/* CTA card (retained for backward compatibility with older content) */
.fb-cta {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(var(--accent-rgb), 0.25);
	border-radius: 16px;
	padding: 1.8em 1.5em;
	text-align: center;
	margin: 2.5em 0;
}

.fb-cta > * {
	margin-bottom: 0.8em;
}

.fb-cta > *:last-child {
	margin-bottom: 0;
}

.fb-cta h3 {
	margin-top: 0;
	color: #fff;
}

/* Lead image marker */
.fb-lead-image img {
	border-radius: 14px;
}