/* EHNES Beiträge – Würschum Inside Übersicht. CI: Roboto, eckig, Blau/Ink. */
.eb {
	--eb-accent: #0B55A0;
	--eb-ink: #1C2530;
	--eb-muted: #5B6770;
	--eb-line: #E5E9ED;
	--eb-soft: #EAF1F8;
	font-family: "Roboto", system-ui, sans-serif;
	/* Breite/Abstände steuert der Elementor-Container (Content-Breite + Padding) —
	   keine eigene max-width/Padding, sonst doppelte Begrenzung ("Innenabstand"). */
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}
.eb *, .eb *::before, .eb *::after { box-sizing: border-box; }

/* ---------- Kopf ---------- */
.eb__head { max-width: 720px; margin-bottom: 28px; }
.eb__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0 0 10px; padding: 0;
	font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--eb-accent);
}
.eb__eyebrow svg { width: 16px; height: 16px; flex: none; }
.eb__title {
	margin: 0 0 12px; padding: 0;
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.15;
	font-weight: 700; color: var(--eb-ink);
}
.eb__lead {
	margin: 0; padding: 0;
	font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--eb-muted);
}

/* ---------- Filter ---------- */
.eb-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.eb-pill {
	appearance: none; cursor: pointer;
	border: 1px solid var(--eb-line); border-radius: 0; background: #fff;
	padding: 9px 18px;
	font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--eb-ink);
	transition: background .18s, color .18s, border-color .18s;
}
.eb-pill:hover { border-color: var(--eb-accent); color: var(--eb-accent); }
.eb-pill.is-active { background: var(--eb-accent); border-color: var(--eb-accent); color: #fff; }

/* ---------- Grid: 1 groß links + kleine rechts ---------- */
.eb-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	grid-auto-rows: 1fr;
	gap: 24px;
}
.eb-grid.has-featured .eb-card.is-featured { grid-row: span 2; }

/* ---------- Kachel ---------- */
.eb-card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--eb-line); border-radius: 0;
	overflow: hidden; min-width: 0;
	transition: box-shadow .2s, transform .2s, border-color .2s;
}
.eb-card:hover { box-shadow: 0 14px 30px rgba(11, 85, 160, .14); border-color: #cfdcea; }
.eb-card__media {
	display: block; width: 100%; aspect-ratio: 16 / 10;
	background: var(--eb-soft) center / cover no-repeat;
}
/* Featured: Bild füllt die Mehrhöhe (bildbetonte große Kachel) */
.eb-card.is-featured { }
.eb-grid.has-featured .eb-card.is-featured .eb-card__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; }
.eb-card.is-featured .eb-card__body { flex: 0 0 auto; }
.eb-card__body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1 1 auto; }
.eb-card__cat {
	align-self: flex-start;
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
	color: var(--eb-accent);
}
.eb-card__title { margin: 0; font-weight: 700; line-height: 1.25; color: var(--eb-ink); font-size: 1.18rem; }
.eb-card.is-featured .eb-card__title { font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem); }
.eb-card__title a { color: inherit; text-decoration: none; }
.eb-card__title a:hover { color: var(--eb-accent); }
.eb-card__text { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--eb-muted); }
.eb-card.is-featured .eb-card__text { font-size: 18px; }
.eb-card__more {
	margin-top: auto; align-self: flex-start;
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 0.95rem; font-weight: 600; color: var(--eb-accent); text-decoration: none;
}
.eb-card__more span { transition: transform .18s; }
.eb-card__more:hover span { transform: translateX(4px); }

/* ---------- Filter: ausgeblendet ---------- */
.eb-card.is-hidden { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
	.eb-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.eb-grid.has-featured .eb-card.is-featured { grid-row: auto; }
	.eb-card.is-featured .eb-card__media { aspect-ratio: 16 / 10; }
}