/*
 * Angstfrei-Coaching Blog-Filter
 *
 * Aufgebaut nach dem Hausstil aus dem Kadence-Customizer. Alle Farben greifen
 * zuerst auf die globalen Kadence-Variablen zu und fallen nur dann auf feste
 * Werte zurueck, wenn diese fehlen. Aendert Daniel die Palette im Customizer,
 * zieht dieses Plugin automatisch mit.
 *
 * Mobil zuerst: Die Grundregeln gelten fuer das Handy, groessere Geraete
 * bekommen ihre Abweichungen weiter unten. Grund: In der Search Console steht
 * die Website mobil auf Position 4,08 und am Computer auf 10,21 - das Handy
 * ist das Geraet, auf dem gefunden wird.
 */

.abf {
	--abf-petrol: var(--global-palette1, #2c5f5a);
	--abf-petrol-dunkel: var(--global-palette2, #1e433f);
	--abf-ueberschrift: var(--global-palette3, #1a1a1a);
	--abf-text: var(--global-palette4, #333333);
	--abf-gedaempft: var(--global-palette5, #6b6b6b);
	--abf-linie: var(--global-palette6, #b0aea8);
	--abf-flaeche: var(--global-palette7, #f4f2ee);
	--abf-flaeche-hell: var(--global-palette8, #faf9f6);
	--abf-weiss: var(--global-palette9, #ffffff);

	--abf-radius: 6px;
	--abf-abstand: 1.25rem;

	box-sizing: border-box;
}

.abf *,
.abf *::before,
.abf *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------
   Raster
   Handy: eine Spalte. Zwei Spalten waeren bei 375 px Breite pro
   Karte rund 160 px - zu wenig fuer Titel dieser Laenge.
   --------------------------------------------------------------- */

.abf-raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--abf-abstand);
	margin: 0;
	padding: 0;
}

/* Tablet ab 768 px: zwei Spalten. */
@media (min-width: 768px) {
	.abf-raster {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}

/* Desktop ab 1024 px: so viele Spalten, wie der Shortcode verlangt. */
@media (min-width: 1024px) {
	.abf-raster[data-spalten="3"] {
		grid-template-columns: repeat(3, 1fr);
	}

	.abf-raster[data-spalten="4"] {
		grid-template-columns: repeat(4, 1fr);
	}

	.abf-raster {
		gap: 1.75rem;
	}
}

/* ---------------------------------------------------------------
   Karte
   --------------------------------------------------------------- */

.abf-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--abf-weiss);
	border: 1px solid var(--abf-linie);
	border-radius: var(--abf-radius);
	overflow: hidden;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.abf-karte {
		transition: none;
	}
}

.abf-karte:hover,
.abf-karte:focus-within {
	transform: translateY(-2px);
	border-color: var(--abf-petrol);
	box-shadow: 0 6px 20px rgba(28, 67, 63, 0.12);
}

/* --- Bild -------------------------------------------------------
   Der Rahmen ist exakt quadratisch, weil alle Titelbilder 1:1 sind
   (768x768 bzw. 960x960). Dadurch schneidet "cover" nichts ab.
   Der vorherige Filter benutzte einen 328x300-Rahmen und verlor
   rund 8 Prozent der Bildhoehe - genau dort, wo Ueberschrift und
   Logo stehen.

   Sollte spaeter ein nicht-quadratisches Titelbild dazukommen,
   bleibt es hier unbeschnitten sichtbar, weil object-fit erst
   greift, wenn die Verhaeltnisse auseinanderlaufen - dann lieber
   die Variable unten anpassen als das Bild opfern.
   ---------------------------------------------------------------- */

.abf-karte__bildlink {
	display: block;
	line-height: 0;
	background: var(--abf-flaeche);
}

.abf-karte__bild {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

.abf-karte--ohne-bild .abf-karte__inhalt {
	padding-top: 1.5rem;
}

/* --- Inhalt ----------------------------------------------------- */

.abf-karte__inhalt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.1rem 1.1rem 1.25rem;
}

.abf-karte__kategorien {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.abf-kategorie {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: var(--abf-flaeche);
	color: var(--abf-petrol-dunkel);
	font-family: var(--global-body-font-family, "Inter", sans-serif);
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-decoration: none;
}

a.abf-kategorie:hover,
a.abf-kategorie:focus {
	background: var(--abf-petrol);
	color: var(--abf-weiss);
}

/* Schriftgroessen kommen aus den globalen Kadence-Einstellungen.
   Das Plugin setzt hier bewusst KEINE eigenen Werte mehr: Wird im
   Customizer etwas geaendert, zieht die Blogseite mit, und es gibt
   keine zweite Stelle, an der Groessen gepflegt werden muessten.

   Relative Angaben (em) sind erlaubt - sie leiten sich vom geerbten
   Wert ab und brechen die Kopplung nicht. Feste rem-Werte waeren eine
   zweite Wahrheit. */
.abf-karte__titel {
	margin: 0;
	font-family: var(--global-heading-font-family, "Lora", serif);
	font-weight: 700;
	line-height: 1.3;
	color: var(--abf-ueberschrift);
	font-size: 1.15em;
}

.abf-karte__titel a {
	color: inherit;
	text-decoration: none;
}

.abf-karte__auszug {
	margin: 0;
	font-family: var(--global-body-font-family, "Inter", sans-serif);
	font-size: 1em;
	line-height: 1.55;
	color: var(--abf-text);
}

.abf-karte__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: 1px solid var(--abf-flaeche);
}

.abf-karte__datum {
	font-family: var(--global-body-font-family, "Inter", sans-serif);
	font-size: 0.85em;
	color: var(--abf-gedaempft);
}

.abf-karte__mehr {
	font-family: var(--global-body-font-family, "Inter", sans-serif);
	font-size: 0.9em;
	font-weight: 600;
	color: var(--abf-petrol);
}

.abf-karte__mehr::after {
	content: " →";
}

/* Klickflaeche ueber der ganzen Karte. Liegt unter den Kategorie-Links,
   damit die weiterhin einzeln anklickbar bleiben. */
.abf-karte__flaeche {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--abf-radius);
}

.abf-karte__flaeche:focus-visible {
	outline: 3px solid var(--abf-petrol);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Hervorgehobener Beitrag
   Handy: untereinander. Ab Tablet: Bild links, Text rechts.
   --------------------------------------------------------------- */

.abf-hervorhebung {
	margin: 0 0 2rem;
}

.abf-hervorhebung__hinweis {
	margin: 0 0 0.75rem;
	font-family: var(--global-body-font-family, "Inter", sans-serif);
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--abf-petrol);
}

.abf-karte--gross {
	background: var(--abf-flaeche-hell);
}

.abf-karte--gross .abf-karte__titel {
	font-size: 1.35em;
}

/* Erst ab 1024 px nebeneinander, nicht schon ab 768 px.
   Auf dem Tablet ergab die zweispaltige Fassung einen 289x622-Rahmen -
   das quadratische Titelbild wurde darin links und rechts beschnitten
   (Verhaeltnis 0,47), also genau dort, wo die Beschriftung steht.
   Bis 1024 px bleibt die Karte deshalb gestapelt und das Bild 1:1. */
@media (min-width: 1024px) {
	.abf-karte--gross {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: stretch;
	}

	/* Der Bildlink ist der Positionierungsrahmen und gibt die Hoehe vor.
	   Das Bild darin fuellt ihn absolut - so kann es den Rahmen nicht
	   auseinanderdruecken.

	   Vorgeschichte: In 1.0.0 stand hier "height: 100%" direkt auf dem
	   <img> bei "aspect-ratio: auto". In einem Grid ohne feste Zeilenhoehe
	   nahm das Bild dadurch seine natuerliche Hoehe an - die Karte wurde
	   auf Tablet und Desktop 1502 px hoch. Am Handy fiel es nicht auf,
	   weil dort die einspaltige 1:1-Regel greift. */
	.abf-karte--gross .abf-karte__bildlink {
		position: relative;
		height: 100%;
		min-height: 280px;
		overflow: hidden;
	}

	.abf-karte--gross .abf-karte__bild {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}

	.abf-karte--gross .abf-karte__inhalt {
		padding: 1.75rem;
		gap: 0.8rem;
	}
}

@media (min-width: 1024px) {
	.abf-karte--gross .abf-karte__titel {
		font-size: 1.5em;
	}

	.abf-karte--gross .abf-karte__auszug {
		font-size: 1.05em;
	}
}

/* ---------------------------------------------------------------
   Filterleiste
   Handy: waagerecht scrollbar statt Umbruch in vier Zeilen.
   --------------------------------------------------------------- */

.abf-filterblock {
	margin: 0;
}

.abf-filter {
	margin: 0 0 1.5rem;
}

.abf-filter__liste {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0 0 0.35rem;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.abf-filter__liste::-webkit-scrollbar {
	height: 4px;
}

.abf-filter__liste::-webkit-scrollbar-thumb {
	background: var(--abf-linie);
	border-radius: 999px;
}

.abf-filter__liste li {
	margin: 0;
	flex: 0 0 auto;
}

.abf-filter__knopf {
	display: inline-flex;
	align-items: center;
	/* Mindestens 44 px hoch: Das ist die uebliche Untergrenze fuer ein
	   Beruehrungsziel. In 1.0.0 waren es 38 px - am Handy zu knapp,
	   und das Handy ist das Geraet, auf dem diese Seite gefunden wird. */
	min-height: 44px;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--abf-linie);
	border-radius: 999px;
	background: var(--abf-weiss);
	color: var(--abf-text);
	font-family: var(--global-body-font-family, "Inter", sans-serif);
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.abf-filter__knopf {
		transition: none;
	}
}

.abf-filter__knopf:hover,
.abf-filter__knopf:focus-visible {
	border-color: var(--abf-petrol);
	color: var(--abf-petrol-dunkel);
}

.abf-filter__knopf:focus-visible {
	outline: 3px solid var(--abf-petrol);
	outline-offset: 2px;
}

.abf-filter__knopf.is-aktiv {
	background: var(--abf-petrol);
	border-color: var(--abf-petrol);
	color: var(--abf-weiss);
}

/* Ab Tablet ist Platz genug fuer normalen Umbruch. */
@media (min-width: 768px) {
	.abf-filter__liste {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

/* --- Ladezustand ------------------------------------------------ */

.abf-filterblock.is-laedt .abf-filterblock__raster {
	opacity: 0.45;
	transition: opacity 120ms ease;
}

.abf-leer {
	grid-column: 1 / -1;
	margin: 0;
	padding: 2rem 1rem;
	background: var(--abf-flaeche);
	border-radius: var(--abf-radius);
	text-align: center;
	font-family: var(--global-body-font-family, "Inter", sans-serif);
	color: var(--abf-gedaempft);
}

/* Nur fuer Screenreader - falls das Theme die Klasse nicht schon bereitstellt. */
.abf .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}