/* CPQ-SELECT V6.3 – konsistente Interaktionen, breitere Fachraster und kompaktere Abstände. */

:root {
	--cpqs-wide: 1280px;
	--cpqs-reading: 840px;
	--cpqs-gutter: clamp(1rem, 3vw, 2rem);
	--cpqs-shadow-soft: 0 1px 2px rgba(18, 33, 41, .06), 0 10px 28px rgba(18, 33, 41, .045);
	--cpqs-shadow-panel: 0 14px 38px rgba(18, 33, 41, .08);
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }

/* 1. Breiten: breite Fachraster werden wirklich breit, Lesetext bleibt kontrolliert. */
.cpqs-template-front .wp-block-post-content > .alignwide,
.cpqs-template-front .wp-block-post-content > .alignfull > .alignwide,
.cpqs-template-standard .wp-block-post-content > .alignwide,
.cpqs-template-wide .wp-block-post-content > .alignwide {
	width: min(calc(100% - (2 * var(--cpqs-gutter))), var(--cpqs-wide));
	max-width: var(--cpqs-wide);
	margin-inline: auto;
}
.cpqs-template-front .wp-block-post-content > .alignfull,
.cpqs-template-standard .wp-block-post-content > .alignfull,
.cpqs-template-wide .wp-block-post-content > .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.cpqs-template-front .wp-block-post-content > .alignfull > .alignwide,
.cpqs-template-standard .wp-block-post-content > .alignfull > .alignwide,
.cpqs-template-wide .wp-block-post-content > .alignfull > .alignwide {
	width: min(calc(100% - (2 * var(--cpqs-gutter))), var(--cpqs-wide));
}

/* 2. Anker, Leseführung und Überschriften. */
:target,
[id] { scroll-margin-top: 7rem; }
.wp-block-post-content > :first-child { margin-top: 0; }
.wp-block-heading { text-wrap: balance; }
.wp-block-post-content p { text-wrap: pretty; }
.wp-block-group > .wp-block-heading:first-child { margin-top: 0; }
.wp-block-column > .wp-block-group > .wp-block-heading:first-child { margin-top: 0; }
.cpqs-kicker,
.wp-block-post-content > .wp-block-group:first-child .has-xs-font-size[style*="uppercase"] {
	letter-spacing: .12em !important;
	text-transform: uppercase;
}
.cpqs-kicker { margin-bottom: .2rem; }
.cpqs-stand { margin-top: .8rem; }

/* 3. Startseitenhero: breite Plattformfläche, klare Textführung. */
.wp-block-post-content > .wp-block-group.alignfull.has-surface-background-color:first-child {
	background: linear-gradient(118deg, var(--wp--preset--color--surface-strong) 0%, var(--wp--preset--color--surface) 58%, #f7fafb 100%) !important;
	border-top: 1px solid rgba(66,107,122,.18);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.wp-block-post-content > .wp-block-group.alignfull:first-child > .wp-block-group.alignwide {
	padding-inline: clamp(0rem, 1.5vw, 1.5rem);
}
.wp-block-post-content > .wp-block-group.alignfull:first-child h1 { max-width: 980px; }
.wp-block-post-content > .wp-block-group.alignfull:first-child p { max-width: 900px; }
.wp-block-post-content > .wp-block-group.alignfull:first-child .wp-block-buttons { gap: .7rem; }

/* 4. Einheitliche Buttons: Primär, Sekundär und Outline. */
.wp-element-button,
.wp-block-button__link {
	cursor: pointer;
	text-decoration: none !important;
	box-shadow: none;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button__link.has-primary-background-color,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-base-background-color) {
	background: var(--wp--preset--color--primary) !important;
	border: 1px solid var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
}
.wp-block-button__link.has-primary-background-color:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-base-background-color):hover {
	background: var(--wp--preset--color--contrast) !important;
	border-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}
.wp-block-button__link.has-base-background-color.has-primary-color {
	background: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary) !important;
}
.wp-block-button__link.has-base-background-color.has-primary-color:hover {
	background: var(--wp--preset--color--surface-strong) !important;
	border-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--contrast) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	border: 1px solid var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface-strong) !important;
	border-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--contrast) !important;
}
.has-primary-background-color .wp-block-button__link.has-base-background-color.has-primary-color:hover {
	background: var(--wp--preset--color--accent-soft) !important;
	border-color: var(--wp--preset--color--accent-soft) !important;
	color: var(--wp--preset--color--contrast) !important;
}
.has-primary-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	border-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--base) !important;
}
.has-primary-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--primary) !important;
}
main a:not(.wp-element-button) {
	text-decoration-thickness: .075em;
	text-underline-offset: .17em;
}

/* 5. Kernaussage, Panels und Karten. */
.wp-block-post-content > .wp-block-group.alignwide.has-base-background-color[style*="border-left"] {
	box-shadow: var(--cpqs-shadow-panel);
	border-top: 1px solid var(--wp--preset--color--line);
	border-right: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.wp-block-columns { gap: clamp(1rem, 1.8vw, 1.45rem); }
.wp-block-column > .wp-block-group.has-border-color,
.wp-block-column > .wp-block-group.has-surface-background-color {
	box-shadow: var(--cpqs-shadow-soft);
}
.wp-block-column > .wp-block-group h3 a {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* Einstiegsraster: fünf vollständig klickbare Karten; das Arbeitsprinzip bleibt statisch. */
#einstiege {
	width: min(calc(100% - (2 * var(--cpqs-gutter))), var(--cpqs-wide)) !important;
	max-width: var(--cpqs-wide) !important;
	padding-top: 2.7rem !important;
	padding-bottom: 2.7rem !important;
}
#einstiege > .wp-block-columns {
	width: 100% !important;
	max-width: none !important;
	gap: clamp(1.15rem, 2vw, 1.6rem);
}
#einstiege .wp-block-columns { margin-top: 1.15rem !important; }
#einstiege .wp-block-columns + .wp-block-columns { margin-top: 1.35rem !important; }
#einstiege .wp-block-column { display: flex; min-width: 0; }
#einstiege .wp-block-column > .wp-block-group {
	width: 100%;
	padding: clamp(1.35rem, 2vw, 1.65rem) !important;
	border-top-width: 4px !important;
}
#einstiege .cpqs-interactive-card {
	position: relative;
	isolation: isolate;
	transition: border-color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
#einstiege .cpqs-interactive-card:hover,
#einstiege .cpqs-interactive-card:focus-within {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: var(--cpqs-shadow-panel);
	transform: translateY(-3px);
}
#einstiege .cpqs-interactive-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
#einstiege .cpqs-interactive-card h3 a:focus-visible { outline: none; }
#einstiege .cpqs-interactive-card:focus-within {
	outline: 3px solid var(--wp--preset--color--signal);
	outline-offset: 3px;
}
#einstiege .wp-block-columns:first-of-type .wp-block-column:nth-child(1) > .wp-block-group {
	background: #f8fafb !important;
	border-top-color: var(--wp--preset--color--accent) !important;
}
#einstiege .wp-block-columns:first-of-type .wp-block-column:nth-child(2) > .wp-block-group {
	background: var(--wp--preset--color--surface) !important;
	border-top-color: var(--wp--preset--color--accent-soft) !important;
}
#einstiege .wp-block-columns:first-of-type .wp-block-column:nth-child(3) > .wp-block-group {
	background: #eef4f6 !important;
	border-top-color: var(--wp--preset--color--primary) !important;
}
#einstiege .wp-block-columns:last-of-type .wp-block-column:nth-child(1) > .wp-block-group {
	background: #f3f7f8 !important;
	border-top-color: var(--wp--preset--color--accent-soft) !important;
}
#einstiege .wp-block-columns:last-of-type .wp-block-column:nth-child(2) > .wp-block-group {
	background: var(--wp--preset--color--surface) !important;
	border-top-color: var(--wp--preset--color--accent) !important;
}
#einstiege .wp-block-columns:last-of-type .wp-block-column:nth-child(3) > .wp-block-group {
	background: var(--wp--preset--color--surface-strong) !important;
	border-top-color: var(--wp--preset--color--primary) !important;
	box-shadow: none;
}
#einstiege h3 { margin-top: 0; }
#einstiege h3 a { display: inline; }

/* Querschnittskarten: breiter, weniger Säuleneffekt, stärkerer Rhythmus. */
#querschnitt {
	width: min(calc(100% - (2 * var(--cpqs-gutter))), var(--cpqs-wide)) !important;
	max-width: var(--cpqs-wide) !important;
	padding-top: 2.7rem !important;
	padding-bottom: 2.7rem !important;
}
#querschnitt > .wp-block-columns {
	width: 100% !important;
	max-width: none !important;
	gap: clamp(1.15rem, 2vw, 1.6rem);
}
#querschnitt .wp-block-columns { margin-top: 1.15rem !important; }
#querschnitt .wp-block-column { display: flex; min-width: 0; }
#querschnitt .wp-block-column > .wp-block-group {
	width: 100%;
	padding: 1.5rem !important;
	border-top: 4px solid var(--wp--preset--color--accent);
}
#querschnitt .wp-block-column:nth-child(1) > .wp-block-group { background: var(--wp--preset--color--surface-strong) !important; }
#querschnitt .wp-block-column:nth-child(2) > .wp-block-group { background: var(--wp--preset--color--surface) !important; border-top-color: var(--wp--preset--color--accent-soft); }
#querschnitt .wp-block-column:nth-child(3) > .wp-block-group { background: #edf3f5 !important; border-top-color: var(--wp--preset--color--primary); }
#querschnitt h3 { margin-top: 0; }

/* Leistet / leistet nicht: gleich hohe, klar unterscheidbare Panels. */
#leistung {
	width: min(calc(100% - (2 * var(--cpqs-gutter))), var(--cpqs-wide)) !important;
	max-width: var(--cpqs-wide) !important;
	padding-top: 2.7rem !important;
	padding-bottom: 2.7rem !important;
}
#leistung > .wp-block-columns {
	width: 100% !important;
	max-width: none !important;
	gap: clamp(1.2rem, 2.2vw, 1.8rem);
}
#leistung .wp-block-columns { margin-top: 1.15rem !important; }
#leistung .wp-block-column { display: flex; min-width: 0; }
#leistung .wp-block-column > .wp-block-group { width: 100%; padding: 1.45rem !important; }
#leistung .wp-block-column:first-child > .wp-block-group { background: var(--wp--preset--color--surface-strong) !important; }
#leistung .wp-block-column:last-child > .wp-block-group { background: var(--wp--preset--color--signal-soft) !important; }
#leistung .wp-block-group[style*="border-left-color:var(--wp--preset--color--signal)"] {
	background: linear-gradient(90deg, var(--wp--preset--color--signal-soft), var(--wp--preset--color--surface)) !important;
	margin-top: 1.75rem !important;
	padding: 1.55rem !important;
}

/* 6. Tabellen: auf Desktop vollständig sichtbar, Scrollen erst bei kleinen Viewports. */
.wp-block-table {
	width: 100%;
	overflow: visible;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	box-shadow: var(--cpqs-shadow-soft);
}
.cpqs-tablewrap { overflow-x: visible; }
.cpqs-tablewrap table,
.wp-block-table.is-style-cpqs-orientierung table {
	width: 100%;
	min-width: 0;
	table-layout: auto !important;
	border-collapse: collapse;
}
.wp-block-table.is-style-cpqs-orientierung th:nth-child(1),
.wp-block-table.is-style-cpqs-orientierung td:nth-child(1) { width: 27%; }
.wp-block-table.is-style-cpqs-orientierung th:nth-child(2),
.wp-block-table.is-style-cpqs-orientierung td:nth-child(2) { width: 34%; }
.wp-block-table.is-style-cpqs-orientierung th:nth-child(3),
.wp-block-table.is-style-cpqs-orientierung td:nth-child(3) { width: 39%; }
.wp-block-table.is-style-cpqs-orientierung th,
.wp-block-table.is-style-cpqs-orientierung td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: .95rem 1rem;
	vertical-align: top;
}
.wp-block-table.is-style-cpqs-orientierung thead th {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-align: left;
	font-weight: 700;
}
.wp-block-table.is-style-cpqs-orientierung tbody tr:nth-child(even) td { background: var(--wp--preset--color--surface); }
.wp-block-table.is-style-cpqs-orientierung tbody tr:nth-child(odd) td { background: var(--wp--preset--color--base); }
.wp-block-table.is-style-cpqs-orientierung tbody tr:last-child td { border-bottom: 0; }
.wp-block-table figcaption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	padding: .75rem 1rem;
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	background: #f8fafb;
}

/* 7. Akkordeon auf Basis des Kernblocks Details. */
.wp-block-details.cpqs-acc,
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: .85rem 0;
}
.wp-block-details.cpqs-acc summary,
.wp-block-details summary {
	cursor: pointer;
	font-weight: 650;
	color: var(--wp--preset--color--primary);
	list-style: none;
}
.wp-block-details.cpqs-acc summary::-webkit-details-marker,
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details.cpqs-acc summary::after,
.wp-block-details summary::after { content: "+"; float: right; color: var(--wp--preset--color--accent); }
.wp-block-details.cpqs-acc[open] summary::after,
.wp-block-details[open] summary::after { content: "\2013"; }

/* 8. Header, Logo und Navigation. */
.cpqs-site-header {
	position: relative;
	z-index: 20;
	box-shadow: 0 1px 0 rgba(18, 33, 41, .03);
	padding-top: 1.05rem !important;
	padding-bottom: 1.05rem !important;
}
.cpqs-site-header > .wp-block-group.alignwide,
.cpqs-site-footer > .wp-block-columns.alignwide,
.cpqs-site-footer > .wp-block-separator.alignwide,
.cpqs-site-footer > .wp-block-group.alignwide {
	width: min(calc(100% - (2 * var(--cpqs-gutter))), var(--cpqs-wide));
	max-width: var(--cpqs-wide);
	margin-inline: auto;
}
.cpqs-logo-link {
	display: block;
	width: clamp(220px, 19vw, 285px);
	aspect-ratio: 1600 / 305;
	background: url('../images/cpq-select-logo.svg') no-repeat left center / contain;
	text-decoration: none;
	flex: 0 0 auto;
}
.cpqs-header-navigation { gap: .65rem; }
.cpqs-main-navigation { gap: .9rem; }
.cpqs-main-navigation .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
	padding-block: .35rem;
}
.cpqs-main-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transition: right .15s ease;
}
.cpqs-main-navigation .wp-block-navigation-item__content:hover,
.cpqs-main-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); }
.cpqs-main-navigation .wp-block-navigation-item__content:hover::after,
.cpqs-main-navigation .current-menu-item > .wp-block-navigation-item__content::after { right: 0; }
.cpqs-lang-switch { margin: 0; align-self: center; letter-spacing: .08em; font-weight: 700; }
.cpqs-lang-switch a {
	text-decoration: none;
	border-left: 1px solid var(--wp--preset--color--line);
	padding-left: .8rem;
	color: var(--wp--preset--color--primary);
}

/* 9. Footer: kompakter, klarer Abschluss. */
.cpqs-site-footer { margin-top: var(--wp--preset--spacing--50) !important; }
.cpqs-site-footer a { color: var(--wp--preset--color--base); text-decoration-color: var(--wp--preset--color--accent-soft); }
.cpqs-site-footer a:hover { color: var(--wp--preset--color--accent-soft); }
.cpqs-site-footer .wp-block-separator { opacity: .5; }
.cpqs-plainlist { list-style: none; padding-left: 0; }
.cpqs-plainlist li { margin-bottom: .35rem; }

/* 10. Fokuszustände und Bedienbarkeit. */
:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 3px solid var(--wp--preset--color--signal);
	outline-offset: 3px;
}

/* 11. Responsive Führung. */
@media (max-width: 1120px) {
	.cpqs-main-navigation { gap: .6rem; }
	.cpqs-main-navigation .wp-block-navigation-item__content { font-size: .86rem; }
	.cpqs-logo-link { width: 225px; }
	#einstiege .wp-block-columns,
	#querschnitt .wp-block-columns { gap: 1rem; }
}
@media (max-width: 960px) {
	.cpqs-main-navigation .wp-block-navigation__responsive-container-open { display: flex; }
	.cpqs-main-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
	.wp-block-table.is-style-cpqs-orientierung table { min-width: 760px; }
	#einstiege .wp-block-columns,
	#querschnitt .wp-block-columns { flex-wrap: wrap !important; }
	#einstiege .wp-block-column,
	#querschnitt .wp-block-column { flex-basis: calc(50% - .6rem) !important; flex-grow: 1; }
}
@media (max-width: 781px) {
	.cpqs-site-header { padding-top: .9rem !important; padding-bottom: .9rem !important; }
	.cpqs-site-header > .wp-block-group { align-items: center; }
	.cpqs-logo-link { width: 205px; }
	.wp-block-post-content > .wp-block-group.alignfull:first-child { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; }
	.wp-block-columns { gap: .9rem; }
	.cpqs-site-footer .wp-block-column:first-child { margin-bottom: .9rem; }
	#einstiege .wp-block-column,
	#querschnitt .wp-block-column { flex-basis: 100% !important; }
}
@media (max-width: 520px) {
	.cpqs-logo-link { width: 182px; }
	.wp-block-post-content > .wp-block-group.alignfull:first-child { padding-top: 3rem !important; padding-bottom: 3rem !important; }
	.wp-block-button, .wp-block-button__link { width: 100%; text-align: center; }
	#einstiege .wp-block-column > .wp-block-group,
	#querschnitt .wp-block-column > .wp-block-group,
	#leistung .wp-block-column > .wp-block-group { padding: 1.15rem !important; }
}

/* 12. Druck und Bewegungsreduktion. */
@media print {
	header.wp-block-group, footer.wp-block-group { display: none; }
	.wp-block-details { display: block; }
	.wp-block-details > * { display: block !important; }
}
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* 13. V6.3-Rhythmus: Fachsektionen dichter, ohne die Lesbarkeit zu verlieren. */
.cpqs-template-front .wp-block-post-content > .wp-block-group.alignwide:not(:first-child) {
	margin-block-start: 0;
}
#einstiege > p,
#querschnitt > p,
#leistung > p {
	max-width: 900px;
}
#querschnitt .wp-block-column > .wp-block-group,
#leistung .wp-block-column > .wp-block-group {
	transition: none;
	transform: none;
}