/* The 2026 design. Loaded only when data/config.json says "design": { "variant": "2026" }; every rule is scoped
   to the body class wps-2026. Written for a 390 px phone first, widened with min-width queries.
   Tokens and contrast ratios: docs/sites/geigerzaehler-sinnvoll.de/design.md. System fonts only (no request to a font service). */

body.wps-2026 {
	/* Each colour can be set per site as a design token "d26-<name>" in data/config.json; the
	   value after the comma is the default. */
	--wps26-page: var(--wps-d26-page, #ffffff);
	--wps26-text: var(--wps-d26-text, #1b2733);
	--wps26-muted: var(--wps-d26-muted, #4a5a6a);
	--wps26-link: var(--wps-d26-link, #0a58a8);
	--wps26-link-hover: var(--wps-d26-link-hover, #12304d);
	--wps26-surface: var(--wps-d26-surface, #eef3f8);
	--wps26-surface-catch: var(--wps-d26-surface-catch, #fff4e8);
	--wps26-line: var(--wps-d26-line, #cfd9e3);
	--wps26-dark: var(--wps-d26-dark, #12304d);
	--wps26-dark-hover: var(--wps-d26-dark-hover, #1d4a75);
	--wps26-on-dark: var(--wps-d26-on-dark, #ffffff);
	--wps26-on-dark-soft: var(--wps-d26-on-dark-soft, #dbe6f0);
	--wps26-action: var(--wps-d26-action, #9a4300);
	--wps26-on-action: var(--wps-d26-on-action, #ffffff);
	--wps26-space-1: 0.5rem;
	--wps26-space-2: 1rem;
	--wps26-space-3: 1.5rem;
	--wps26-space-4: 2.5rem;
	--wps26-width-text: 42rem;
	--wps26-width-page: 70rem;

	background: var(--wps26-page);
	color: var(--wps26-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.125rem;
	line-height: 1.65;
}

/* The customizer sets "Century Gothic" without a fallback on these, so devices without that font
   (phones, most Macs, Linux) render them in the browser's serif. They follow the body font instead. */
body.wps-2026 :is(button, input, select, textarea, .main-title, .site-description, .main-navigation a,
	.menu-toggle, .widget-title, .comments-title) {
	font-family: inherit;
}

/* Header: a solid dark bar instead of the photograph. */
body.wps-2026 .site-header,
body.wps-2026 .main-navigation,
body.wps-2026 .main-navigation ul ul {
	background: var(--wps26-dark);
	background-image: none;
}

body.wps-2026 .inside-header {
	padding: var(--wps26-space-2);
}

/* The menu is centred under the centred header on every site (freigehege's customizer aligns it right,
   and its older GeneratePress floats the items instead of using flexbox). Phones keep the toggled list. */
@media (min-width: 769px) {
	body.wps-2026 .main-navigation .inside-navigation {
		justify-content: center;
	}

	body.wps-2026 .main-navigation:not(.toggled) .main-nav > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}

body.wps-2026 .main-title,
body.wps-2026 .main-title a,
body.wps-2026 .main-navigation .main-nav ul li a,
body.wps-2026 .main-navigation .menu-toggle,
body.wps-2026 .main-navigation .menu-bar-items {
	color: var(--wps26-on-dark);
}

body.wps-2026 .main-title {
	font-size: 1.375rem;
	font-weight: 700;
}

body.wps-2026 .site-description {
	color: var(--wps26-on-dark-soft);
	font-size: 0.9375rem;
}

body.wps-2026 .main-navigation .main-nav ul li a {
	font-size: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

body.wps-2026 .main-navigation .main-nav ul li:hover > a,
body.wps-2026 .main-navigation .main-nav ul li.current-menu-item > a,
body.wps-2026 .main-navigation .main-nav ul li.current-menu-ancestor > a {
	background: var(--wps26-dark-hover);
	color: var(--wps26-on-dark);
}

/* Content: one column, on white, with room around it. */
body.wps-2026 .site-content {
	display: block;
}

body.wps-2026.separate-containers .inside-article,
body.wps-2026.separate-containers .comments-area,
body.wps-2026.separate-containers .page-header {
	background: transparent;
	padding: var(--wps26-space-3) var(--wps26-space-2);
}

body.wps-2026.separate-containers .site-main {
	margin: 0;
}

body.wps-2026.separate-containers .site-main > * {
	margin-bottom: 0;
}

body.wps-2026 .inside-article,
body.wps-2026 .site-content .content-area {
	max-width: var(--wps26-width-text);
	margin-left: auto;
	margin-right: auto;
}

body.wps-2026 .entry-title {
	color: var(--wps26-text);
	font-family: inherit;
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1.2;
	margin-bottom: var(--wps26-space-2);
}

body.wps-2026 .entry-content h2 {
	font-size: 1.4375rem;
	line-height: 1.3;
	margin-top: var(--wps26-space-4);
}

body.wps-2026 .entry-content h3 {
	font-size: 1.1875rem;
	line-height: 1.35;
	margin-top: var(--wps26-space-3);
}

body.wps-2026 .entry-content a,
body.wps-2026 .entry-meta a {
	color: var(--wps26-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

body.wps-2026 .entry-content a:hover,
body.wps-2026 .entry-content a:focus {
	color: var(--wps26-link-hover);
}

body.wps-2026 .entry-meta,
body.wps-2026 .entry-meta a {
	color: var(--wps26-muted);
	font-size: 0.9375rem;
}

/* Post lists (home, archives): the customizer's link colour would win here, which is unreadable on a
   dark page. Titles take the text colour, the other links the palette's link colour. */
body.wps-2026 .entry-title a {
	color: var(--wps26-text);
	text-decoration: none;
}

body.wps-2026 .entry-title a:hover,
body.wps-2026 .entry-title a:focus {
	color: var(--wps26-link);
}

body.wps-2026 :is(.entry-summary, .footer-entry-meta, .paging-navigation, .comments-area, .page-header) a {
	color: var(--wps26-link);
}

body.wps-2026 a:focus-visible,
body.wps-2026 button:focus-visible,
body.wps-2026 input:focus-visible,
body.wps-2026 textarea:focus-visible {
	outline: 3px solid var(--wps26-action);
	outline-offset: 2px;
}

/* On the dark bar and footer the action colour is only 2.04:1: a light ring (13.50:1) there. */
body.wps-2026 .site-header :focus-visible,
body.wps-2026 .main-navigation :focus-visible,
body.wps-2026 .site-footer :focus-visible {
	outline-color: var(--wps26-on-dark);
}

/* Tables scroll sideways on a phone (base.css) and get a quiet look. */
body.wps-2026 .entry-content table {
	border-collapse: collapse;
	font-size: 1rem;
}

body.wps-2026 .entry-content th,
body.wps-2026 .entry-content td {
	border: 1px solid var(--wps26-line);
	padding: 0.5rem 0.75rem;
	text-align: left;
}

body.wps-2026 .entry-content th {
	background: var(--wps26-surface);
}

/* Text elements in the page content: the text rules of design.md, section 4. */
body.wps-2026 .entry-content p {
	margin-bottom: var(--wps26-space-2);
}

body.wps-2026 .entry-content ul,
body.wps-2026 .entry-content ol {
	margin: 0 0 var(--wps26-space-2) 0;
	padding-left: 1.5rem;
}

body.wps-2026 .entry-content ul {
	list-style: disc;
}

body.wps-2026 .entry-content ol {
	list-style: decimal;
}

body.wps-2026 .entry-content li {
	margin-bottom: 0.375rem;
	padding-left: 0.25rem;
}

body.wps-2026 .entry-content li::marker {
	color: var(--wps26-muted);
}

body.wps-2026 .entry-content li > ul,
body.wps-2026 .entry-content li > ol {
	margin: 0.375rem 0 0;
}

body.wps-2026 .entry-content h2,
body.wps-2026 .entry-content h3,
body.wps-2026 .entry-content h4 {
	color: var(--wps26-text);
	font-family: inherit;
	font-weight: 700;
}

body.wps-2026 .entry-content h2 {
	margin-bottom: var(--wps26-space-2);
}

body.wps-2026 .entry-content h3 {
	margin-bottom: var(--wps26-space-1);
}

body.wps-2026 .entry-content h4 {
	font-size: 1rem;
	line-height: 1.4;
	margin: var(--wps26-space-3) 0 var(--wps26-space-1);
}

body.wps-2026 .entry-content strong,
body.wps-2026 .entry-content b {
	color: var(--wps26-text);
	font-weight: 700;
}

body.wps-2026 .entry-content u {
	text-decoration: none;
}

body.wps-2026 .entry-content img {
	height: auto;
	max-width: 100%;
}

body.wps-2026 .entry-content figure,
body.wps-2026 .entry-content .wp-block-image {
	margin: var(--wps26-space-3) 0;
}

body.wps-2026 .entry-content figcaption {
	color: var(--wps26-muted);
	font-size: 0.9375rem;
}

/* Contents box (Table of Contents Plus). */
body.wps-2026 .entry-content #toc_container {
	background: var(--wps26-surface);
	border: 1px solid var(--wps26-line);
	border-radius: 0.5rem;
	box-sizing: border-box;
	font-size: 1rem;
	margin: var(--wps26-space-3) 0;
	padding: var(--wps26-space-2) var(--wps26-space-3);
	width: auto;
}

body.wps-2026 .entry-content #toc_container p.toc_title,
body.wps-2026 .entry-content #toc_container .toc_title {
	font-size: 1rem;
	font-weight: 700;
	text-align: left;
}

body.wps-2026 .entry-content #toc_container ul,
body.wps-2026 .entry-content #toc_container ol {
	list-style: decimal;
	margin: var(--wps26-space-1) 0 0;
	padding-left: 1.25rem;
}

/* The plugin's no_bullets class sets list-style: none on the li itself, so the numbers are set here too. */
body.wps-2026 .entry-content #toc_container li {
	list-style: decimal;
	margin-bottom: 0.25rem;
}

body.wps-2026 .entry-content .wps-box--verdict :focus-visible {
	outline-color: var(--wps26-on-dark);
}

/* Related posts (Contextual Related Posts): the h3 is a small label, not a heading step. */
body.wps-2026 .entry-content .crp_related {
	border-top: 1px solid var(--wps26-line);
	margin-top: var(--wps26-space-4);
	padding-top: var(--wps26-space-2);
}

body.wps-2026 .entry-content .crp_related h3 {
	color: var(--wps26-muted);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	margin: 0 0 var(--wps26-space-1);
	text-transform: uppercase;
}

body.wps-2026 .entry-content .crp_related ul {
	list-style: none;
	padding-left: 0;
}

/* Ratings stay small and in line with the text. */
body.wps-2026 .entry-content .kk-star-ratings {
	font-size: 0.9375rem;
	margin: var(--wps26-space-2) 0;
}

/* Tables: header row, numbers to the right (a cell or column with class wps-num or has-text-align-right). */
body.wps-2026 .entry-content table {
	margin: var(--wps26-space-3) 0;
	width: 100%;
}

body.wps-2026 .entry-content th {
	color: var(--wps26-text);
	font-weight: 700;
}

body.wps-2026 .entry-content .wps-num,
body.wps-2026 .entry-content td.has-text-align-right,
body.wps-2026 .entry-content th.has-text-align-right {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Boxes: Kurz gesagt, Wo ist der Haken?, Tipp, Kaiser-Check. The left bar and the label carry the kind, not colour alone. */
body.wps-2026 .entry-content .wps-box {
	background: var(--wps26-surface);
	border-left: 0.3125rem solid var(--wps26-dark);
	border-radius: 0 0.5rem 0.5rem 0;
	margin: var(--wps26-space-3) 0;
	padding: var(--wps26-space-2) var(--wps26-space-3);
}

body.wps-2026 .entry-content .wps-box > :last-child {
	margin-bottom: 0;
}

body.wps-2026 .entry-content .wps-box--short {
	border-left-color: var(--wps26-link);
}

body.wps-2026 .entry-content .wps-box--catch {
	background: var(--wps26-surface-catch);
	border-left-color: var(--wps26-action);
}

body.wps-2026 .entry-content .wps-box--tip {
	background: var(--wps26-page);
	border: 1px solid var(--wps26-line);
	border-left: 0.3125rem solid var(--wps26-muted);
}

body.wps-2026 .entry-content .wps-box--verdict {
	background: var(--wps26-dark);
	border-left-color: var(--wps26-action);
	color: var(--wps26-on-dark);
}

body.wps-2026 .entry-content .wps-box--verdict a,
body.wps-2026 .entry-content .wps-box--verdict strong,
body.wps-2026 .entry-content .wps-box--verdict h2,
body.wps-2026 .entry-content .wps-box--verdict h3,
body.wps-2026 .entry-content .wps-box--verdict h4 {
	color: var(--wps26-on-dark);
}

body.wps-2026 .entry-content .wps-box > :first-child:is(h2, h3, h4, .wps-box__title) {
	margin-top: 0;
}

body.wps-2026 .entry-content .wps-box__title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: var(--wps26-space-1);
}

/* Buttons and forms (contact page, shortcode buttons): large enough to tap. */
body.wps-2026 button:not(.menu-toggle):not(.search-submit):not(.slideout-exit):not(.wps-link-button):not(.cmplz-btn),
body.wps-2026 input[type="button"],
body.wps-2026 input[type="reset"],
body.wps-2026 input[type="submit"],
body.wps-2026 a.button,
body.wps-2026 a.wp-block-button__link {
	background: var(--wps26-action);
	border-radius: 0.375rem;
	color: var(--wps26-on-action);
	font-size: 1rem;
	font-weight: 600;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
}

body.wps-2026 input[type="text"],
body.wps-2026 input[type="email"],
body.wps-2026 input[type="url"],
body.wps-2026 textarea {
	background: var(--wps26-page);
	border: 1px solid var(--wps26-muted);
	border-radius: 0.375rem;
	color: var(--wps26-text);
	font-size: 1rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	width: 100%;
}

/* Footer: slim, dark, the legal links readable. */
body.wps-2026 .site-footer,
body.wps-2026 .site-info {
	background: var(--wps26-dark);
	color: var(--wps26-on-dark-soft);
}

body.wps-2026 .site-info {
	font-size: 0.9375rem;
	padding: var(--wps26-space-3) var(--wps26-space-2);
}

body.wps-2026 .site-info a {
	color: var(--wps26-on-dark);
	text-decoration: underline;
}

/* Consent banner: compact on phones so it covers less of the screen (issue #217). */
@media (max-width: 768px) {
	body.wps-2026 .cmplz-cookiebanner {
		padding: 0.75rem var(--wps26-space-2);
	}

	body.wps-2026 .cmplz-cookiebanner .cmplz-message {
		font-size: 0.8125rem;
		line-height: 1.4;
	}

	body.wps-2026 .cmplz-cookiebanner .cmplz-buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}

	body.wps-2026 .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
	body.wps-2026 .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
		grid-column: span 2;
	}

	body.wps-2026 .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		min-height: 2.5rem;
		padding: 0.375rem 0.5rem;
	}
}

/* From a tablet on. */
@media (min-width: 769px) {
	body.wps-2026 {
		font-size: 1.1875rem;
	}

	body.wps-2026 .inside-header {
		padding: var(--wps26-space-3) var(--wps26-space-2);
	}

	body.wps-2026 .main-title {
		font-size: 1.75rem;
	}

	body.wps-2026.separate-containers .inside-article,
	body.wps-2026.separate-containers .page-header {
		padding: var(--wps26-space-4) var(--wps26-space-2);
	}

	body.wps-2026 .entry-title {
		font-size: 2.25rem;
	}

	body.wps-2026 .entry-content h2 {
		font-size: 1.75rem;
	}

	body.wps-2026 .entry-content h3 {
		font-size: 1.3125rem;
	}

	body.wps-2026 .site-content .content-area {
		max-width: var(--wps26-width-page);
	}
}