/* Beitragsinhalt: Artikel-Spalte, mitlaufende Seitenleiste, Inhaltsverzeichnis, TL;DR, Hinweis, CTA-Box */

:root { --agwp-sticky-top: 110px; } /* Abstand der mitlaufenden Leiste zum Fensterrand (Headerhoehe + Luft) */

/* ---- Artikel-Spalte (Custom CSS Class "agwp-article") ---- */
#top .agwp-article { max-width: 780px; }
#top .agwp-article .avia_textblock,
#top .agwp-article .avia_textblock :is(p, li) {
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--agwp-ink);
}
#top .agwp-article .avia_textblock p { margin: 0 0 1.1em; }
#top .agwp-article :is(h2, h3, h4) { scroll-margin-top: calc(var(--agwp-sticky-top) + 10px); }
#top .agwp-article h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; margin: 1.8em 0 .6em; }
#top .agwp-article h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.25; margin: 1.6em 0 .5em; }
#top .agwp-article .avia_textblock ul:not([class]) { margin: 0 0 1.2em; padding-left: 0; list-style: none; }
#top .agwp-article .avia_textblock ul:not([class]) > li { position: relative; padding-left: 26px; margin-bottom: .45em; }
#top .agwp-article .avia_textblock ul:not([class]) > li::before { content: "\2192"; position: absolute; left: 0; color: var(--agwp-accink); font-weight: 700; }
#top .agwp-article .avia_textblock ol:not([class]) { margin: 0 0 1.2em 1.2em; }
#top .agwp-article .avia_textblock blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--agwp-acc);
	font-family: var(--agwp-font-head);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--agwp-ink);
}

/* ---- Nummerierte Zwischenueberschriften (H2) ----
   Automatisch 01, 02 … in der Spalte "agwp-article". Symbole statt Nummer per Custom CSS Class
   an der Speziellen Ueberschrift (oder class am <h2>):
     agwp-h--check (✓)  agwp-h--faq (?)  agwp-h--info (i)  agwp-h--star (★)  agwp-h--none (ohne)
   Das Inhaltsverzeichnis uebernimmt Nummern und Symbole. Ausschalten: Spalte zusaetzlich "agwp-article--plain". */
#top .agwp-article:not(.agwp-article--plain) { counter-reset: agwp-h2; }
#top .agwp-article:not(.agwp-article--plain) h2 { counter-increment: agwp-h2; }
#top .agwp-article:not(.agwp-article--plain) h2::before {
	content: counter(agwp-h2, decimal-leading-zero);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	margin-right: 14px;
	padding: 5px 8px;
	border-radius: 8px;
	background: var(--agwp-accsoft);
	color: var(--agwp-accink);
	font: 500 .8125rem/1 var(--agwp-font-mono);
	letter-spacing: 0;
	vertical-align: .35em;
}
#top .agwp-article :is(.agwp-h--check, .agwp-h--faq, .agwp-h--info, .agwp-h--star, .agwp-h--none) h2,
#top .agwp-article h2:is(.agwp-h--check, .agwp-h--faq, .agwp-h--info, .agwp-h--star, .agwp-h--none) { counter-increment: none; }
#top .agwp-article .agwp-h--check h2::before, #top .agwp-article h2.agwp-h--check::before { content: "\2713"; }
#top .agwp-article .agwp-h--faq h2::before,   #top .agwp-article h2.agwp-h--faq::before   { content: "?"; }
#top .agwp-article .agwp-h--info h2::before,  #top .agwp-article h2.agwp-h--info::before  { content: "i"; }
#top .agwp-article .agwp-h--star h2::before,  #top .agwp-article h2.agwp-h--star::before  { content: "\2605"; }
#top .agwp-article .agwp-h--none h2::before,  #top .agwp-article h2.agwp-h--none::before  { content: none; }
/* Enfold-Zierlinien der Speziellen Ueberschrift im Artikel ausblenden */
#top .agwp-article .av-special-heading { padding-bottom: 0; }

/* ---- Callouts: TIPP / ACHTUNG / INFO / WICHTIG / ERGEBNIS ---- */
#top .agwp-callout {
	--c-bg: var(--agwp-accsoft);
	--c-line: color-mix(in oklab, var(--agwp-acc) 35%, transparent);
	--c-label: var(--agwp-accink);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 6px 18px;
	margin: 24px 0;
	padding: 20px 24px;
	border-radius: var(--agwp-r-md);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
}
#top .agwp-callout--warning { --c-bg: color-mix(in oklab, #E9B949 16%, var(--agwp-bg2)); --c-line: color-mix(in oklab, #E9B949 55%, transparent); --c-label: #9A6B00; }
#top .agwp-callout--danger  { --c-bg: color-mix(in oklab, var(--agwp-danger) 10%, var(--agwp-bg2)); --c-line: color-mix(in oklab, var(--agwp-danger) 45%, transparent); --c-label: #C2272D; }
#top .agwp-callout--success { --c-bg: color-mix(in oklab, var(--agwp-success) 10%, var(--agwp-bg2)); --c-line: color-mix(in oklab, var(--agwp-success) 40%, transparent); --c-label: #15803D; }
#top .agwp-callout--info    { --c-bg: var(--agwp-surf); --c-line: transparent; --c-label: var(--agwp-ink2); }
html[data-theme="dark"] #top .agwp-callout--warning { --c-label: #F2C862; }
html[data-theme="dark"] #top .agwp-callout--danger  { --c-label: #FF8A8E; }
html[data-theme="dark"] #top .agwp-callout--success { --c-label: #5EE08F; }

#top .agwp-callout .agwp-callout__label {
	padding-top: 3px;
	font: 700 .6875rem/1.4 var(--agwp-font-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-label);
}
#top .agwp-callout .agwp-callout__text,
#top .agwp-callout .agwp-callout__text p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--agwp-ink); }
#top .agwp-callout .agwp-callout__text p + p { margin-top: .6em; }
@media (max-width: 480px) {
	#top .agwp-callout { grid-template-columns: 1fr; }
}

/* ---- Balkendiagramm [agwp_bars] ---- */
#top .agwp-bars {
	margin: 28px 0;
	padding: 24px 26px;
	border-radius: var(--agwp-r-lg);
	background: var(--agwp-bg2);
	border: 1px solid var(--agwp-line);
}
#top .agwp-bars .agwp-bars__title { margin: 0 0 16px; font: 500 .8125rem/1.4 var(--agwp-font-mono); color: var(--agwp-ink2); }
#top .agwp-bars .agwp-bars__list { display: flex; flex-direction: column; gap: 14px; margin: 0; }
#top .agwp-bars .agwp-bars__row { display: grid; grid-template-columns: minmax(60px, 80px) minmax(0, 1fr); gap: 16px; align-items: center; }
#top .agwp-bars dt { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--agwp-ink); }
#top .agwp-bars dd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; margin: 0; }
#top .agwp-bars .agwp-bars__track { display: block; height: 10px; border-radius: var(--agwp-r-pill); background: var(--agwp-surf); overflow: hidden; }
#top .agwp-bars .agwp-bars__track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2464D8 0%, #1DA8EB 55%, #67D9E9 100%); }
#top .agwp-bars .agwp-bars__val { min-width: 64px; text-align: right; font: 500 .875rem/1 var(--agwp-font-mono); color: var(--agwp-ink2); }
#top .agwp-bars .is-highlight dt,
#top .agwp-bars .is-highlight .agwp-bars__val { color: var(--agwp-accink); }

/* ---- Tabelle [agwp_table] ----
   Transparent auf dem Seitenhintergrund, Kopfzeile grau. Enfold-Tabellenstile (Grossbuchstaben,
   Streifen, Rahmen, eigene Schriftgroessen) werden hier neutralisiert. */
#top .agwp-table { margin: 28px 0; }
#top .agwp-table .agwp-table__scroll {
	overflow-x: auto;
	border-radius: var(--agwp-r-lg);
	border: 1px solid var(--agwp-line);
	background: transparent;
}
#top .agwp-table table { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: transparent; box-shadow: none; }
#top .agwp-table caption { padding: 14px 20px 0; text-align: left; font-weight: 700; color: var(--agwp-ink); caption-side: top; }
#top .agwp-table :is(th, td),
#top .agwp-table tbody tr:nth-child(n) :is(th, td) {
	padding: 17px 20px;
	border: 0;
	border-top: 1px solid var(--agwp-line);
	background: transparent;
	text-align: left;
	vertical-align: middle;
	font-family: var(--agwp-font-body);
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--agwp-ink2);
	white-space: nowrap;
}
#top .agwp-table thead th,
#top .agwp-table thead tr:nth-child(n) th {
	padding-top: 14px;
	padding-bottom: 14px;
	border-top: 0;
	background: var(--agwp-surf);
	font: 600 .6875rem/1.4 var(--agwp-font-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--agwp-ink2);
}
#top .agwp-table tbody tr:nth-child(n) th { font-weight: 700; color: var(--agwp-ink); }
#top .agwp-table tr:nth-child(n) .is-hi { color: var(--agwp-accink); }
#top .agwp-table tbody tr:nth-child(n) .is-hi { font-weight: 800; }
#top .agwp-table tr,
#top .agwp-table tr:nth-child(even) { background: transparent; }
#top .agwp-table p.agwp-table__note,
#top .agwp-bars p.agwp-bars__note { margin: 12px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--agwp-ink2); }

/* ---- Mitlaufende Seitenleiste ----
   Funktioniert mit und ohne Enfold-Einstellung "gleiche Hoehe":
   1. Die Spaltenreihe wird gestreckt, damit die Leisten-Spalte so hoch ist wie der Artikel.
   2. Alle Vorfahren der Leiste bekommen overflow-x: clip statt hidden – "hidden" macht ein
      Element zum Scroll-Container, und dann bleibt "sticky" wirkungslos. */
@media only screen and (min-width: 768px) {
	/* Spaltenreihe als Flex-Reihe (Tabellen- und Float-Modus). #wrap_all + !important, weil Enfold
	   die Spalten mit eigenen, stark gewichteten Regeln als Tabelle bzw. Floats setzt. */
	#top #wrap_all .flex_column_table:has(.agwp-aside),
	#top #wrap_all .entry-content-wrapper:has(> .flex_column .agwp-aside) {
		display: flex !important;
		flex-wrap: wrap;
		align-items: stretch !important;
	}
	#top #wrap_all .flex_column_table:has(.agwp-aside) { flex-wrap: nowrap; }
	#top #wrap_all .entry-content-wrapper:has(> .flex_column .agwp-aside) > .flex_column { float: none; }
	#top #wrap_all .entry-content-wrapper:has(> .flex_column .agwp-aside)::before,
	#top #wrap_all .entry-content-wrapper:has(> .flex_column .agwp-aside)::after { display: none; }

	/* Die Enfold-Huellen um die Leiste (Codeblock-Section + Div) "aufloesen", damit die Spalte
	   selbst der Rahmen fuer das Mitlaufen ist – sonst ist der Rahmen nur so hoch wie die Leiste. */
	#top #wrap_all .flex_column:has(.agwp-aside) :is(section, div):has(.agwp-aside) { display: contents !important; }
	#top #wrap_all .flex_column:has(.agwp-aside) { height: auto; }

	#top #wrap_all .agwp-aside { position: sticky !important; top: var(--agwp-sticky-top); z-index: 2; }

	/* overflow:hidden auf Vorfahren macht sticky wirkungslos – auch auf <html>/<body>:
	   Enfold setzt dort overflow-x: hidden (html.responsive, .responsive body). "clip" schneidet
	   genauso ab, erzeugt aber keinen Scroll-Container. */
	html:has(.agwp-aside),
	html:has(.agwp-aside) body { overflow-x: clip !important; }
	body:has(.agwp-aside) :has(.agwp-aside) { overflow-x: clip !important; overflow-y: visible !important; }
}
#top .agwp-aside > * + * { margin-top: 16px; }

/* ---- Inhaltsverzeichnis ---- */
#top .agwp-toc {
	padding: 22px;
	border-radius: var(--agwp-r-lg);
	background: var(--agwp-bg2);
	border: 1px solid var(--agwp-line);
}
#top .agwp-toc .agwp-toc__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-weight: 700; font-size: .9375rem; color: var(--agwp-ink); }
#top .agwp-toc .agwp-toc__pct { font: 500 .75rem/1 var(--agwp-font-mono); color: var(--agwp-accink); }
#top :is(.agwp-toc, .agwp-toc-mobile) .agwp-toc__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
#top :is(.agwp-toc, .agwp-toc-mobile) .agwp-toc__list li { margin: 0; padding: 0; list-style: none; }
#top :is(.agwp-toc, .agwp-toc-mobile) .agwp-toc__list a {
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--agwp-ink2);
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
#top :is(.agwp-toc, .agwp-toc-mobile) .agwp-toc__list a:hover { background: var(--agwp-surf); color: var(--agwp-ink); }
#top :is(.agwp-toc, .agwp-toc-mobile) .agwp-toc__list li.is-active > a { background: var(--agwp-accsoft); color: var(--agwp-ink); font-weight: 700; }
#top :is(.agwp-toc, .agwp-toc-mobile) .agwp-toc__list li.is-sub > a { padding-left: 30px; font-size: .875rem; }
#top :is(.agwp-toc, .agwp-toc-mobile) .agwp-toc__num { flex: none; min-width: 20px; font: 500 .75rem/1 var(--agwp-font-mono); color: var(--agwp-accink); }

/* Mobil: aufklappbar im Artikel, Seitenleisten-Variante ausblenden */
#top .agwp-toc-mobile { display: none; }
@media only screen and (max-width: 767px) {
	#top .agwp-aside .agwp-toc { display: none; }
	#top .agwp-toc-mobile {
		display: block;
		margin: 0 0 28px;
		padding: 14px 18px;
		border-radius: var(--agwp-r-md);
		background: var(--agwp-bg2);
		border: 1px solid var(--agwp-line);
	}
	#top .agwp-toc-mobile summary { cursor: pointer; font-weight: 700; color: var(--agwp-ink); }
	#top .agwp-toc-mobile[open] summary { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.agwp-toc) { scroll-behavior: smooth; }
}

/* ---- TL;DR ---- */
#top .agwp-tldr {
	margin: 0 0 32px;
	padding: 26px 28px;
	border-radius: var(--agwp-r-lg);
	background: var(--agwp-bg2);
	border: 1px solid var(--agwp-line);
}
#top .agwp-tldr .agwp-tldr__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
#top .agwp-tldr .agwp-tldr__title { margin: 0; font-family: var(--agwp-font-head); font-size: 1.25rem; font-weight: 700; color: var(--agwp-ink); }
#top .agwp-tldr .agwp-tldr__badge {
	padding: 4px 9px;
	border-radius: var(--agwp-r-pill);
	background: var(--agwp-accsoft);
	font: 500 .6875rem/1.2 var(--agwp-font-mono);
	color: var(--agwp-accink);
}
#top .agwp-tldr .agwp-tldr__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
#top .agwp-tldr .agwp-tldr__list li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--agwp-ink2);
	list-style: none;
}
#top .agwp-tldr .agwp-tldr__list li::before { content: "\2192"; color: var(--agwp-accink); font-weight: 700; }
#top .agwp-tldr .agwp-tldr__list strong { color: var(--agwp-ink); }

/* ---- Hinweis-Box ---- */
#top .agwp-note {
	margin: 28px 0;
	padding: 22px 24px;
	border-radius: var(--agwp-r-md);
	background: var(--agwp-surf);
}
#top .agwp-note .agwp-note__title { margin: 0 0 8px; font-family: var(--agwp-font-head); font-size: 1.0625rem; font-weight: 700; color: var(--agwp-ink); }
#top .agwp-note .agwp-note__text,
#top .agwp-note .agwp-note__text p { margin: 0; font-size: .96875rem; line-height: 1.65; color: var(--agwp-ink2); }
#top .agwp-note .agwp-note__text p + p { margin-top: .6em; }

/* ---- CTA-Box (dunkel) ---- */
#top .agwp-ctabox {
	padding: 26px;
	border-radius: var(--agwp-r-lg);
	background: var(--agwp-code);
	color: #E9EEF2;
}
#top .agwp-ctabox .agwp-ctabox__kicker { margin-bottom: 10px; font: 500 .75rem/1.4 var(--agwp-font-mono); color: #67D9E9; }
#top .agwp-ctabox .agwp-ctabox__kicker::before { content: "// "; }
#top .agwp-ctabox .agwp-ctabox__title { margin: 0 0 8px; font-family: var(--agwp-font-head); font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: #fff; }
#top .agwp-ctabox .agwp-ctabox__text { margin: 0 0 18px; font-size: .9375rem; line-height: 1.55; color: #A6B1BC; }
#top .agwp-ctabox .agwp-ctabox__btn {
	display: inline-flex;
	padding: 12px 18px;
	border-radius: var(--agwp-r-pill);
	background: var(--agwp-acc);
	color: var(--agwp-onacc);
	font-size: .9375rem;
	font-weight: 800;
	text-decoration: none;
	transition: transform .2s, box-shadow .2s;
}
#top .agwp-ctabox .agwp-ctabox__btn::after { content: " \2192"; white-space: pre; }
#top .agwp-ctabox .agwp-ctabox__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--agwp-glow); color: var(--agwp-onacc); }