/* Sezi Blog-Hub – Blogübersicht im Ramp-Aufbau. Werte nur aus Divi-Tokens (--gvid-sz-*, --gcid-*). */

.sz-hub {
	--hub-ink: var(--gcid-heading-color, #161514);
	--hub-muted: var(--gcid-74b82a17-ed15-4962-9e88-6989b1a0c4ae, #67635e);
	--hub-paper: var(--gcid-da7a0f7e-3483-47bb-b76f-9e998f31d031, #faf9f7);
	--hub-surface: var(--gcid-8a0324fc-0338-4e3b-8227-fcf1a9c39fff, #f1efe9);
	--hub-line: var(--gcid-091844db-cde0-4ce6-a67a-d831d1e48b74, #e8e5df);
	--hub-line-strong: var(--gcid-9ad9d72a-5702-42fe-a422-7a74401ed02a, #d8d4cc);
	--hub-accent: var(--gcid-primary-color, #ef476f);
	--hub-accent-dark: var(--gcid-secondary-color, #b91f4d);
	--hub-dark-line: var(--gcid-6063b323-c8e4-435d-9c61-8652e0636b83, #35322e);
	--hub-on-dark: var(--gcid-28a3852e-c12b-4c02-b926-6efecfde18ab, #bdb9b1);
	--hub-mono: var(--gvid-sz-font-mono, 'IBM Plex Mono'), ui-monospace, monospace;
	--hub-radius-l: var(--gvid-sz-radius-l, 20px);
	--hub-radius-m: var(--gvid-sz-radius-m, 1rem);
	display: flex;
	flex-direction: column;
	gap: var(--gvid-sz-space-2xl, 64px);
	color: var(--hub-ink);
}
.sz-hub *, .sz-hub *::before, .sz-hub *::after { box-sizing: border-box; }
.sz-hub p { padding: 0; margin: 0; }
.sz-hub h1, .sz-hub h2, .sz-hub h3 { padding: 0; margin: 0; color: var(--hub-ink); }
.sz-hub a { color: inherit; text-decoration: none; }
.sz-hub img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sz-hub .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bausteine */
.sz-hub-label {
	font-family: var(--hub-mono);
	font-size: var(--gvid-sz-fs-label, .75rem);
	letter-spacing: var(--gvid-sz-ls-label, .08em);
	text-transform: uppercase;
	line-height: var(--gvid-sz-lh-label, 1.5);
	color: var(--hub-accent-dark);
}
.sz-hub-meta {
	font-family: var(--hub-mono);
	font-size: var(--gvid-sz-fs-label, .75rem);
	line-height: var(--gvid-sz-lh-label, 1.5);
	color: var(--hub-muted);
}
.sz-hub-link {
	display: inline-flex;
	align-items: center;
	gap: var(--gvid-sz-space-3xs, 6px);
	font-size: var(--gvid-sz-fs-small, .875rem);
	font-weight: 600;
	white-space: nowrap;
	transition: color .2s ease;
}
.sz-hub-link::after { content: "\2192"; color: var(--hub-accent); font-weight: 400; transition: transform .2s ease; }
.sz-hub-link:hover { color: var(--hub-accent-dark); }
.sz-hub-link:hover::after { transform: translateX(3px); }
.sz-hub-img-placeholder {
	display: block; width: 100%; height: 100%;
	background:
		radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--hub-accent) 22%, transparent) 0 18%, transparent 19%),
		linear-gradient(135deg, var(--hub-surface), var(--hub-line-strong));
}
.sz-hub a:focus-visible, .sz-hub button:focus-visible, .sz-hub-hero-track:focus-visible {
	outline: var(--gvid-sz-line-m, 2px) solid var(--hub-accent);
	outline-offset: 3px;
}

/* Chips */
.sz-hub-bar { position: relative; margin-bottom: calc(-1 * var(--gvid-sz-space-l, 32px)); }
.sz-hub-chips {
	display: flex; flex-wrap: wrap; gap: var(--gvid-sz-space-2xs, 10px);
	list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.sz-hub-chips li { list-style: none; margin: 0; padding: 0 !important; }
.sz-hub-chip {
	display: inline-flex; align-items: center; gap: var(--gvid-sz-space-2xs, 10px);
	padding: var(--gvid-sz-space-2xs, 10px) var(--gvid-sz-space-s, 16px);
	border: var(--gvid-sz-line-s, 1px) solid var(--hub-line-strong);
	border-radius: var(--gvid-sz-radius-pill, 999px);
	font-size: var(--gvid-sz-fs-small, .875rem);
	font-weight: 500;
	line-height: 1.2;
	background: transparent;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.sz-hub-chip-count { font-family: var(--hub-mono); font-size: var(--gvid-sz-fs-label, .75rem); color: var(--hub-muted); transition: color .2s ease; }
.sz-hub-chip:hover { background: var(--hub-surface); border-color: var(--hub-line-strong); }
.sz-hub-chip.is-active { background: var(--hub-ink); border-color: var(--hub-ink); color: var(--hub-paper); }
.sz-hub-chip.is-active .sz-hub-chip-count { color: var(--hub-on-dark); }

/* Hero-Slider */
.sz-hub-hero { display: flex; flex-direction: column; gap: var(--gvid-sz-space-s, 16px); }
.sz-hub-hero-track {
	display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
	gap: var(--gvid-sz-space-s, 16px);
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; overscroll-behavior-x: contain;
	border-radius: var(--hub-radius-l);
}
.sz-hub-hero-track::-webkit-scrollbar { display: none; }
.sz-hub-feature {
	scroll-snap-align: start;
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch;
	gap: var(--gvid-sz-space-m, 24px);
	padding: var(--gvid-sz-space-s, 16px);
	background: var(--hub-surface);
	border: var(--gvid-sz-line-s, 1px) solid var(--hub-line);
	border-radius: var(--hub-radius-l);
}
.sz-hub-feature-text {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	gap: var(--gvid-sz-space-s, 16px);
	padding: var(--gvid-sz-space-card, 32px);
}
.sz-hub-feature-title {
	font-size: var(--gvid-sz-fs-h3-l, 2rem) !important;
	line-height: 1.12 !important;
	letter-spacing: var(--gvid-sz-ls-h3, -0.02em);
	font-weight: 600;
	text-wrap: balance;
}
.sz-hub-feature-title a { background: linear-gradient(var(--hub-accent), var(--hub-accent)) no-repeat 0 100% / 0 var(--gvid-sz-line-m, 2px); transition: background-size .3s ease; }
.sz-hub-feature-title a:hover { background-size: 100% var(--gvid-sz-line-m, 2px); }
.sz-hub-feature-excerpt { font-size: var(--gvid-sz-fs-body-s, 1rem); line-height: var(--gvid-sz-lh-body, 1.6); color: var(--hub-muted); max-width: 46ch; }
.sz-hub-feature .sz-hub-link { margin-top: var(--gvid-sz-space-3xs, 6px); }
.sz-hub-feature-img {
	display: block; overflow: hidden; min-width: 0; min-height: 340px; height: 100%;
	border-radius: calc(var(--hub-radius-l) - var(--gvid-sz-space-3xs, 6px));
	background: var(--hub-line);
}
.sz-hub-feature-img { position: relative; }
.sz-hub-feature-img img, .sz-hub-feature-img .sz-hub-img-placeholder { position: absolute; inset: 0; }
.sz-hub-feature-img img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.sz-hub-feature:hover .sz-hub-feature-img img { transform: scale(1.025); }

.sz-hub-hero-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--gvid-sz-space-m, 24px); }
.sz-hub-dots { display: flex; gap: var(--gvid-sz-space-3xs, 6px); }
.sz-hub-dot {
	width: 40px; height: var(--gvid-sz-line-m, 2px); padding: 0; border: 0; cursor: pointer;
	background: var(--hub-line-strong); border-radius: 2px; position: relative;
	transition: background-color .2s ease, width .3s ease;
}
.sz-hub-dot::before { content: ""; position: absolute; inset: -10px 0; }
.sz-hub-dot.is-active { background: var(--hub-ink); width: 64px; }
.sz-hub-arrows { display: flex; gap: var(--gvid-sz-space-3xs, 6px); }
.sz-hub-arrow {
	display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
	border: var(--gvid-sz-line-s, 1px) solid var(--hub-line-strong); border-radius: var(--gvid-sz-radius-round, 50%);
	background: transparent; color: var(--hub-ink); font-size: 1rem; line-height: 1;
	transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.sz-hub-arrow:hover:not(:disabled) { background: var(--hub-surface); }
.sz-hub-arrow:disabled { opacity: .35; cursor: default; }

/* Promo-Reihe */
.sz-hub-intro-blocks { display: flex; flex-direction: column; gap: var(--gvid-sz-space-xl, 48px); }
.sz-hub-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gvid-sz-space-s, 16px); }
.sz-hub-promo-card {
	display: flex; flex-direction: column; align-items: flex-start; gap: var(--gvid-sz-space-xs, 12px);
	padding: var(--gvid-sz-space-card, 32px);
	border-radius: var(--hub-radius-l);
	background: var(--hub-surface);
	border: var(--gvid-sz-line-s, 1px) solid var(--hub-line);
}
.sz-hub-promo-card p:not(.sz-hub-label) { font-size: var(--gvid-sz-fs-body-s, 1rem); line-height: var(--gvid-sz-lh-body, 1.6); color: var(--hub-muted); max-width: 44ch; }
.sz-hub-promo-title { font-size: var(--gvid-sz-fs-h4, 1.375rem) !important; line-height: var(--gvid-sz-lh-heading, 1.2) !important; letter-spacing: var(--gvid-sz-ls-h3, -0.02em); font-weight: 600; }
.sz-hub-promo-card .sz-hub-btn { margin-top: auto; }
.sz-hub-promo-card.is-dark { background: var(--hub-ink); border-color: var(--hub-ink); }
.sz-hub-promo-card.is-dark .sz-hub-promo-title { color: var(--hub-paper); }
.sz-hub-promo-card.is-dark p:not(.sz-hub-label) { color: var(--hub-on-dark); }
.sz-hub-promo-card.is-dark .sz-hub-label { color: var(--hub-accent); }
.sz-hub-btn {
	display: inline-flex; align-items: center; gap: var(--gvid-sz-space-2xs, 10px);
	min-height: 48px; padding: 0 var(--gvid-sz-space-m, 24px);
	border-radius: var(--gvid-sz-radius-pill, 999px);
	border: var(--gvid-sz-line-s, 1px) solid var(--hub-ink);
	font-size: var(--gvid-sz-fs-small, .875rem); font-weight: 600;
	color: var(--hub-ink); background: transparent;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	margin-top: var(--gvid-sz-space-xs, 12px);
}
.sz-hub-btn::after { content: "\2192"; transition: transform .2s ease; }
.sz-hub-btn:hover { background: var(--hub-ink); color: var(--hub-paper); }
.sz-hub-btn:hover::after { transform: translateX(3px); }
.sz-hub-btn.is-primary { background: var(--hub-accent); border-color: var(--hub-accent); color: #fff; }
.sz-hub-btn.is-primary:hover { background: var(--hub-accent-dark); border-color: var(--hub-accent-dark); color: #fff; }

/* Kategorie-Sektionen */
.sz-hub-section { display: flex; flex-direction: column; gap: var(--gvid-sz-space-m, 24px); scroll-margin-top: calc(var(--gvid-sz-layout-header-h, 88px) + 24px); }
.sz-hub-section-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--gvid-sz-space-m, 24px);
	padding-top: var(--gvid-sz-space-m, 24px);
	border-top: var(--gvid-sz-line-s, 1px) solid var(--hub-line);
}
.sz-hub-section-title { font-size: var(--gvid-sz-fs-h3-l, 2rem) !important; line-height: 1.1 !important; letter-spacing: var(--gvid-sz-ls-h2, -0.03em); font-weight: 600; }

/* Raster + Karten */
.sz-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gvid-sz-space-xl, 48px) var(--gvid-sz-space-m, 24px); }
.sz-hub-card { display: flex; flex-direction: column; gap: var(--gvid-sz-space-s, 16px); }
.sz-hub-card.is-extra { display: none; }
.sz-hub[data-filter] .sz-hub-card.is-extra { display: flex; }
.sz-hub-card-img {
	display: block; overflow: hidden; aspect-ratio: 16 / 10;
	border-radius: var(--hub-radius-m);
	background: var(--hub-surface);
	border: var(--gvid-sz-line-s, 1px) solid var(--hub-line);
}
.sz-hub-card-img img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.sz-hub-card:hover .sz-hub-card-img img { transform: scale(1.04); }
.sz-hub-card-body { display: flex; flex-direction: column; gap: var(--gvid-sz-space-2xs, 10px); }
.sz-hub-card-title { font-size: var(--gvid-sz-fs-h5, 1.25rem) !important; line-height: 1.25 !important; letter-spacing: -0.01em; font-weight: 600; text-wrap: balance; }
.sz-hub-card-title a { background: linear-gradient(var(--hub-accent), var(--hub-accent)) no-repeat 0 100% / 0 var(--gvid-sz-line-m, 2px); transition: background-size .3s ease; }
.sz-hub-card:hover .sz-hub-card-title a { background-size: 100% var(--gvid-sz-line-m, 2px); }
.sz-hub-card-excerpt {
	font-size: var(--gvid-sz-fs-small, .875rem); line-height: 1.55; color: var(--hub-muted);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sz-hub-card .sz-hub-meta { margin-top: 2px; }

/* Filterzustand (Blogseite) */
.sz-hub[data-filter] [data-sz-hub-home] { display: none; }
.sz-hub[data-filter] .sz-hub-section:not(.is-match) { display: none; }
.sz-hub-section.is-match { animation: sz-hub-in .35s ease both; }
@keyframes sz-hub-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Kategorie-Archiv */
.sz-hub-archive-head { display: flex; flex-direction: column; gap: var(--gvid-sz-space-s, 16px); }
.sz-hub-eyebrow { font-family: var(--hub-mono); font-size: var(--gvid-sz-fs-label, .75rem); letter-spacing: var(--gvid-sz-ls-label, .08em); text-transform: uppercase; color: var(--hub-muted); }
.sz-hub-eyebrow a:hover { color: var(--hub-accent-dark); }
.sz-hub-archive-title { font-size: var(--gvid-sz-fs-h1-article, 4rem) !important; line-height: var(--gvid-sz-lh-display, 1.05) !important; letter-spacing: var(--gvid-sz-ls-h1, -0.04em); font-weight: 700; }
.sz-hub-dot-accent { color: var(--hub-accent); }
.sz-hub-archive-desc { max-width: var(--gvid-sz-layout-measure, 680px); font-size: var(--gvid-sz-fs-intro, 1.125rem); line-height: var(--gvid-sz-lh-body, 1.6); color: var(--hub-muted); }
.sz-hub-archive-desc p { margin: 0; }
.sz-hub[data-mode="archive"] .sz-hub-bar { margin-bottom: 0; }
.sz-hub-empty { grid-column: 1 / -1; color: var(--hub-muted); }
.sz-hub-empty a { text-decoration: underline; text-decoration-color: var(--hub-accent); text-underline-offset: 4px; }
.sz-hub-pagination ul { display: flex; gap: var(--gvid-sz-space-3xs, 6px); list-style: none !important; padding: 0 !important; margin: 0; }
.sz-hub-pagination li { padding: 0 !important; list-style: none; }
.sz-hub-pagination .page-numbers {
	display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 var(--gvid-sz-space-2xs, 10px);
	border: var(--gvid-sz-line-s, 1px) solid var(--hub-line-strong); border-radius: var(--gvid-sz-radius-pill, 999px);
	font-family: var(--hub-mono); font-size: var(--gvid-sz-fs-small, .875rem);
}
.sz-hub-pagination .page-numbers.current { background: var(--hub-ink); color: var(--hub-paper); border-color: var(--hub-ink); }

/* Tablet */
@media (max-width: 980px) {
	.sz-hub { gap: var(--gvid-sz-space-xl, 48px); }
	.sz-hub-feature { grid-template-columns: 1fr; gap: 0; }
	.sz-hub-feature-img { order: -1; width: 100%; max-width: 100%; min-height: 0; height: auto; aspect-ratio: 16 / 10; justify-self: stretch; }
	.sz-hub-feature-text { padding: var(--gvid-sz-space-m, 24px) var(--gvid-sz-space-2xs, 10px) var(--gvid-sz-space-2xs, 10px); }
	.sz-hub-feature-title { font-size: var(--gvid-sz-fs-h4, 1.375rem) !important; }
	.sz-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobil */
@media (max-width: 680px) {
	.sz-hub-bar { margin-left: calc(-1 * var(--gvid-sz-space-s, 16px)); margin-right: calc(-1 * var(--gvid-sz-space-s, 16px)); margin-bottom: calc(-1 * var(--gvid-sz-space-m, 24px)); }
	.sz-hub-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gvid-sz-space-s, 16px) 4px !important; }
	.sz-hub-chips::-webkit-scrollbar { display: none; }
	.sz-hub-chip { white-space: nowrap; }
	.sz-hub-promo { grid-template-columns: 1fr; }
	.sz-hub-promo-card { padding: var(--gvid-sz-space-m, 24px); }
	.sz-hub-grid { grid-template-columns: 1fr; gap: var(--gvid-sz-space-l, 32px); }
	.sz-hub-section-head { flex-wrap: wrap; }
	.sz-hub-section-title { font-size: var(--gvid-sz-fs-h4, 1.375rem) !important; }
	.sz-hub-archive-title { font-size: var(--gvid-sz-fs-h2, 2.25rem) !important; }
	.sz-hub-dot { width: 28px; }
	.sz-hub-dot.is-active { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.sz-hub *, .sz-hub *::before, .sz-hub *::after { transition: none !important; animation: none !important; }
	.sz-hub-hero-track { scroll-behavior: auto; }
}