/* Ratgeber-Artikel: gemeinsame Bausteine aller Artikel unter /blog/<slug>/.
 * Artikel-eigene Regeln stehen weiter im <style> der jeweiligen Seite.
 * Aenderung hier -> ?v= in allen 7 Artikeln hochzaehlen. */

.post-hero {
	background: radial-gradient(circle at 16% 28%, rgba(0, 82, 255, .22) 0, transparent 42%), radial-gradient(circle at 86% 12%, rgba(96, 165, 250, .12) 0, transparent 36%), linear-gradient(180deg, var(--night) 0, #0b1539 100%);
	overflow: hidden;
	padding: clamp(28px, 5vw, 52px) 0 clamp(40px, 6vw, 72px);
	position: relative
}

.post-hero .container {
	max-width: 840px;
	position: relative;
	z-index: 1
}

.post-crumb {
	color: var(--night-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .82rem;
	font-weight: 600;
	margin-bottom: 26px
}

.post-crumb a {
	color: var(--night-muted);
	text-decoration: none;
	transition: var(--transition)
}

.post-crumb a {
	/* Tippflaeche 45px hoch, ohne dass sich die Zeile verschiebt */
	padding-block: 12px;
	margin-block: -12px
}

.post-crumb a:hover {
	color: #fff
}

.post-crumb span[aria-current] {
	color: var(--night-text)
}

.post-hero .eyebrow {
	color: #60a5fa
}

.post-hero h1 {
	color: var(--white);
	font-size: clamp(1.9rem, 4.8vw, 3.2rem);
	letter-spacing: -.03em;
	text-wrap: balance
}

.post-lead {
	color: var(--night-text);
	font-size: 1.16rem;
	line-height: 1.65;
	margin-top: 22px;
	max-width: 720px
}

.post-byline {
	align-items: center;
	color: var(--night-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	font-size: .85rem;
	font-weight: 600;
	margin-top: 26px
}

.post-byline img {
	border-radius: 50%;
	height: 30px;
	width: 30px;
	object-fit: cover;
	vertical-align: middle
}

.post-byline .dot {
	color: rgba(159, 171, 197, .45)
}

.post-main {
	background: var(--bg-light);
	padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px)
}

.post-wrap {
	background: var(--white);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px -44px rgba(11, 19, 55, .4);
	margin: 0 auto;
	max-width: 800px;
	padding: clamp(26px, 5vw, 56px)
}

.post-content {
	color: var(--text);
	font-size: 1.05rem;
	line-height: 1.75
}

.post-content > p {
	margin: 0 0 20px
}

.post-content h2 {
	font-size: clamp(1.45rem, 3vw, 1.95rem);
	margin: 48px 0 16px;
	padding-top: 8px;
	scroll-margin-top: 96px
}

.post-content h2:first-of-type {
	margin-top: 8px
}

.post-content ul,
.post-content ol {
	margin: 0 0 22px;
	padding-left: 1.3em
}

.post-content li {
	margin-bottom: 9px
}

.post-content strong {
	color: var(--dark)
}

.post-tldr {
	background: linear-gradient(180deg, rgba(0, 82, 255, .05), rgba(0, 82, 255, .02));
	border: 1px solid rgba(0, 82, 255, .18);
	border-left: 1px solid rgba(0, 82, 255, .18);
	border-radius: var(--radius-md);
	margin: 0 0 18px;
	padding: 22px 24px
}

.post-tldr-label {
	align-items: center;
	color: var(--primary);
	display: inline-flex;
	font-size: .78rem;
	font-weight: 800;
	gap: 8px;
	letter-spacing: .08em;
	margin-bottom: 10px;
	text-transform: uppercase
}

.post-toc {
	background: var(--bg-light);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	margin: 0 0 36px;
	padding: 22px 26px
}

.post-toc strong {
	display: block;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .08em;
	margin-bottom: 12px;
	text-transform: uppercase;
	color: var(--light-text)
}

.post-toc ol {
	columns: 2;
	column-gap: 28px;
	margin: 0;
	padding-left: 1.2em
}

.post-toc a {
	color: var(--text);
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none
}

.post-toc a:hover {
	color: var(--primary)
}

.post-table {
	border: 1px solid rgba(11, 19, 55, .08);
	border-radius: 12px;
	margin: 0 0 24px;
	overflow-x: auto;
	scrollbar-color: rgba(0, 82, 255, .55) rgba(11, 19, 55, .08);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch
}

.post-table::-webkit-scrollbar {
	height: 9px
}

.post-table::-webkit-scrollbar-track {
	background: rgba(11, 19, 55, .06);
	border-radius: 999px
}

.post-table::-webkit-scrollbar-thumb {
	background: rgba(0, 82, 255, .45);
	border-radius: 999px
}

.post-table.is-scrollable {
	box-shadow: inset -18px 0 16px -18px rgba(11, 19, 55, .45), inset 18px 0 16px -18px rgba(11, 19, 55, .28)
}

.post-table.is-scrollable.is-at-start {
	box-shadow: inset -18px 0 16px -18px rgba(11, 19, 55, .45)
}

.post-table.is-scrollable.is-at-end {
	box-shadow: inset 18px 0 16px -18px rgba(11, 19, 55, .28)
}

.post-table table {
	border-collapse: collapse;
	font-size: .95rem;
	min-width: 520px;
	width: 100%
}

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

.post-table tbody tr:last-child td {
	border-bottom: none
}

.post-cta {
	background: radial-gradient(circle at 12% 18%, rgba(0, 82, 255, .08) 0, transparent 50%), var(--bg-light);
	border: 1px solid rgba(0, 82, 255, .16);
	border-radius: var(--radius-lg);
	margin: 34px 0;
	padding: clamp(24px, 4vw, 38px);
	text-align: center
}

.post-author img {
	border-radius: 50%;
	flex-shrink: 0;
	height: 64px;
	width: 64px;
	object-fit: cover
}

.post-author p {
	color: var(--light-text);
	font-size: .96rem;
	line-height: 1.6;
	margin: 0
}

.post-faq details {
	border-bottom: 1px solid var(--border-color);
	padding: 4px 0
}

.post-faq summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--dark);
	list-style: none;
	padding: 16px 30px 16px 0;
	position: relative
}

.post-faq summary::-webkit-details-marker {
	display: none
}

.post-faq details[open] summary::after {
	content: "\2212"
}

.post-faq details p {
	color: var(--text);
	margin: 0 0 16px;
	padding-right: 12px
}

.post-sources {
	border-top: 1px solid var(--border-color);
	margin-top: 44px;
	padding-top: 22px
}

.post-sources strong {
	display: block;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .08em;
	margin-bottom: 12px;
	text-transform: uppercase;
	color: var(--light-text)
}

html{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:2000;pointer-events:none;background:transparent}

.read-progress>span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--primary),#3b82f6)}

.post-shell{max-width:800px;margin:0 auto}

.post-side{display:none}

@media (min-width:1080px){
		.post-shell{max-width:1100px;display:grid;grid-template-columns:minmax(0,720px) 248px;gap:36px;justify-content:center;align-items:start}
		.post-wrap{max-width:none;margin:0}
		.post-toc{display:none}
		.post-side{display:block;position:sticky;top:92px}
		}

.post-side-inner{max-height:calc(100vh - 116px);overflow-y:auto;padding-right:4px}

.post-side-h{margin:0 0 12px;padding-left:14px;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--light-text)}

.nav-g{margin-bottom:16px}

.nav-gh{margin:0 0 5px;padding-left:14px;font-size:.8rem;font-weight:800;color:var(--dark)}

.post-side ul,.toc-sheet ul{list-style:none;margin:0;padding:0}

.post-side a,.toc-sheet a{display:block;padding:5px 12px;border-left:2px solid transparent;border-radius:0 7px 7px 0;font-size:.86rem;line-height:1.35;color:var(--light-text);text-decoration:none;transition:color .15s,background .15s,border-color .15s}

.post-side a:hover,.toc-sheet a:hover{color:var(--primary);background:rgba(0,82,255,.05)}

.post-side a.is-active,.toc-sheet a.is-active{color:var(--primary);font-weight:700;border-left-color:var(--primary);background:rgba(0,82,255,.07)}

.toc-wrap{margin-top:4px}

.toc-g{break-inside:avoid;margin-bottom:14px}

.toc-gh{margin:0 0 6px;font-size:.92rem;font-weight:800;color:var(--dark)}

.post-toc .toc-g ul{list-style:none;margin:0;padding:0}

.post-toc .toc-g li{margin-bottom:6px}

@media (min-width:560px){.toc-wrap{columns:2;column-gap:30px}}

.to-top{position:fixed;right:18px;bottom:18px;z-index:1500;width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--border-color);border-radius:50%;background:var(--white);color:var(--primary);font-size:1rem;cursor:pointer;box-shadow:0 12px 30px -14px rgba(11,19,55,.5);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s}

.to-top.show{opacity:1;visibility:visible;transform:none}

.toc-fab{display:none}

@media (max-width:1079px){
		.toc-fab{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1500;align-items:center;gap:8px;padding:11px 18px;border:none;border-radius:999px;background:var(--dark);color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;box-shadow:0 14px 32px -12px rgba(11,19,55,.55)}
		.toc-fab{display:inline-flex}
		}

.toc-sheet{position:fixed;inset:0;z-index:2500;display:flex;align-items:flex-end;background:rgba(11,19,55,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}

.toc-sheet.is-open{opacity:1;visibility:visible;transition:opacity .25s}

.toc-sheet-panel{width:100%;max-height:80dvh;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px calc(28px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:var(--white);transform:translateY(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}

.toc-sheet.is-open .toc-sheet-panel{transform:none}

.toc-sheet-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:2px 0 10px;background:var(--white)}

.toc-sheet-head strong{font-size:1rem;color:var(--dark)}

.toc-sheet-x{width:44px;height:44px;flex-shrink:0;border:none;border-radius:50%;background:rgba(11,19,55,.06);color:var(--text);font-size:1rem;cursor:pointer}

.toc-sheet .nav-gh{margin:0 0 4px;padding-left:12px;font-size:.82rem;font-weight:800;color:var(--dark)}

.toc-sheet .nav-g{margin-bottom:14px}

.toc-sheet a{padding-top:12px;padding-bottom:12px;min-height:44px}

@media (prefers-reduced-motion:reduce){.to-top,.toc-sheet,.toc-sheet-panel{transition:none}}

/* Tippflaechen: Sprunglinks unter "Auf einen Blick" und die "Als Text"-Aufklapper auf 44px.
 * Mehr Spezifitaet als die Artikel-Regeln, weil diese Datei vor dem Artikel-<style> geladen wird. */
p.post-tldr-cta {
	row-gap: 10px
}

p.post-tldr-cta a {
	padding-block: 8.5px;
	margin-block: -8.5px
}

details.post-altview>summary {
	padding-block: 9.5px;
	margin-block: -3.5px
}

a.post-pdf-btn {
	padding-block: 9.5px
}