/* wirtschaftsweitblick.com, Layout. Variante B im Register:
   klassische IDs, reine Serif, keine Randspalte, Gliederung im Textfluss. */

:root {
	--bogen: #fcfcfb;
	--bogen-tief: #f3f2ee;
	--typo: #1c1f22;
	--typo-matt: #5a6066;
	--marine: #14314f;
	--marine-hell: #2e5f86;
	--kupfer: #a8622a;
	--strich: #dfe2e4;
	--serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Times New Roman", serif;
	--sans: ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

img {
	max-width: 100%;
	height: auto;
}

body {
	margin: 0;
	background: var(--bogen);
	color: var(--typo);
	font: 1.0625rem/1.65 var(--serif);
	font-kerning: normal;
}

.entry-body p, .entry-body li, h1, h2, h3 { hyphens: auto; }
.site-lead > *, .teaser-grid > *, .editors > *, #colophon .shell > * { min-width: 0; }

.shell {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* ---------- Navigationsband, steht vor dem Kopf ---------- */

#topbar {
	background: var(--marine);
	color: #fff;
}

#topbar nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 500 0.8125rem/1 var(--sans);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#topbar nav a {
	display: block;
	padding: 14px 0;
	color: #cfe0ee;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

#topbar nav a:hover,
#topbar nav a[aria-current] {
	color: #fff;
	border-bottom-color: var(--kupfer);
}

/* ---------- Kopf mit Wortmarke ---------- */

#masthead {
	border-bottom: 1px solid var(--strich);
	background: #fff;
}

#masthead .shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 22px;
	padding-bottom: 22px;
}

#masthead img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 44px;
}

#masthead .claim {
	max-width: 30ch;
	margin: 0;
	color: var(--typo-matt);
	font: italic 0.9375rem/1.4 var(--serif);
	text-align: right;
}

/* ---------- Grundgerüst ---------- */

#content { padding-block: 40px 56px; }

h1, h2, h3 {
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.012em;
	color: var(--marine);
	text-wrap: balance;
}

h1 { margin: 0 0 18px; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }
h2 { margin: 48px 0 14px; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.6rem); }
h3 { margin: 32px 0 10px; font-size: 1.125rem; color: var(--typo); }

p { margin: 0 0 18px; }

a { color: var(--marine-hell); }

.entry-body a,
.standfirst a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.entry-body a:hover { color: var(--kupfer); }

a:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--kupfer);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- Brotkrume als Absatz ---------- */

.breadcrumb-line {
	margin: 0 0 20px;
	color: var(--typo-matt);
	font: 0.8125rem/1.5 var(--sans);
}

.breadcrumb-line a {
	color: var(--typo-matt);
	text-decoration: none;
	border-bottom: 1px solid var(--strich);
}

.breadcrumb-line a:hover { color: var(--marine-hell); border-bottom-color: currentColor; }

/* ---------- Beitrag ---------- */

.entry { max-width: 72ch; margin: 0 auto; }

.post-meta {
	margin: 0 0 10px;
	color: var(--typo-matt);
	font: 0.8125rem/1.5 var(--sans);
	letter-spacing: 0.02em;
}

.post-meta .kicker {
	color: var(--kupfer);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.post-meta .sep { padding: 0 8px; color: var(--strich); }

.standfirst {
	margin: 0 0 28px;
	font-size: 1.1875rem;
	line-height: 1.55;
	color: #2c3238;
}

.entry-image {
	margin: 0 0 30px;
}

.entry-image img,
.teaser img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border: 1px solid var(--strich);
}

.entry-image figcaption {
	margin-top: 8px;
	color: var(--typo-matt);
	font: 0.8125rem/1.45 var(--sans);
}

/* Befundzeile, Kennzeichen dieser Domain */
.finding {
	margin: 0 0 16px;
	padding: 10px 0 10px 16px;
	border-left: 3px solid var(--kupfer);
	font-size: 1.0625rem;
}

.finding strong { color: var(--marine); }

.entry-body ul,
.entry-body ol { margin: 0 0 20px; padding-left: 22px; }

.entry-body li { margin-bottom: 9px; }

.entry-body li::marker { color: var(--kupfer); }

.entry-body blockquote {
	margin: 26px 0;
	padding-left: 18px;
	border-left: 2px solid var(--strich);
	color: var(--typo-matt);
	font-style: italic;
}

/* ---------- Gliederung als Kasten im Textfluss ---------- */

.toc-box {
	margin: 0 0 26px;
	padding: 14px 18px;
	background: var(--bogen-tief);
	border: 1px solid var(--strich);
}

.toc-box > summary {
	font: 600 0.8125rem/1.3 var(--sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--marine);
	cursor: pointer;
}

.toc-box ol {
	margin: 12px 0 0;
	padding-left: 20px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.toc-box li { margin-bottom: 7px; }

.toc-box a {
	color: var(--typo);
	text-decoration: none;
	border-bottom: 1px solid var(--strich);
}

.toc-box a:hover { color: var(--marine-hell); border-bottom-color: currentColor; }

@media (min-width: 900px) {
	.toc-box {
		float: right;
		width: 17.5rem;
		margin: 4px 0 20px 28px;
	}
}

/* ---------- Tabellen ---------- */

.table-scroll {
	overflow-x: auto;
	margin: 0 0 24px;
	border: 1px solid var(--strich);
}

.table-scroll table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.table-scroll th,
.table-scroll td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--strich);
}

.table-scroll th {
	background: var(--bogen-tief);
	font: 600 0.875rem/1.35 var(--sans);
	color: var(--marine);
}

.table-scroll tr:last-child td { border-bottom: 0; }

/* ---------- Startseite ---------- */

.site-lead {
	display: grid;
	gap: 28px;
	padding-bottom: 36px;
	border-bottom: 2px solid var(--marine);
}

.site-lead h1 { margin-bottom: 12px; }

.site-lead .standfirst { margin-bottom: 14px; }

@media (min-width: 800px) {
	.site-lead { grid-template-columns: 1.15fr 1fr; align-items: start; }
}

.rubric {
	padding-top: 40px;
}

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 6px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--strich);
}

.section-head h2 { margin: 0; }

.section-head a {
	font: 500 0.8125rem/1 var(--sans);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.rubric-note {
	max-width: 68ch;
	margin: 14px 0 24px;
	color: var(--typo-matt);
}

.teaser-grid {
	display: grid;
	gap: 30px 26px;
	grid-template-columns: 1fr;
}

@media (min-width: 560px) { .teaser-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .teaser-grid { grid-template-columns: repeat(3, 1fr); } }

.teaser h3 { margin: 12px 0 7px; font-size: 1.0625rem; color: var(--marine); }

.teaser h3 a { color: inherit; text-decoration: none; }

.teaser h3 a:hover { color: var(--kupfer); }

.teaser p { margin: 0 0 8px; font-size: 0.9375rem; line-height: 1.55; }

.teaser .post-meta { margin: 0; font-size: 0.75rem; }

/* ---------- Redaktionskasten ---------- */

#redaktionsteam {
	margin-top: 56px;
	padding: 30px 26px;
	background: var(--bogen-tief);
	border-top: 2px solid var(--marine);
}

#redaktionsteam h2 { margin-top: 0; }

.editors {
	display: grid;
	gap: 26px;
	margin-top: 20px;
}

@media (min-width: 720px) { .editors { grid-template-columns: repeat(2, 1fr); } }

.editors h3 { margin: 0 0 6px; color: var(--marine); }

.editors p { margin: 0; font-size: 0.9375rem; }

.editors .role {
	display: block;
	margin-bottom: 8px;
	color: var(--kupfer);
	font: 600 0.75rem/1.3 var(--sans);
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* ---------- Fußzeile, dreispaltig ---------- */

#colophon {
	margin-top: 64px;
	padding-block: 38px 30px;
	background: var(--marine);
	color: #c3d5e4;
	font-size: 0.9375rem;
}

#colophon .shell {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	#colophon .shell { grid-template-columns: 1.3fr 1fr 1fr; }
}

.foot-col h2 {
	margin: 0 0 12px;
	color: #fff;
	font: 600 0.8125rem/1.3 var(--sans);
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.foot-col p { margin: 0 0 10px; }

.foot-col ul { margin: 0; padding: 0; list-style: none; }

.foot-col li { margin-bottom: 8px; }

.foot-col a {
	color: #dce8f1;
	text-decoration: none;
	border-bottom: 1px solid rgba(220, 232, 241, 0.35);
}

.foot-col a:hover { color: #fff; border-bottom-color: #fff; }

.foot-base {
	margin-top: 30px;
	padding-top: 16px;
	border-top: 1px solid rgba(195, 213, 228, 0.25);
	color: #9fb8cc;
	font: 0.8125rem/1.5 var(--sans);
}

/* ---------- Sammelseite ---------- */

.archive-intro { max-width: 70ch; margin: 0 0 32px; }

.archive-list { display: grid; gap: 26px; }

.archive-item {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--strich);
}

.archive-item:last-child { border-bottom: 0; }

.archive-list h2 { margin: 6px 0 8px; font-size: 1.1875rem; }

.archive-list h2 a { color: inherit; text-decoration: none; }

.archive-list h2 a:hover { color: var(--kupfer); }

.archive-list p { margin: 0; }

/* ---------- kleine Breiten ---------- */

@media (max-width: 700px) {
	body { font-size: 1.03125rem; }
	#content { padding-block: 28px 40px; }
	h2 { margin-top: 38px; }
	#masthead .shell { flex-direction: column; align-items: flex-start; gap: 10px; }
	#masthead .claim { text-align: left; }
	#masthead img { height: 38px; }
}

@media (max-width: 460px) {
	.shell { padding-left: 16px; padding-right: 16px; }
	#redaktionsteam { padding: 24px 16px; }
	#topbar nav ul { gap: 0 18px; font-size: 0.75rem; }
}