/**
 * KI CREW – Layouts für Kontaktseite, CREW-Seite, Referenzübersicht,
 * Karriere-Seite, Angebots-Archive, Standardseiten, Beitragslisten,
 * Einzelbeitrag, Suche, 404 und Paginierung.
 *
 * Reihenfolge der Einbindung: fonts -> base -> form -> pages.
 * Tokens und alle Basiskomponenten kommen aus base.css.
 */

/* ==========================================================================
   Seiten-Hero
   ========================================================================== */

.kc-page-hero {
	padding: var(--kc-space-6) 0 var(--kc-space-7);
}

.kc-page-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--kc-space-5);
	align-items: center;
}

.kc-page-hero--text .kc-page-hero__inner {
	grid-template-columns: minmax(0, 1fr);
}

.kc-page-hero__body {
	max-width: 46rem;
}

.kc-page-hero__title {
	margin: 0;
}

.kc-page-hero__lead {
	max-width: 38rem;
	margin: var(--kc-space-3) 0 0;
}

.kc-page-hero__lead + .kc-page-hero__lead {
	margin-top: var(--kc-space-2);
}

/* min-width verhindert, dass ein breites Bild die Grid-Spalte aufzieht. */
.kc-page-hero__media {
	min-width: 0;
}

/*
 * Die dunkle Variante (CREW-Seite) braucht keine eigenen Regeln: Farben und
 * Kontextvariablen kommen über die zusätzlich gesetzte Klasse .kc-section--dark
 * aus base.css.
 */

/* ==========================================================================
   Kontaktseite
   ========================================================================== */

.kc-page-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: var(--kc-space-6);
	align-items: start;
}

.kc-page-contact-rows {
	margin: var(--kc-space-4) 0 0;
	padding: 0;
}

.kc-page-contact-rows__item {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: var(--kc-space-2);
	align-items: start;
	padding: var(--kc-space-2) 0;
}

.kc-page-contact-rows__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--kc-fg);
}

.kc-page-contact-rows__body {
	color: var(--kc-fg-muted);
	line-height: 28px;
}

.kc-page-contact-rows__name {
	display: block;
	color: var(--kc-fg);
	font-weight: 600;
}

.kc-page-map {
	margin: var(--kc-space-3) 0 var(--kc-space-4);
}

.kc-page-routes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kc-space-3);
}

.kc-page-route__icon {
	display: inline-flex;
	color: var(--kc-fg);
}

.kc-page-route__title {
	margin: var(--kc-space-2) 0 6px;
	font-family: var(--kc-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
}

.kc-page-route__text {
	margin: 0;
	color: var(--kc-fg-muted);
}

/* ==========================================================================
   CREW-Seite
   ========================================================================== */

.kc-crew-about__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kc-space-5);
	margin-top: var(--kc-space-4);
}

/* Die Absatzabstände kommen aus .kc-prose (base.css), nicht von .kc-text. */

.kc-crew-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kc-space-4);
	margin-top: var(--kc-space-6);
}

.kc-crew-stat__icon {
	display: block;
	margin-bottom: var(--kc-space-2);
	color: var(--kc-fg);
}

/* AI First + Zitat */
.kc-crew-culture__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--kc-space-6);
	align-items: start;
}

.kc-crew-culture__box {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--kc-space-3);
	align-items: start;
}

.kc-crew-culture__text > :first-child {
	margin-top: 0;
}

.kc-crew-culture__quote {
	padding-left: var(--kc-space-5);
	border-left: 1px solid var(--kc-fg-line);
}

/* Zeitleiste */
.kc-crew-timeline {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--kc-space-3);
	margin: var(--kc-space-5) 0 0;
	padding: 0;
}

.kc-crew-timeline__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--kc-black);
	color: var(--kc-white);
}

.kc-crew-timeline__rail {
	position: relative;
	display: block;
	height: 12px;
	margin: var(--kc-space-3) 0;
}

.kc-crew-timeline__rail::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--kc-fg-line);
}

.kc-crew-timeline__item:first-child .kc-crew-timeline__rail::before {
	left: 6px;
}

.kc-crew-timeline__item:last-child .kc-crew-timeline__rail::before {
	right: 6px;
}

.kc-crew-timeline__dot {
	position: absolute;
	top: 50%;
	left: 0;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--kc-black);
}

.kc-crew-timeline__year {
	display: block;
	font-family: var(--kc-font-head);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
}

.kc-crew-timeline__title {
	margin: 4px 0 var(--kc-space-1);
	font-family: var(--kc-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
}

.kc-crew-timeline__text {
	margin: 0;
	color: var(--kc-fg-muted);
}

/* Statement des Geschäftsführers */
.kc-crew-statement__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	gap: var(--kc-space-5);
	align-items: start;
}

.kc-crew-statement__role {
	margin: 0 0 var(--kc-space-3);
}

.kc-crew-statement__body > .kc-text:first-of-type {
	margin-top: 0;
}

/* Hinweis „KI CREW ist eine Marke der interface medien GmbH." (SPEC 10.2) */
.kc-crew-statement__note {
	margin: var(--kc-space-3) 0 0;
	padding-top: var(--kc-space-2);
	border-top: 1px solid var(--kc-fg-line);
	color: var(--kc-fg-muted);
}

/* Experten-Raster */
.kc-crew-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--kc-space-3);
	margin-top: var(--kc-space-4);
	align-items: start;
}

/* ==========================================================================
   Referenzen
   ========================================================================== */

/*
 * Kategorie-Filter-Reiter sind entfallen (SPEC 10.3). Die Karten sind nicht
 * verlinkt und tragen die id aus ihrem Slug; den Abstand zum gepinnten Header
 * hält `scroll-padding-top` am <html> frei (base.css).
 */
/*
 * Karten einer Zeile sind gleich hoch. Die Texte der Cases sind im Seed auf
 * vergleichbare Länge gehalten, der Rest gleicht der Ergebnisblock aus, der
 * unten an der Kartenkante sitzt.
 */
.kc-ref-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kc-space-3);
}

/*
 * Karten-Grundgerüst und Innenabstände kommen aus .kc-card / .kc-card__body.
 * Die Bildfläche sitzt bündig an der Kartenkante, die Rundung übernimmt dort
 * die Karte selbst.
 */
.kc-ref-card__media .kc-media,
.kc-page-offer__media .kc-media {
	border-radius: 0;
}

.kc-ref-card__title {
	margin: 0;
}

.kc-ref-card__client {
	margin: 0;
	color: var(--kc-fg-muted);
	font-size: 14px;
	line-height: 22px;
}

.kc-ref-card__client-label {
	color: var(--kc-fg);
	font-weight: 600;
}

.kc-ref-card__block-title {
	margin: 0 0 4px;
	font-family: var(--kc-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
}

.kc-ref-card__block-text {
	margin: 0 0 6px;
	color: var(--kc-fg-muted);
	font-size: 14px;
	line-height: 22px;
}

.kc-ref-card__block-text:last-child {
	margin-bottom: 0;
}

/* Bleibt bei ungleich langen Texten am unteren Kartenrand stehen. */
.kc-ref-card__result {
	margin-top: auto;
	padding-top: var(--kc-space-2);
}

.kc-ref-card__result-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kc-space-2);
	margin: var(--kc-space-1) 0 var(--kc-space-2);
}

.kc-ref-card__result-icon {
	display: inline-flex;
	color: var(--kc-fg);
}

/*
 * Die Kennzahl ist nicht immer eine Zahl („KI-Roadmap", „1 Tag → 1 Std."),
 * deshalb darf sie umbrechen statt aus der Karte zu laufen.
 */
.kc-ref-card__result-value {
	min-width: 0;
	font-family: var(--kc-font-head);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	overflow-wrap: break-word;
}

.kc-ref-card__result-label {
	margin: 0;
	font-size: 14px;
	line-height: 22px;
}

/*
 * Ohne Kennzahl steht das Label neben dem Icon – so bleibt an der Stelle der
 * großen Zahl keine Lücke und es wird keine „0" erfunden.
 */
.kc-ref-card__result-label--inline {
	font-weight: 600;
}

.kc-ref-card__result-note {
	margin: 2px 0 0;
	color: var(--kc-fg-muted);
}

/* Abschluss-Band */
.kc-ref-outro__inner {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	gap: var(--kc-space-4);
	align-items: center;
	padding: var(--kc-space-4);
	border-radius: var(--kc-radius-card);
	background: var(--kc-card);
}

.kc-ref-outro__title {
	margin: 0;
	font-family: var(--kc-font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 26px;
}

.kc-ref-outro__note {
	margin: 4px 0 0;
	color: var(--kc-fg-muted);
	font-size: 15px;
	line-height: 24px;
}

/* ==========================================================================
   Übersichtsseiten (Schulungen, Workshops, Produkte, Referenzen)

   Ein Gerüst für alle vier: template-parts/page/uebersicht.php. Die Kopfsektion
   ist .kc-hero aus base.css, die Referenzen bringen mit .kc-ref-grid ein eigenes
   Raster mit; die Karten stehen weiter oben bei ihrem Seitentyp.
   ========================================================================== */

.kc-page-wfragen__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--kc-space-4);
}

.kc-page-wfrage__icon {
	display: block;
	margin-bottom: var(--kc-space-2);
	color: var(--kc-accent);
}

.kc-page-wfrage__question {
	margin: 0 0 var(--kc-space-1);
}

.kc-page-wfrage__answer {
	margin: 0;
	color: var(--kc-fg-muted);
}

.kc-page-offers__title {
	margin-bottom: var(--kc-space-2);
}

.kc-page-offers__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kc-space-3);
	align-items: stretch;
	margin-top: var(--kc-space-4);
}

/* Karten-Grundgerüst und Innenabstände kommen aus .kc-card / .kc-card__body. */
.kc-page-offer__icon {
	padding: var(--kc-space-4) var(--kc-space-4) 0;
}

.kc-page-offer__title {
	margin: 0;
}

.kc-page-offer__link {
	color: inherit;
	text-decoration: none;
}

.kc-page-offer__link:hover,
.kc-page-offer__link:focus-visible {
	text-decoration: underline;
}

.kc-page-offer__teaser {
	margin: 0;
	color: var(--kc-fg-muted);
}

.kc-page-offer__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-space-1) var(--kc-space-3);
	margin: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--kc-fg-muted);
}

.kc-page-offer__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.kc-page-offer__meta-icon {
	display: inline-flex;
}

/*
 * Terminübersicht. Spalten, Zeilenaufbau, Abstände, Trennlinien und Umbrüche
 * liefert .kc-termine / .kc-termin-list aus base.css – dieselbe Tabelle wie im
 * Schulungs-Block der Startseite. Hier bleibt nur ihr Abstand zur Überschrift.
 */
.kc-page-termine {
	margin: var(--kc-space-4) 0 0;
}

/* ==========================================================================
   Karriere-Seite
   ========================================================================== */

.kc-page-benefits__list {
	margin-top: var(--kc-space-4);
	max-width: 68rem;
}

.kc-job-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kc-space-3);
	align-items: stretch;
	margin-top: var(--kc-space-4);
}

.kc-job-card__title {
	margin: 0;
}

/*
 * Der Titel ist der zweite Weg in die Ausschreibung – er trägt deshalb keine
 * eigene Farbe, sondern nur die Unterstreichung beim Überfahren.
 */
.kc-job-card__link {
	color: inherit;
	text-decoration: none;
}

.kc-job-card__link:hover,
.kc-job-card__link:focus-visible {
	text-decoration: underline;
}

.kc-job-card__teaser {
	margin: 0;
	color: var(--kc-fg-muted);
}

.kc-page-jobs__note {
	margin-top: var(--kc-space-4);
	max-width: 52rem;
	color: var(--kc-fg-muted);
}

.kc-job-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-space-1) var(--kc-space-3);
	margin: 0;
	color: var(--kc-fg-muted);
	font-size: 14px;
	line-height: 22px;
}

.kc-job-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.kc-job-card__meta-icon {
	display: inline-flex;
}

.kc-job-card__tasks-title {
	margin: var(--kc-space-1) 0 0;
	font-family: var(--kc-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
}

/* In der Karte steht die Liste enger und einen Tick kleiner als im Fließtext. */
.kc-job-card__tasks {
	gap: var(--kc-space-2);
}

.kc-job-card__tasks .kc-checklist__item {
	font-size: 15px;
}

/* ==========================================================================
   Abschluss-Teaser (template-parts/page/outro.php)
   ========================================================================== */

.kc-page-outro__inner {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--kc-space-3);
	align-items: start;
	max-width: 52rem;
}

.kc-page-outro__text {
	margin: var(--kc-space-1) 0 0;
	color: var(--kc-fg-muted);
}

.kc-page-outro__action {
	margin: var(--kc-space-3) 0 0;
}

/* ==========================================================================
   Stellenausschreibung
   ========================================================================== */

.kc-stelle-intro__text {
	max-width: 52rem;
}

.kc-stelle-intro__text .kc-text + .kc-text {
	margin-top: var(--kc-space-2);
}

/* Aufgaben und Anforderungen stehen nebeneinander, jede Spalte mit Balken. */
.kc-stelle-profil__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kc-space-5);
	align-items: start;
}

.kc-stelle-profil__col > .kc-h3 {
	margin: 0;
}

.kc-stelle-angebot__list {
	margin-top: var(--kc-space-4);
	max-width: 68rem;
}

/* Bewerbungsblock: Quadrat links, Text und die beiden Wege rechts. */
.kc-stelle-bewerbung__inner {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: var(--kc-space-3);
	align-items: start;
	max-width: 52rem;
}

.kc-stelle-bewerbung__body > .kc-h2 {
	margin: 0;
}

.kc-stelle-bewerbung__text {
	margin: var(--kc-space-2) 0 0;
	color: var(--kc-fg-muted);
}

.kc-stelle-bewerbung__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-space-2);
	margin-top: var(--kc-space-3);
}

.kc-stelle-bewerbung__note {
	margin: var(--kc-space-2) 0 0;
	color: var(--kc-fg-muted);
}

/* ==========================================================================
   Standardseite
   ========================================================================== */

.kc-page-prose {
	max-width: 760px;
}

/* ==========================================================================
   Beitragslisten
   ========================================================================== */

.kc-post-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kc-space-5) var(--kc-space-3);
	align-items: start;
}

.kc-post-card {
	display: flex;
	flex-direction: column;
}

.kc-post-card__media {
	margin-bottom: var(--kc-space-3);
}

.kc-post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.kc-post-card__title {
	margin: var(--kc-space-1) 0;
}

.kc-post-card__link {
	color: inherit;
	text-decoration: none;
}

.kc-post-card__link:hover,
.kc-post-card__link:focus-visible {
	text-decoration: underline;
}

.kc-post-card__meta {
	margin: 0 0 var(--kc-space-2);
	color: var(--kc-fg-muted);
}

.kc-post-card__excerpt {
	margin: 0 0 var(--kc-space-3);
	color: var(--kc-fg-muted);
}

.kc-post-card__footer {
	margin-top: auto;
}

.kc-page-empty {
	max-width: 40rem;
}

/* ==========================================================================
   Einzelbeitrag
   ========================================================================== */

.kc-post__head {
	max-width: 760px;
}

.kc-post__title {
	margin: var(--kc-space-1) 0 var(--kc-space-3);
}

.kc-post__meta {
	margin: 0;
	color: var(--kc-fg-muted);
}

.kc-post__meta-sep {
	margin: 0 6px;
}

.kc-post__media {
	margin-bottom: var(--kc-space-2);
}

.kc-post__footer {
	max-width: 760px;
	margin-top: var(--kc-space-5);
}

/* ==========================================================================
   Suche
   ========================================================================== */

.kc-page-search__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-space-2);
	max-width: 40rem;
}

.kc-page-search__input {
	flex: 1 1 15rem;
}

/* ==========================================================================
   404
   ========================================================================== */

.kc-page-404__inner {
	max-width: 44rem;
}

.kc-page-404__square {
	display: block;
	margin-bottom: var(--kc-space-3);
}

.kc-page-404__title {
	margin: 0 0 var(--kc-space-3);
}

.kc-page-404__lead {
	margin: 0;
}

.kc-page-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-space-2);
	margin-top: var(--kc-space-4);
}

/* ==========================================================================
   Paginierung
   Die inneren Klassen (.nav-links, .page-numbers) stammen aus dem
   WordPress-Kern und lassen sich nur so ansprechen.
   ========================================================================== */

.kc-pagination {
	margin-top: var(--kc-space-5);
}

.kc-pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kc-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-space-1);
	align-items: center;
}

.kc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--kc-space-2);
	border: 1px solid var(--kc-fg-line);
	border-radius: var(--kc-radius-pill);
	color: var(--kc-fg);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.kc-pagination .page-numbers:hover,
.kc-pagination .page-numbers:focus-visible {
	border-color: var(--kc-fg);
}

.kc-pagination .page-numbers.current {
	border-color: var(--kc-fg);
	background: var(--kc-fg);
	color: var(--kc-surface);
}

.kc-pagination .page-numbers.dots {
	min-width: 0;
	border-color: transparent;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 1200px) {
	.kc-crew-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.kc-page-hero {
		padding-bottom: var(--kc-space-6);
	}

	.kc-page-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.kc-page-hero__body {
		max-width: none;
	}

	.kc-page-contact__grid,
	.kc-crew-statement__grid,
	.kc-crew-culture__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--kc-space-5);
	}

	.kc-crew-culture__quote {
		padding-left: 0;
		border-left: 0;
	}

	.kc-crew-grid,
	.kc-page-wfragen__grid,
	.kc-ref-grid,
	.kc-page-offers__grid,
	.kc-post-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kc-crew-statement__media {
		max-width: 22rem;
	}
}

@media (max-width: 760px) {
	/* Referenzkarten: dreispaltig, ab 980px zweispaltig, ab 760px einspaltig. */
	.kc-crew-about__grid,
	.kc-page-routes,
	.kc-job-grid,
	.kc-stelle-profil__grid,
	.kc-ref-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--kc-space-4);
	}

	.kc-crew-stats {
		gap: var(--kc-space-3);
	}

	.kc-ref-outro__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--kc-space-3);
	}

	/* Zeitleiste wird vertikal */
	.kc-crew-timeline {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.kc-crew-timeline::before {
		content: "";
		position: absolute;
		top: 8px;
		bottom: var(--kc-space-4);
		left: 23px;
		width: 1px;
		background: var(--kc-fg-line);
	}

	.kc-crew-timeline__item {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		gap: var(--kc-space-3);
		align-items: start;
		padding-bottom: var(--kc-space-4);
	}

	.kc-crew-timeline__icon {
		position: relative;
		z-index: 1;
	}

	.kc-crew-timeline__rail {
		display: none;
	}
}

@media (max-width: 520px) {
	.kc-crew-grid,
	.kc-page-wfragen__grid,
	.kc-page-offers__grid,
	.kc-post-list,
	.kc-crew-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.kc-crew-culture__box {
		grid-template-columns: minmax(0, 1fr);
	}

}

@media (prefers-reduced-motion: reduce) {
	.kc-post-card__link,
	.kc-page-offer__link,
	.kc-pagination .page-numbers {
		transition: none;
	}
}