/* Insights-Liste (Blog-Grid) */
.px-articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.px-article-card { padding: 18px; display: flex; flex-direction: column; gap: 16px; min-height: 360px; }
.px-article-image { position: relative; overflow: hidden; height: 150px; border-radius: 16px; }
.px-article-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.px-article-image > span { height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(135deg, rgba(255,255,255,.78) 0 9px, rgba(255,255,255,.42) 9px 18px); font: 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.px-article-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .45; }
.px-article-title { font-size: 22px; font-weight: 650; letter-spacing: -.025em; line-height: 1.15; }
.px-article-teaser { font-size: 14.5px; line-height: 1.5; opacity: .6; flex: 1; }
.px-article-readtime { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .5; }
.px-insight-illustration { position: relative; overflow: hidden; }
.px-insight-illustration img { width: 100%; height: 100%; display: block; object-fit: cover; }
.px-insight-illustration > span { position: absolute; left: 18px; bottom: 18px; padding: 8px 10px; border-radius: 999px; background: rgba(16,17,18,.78); color: #fff; font: 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.px-insight-check { margin: clamp(38px, 6vw, 72px) 0; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: #fff; box-shadow: var(--shadow-card); }
.px-insight-check h2 { margin: 12px 0 26px; font-size: clamp(24px, 3vw, 38px); line-height: 1.1; letter-spacing: -.035em; }
.px-insight-dial-track {
  position: relative; height: 58px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg, #e7e9ea, #f4f5f5 60%, #fdfdfd);
  box-shadow: inset 0 2px 5px rgba(16,17,18,.14), inset 0 -1px 0 #fff;
  cursor: grab; touch-action: none; user-select: none;
}
.px-insight-dial-track:active { cursor: grabbing; }
.px-insight-dial-fill-wrap { position: absolute; inset: 4px; border-radius: 999px; overflow: hidden; pointer-events: none; }
.px-insight-dial-fill { width: 44.444%; height: 100%; background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent)); box-shadow: 0 0 30px rgba(200,230,40,.85); }
.px-insight-dial-handle {
  position: absolute; z-index: 2; top: 4px; bottom: 4px; left: 44.444%; width: 50px; margin-left: -25px;
  border-radius: 999px; background: linear-gradient(180deg, #fefefe, #dfe1e2 55%, #f7f8f8);
  box-shadow: 0 4px 12px rgba(16,17,18,.28), inset 0 1px 0 #fff;
  display: grid; place-items: center; pointer-events: none;
}
.px-insight-dial-handle span { width: 14px; height: 4px; border-radius: 3px; background: rgba(16,17,18,.28); display: block; }
.px-insight-dial-track input[type="range"] {
  position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: inherit;
}
.px-insight-dial-track:focus-within {
  outline: 1px solid rgba(16,17,18,.16); outline-offset: 2px;
  box-shadow: inset 0 2px 5px rgba(16,17,18,.14), inset 0 -1px 0 #fff, 0 0 0 5px rgba(220,242,58,.22);
}
.px-insight-scale { display: flex; justify-content: space-between; margin-top: 8px; font: 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.px-insight-result { margin-top: 24px; padding: 20px; border-radius: 18px; background: var(--color-accent); color: var(--color-ink); }
.px-insight-result strong { font-size: 18px; }
.px-insight-result p { margin: 7px 0 0; line-height: 1.5; }
.px-insight-check small { display: block; margin-top: 12px; opacity: .5; }

/* Vordefinierte CMS-Layouts: Inhalte bleiben strukturiert, nur die Darstellung wechselt. */
.px-image-layout-compact .px-detail-shot { max-width: 760px; aspect-ratio: 16 / 7; margin-left: auto; margin-right: auto; }
.px-image-layout-full .px-detail-shot { aspect-ratio: 16 / 10; }
.px-layout-guide .px-detail-body { margin-top: 44px; padding: clamp(24px, 4vw, 46px); border-radius: 28px; background: #fff; box-shadow: var(--shadow-card); }
.px-layout-guide .px-detail-body h2:first-child { margin-top: 0; }
.px-layout-visual .px-detail-h1 { font-size: clamp(38px, 6vw, 72px); }
.px-layout-visual .px-detail-shot { aspect-ratio: 16 / 10; }
.px-layout-visual .px-detail-body { max-width: 780px; margin-left: auto; margin-right: auto; }

.px-cms-section { margin: 0; }
.px-cms-section + .px-cms-section { margin-top: 42px; }
.px-cms-section h2 { margin-top: 0; }
.px-cms-highlight { padding: 28px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-card); }
.px-cms-checklist { padding: 28px; border-radius: 22px; background: rgba(16,17,18,.045); }
.px-cms-quote { padding: 8px 0 8px 26px; border-left: 3px solid var(--color-accent); color: var(--color-ink); font-size: clamp(20px, 2.5vw, 28px); line-height: 1.4; letter-spacing: -.02em; }