/* Netz Linking – funktionale Basis-Styles. Optik kommt aus dem Theme ueber CSS-Variablen. */
:root {
	--netz-fg: currentColor;
	--netz-bg: transparent;
	--netz-surface: color-mix(in srgb, currentColor 5%, transparent);
	--netz-line: color-mix(in srgb, currentColor 15%, transparent);
	--netz-muted: color-mix(in srgb, currentColor 65%, transparent);
	--netz-accent: #0a66c2;
	--netz-accent-fg: #fff;
	--netz-radius: 10px;
	--netz-gap: 1rem;
	--netz-shadow: 0 6px 24px rgb(0 0 0 / .08);
}

/* Breadcrumbs */
.netz-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .875rem; color: var(--netz-muted); }
.netz-breadcrumbs li + li::before { content: "›"; margin-right: .5rem; opacity: .6; }
.netz-breadcrumbs a { color: inherit; }

/* Karten */
.netz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--netz-gap); }
.netz-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--netz-surface); border: 1px solid var(--netz-line); border-radius: var(--netz-radius); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.netz-card:hover, .netz-card:focus-visible { transform: translateY(-3px); box-shadow: var(--netz-shadow); }
.netz-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.netz-card__body { padding: .75rem .9rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.netz-card__silo { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--netz-accent); font-weight: 700; }
.netz-card__title { font-weight: 650; line-height: 1.3; }

/* Antwortbox */
.netz-answer { border-left: 4px solid var(--netz-accent); background: var(--netz-surface); padding: 1rem 1.2rem; border-radius: 0 var(--netz-radius) var(--netz-radius) 0; margin: 0 0 1.5rem; }
.netz-answer__label { margin: 0 0 .3rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--netz-accent); }
.netz-answer__text { margin: 0; font-size: 1.05rem; line-height: 1.55; }

/* Weiter im Thema / Empfehlungen / Netzwerk */
.netz-weiter { margin: 2rem 0; padding: 1rem; border: 1px dashed var(--netz-line); border-radius: var(--netz-radius); }
.netz-weiter .netz-card { flex-direction: row; align-items: center; }
.netz-weiter .netz-card__img { width: 8rem; aspect-ratio: 4 / 3; flex: none; }
.netz-weiter__label, .netz-xsilo__title, .netz-used__title, .netz-video__title, .netz-feed__title, .netz-network__label { font-weight: 750; margin: 0 0 .6rem; }
.netz-xsilo, .netz-used { margin: 3rem 0 2rem; }
.netz-network { margin: 2rem 0; padding: .9rem 1.1rem; background: var(--netz-surface); border-radius: var(--netz-radius); }
.netz-network__label { font-size: .85rem; color: var(--netz-muted); margin-bottom: .2rem; }

/* TOC + Silo-Nav */
.netz-toc, .netz-silonav { font-size: .925rem; }
.netz-toc summary, .netz-silonav summary { font-weight: 700; cursor: pointer; padding: .4rem 0; }
.netz-toc ol, .netz-silonav ul { margin: .3rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.netz-toc__h3 { margin-left: .9rem; font-size: .9em; }
.netz-toc a, .netz-silonav a { color: inherit; text-decoration: none; }
.netz-toc a:hover, .netz-silonav a:hover { text-decoration: underline; }
.netz-toc a.is-active { color: var(--netz-accent); font-weight: 650; }
.netz-silonav a[aria-current] { color: var(--netz-accent); font-weight: 700; }
.netz-silonav__hub a { font-weight: 650; }
@media (min-width: 1024px) {
	.netz-sticky { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: auto; }
}

/* Mega-Menue */
.netz-mega { position: static; }
.netz-mega__toggle { font: inherit; font-weight: 650; background: none; border: 1px solid var(--netz-line); border-radius: 999px; padding: .45rem 1rem; cursor: pointer; color: inherit; display: inline-flex; gap: .4rem; align-items: center; }
.netz-mega__toggle::after { content: ""; width: .5rem; height: .5rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.netz-mega__toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.netz-mega__panel { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: var(--wp--preset--color--base, #fff); color: var(--wp--preset--color--contrast, #111); box-shadow: var(--netz-shadow); padding: 1.5rem max(16px, calc((100vw - 1200px) / 2)); border-top: 1px solid var(--netz-line); }
.netz-mega.is-open .netz-mega__panel { display: block; animation: netz-drop .22s ease-out; }
.netz-mega__silos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem 2rem; }
.netz-mega__head { display: flex; align-items: center; gap: .7rem; font-weight: 750; font-size: 1.05rem; text-decoration: none; color: inherit; }
.netz-mega__head img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.netz-mega__desc { margin: .35rem 0; font-size: .85rem; color: var(--netz-muted); }
.netz-mega__tops { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.netz-mega__tops a { color: inherit; }
.netz-mega__extra { list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--netz-line); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.netz-mega__extra a { font-weight: 650; color: inherit; }
@keyframes netz-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Buttons */
.netz-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 700; text-decoration: none; background: var(--netz-accent); color: var(--netz-accent-fg) !important; transition: transform .15s ease, filter .15s; }
.netz-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.netz-btn--youtube { background: #e00; } .netz-btn--tiktok { background: #111; } .netz-btn--instagram { background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af); }
.netz-btn--facebook { background: #1877f2; } .netz-btn--linkedin { background: #0a66c2; }

/* Themen */
.netz-topics ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.netz-topics a { color: inherit; text-decoration: none; }
.netz-topics--band ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--netz-gap); }
.netz-topics--band a { display: grid; border-radius: var(--netz-radius); overflow: hidden; position: relative; min-height: 11rem; color: #fff; background: #222; }
.netz-topics--band img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.netz-topics--band a:hover img { transform: scale(1.06); }
.netz-topics--band .netz-topics__name, .netz-topics--band .netz-topics__desc { grid-area: 1 / 1; align-self: end; padding: 1rem; position: relative; z-index: 1; }
.netz-topics--band .netz-topics__name { font-weight: 800; font-size: 1.2rem; padding-bottom: 2.4rem; text-shadow: 0 1px 8px rgb(0 0 0 / .6); }
.netz-topics--band .netz-topics__desc { font-size: .85rem; opacity: .9; }
.netz-topics--band a::after { content: ""; grid-area: 1 / 1; background: linear-gradient(transparent 35%, rgb(0 0 0 / .75)); }

/* Serie */
.netz-series { margin: 1.5rem 0; padding: 1rem 1.2rem; border-radius: var(--netz-radius); background: var(--netz-surface); }
.netz-series + .netz-series { margin-top: -.75rem; }
.netz-series__title { margin: 0 0 .5rem; }
.netz-series__bar { height: 6px; background: var(--netz-line); border-radius: 3px; overflow: hidden; }
.netz-series__bar span { display: block; height: 100%; background: var(--netz-accent); }
.netz-series__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: .7rem; flex-wrap: wrap; }

/* Suche */
.netz-search { position: relative; }
.netz-search input { font: inherit; width: 100%; min-width: 12rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--netz-line); background: var(--netz-bg); color: inherit; }
.netz-search__list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + .3rem); list-style: none; margin: 0; padding: .3rem; background: var(--wp--preset--color--base, #fff); color: var(--wp--preset--color--contrast, #111); border-radius: var(--netz-radius); box-shadow: var(--netz-shadow); min-width: 18rem; }
.netz-search__list a { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .6rem; border-radius: 6px; color: inherit; text-decoration: none; }
.netz-search__list a:hover, .netz-search__list a[aria-selected="true"] { background: var(--netz-surface); }
.netz-search__list small { color: var(--netz-muted); }

/* Glossar-Tooltip + A-Z */
a.netz-glossar { text-decoration: underline dotted; text-underline-offset: 3px; position: relative; }
a.netz-glossar[data-tip]:hover::after, a.netz-glossar[data-tip]:focus-visible::after {
	content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: min(20rem, 80vw);
	background: #111; color: #fff; font-size: .82rem; line-height: 1.4; padding: .55rem .7rem; border-radius: 8px; z-index: 40; box-shadow: var(--netz-shadow); pointer-events: none; animation: netz-fade .15s ease-out;
}
@keyframes netz-fade { from { opacity: 0; } to { opacity: 1; } }
.netz-az__nav ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .35rem; position: sticky; top: 4.5rem; background: var(--wp--preset--color--base, #fff); padding-block: .5rem; z-index: 5; }
.netz-az__nav a { display: grid; place-items: center; min-width: 2.2rem; height: 2.2rem; border-radius: 8px; border: 1px solid var(--netz-line); text-decoration: none; color: inherit; font-weight: 700; }
.netz-az__nav a:hover { background: var(--netz-accent); color: var(--netz-accent-fg); }
.netz-az__letter { font-size: 2rem; font-weight: 800; color: var(--netz-accent); margin: 1.5rem 0 .5rem; }
.netz-az dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: .2rem 2rem; }
.netz-az dt { font-weight: 700; margin-top: .6rem; }
.netz-az dd { margin: 0; font-size: .9rem; color: var(--netz-muted); }

/* Video */
.netz-video { margin: 2rem 0; }
.netz-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--netz-radius); overflow: hidden; background: #000; }
.netz-video--short .netz-video__frame { aspect-ratio: 9 / 16; max-width: 22rem; }
.netz-video__frame img, .netz-video__frame iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.netz-video__play { position: absolute; inset: 0; border: 0; background: rgb(0 0 0 / .35); color: #fff; font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer; display: grid; place-content: center; gap: .4rem; text-align: center; }
.netz-video__play::before { content: ""; width: 4.5rem; height: 4.5rem; margin: 0 auto; border-radius: 50%; background: var(--netz-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 55% no-repeat; transition: transform .2s; animation: netz-pulse 2.4s ease-in-out infinite; }
.netz-video__play:hover::before { transform: scale(1.1); }
.netz-video__play span { font-size: .75rem; font-weight: 400; opacity: .85; }
@keyframes netz-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--netz-accent) 60%, transparent); } 50% { box-shadow: 0 0 0 14px transparent; } }

/* Follow / Share / Social */
.netz-follow { margin: 2.5rem 0; padding: 1.4rem; border-radius: var(--netz-radius); background: var(--netz-surface); text-align: center; }
.netz-follow__title { font-weight: 750; font-size: 1.1rem; margin: 0 0 .9rem; }
.netz-follow__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.netz-share { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0; }
.netz-share__label { font-weight: 650; margin-right: .3rem; }
.netz-share a, .netz-share button { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--netz-line); color: inherit; background: none; cursor: pointer; }
.netz-share a:hover, .netz-share button:hover { background: var(--netz-accent); color: var(--netz-accent-fg); border-color: transparent; }
.netz-share button.is-copied { background: #2a2; color: #fff; }
.netz-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.netz-social a { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem; border-radius: 8px; color: inherit; text-decoration: none; }
.netz-social a:hover { color: var(--netz-accent); }
.netz-social--labels a { padding: .35rem .7rem; border: 1px solid var(--netz-line); border-radius: 999px; font-size: .85rem; }

/* Social-Feed */
.netz-feed__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.netz-feed__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10rem, 1fr); gap: var(--netz-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
.netz-feed__item { scroll-snap-align: start; text-decoration: none; color: inherit; font-weight: 650; font-size: .9rem; }
.netz-feed__item img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--netz-radius); display: block; margin-bottom: .4rem; }

/* FAQ / Quellen / Pager / Ads */
.netz-faq details { border-bottom: 1px solid var(--netz-line); padding: .8rem 0; }
.netz-faq summary { font-weight: 700; cursor: pointer; }
.netz-quellen { margin: 2rem 0; font-size: .875rem; color: var(--netz-muted); }
.netz-pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 2rem 0; }
.netz-ad { margin: 2rem 0; min-height: 280px; display: grid; align-content: start; }
.netz-ad__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--netz-muted); margin-bottom: .3rem; }
.netz-sitemap { columns: 18rem; gap: 2rem; }
.netz-sitemap section { break-inside: avoid; margin-bottom: 1.5rem; }

/* Einblend-Animation (nur ohne reduce-motion; JS setzt .netz-reveal / .is-in) */
.netz-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.netz-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.netz-reveal { opacity: 1; transform: none; }
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Anfrage: Hinweisbox im Artikel und Formular */
.netz-leadbox { display: grid; gap: .7rem; justify-items: start; margin-block: 2rem; padding: 1.3rem 1.4rem; border-radius: var(--netz-radius); background: color-mix(in srgb, var(--netz-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--netz-accent) 28%, transparent); }
.netz-leadbox__kicker { margin: 0; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--netz-accent); }
.netz-leadbox__text { margin: 0; font-size: 1.12rem; font-weight: 650; line-height: 1.45; max-width: 40rem; }
.netz-lead { position: relative; display: grid; gap: 1.1rem; }
.netz-lead__row { display: grid; gap: 1.1rem; }
@media (min-width: 600px) { .netz-lead__row { grid-template-columns: 1fr 1fr; } }
.netz-lead label { display: grid; gap: .35rem; font-weight: 650; font-size: .95rem; }
.netz-lead :is(input, select, textarea) { box-sizing: border-box; width: 100%; font: inherit; font-weight: 400; color: inherit; padding: .7rem .8rem; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: calc(var(--netz-radius) * .6); background: var(--wp--preset--color--base, #fff); }
.netz-lead textarea { min-height: 9rem; resize: vertical; }
.netz-lead :is(input, select, textarea):focus-visible { outline: 3px solid color-mix(in srgb, var(--netz-accent) 45%, transparent); outline-offset: 1px; border-color: var(--netz-accent); }
.netz-lead__opt { font-weight: 400; color: var(--netz-muted); }
.netz-lead__hinweis { margin: 0; font-size: .88rem; color: var(--netz-muted); }
.netz-lead__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.netz-lead button { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: .8rem 1.5rem; }
.netz-lead__msg { padding: 1rem 1.2rem; border-radius: var(--netz-radius); border: 1px solid; }
.netz-lead__msg p { margin: 0; } .netz-lead__msg p + p { margin-top: .4rem; }
.netz-lead__msg--ok { background: color-mix(in srgb, #1a7f37 9%, transparent); border-color: color-mix(in srgb, #1a7f37 45%, transparent); }
.netz-lead__msg--err { background: color-mix(in srgb, #c62828 8%, transparent); border-color: color-mix(in srgb, #c62828 45%, transparent); }