/*
Theme Name: GeneratePress Child – Elisabeth Motschmann
Template: generatepress
Version: 1.4.0
Description: Child-Theme für elisabeth-motschmann.de. Redesign August 2026: lokale Fonts, Blau-Palette, Blog im Zentrum.
Author: HECHT INS GEFECHT
*/

/* ==========================================================================
   Lokale Fonts – keine Google-Requests (DSGVO)
   ========================================================================== */
@font-face {
	font-family: 'Source Sans 3';
	src: url(fonts/source-sans-3-3052-latin-regular.woff2) format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans 3';
	src: url(fonts/source-sans-3-3052-latin-italic.woff2) format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans 3';
	src: url(fonts/source-sans-3-3052-latin-600.woff2) format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans 3';
	src: url(fonts/source-sans-3-3052-latin-700.woff2) format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Source Serif 4';
	src: url(fonts/source-serif-4-4005-latin-600.woff2) format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Source Serif 4';
	src: url(fonts/source-serif-4-4005-latin-700.woff2) format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Design-Token
   ========================================================================== */
:root {
	--em-blue: #0c65c5;
	--em-navy: #192763;
	--em-ink: #26303d;
	--em-muted: #5b6675;
	--em-blue-bg: #f2f7fd;
	--em-blue-line: #d8e7f8;
	--em-line-soft: #eef3fa;
	--em-blue-soft: #9fc3ee;
	--em-radius: 10px;
}

/* ==========================================================================
   Grundfeinschliff
   ========================================================================== */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Mediävalziffern: Jahreszahlen stehen im Text wie Wörter, nicht wie Tabellenwerte. */
	font-variant-numeric: oldstyle-nums;
}
h1, h2, h3 {
	text-wrap: balance;
}
/* Buchtitel statt Claim: kleinere, festere Headings erzählen, statt zu behaupten. */
h1 {
	font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.4rem);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.005em;
}
h2 {
	font-size: 1.4rem;
	line-height: 1.25;
}
h3 {
	font-size: 1.12rem;
	line-height: 1.3;
}
::selection {
	background: var(--em-blue-line);
	color: var(--em-ink);
}
a {
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--em-blue);
	outline-offset: 2px;
}
/* Auf Navy-Grund ist die blaue Outline unsichtbar. */
.site-footer a:focus-visible,
.slideout-navigation a:focus-visible,
.slideout-navigation button:focus-visible {
	outline-color: #fff;
}
/* Fließtext-Links (Absätze UND Inhalts-Listen): unterstrichen (hell), Hover
   färbt die Linie – Buttons, Karten-Titel und Archivliste bleiben außen vor. */
.entry-content p a:not(.wp-block-button__link),
.entry-content :where(ul:not(.em-archiv-liste):not(.wp-block-latest-posts), ol) li a {
	color: var(--em-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--em-blue-line);
	transition: text-decoration-color .15s ease, color .15s ease;
}
.entry-content p a:not(.wp-block-button__link):hover,
.entry-content :where(ul:not(.em-archiv-liste):not(.wp-block-latest-posts), ol) li a:hover {
	color: var(--em-navy);
	text-decoration-color: var(--em-blue);
}
.site-header {
	border-bottom: 1px solid var(--em-blue-line);
}
/* GP spiegelt das Content-Padding zusätzlich in jede Block-Group – das doppelt den Rand. */
.site-main .wp-block-group__inner-container {
	padding: 0;
}
.main-title a,
.site-branding .main-title a {
	color: var(--em-navy);
}
.entry-title a {
	color: var(--em-navy);
}
.entry-title a:hover {
	color: var(--em-blue);
}
blockquote,
.wp-block-quote {
	background: #fff;
	border: 1px solid var(--em-blue-line);
	border-radius: var(--em-radius);
	padding: 1.4em 1.5em;
	margin-left: 0;
	font-style: normal;
}
.wp-block-quote p strong:first-child {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.25em;
	color: var(--em-navy);
}
/* Ein Radius für alles – Buttons gehören zur Kartenfamilie, nicht zum Funnel. */
.wp-block-button__link,
button,
input[type="submit"] {
	border-radius: var(--em-radius);
	font-weight: 600;
}
.wp-block-button__link {
	background-color: var(--em-blue);
	color: #fff;
	padding: .65em 1.6em;
}
.wp-block-button__link:hover {
	background-color: var(--em-navy);
	color: #fff;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--em-blue);
	color: var(--em-blue);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--em-blue-bg);
	color: var(--em-navy);
	border-color: var(--em-navy);
}

/* ==========================================================================
   Startseite
   ========================================================================== */
.em-hero {
	padding: 1.5em 0 2.5em;
}
/* Rubrikzeile statt Label: sitzt in der Zeile, nicht über ihr. */
.em-hero .em-kicker {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: .95rem;
	font-weight: 600;
	font-variant-caps: all-small-caps;
	letter-spacing: .03em;
	color: var(--em-muted);
	margin-bottom: .6em;
}
.em-hero h1 {
	margin-bottom: .35em;
}
.em-hero .em-sub {
	font-size: 1.15em;
	color: var(--em-muted);
	margin-bottom: 1em;
}
.em-hero img,
.em-photo img {
	border-radius: var(--em-radius);
	box-shadow: 0 18px 45px -18px rgba(25, 39, 99, .45);
}
.em-section {
	padding: 2.5em 0;
}
.em-section-blue {
	background: var(--em-blue-bg);
	border-top: 1px solid var(--em-blue-line);
	border-bottom: 1px solid var(--em-blue-line);
}
.em-section h2 {
	margin-bottom: 1em;
}
.em-section h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	background-color: var(--em-blue);
	border-radius: 2px;
	margin-top: .55em;
}
.em-section .wp-block-buttons {
	margin-top: 2em;
}

/* Beitragskarten (Latest Posts Block) */
.em-post-grid.wp-block-latest-posts {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	gap: 1.4em;
}
.em-post-grid.wp-block-latest-posts > li {
	width: calc(50% - 0.7em);
	background: #fff;
	border: 1px solid var(--em-blue-line);
	border-radius: var(--em-radius);
	padding: 1.4em 1.5em;
	margin: 0;
	box-shadow: 0 2px 8px -2px rgba(25, 39, 99, .06);
	transition: box-shadow .15s ease, transform .15s ease;
}
.em-post-grid.wp-block-latest-posts > li:hover,
.em-post-grid.wp-block-latest-posts > li:focus-within {
	box-shadow: 0 2px 8px -2px rgba(25, 39, 99, .06),
		0 16px 36px -14px rgba(25, 39, 99, .18);
	transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.em-post-grid.wp-block-latest-posts > li:hover,
	.em-post-grid.wp-block-latest-posts > li:focus-within {
		transform: none;
	}
}
.em-post-grid .wp-block-latest-posts__post-title {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 700;
	font-size: 1.25em;
	line-height: 1.3;
	color: var(--em-navy);
	display: block;
	margin-bottom: .4em;
}
.em-post-grid .wp-block-latest-posts__post-title:hover {
	color: var(--em-blue);
}
.em-post-grid .wp-block-latest-posts__post-date {
	color: var(--em-muted);
	font-size: .85em;
	margin-bottom: .6em;
}
.em-post-grid .wp-block-latest-posts__post-excerpt {
	color: var(--em-ink);
	font-size: .95em;
	margin-bottom: 0;
}
/* Links im Kartentext nur farblich abzusetzen reicht nicht (WCAG 1.4.1). */
.em-post-grid .wp-block-latest-posts__post-excerpt a {
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* Stiller Verweis statt CTA – echtes Kursiv der Source Sans 3. */
.em-post-grid .wp-block-latest-posts__post-excerpt .read-more {
	font-style: italic;
	color: var(--em-navy);
	text-decoration-color: var(--em-blue-line);
}
.em-post-grid .wp-block-latest-posts__post-excerpt .read-more::after {
	content: " →" / "";
	font-style: normal;
}
.em-post-grid .wp-block-latest-posts__post-excerpt .read-more:hover {
	color: var(--em-blue);
	text-decoration-color: var(--em-blue);
}

/* Stationen-Karten – gleicher Look wie die Beitragskarten */
.em-station {
	background: #fff;
	border: 1px solid var(--em-blue-line);
	border-radius: var(--em-radius);
	padding: 1.4em 1.5em;
	height: 100%;
	box-shadow: 0 2px 8px -2px rgba(25, 39, 99, .06);
}
.em-station h3 {
	font-size: 1.15em;
	margin-bottom: .5em;
}
.em-station p {
	font-size: .95em;
	color: var(--em-muted);
	margin-bottom: 0;
}

/* ==========================================================================
   Archiv: komplette Beitragsliste, nach Jahr gruppiert
   ========================================================================== */
.em-archive-header {
	margin-bottom: 1.5em;
}
.em-archive-header p {
	color: var(--em-muted);
}
.em-year {
	font-size: 1.5em;
	color: var(--em-navy);
	border-bottom: 2px solid var(--em-blue-line);
	padding-bottom: .3em;
	margin: 1.6em 0 .7em;
}
.em-archiv-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}
.em-archiv-liste li {
	display: flex;
	align-items: baseline;
	gap: 1.2em;
	padding: .6em .5em;
	border-bottom: 1px solid var(--em-line-soft);
	border-radius: 4px;
	position: relative;
	transition: background-color .12s ease;
}
.em-archiv-liste li:hover,
.em-archiv-liste li:focus-within {
	background-color: var(--em-blue-bg);
}
/* Die ganze Zeile ist Klickfläche, nicht nur der Titel. */
.em-archiv-liste a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.em-archiv-liste .em-datum {
	flex: 0 0 6.5em;
	color: var(--em-muted);
	font-size: .88em;
	font-variant-numeric: oldstyle-nums tabular-nums;
}
.em-archiv-liste a {
	color: var(--em-ink);
	font-weight: 600;
}
.em-archiv-liste a:hover {
	color: var(--em-blue);
}

/* ==========================================================================
   Einzelbeitrag
   ========================================================================== */
.single .cat-links,
.single .entry-meta .categories {
	display: none;
}
/* Zeilenmaß: 65–75 Zeichen sind der Editorial-Standard – volle Containerbreite
   ermüdet bei 109 Lesetexten. Header, Text und Navigation als eine ruhige Achse. */
.single .entry-header,
.single .entry-content,
.single .post-navigation {
	max-width: 72ch;
	margin-left: auto;
	margin-right: auto;
}
/* Themen-Seite: gleiche Zeilenlängen-Problematik in den Textkarten. */
.page-id-13 .wp-block-quote {
	max-width: 74ch;
}
.single .entry-header {
	border-bottom: 1px solid var(--em-blue-line);
	padding-bottom: 1.2em;
	margin-bottom: 2em;
}
.single .entry-content {
	font-size: 1.06em;
	line-height: 1.75;
}
/* Deutsche Komposita erzeugen ohne Trennung nervösen Flattersatz. */
.single .entry-content p,
.page-id-13 .wp-block-quote p {
	hyphens: auto;
	text-wrap: pretty;
}
/* Überschriften gehören zum Folgenden: viel Luft davor, wenig danach. */
.single .entry-content h2 {
	margin-top: 1.8em;
	margin-bottom: .5em;
}
.single .entry-content h3 {
	margin-top: 1.5em;
	margin-bottom: .4em;
}
/* Vor/Zurück-Navigation als Pill-Links; GPs lose Pfeil-Icons ausblenden */
.post-navigation .gp-icon {
	display: none;
}
.post-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: .8em;
	margin-top: 2.5em;
}
.post-navigation .nav-next {
	margin-left: auto;
}
.post-navigation a {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	border: 1px solid var(--em-blue-line);
	border-radius: var(--em-radius);
	padding: .55em 1.3em;
	background: #fff;
	color: var(--em-navy);
	font-weight: 600;
	font-size: .95em;
	transition: border-color .15s ease, background-color .15s ease;
}
.post-navigation a:hover {
	border-color: var(--em-blue);
	background: var(--em-blue-bg);
	color: var(--em-navy);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	border-top: 1px solid var(--em-blue-line);
	margin-top: 3em;
}
.site-footer footer.site-info {
	padding: 1.2em 0;
}
.footer-bar a {
	color: var(--em-blue-soft);
	font-weight: 600;
}
.footer-bar a:hover {
	color: #fff;
}
.copyright-bar {
	color: rgba(255, 255, 255, .72);
	font-size: .85em;
}

/* ==========================================================================
   Mobiles Slideout-Menü – Navy, konsistent zum Footer
   ========================================================================== */
nav.slideout-navigation.main-navigation,
nav.slideout-navigation.main-navigation.do-overlay {
	background-color: var(--em-navy);
}
.slideout-navigation.main-navigation .main-nav ul li a {
	color: #fff;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.4em;
	font-weight: 700;
	padding: .5em 0;
}
.slideout-navigation.main-navigation .main-nav ul li:hover > a,
.slideout-navigation.main-navigation .main-nav ul li:focus > a,
.slideout-navigation.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--em-blue-soft);
}
.slideout-navigation button.slideout-exit {
	color: #fff;
	font-size: 1.3em;
}

/* ==========================================================================
   Mobil
   ========================================================================== */
@media (max-width: 768px) {
	html body {
		font-size: 16px;
	}
	.em-hero {
		padding: 0 0 1.5em;
	}
	.em-hero .wp-block-column:first-child {
		order: 2;
	}
	.em-hero .wp-block-column:last-child {
		order: 1;
		margin-bottom: 1.2em;
	}
	.em-archiv-liste li {
		flex-direction: column;
		gap: .1em;
	}
	.em-archiv-liste .em-datum {
		flex: none;
	}
	.em-post-grid.wp-block-latest-posts > li {
		width: 100%;
	}
}

/* ==========================================================================
   Druck – Journalisten zitieren, ältere Leser drucken lange Reden
   ========================================================================== */
@media print {
	.main-navigation,
	.menu-toggle,
	.slideout-navigation,
	.post-navigation,
	.wp-block-buttons,
	.footer-bar {
		display: none;
	}
	@page {
		margin: 2.2cm;
	}
	body {
		font-size: 12pt;
	}
	.site-header {
		border-bottom: 1px solid #999;
	}
	/* Das Navy-Band würde sonst als volle Tintenfläche drucken –
	   GP legt die Farbe auf footer.site-info, nicht auf .site-footer. */
	.site-footer,
	.site-footer footer.site-info,
	.site-info {
		background: none !important;
		background-color: transparent !important;
		border-top-color: #999;
	}
	.site-footer {
		margin-top: 1.5em;
	}
	.copyright-bar {
		color: #000;
	}
	.single .entry-header,
	.single .entry-content {
		max-width: none;
	}
	.single .entry-content {
		font-size: 12pt;
		line-height: 1.6;
	}
	a {
		color: #000;
	}
	.entry-content a {
		text-decoration: underline;
	}
	h1, h2, h3 {
		break-after: avoid;
	}
	p, li {
		orphans: 3;
		widows: 3;
	}
	blockquote,
	.wp-block-quote,
	.em-station,
	.em-post-grid.wp-block-latest-posts > li {
		border-color: #bbb;
		box-shadow: none;
		break-inside: avoid;
	}
	.em-hero img,
	.em-photo img {
		box-shadow: none;
	}
}