/*
Theme Name: Quizzie
Author: Quizzie
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Description: Das Begleit-Theme (Add-on) zum Plugin „Quiz Academy“: Es macht aus dessen Themen, Lektionen, Quizzen und Karteikarten eine Wissens-Website mit interaktivem Themen-Netz als Startseite, passenden Einzelseiten, Hell/Dunkel und Barrierearmut. Eigenständiges Block-Theme, ohne eingebaute Marke – Logo, Titel, Farben und Animationen stellst du unter Design → Anpassen ein. Voraussetzung für den Inhalt: das Plugin Quiz Academy.
Version: 3.16.1
Text Domain: quizzie
*/

/* ---- Basis (früher aus dem Parent-Theme übernommen, jetzt eigenständig) ---- */
a{text-decoration-thickness:1px;text-underline-offset:.1em}
:where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}
h1,h2,h3,h4,h5,h6,blockquote,caption,figcaption,p{text-wrap:pretty}
.more-link{display:block}
:where(pre){overflow-x:auto}

/* ---- Tokens ---- */
:root{
	color-scheme:light dark; /* native Formularelemente (select, Scrollbar) mitschalten */
	--qz-bg:#fafafc;
	--qz-ink:#10121a;
	--qz-ink-soft:#464c5e;
	--qz-muted:#6b7280;
	--qz-line:#d7dae5;
	--qz-line-strong:#c3c8d6;
	--qz-grid:rgba(16,18,26,.06);
	--qz-link:#8a91a5;       /* ≥ 3:1 gegen den Grund (WCAG 1.4.11) */
	--qz-ui:#868da1;         /* Rand von Eingabefeldern/Schaltflächen, ≥ 3:1 */
	--qz-on-primary:#fff;
	--qz-found:#F59E0B;      /* Fund-Amber: „gefunden“ (Suchtreffer, i-Punkt im Logo); nur Fläche/Grafik, nie Text auf Hell */
	--qz-primary:#4a4fd6;
	--qz-glass:rgba(255,255,255,.72);
	--qz-glow:0 10px 40px rgba(16,18,26,.12);
	--qz-edge:inset 0 1px 0 rgba(255,255,255,.5);
}
@media (prefers-color-scheme:dark){
	:root{
		/* dunkler, entsättigter Grund + hellerer, kräftigerer Akzent, damit
		   Linien/Ränder und der Primärton auf dunklem Grund nicht untergehen */
		--qz-bg:#0d0f14;
		--qz-ink:#f1f2f7;
		--qz-ink-soft:#c3c8d6;
		--qz-muted:#8b93a6;
		--qz-line:#333a4c;
		--qz-line-strong:#48526b;
		--qz-grid:rgba(255,255,255,.055);
		--qz-link:#5f6a85;
		--qz-ui:#667089;
		--qz-on-primary:#0d0f14;
		--qz-found:#FBBF24;
		--qz-primary:#8b8ff5;
		--qz-glass:rgba(22,25,34,.74);
		--qz-glow:0 10px 40px rgba(0,0,0,.55);
		--qz-edge:inset 0 1px 0 rgba(255,255,255,.06);
	}
}

/* ---- Gewählte Darstellung (Hell/Dunkel) hat Vorrang vor der Systemeinstellung ----
   Das Plugin speichert die Wahl des Dark-Mode-Schalters und setzt data-qa-theme am <html>-Element (frontend.js und ein
   kleines Skript im Kopf). Ohne diese Regeln bliebe die Seite bei „System dunkel, Schalter hell“ dunkel, während die
   Lern-Widgets hell wären (dunkle Schrift auf dunklem Grund). */
:root[data-qa-theme="dark"]{color-scheme:dark;
	--qz-bg:#0d0f14;
	--qz-ink:#f1f2f7;
	--qz-ink-soft:#c3c8d6;
	--qz-muted:#8b93a6;
	--qz-line:#333a4c;
	--qz-line-strong:#48526b;
	--qz-grid:rgba(255,255,255,.055);
	--qz-link:#5f6a85;
	--qz-ui:#667089;
	--qz-on-primary:#0d0f14;
		--qz-found:#FBBF24;
	--qz-primary:#8b8ff5;
	--qz-glass:rgba(22,25,34,.74);
	--qz-glow:0 10px 40px rgba(0,0,0,.55);
	--qz-edge:inset 0 1px 0 rgba(255,255,255,.06);
}
:root[data-qa-theme="light"]{color-scheme:light;
	--qz-bg:#fafafc;
	--qz-ink:#10121a;
	--qz-ink-soft:#464c5e;
	--qz-muted:#6b7280;
	--qz-line:#d7dae5;
	--qz-line-strong:#c3c8d6;
	--qz-grid:rgba(16,18,26,.06);
	--qz-link:#8a91a5;       /* ≥ 3:1 gegen den Grund (WCAG 1.4.11) */
	--qz-ui:#868da1;         /* Rand von Eingabefeldern/Schaltflächen, ≥ 3:1 */
	--qz-on-primary:#fff;
	--qz-found:#F59E0B;      /* Fund-Amber: „gefunden“ (Suchtreffer, i-Punkt im Logo); nur Fläche/Grafik, nie Text auf Hell */
	--qz-primary:#4a4fd6;
	--qz-glass:rgba(255,255,255,.72);
	--qz-glow:0 10px 40px rgba(16,18,26,.12);
	--qz-edge:inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---- Startseite: exakt Viewport, kein Scrollen ---- */
body.home,body.front-page{margin:0;overflow:hidden;background:var(--qz-bg)}
body.home .wp-site-blocks{padding:0}
.qz-home{
	position:relative;width:100vw;height:100vh;height:100dvh;
	margin:0 !important;padding:0 !important;max-width:none !important;overflow:hidden;
	background:
		radial-gradient(circle,var(--qz-grid) 1px,transparent 1.2px) 0 0/28px 28px,
		var(--qz-bg);
}
body.admin-bar .qz-home{height:calc(100dvh - var(--wp-admin--admin-bar--height,32px))}

/* Logo oben links */
.qz-home .wp-block-site-logo{position:absolute;top:1.25rem;left:1.5rem;z-index:3;margin:0}
.qz-home .wp-block-site-logo img{display:block;height:auto}

/* Suche + Filter: schlanke Leiste über die volle Breite */
.qz-home .wp-block-site-logo{top:.6rem;left:1rem;z-index:4}
.qz-tools{
	position:absolute;z-index:4;top:0;left:0;right:0;
	display:flex;flex-direction:column;gap:.35rem;padding:.6rem 1rem .55rem;
	border-bottom:1px solid var(--qz-line);
	background:var(--qz-glass);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
	box-shadow:var(--qz-glow),var(--qz-edge);
}
.qz-row{display:flex;gap:.5rem;align-items:center}
.qz-search{flex:1;display:flex;align-items:center;gap:.6rem;padding:0 .9rem;height:2.5rem;border-radius:.75rem;cursor:text;
	background:color-mix(in srgb,var(--qz-bg) 75%,transparent);border:1px solid var(--qz-ui);color:var(--qz-muted);transition:box-shadow .2s,border-color .2s}
.qz-search:focus-within{border-color:var(--qz-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--qz-primary) 18%,transparent);color:var(--qz-primary)}
.qz-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1rem;color:var(--qz-ink);outline:0;padding:0}
.qz-search input::placeholder{color:var(--qz-muted)}
.qz-search kbd{font:inherit;font-size:.72rem;padding:.1rem .45rem;border:1px solid var(--qz-line);border-radius:.35rem;color:var(--qz-muted)}
.qz-search:focus-within kbd{display:none}
.qz-count{font-size:.8rem;color:var(--qz-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.qz-reset{font:inherit;font-size:.82rem;color:var(--qz-ink-soft);background:none;border:0;cursor:pointer;padding:.45rem .6rem;border-radius:.6rem;white-space:nowrap}
.qz-reset:hover{background:var(--qz-line-strong)}
.qz-tools :focus-visible{outline:2px solid var(--qz-primary);outline-offset:2px}

/* Filter: Typ als Segment, darunter ein Auswahlpfad Bereich → Themenwelt → Unterthema */
.qz-filters{display:flex;flex-direction:column;gap:.3rem}
.qz-fgroup{display:flex;align-items:center;gap:.6rem;min-width:0}
.qz-flabel{flex:none;width:5.2rem;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--qz-muted)}
.qz-seg{display:inline-flex;padding:2px;border:1px solid var(--qz-ui);border-radius:.6rem;background:color-mix(in srgb,var(--qz-bg) 60%,transparent);overflow-x:auto;scrollbar-width:none}
.qz-seg button{font:inherit;font-size:.82rem;line-height:1;padding:.4rem .75rem;border:0;border-radius:.45rem;background:none;color:var(--qz-ink-soft);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.qz-seg button:hover{color:var(--qz-ink)}
.qz-seg button[aria-pressed=true]{background:var(--qz-primary);color:var(--qz-on-primary)}
.qz-seg b{font-weight:500;font-size:.7rem;margin-left:.2rem;font-variant-numeric:tabular-nums;color:var(--qz-muted)}
.qz-seg button[aria-pressed=true] b{color:inherit}
.qz-path{display:flex;flex-direction:column;gap:.3rem}
.qz-chips{display:flex;gap:.4rem;align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0;min-width:0;mask-image:linear-gradient(90deg,#000 94%,transparent)}
.qz-chips::-webkit-scrollbar,.qz-seg::-webkit-scrollbar{display:none}
.qz-chip{--c:var(--qz-primary);display:inline-flex;align-items:center;gap:.4rem;flex:none;font:inherit;font-size:.82rem;line-height:1;
	padding:.4rem .75rem;border-radius:999px;cursor:pointer;color:var(--qz-ink-soft);
	background:transparent;border:1px solid var(--qz-ui);transition:background .2s,border-color .2s,color .2s,transform .15s}
.qz-chip:hover{transform:translateY(-1px);border-color:var(--c)}
.qz-chip i{width:.55rem;height:.55rem;border-radius:50%;background:var(--c);opacity:.45;transition:opacity .2s,box-shadow .2s}
.qz-chip b{font-weight:500;font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--qz-muted)}
.qz-chip[aria-pressed=true]{color:var(--qz-ink);border-color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}
.qz-chip[aria-pressed=true] i{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
@media (max-width:640px){.qz-filters{padding-left:0}.qz-flabel{width:auto;min-width:3.6rem}}

/* Graph füllt alles */
#quizzie-graph{position:absolute;inset:0;z-index:1}
#quizzie-graph svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#quizzie-graph svg:active{cursor:grabbing}
.qz-link{stroke:var(--qz-link);stroke-width:1.4;transition:opacity var(--qz-t-restore,.9s) ease}
.qz-node{cursor:pointer;transition:opacity var(--qz-t-restore,.9s) ease}
.qz-node circle{transition:r .2s}
.qz-node:hover circle{stroke-width:3}
.qz-node text{font-size:11px;fill:var(--qz-ink-soft);pointer-events:none;paint-order:stroke;stroke:var(--qz-bg);stroke-width:3px}
.qz-node.is-topic text{font-size:13px;font-weight:600;fill:var(--qz-ink)}
.is-dim{opacity:.08}
/* Abdunkeln zügig (.25 s), Wiederauftauchen nach dem Hover ruhig (.5 s): Es gilt jeweils die Übergangszeit des Zielzustands. */
.qz-node.is-dim,.qz-link.is-dim{transition:opacity var(--qz-t-dim,.5s) ease}
.qz-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--qz-muted)}

@media (max-width:640px){
	/* Trefferzähler bleibt als Live-Region für Screenreader erhalten, ist aber nur noch unsichtbar */
	.qz-count{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
	.qz-search kbd{display:none}
	.qz-reset{padding:.45rem .3rem}
}
/* Reflow (WCAG 1.4.10): Bei schmalem Fenster bzw. starkem Zoom bricht die Leiste um statt abzuschneiden –
   keine Bereiche, die man nur durch seitliches Scrollen oder gar nicht erreicht. */
@media (max-width:560px){
	.qz-main{flex-wrap:wrap;row-gap:.4rem;justify-content:flex-end}
	.qz-search{flex:1 1 100%}
	.qz-fgroup{flex-wrap:wrap}
	.qz-seg{flex-wrap:wrap;overflow:visible}
	.qz-chips{flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none}
}
@media (prefers-reduced-motion:reduce){.qz-link,.qz-node{transition:none}}

/* Inhalts-Labels erst bei Hover, Themen-Labels immer; verhindert Überlagerung */
.qz-node:not(.is-topic) text{opacity:0;transition:opacity var(--qz-t-restore,.9s) ease}
.qz-node:not(.is-topic):hover text,.qz-node.is-near text{opacity:1;transition:opacity var(--qz-t-label,.15s)}
.qz-node.is-topic text{stroke-width:4px}

/* Treffer-Hervorhebung */
.qz-node.is-match circle:not(.qz-halo){stroke-width:4;filter:drop-shadow(0 0 6px var(--qz-found))} /* Treffer leuchten im Fund-Amber der Marke */
.qz-node.is-match text{opacity:1}
.qz-mark{fill:var(--qz-primary);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
@media (prefers-color-scheme:dark){
	/* Kräftigerer Glow, da drop-shadow auf dunklem Grund sonst kaum auffällt */
	.qz-node.is-match circle:not(.qz-halo){filter:drop-shadow(0 0 9px var(--qz-found))}
}

/* Detail-Panel (Shortcode-Inhalte) */
.qz-panel{position:absolute;z-index:5;top:0;right:0;bottom:0;width:min(46rem,100vw);display:flex;flex-direction:column;
	background:var(--qz-bg);border-left:1px solid var(--qz-line);
	box-shadow:-12px 0 40px rgba(16,18,26,.14),inset 1px 0 0 rgba(255,255,255,.4);
	animation:qz-in .25s ease}
@media (prefers-color-scheme:dark){
	.qz-panel{box-shadow:-12px 0 40px rgba(0,0,0,.6),inset 1px 0 0 rgba(255,255,255,.05)}
}
.qz-panel[hidden]{display:none}
@keyframes qz-in{from{transform:translateX(24px);opacity:0}}
.qz-panel-head{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--qz-line)}
.qz-panel-head>div{flex:1;min-width:0}
.qz-panel-head h2{margin:0;font-size:1.1rem;line-height:1.3;color:var(--qz-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qz-panel-kind{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--qz-muted)}
.qz-panel-open{font-size:.82rem;color:var(--qz-ink-soft);text-decoration:none;white-space:nowrap}
.qz-panel-open:hover{color:var(--qz-primary)}
.qz-panel-close{font:inherit;font-size:1.6rem;line-height:1;width:2.25rem;height:2.25rem;border:0;border-radius:.6rem;background:none;color:var(--qz-ink-soft);cursor:pointer}
.qz-panel-close:hover{background:var(--qz-line-strong)}
.qz-panel :focus-visible{outline:2px solid var(--qz-primary);outline-offset:2px}
#qz-panel-frame{flex:1;width:100%;border:0;background:transparent}
.qz-home.has-panel .qz-tools{right:min(46rem,100vw)}

/* Footer */
.qz-footer{position:absolute;z-index:2;left:0;right:0;bottom:.6rem;text-align:center;font-size:.78rem;color:var(--qz-muted);pointer-events:none;margin:0}
.qz-footer p{margin:0}

/* ---- Drei-Punkte-Menü + Overlay ---- */
.qz-menu-btn{flex:none;display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border-radius:.75rem;cursor:pointer;
	color:var(--qz-ink-soft);background:transparent;border:1px solid var(--qz-ui);transition:background .2s,color .2s,border-color .2s}
.qz-menu-btn:hover{color:var(--qz-ink);border-color:var(--qz-line-strong);background:color-mix(in srgb,var(--qz-ink) 6%,transparent)}
.qz-menu-btn[aria-expanded="true"]{color:var(--qz-primary);border-color:var(--qz-primary)}
.qz-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow-y:auto;padding:5rem 1.5rem 3rem;
	background:color-mix(in srgb,var(--qz-bg) 90%,transparent);
	backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
	opacity:0;transition:opacity .25s ease}
.qz-overlay[hidden]{display:none}
.qz-overlay.is-open{opacity:1}
body.admin-bar .qz-overlay{top:var(--wp-admin--admin-bar--height,32px)}
.qz-overlay-close{position:absolute;top:.6rem;right:1rem;display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border-radius:.75rem;cursor:pointer;
	color:var(--qz-ink);background:transparent;border:1px solid var(--qz-ui)}
.qz-overlay-close:hover{border-color:var(--qz-line-strong);background:color-mix(in srgb,var(--qz-ink) 6%,transparent)}
.qz-overlay :focus-visible{outline:2px solid var(--qz-primary);outline-offset:3px;border-radius:.4rem}
.qz-overlay-inner{width:min(40rem,100%);display:flex;flex-direction:column;gap:2.6rem}
.qz-ov-eyebrow{margin:0 0 .6rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--qz-muted)}
.qz-ov-group ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--qz-line)}
.qz-ov-group li{border-bottom:1px solid var(--qz-line);opacity:0;transform:translateY(10px);
	transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--i,0) * 60ms + 80ms)}
.qz-overlay.is-open .qz-ov-group li{opacity:1;transform:none}
.qz-ov-group a{display:flex;align-items:baseline;gap:1rem;padding:1.05rem .2rem;text-decoration:none;color:var(--qz-ink);transition:color .2s,padding .2s}
.qz-ov-text{font-size:clamp(1.5rem,4.2vw,2.3rem);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.qz-ov-host{margin-left:auto;font-size:.85rem;color:var(--qz-muted)}
.qz-ov-arrow{flex:none;align-self:center;margin-left:auto;color:var(--qz-muted);transition:transform .25s,color .2s}
.qz-ov-host + .qz-ov-arrow{margin-left:.2rem}
.qz-ov-group a:hover,.qz-ov-group a:focus-visible{color:var(--qz-primary);padding-left:.7rem}
.qz-ov-group a:hover .qz-ov-arrow,.qz-ov-group a:focus-visible .qz-ov-arrow{transform:translate(3px,-3px);color:var(--qz-primary)}
.qz-ov-empty{margin:0;color:var(--qz-ink-soft);font-size:1.1rem}
.qz-ov-empty a{color:var(--qz-primary)}
.qz-ov-foot{margin:0;font-size:.85rem;color:var(--qz-muted)}
html.qz-menu-open,html.qz-menu-open body{overflow:hidden}
@media (max-width:600px){.qz-ov-host{display:none}.qz-ov-arrow{margin-left:auto}}
@media (prefers-reduced-motion:reduce){.qz-overlay,.qz-ov-group li,.qz-ov-group a,.qz-ov-arrow{transition:none}.qz-ov-group li{opacity:1;transform:none}}

/* ---- Normale Seiten im Graph ---- */
.qz-seg button[hidden]{display:none}
.qz-node.is-page circle{stroke-dasharray:3 2.5}

/* ---- Connect-Links im Overlay: schlanke Pillen mit Symbol-Kreis (statt großer Kacheln) ---- */
.qz-ov-connect .qz-cards{list-style:none;margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:.6rem .7rem}
.qz-ov-connect .qz-cards li{border:0;margin:0}
.qz-ov-group .qz-card{--brand:var(--qz-primary);position:relative;display:inline-flex;flex-direction:row;height:auto;align-items:center;gap:.65rem;padding:.3rem 1.05rem .3rem .3rem;border-radius:999px;text-decoration:none;color:var(--qz-ink);
	background:color-mix(in srgb,var(--qz-bg) 55%,transparent);border:1px solid var(--qz-line-strong);
	transition:border-color .2s,background .2s,box-shadow .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.qz-ov-group .qz-card:hover,.qz-ov-group .qz-card:focus-visible{color:var(--qz-ink);transform:translateY(-2px);border-color:var(--brand);
	background:color-mix(in srgb,var(--brand) 10%,var(--qz-bg));box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 20%,transparent)}
.qz-card-badge{flex:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;color:#fff;
	background:var(--brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.qz-card-badge svg{width:1.15rem;height:1.15rem}
.qz-ov-group .qz-card:hover .qz-card-badge,.qz-ov-group .qz-card:focus-visible .qz-card-badge{transform:rotate(-8deg) scale(1.06)}
.qz-card-body{display:flex;flex-direction:column;min-width:0;gap:0;line-height:1.2}
.qz-card-label{font-size:.98rem;font-weight:600;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qz-card-host{font-size:.72rem;color:var(--qz-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qz-ov-group .qz-card .qz-ov-arrow{display:none}
.qz-ov-connect li{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 60ms + 100ms)}
.qz-overlay.is-open .qz-ov-connect li{opacity:1;transform:none}
@media (max-width:520px){.qz-ov-connect .qz-cards{flex-direction:column;align-items:stretch}.qz-ov-group .qz-card{display:flex}}
@media (prefers-reduced-motion:reduce){.qz-ov-group .qz-card,.qz-card-badge,.qz-ov-connect li{transition:none}.qz-ov-connect li{opacity:1;transform:none}}

/* ---- „?“-Knopf und Anleitungs-Overlay ---- */
.qz-help-btn.is-new{color:var(--qz-primary);border-color:var(--qz-primary);animation:qz-pulse 2s ease-out 3}
@keyframes qz-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--qz-primary) 45%,transparent)}100%{box-shadow:0 0 0 .9rem transparent}}
.qz-overlay-inner.qz-wide{width:min(62rem,100%);gap:2rem}
.qz-howto-head{display:flex;flex-direction:column;gap:.4rem}
.qz-howto-title{margin:0;font-size:clamp(2rem,6vw,3.4rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--qz-ink)}
.qz-howto-lead{margin:.4rem 0 0;max-width:42rem;font-size:1.1rem;line-height:1.5;color:var(--qz-ink-soft)}
.qz-legend{list-style:none;margin:0;padding:.75rem 1rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;border:1px solid var(--qz-line);border-radius:1rem;background:color-mix(in srgb,var(--qz-glass) 100%,transparent)}
.qz-legend li{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--qz-ink-soft)}
.qz-legend svg{flex:none;color:var(--qz-primary)}
.qz-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1rem;counter-reset:none}
.qz-step{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.15rem;border-radius:1.1rem;border:1px solid var(--qz-line);
	background:linear-gradient(145deg,var(--qz-glass),color-mix(in srgb,var(--qz-bg) 55%,transparent));box-shadow:var(--qz-edge);
	opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 70ms + 100ms)}
.qz-overlay.is-open .qz-step{opacity:1;transform:none}
.qz-step-badge{flex:none;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:.9rem;color:#fff;
	background:linear-gradient(145deg,var(--qz-primary),color-mix(in srgb,var(--qz-primary) 55%,#000));
	box-shadow:0 6px 16px color-mix(in srgb,var(--qz-primary) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.qz-step h3{margin:0 0 .3rem;display:flex;align-items:center;gap:.55rem;font-size:1.12rem;font-weight:650;letter-spacing:-.01em;color:var(--qz-ink)}
.qz-step-n{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;padding:0 .3rem;border-radius:999px;font-size:.75rem;font-weight:700;color:var(--qz-primary);border:1px solid color-mix(in srgb,var(--qz-primary) 55%,var(--qz-line))}
.qz-step p{margin:0;font-size:.93rem;line-height:1.55;color:var(--qz-ink-soft)}
.qz-howto-note{margin:0;padding:1rem 1.15rem;border-left:3px solid var(--qz-primary);border-radius:.4rem;background:color-mix(in srgb,var(--qz-primary) 8%,transparent);color:var(--qz-ink);font-size:.95rem;line-height:1.55}
@media (prefers-reduced-motion:reduce){.qz-step{transition:none;opacity:1;transform:none}.qz-help-btn.is-new{animation:none}}

/* ---- Gepinnte Knoten (nach dem Ziehen) ---- */
.qz-node.is-pinned circle{stroke-width:3.5}

/* ---- Fokus: Beschriftungen der sichtbaren Unterknoten lesbar ---- */
.qz-node.is-focus text{opacity:1}

/* Ausgegraute Knoten (Filter/Fokus) sind nicht klickbar: Der Klick fällt auf die freie Fläche und hebt den Fokus auf. */
.qz-node.is-off{pointer-events:none}

/* ---- Tastaturbedienung / Barrierefreiheit ---- */
.qz-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.qz-skip{position:absolute;z-index:200;left:.75rem;top:-4rem;padding:.55rem .9rem;border-radius:.6rem;background:var(--qz-primary);color:var(--qz-on-primary);font-size:.9rem;font-weight:600;text-decoration:none;transition:top .15s}
.qz-skip:focus{top:.6rem;outline:2px solid var(--qz-on-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--qz-primary)}
.qz-node:focus{outline:none}
.qz-ring{stroke:var(--qz-primary);stroke-width:3;opacity:0;pointer-events:none}
.qz-node:focus-visible .qz-ring{opacity:1}
.qz-node:focus-visible text{opacity:1}
.qz-tools :focus-visible,.qz-panel :focus-visible,.qz-overlay :focus-visible,.qz-home a:focus-visible{outline:2px solid var(--qz-primary);outline-offset:2px}
@media (forced-colors:active){.qz-ring{stroke:Highlight}.qz-skip{border:2px solid ButtonText}}

/* ---- Knoten: Kontrast der Umrandung (WCAG 1.4.11) ----
   Die Themenfarbe kommt aus dem Backend und kann hell sein; die Umrandung mischt deshalb Text- und Themenfarbe,
   damit der Knoten auch bei gelben/hellen Farben mindestens 3:1 zum Grund erreicht. */
.qz-node circle:not(.qz-ring):not(.qz-halo){fill:var(--c);stroke:color-mix(in srgb,var(--c) 52%,var(--qz-ink))}

/* ---- Zoom-Schaltflächen (Alternative zu Mausrad und Pinch, WCAG 2.5.1) ---- */
.qz-zoom{position:absolute;z-index:3;right:1rem;bottom:2.6rem;display:flex;flex-direction:column;gap:.35rem}
.qz-home.has-panel .qz-zoom{right:calc(min(46rem,100vw) + 1rem)}
.qz-zoom button{display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border-radius:.75rem;cursor:pointer;font:inherit;font-size:1.25rem;line-height:1;
	color:var(--qz-ink);background:var(--qz-glass);border:1px solid var(--qz-ui);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.qz-zoom button:hover{border-color:var(--qz-primary);color:var(--qz-primary)}
.qz-zoom :focus-visible{outline:2px solid var(--qz-primary);outline-offset:2px}

/* Bei starkem Zoom bzw. kleinem Fenster darf die Leiste nie mehr Platz beanspruchen als vorhanden: Sie scrollt in sich,
   damit alle Bedienelemente erreichbar bleiben (WCAG 1.4.10). */
.qz-tools{max-height:calc(100dvh - 1rem);overflow-y:auto;overscroll-behavior:contain}

/* ---- Desktop: größere Knotenbeschriftung ----
   Auf breiten Bildschirmen mit Maus sind die Beschriftungen größer (Themen 17 px, Inhalte 14 px statt 13/11 px),
   auf kleinen und Touch-Geräten bleibt es kompakt. Die Schrift skaliert zusätzlich mit dem Zoom des Graphen. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
	.qz-node text{font-size:var(--qz-label-leaf,14px);stroke-width:4px}
	.qz-node.is-topic text{font-size:var(--qz-label-topic,17px);stroke-width:5px}
}

/* ---- Flüssige Bewegung ----
   Beim Ziehen keine Übergänge (Deckkraft/Radius), sonst flackern Knoten, über die der Zeiger wandert.
   Linien ohne Kantenglättung und Text auf Geschwindigkeit gerendert: deutlich weniger Zeichenarbeit pro Bild. */
#quizzie-graph svg.is-dragging .qz-node,#quizzie-graph svg.is-dragging .qz-link,#quizzie-graph svg.is-dragging circle{transition:none}
.qz-link{shape-rendering:optimizeSpeed}
.qz-node text{text-rendering:optimizeSpeed}

@media (prefers-reduced-motion:reduce){.qz-node,.qz-node.is-dim,.qz-link,.qz-link.is-dim,.qz-node text{transition:none !important}}

/* ============================================================================
   Innenseiten: Einzelseiten (Lektion, Quiz, Deck, Seite, Beitrag), Themenseite, 404, Kopf- und Fußbereich
   Alles nutzt die Tokens oben, damit es zur Startseite passt (hell/dunkel folgt dem System).
   ========================================================================== */
html:has(body.qz-inner),body.qz-inner{background:var(--qz-bg)}
body.qz-inner{color:var(--qz-ink-soft);margin:0;font-size:1.0625rem;line-height:1.65}
body.qz-inner .wp-site-blocks{padding:0}
body.qz-inner .wp-site-blocks > *{margin-block-start:0}
body.qz-inner :where(a){color:var(--qz-primary);text-underline-offset:.18em} /* niedrige Spezifität: Komponenten unten färben ihre Links selbst */
body.qz-inner a:focus-visible{outline:2px solid var(--qz-primary);outline-offset:2px;border-radius:.25rem}
body.qz-inner h1,body.qz-inner h2,body.qz-inner h3{color:var(--qz-ink);letter-spacing:-.02em}

/* Kopf */
.qz-site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;
	padding:.7rem clamp(1rem,3vw,2rem);border-bottom:1px solid var(--qz-line);position:sticky;top:0;z-index:20;
	background:var(--qz-glass);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3)}
body.admin-bar .qz-site-header{top:var(--wp-admin--admin-bar--height,32px)}
.qz-brand{display:flex;align-items:center;gap:.65rem;min-width:0}
.qz-brand .wp-block-site-logo{margin:0}
.qz-brand .wp-block-site-logo img{display:block;height:auto;border-radius:.5rem}
.qz-site-title{margin:0;font-size:1.05rem;font-weight:650;letter-spacing:-.01em;line-height:1.2}
.qz-site-title a{color:var(--qz-ink);text-decoration:none}
.qz-site-title a:hover{color:var(--qz-primary)}
.qz-header-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem}
.qz-home-link{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .85rem;border-radius:.75rem;border:1px solid var(--qz-ui);
	color:var(--qz-ink);text-decoration:none;font-size:.9rem;font-weight:600;transition:border-color .2s,color .2s,background .2s}
.qz-home-link:hover{border-color:var(--qz-primary);color:var(--qz-primary)}
.qz-header-search{margin:0}
.qz-header-search .wp-block-search__inside-wrapper{border:0;padding:0;gap:.35rem;display:flex}
.qz-header-search .wp-block-search__input,.qz-404-search .wp-block-search__input{
	min-width:0;width:12rem;padding:.45rem .8rem;border:1px solid var(--qz-ui);border-radius:.75rem;background:transparent;color:var(--qz-ink);font:inherit;font-size:.92rem}
.qz-header-search .wp-block-search__button,.qz-404-search .wp-block-search__button{
	display:inline-grid;place-items:center;margin:0;padding:.45rem .6rem;border:1px solid var(--qz-ui);border-radius:.75rem;background:transparent;color:var(--qz-ink);cursor:pointer}
.qz-header-search .wp-block-search__button:hover,.qz-404-search .wp-block-search__button:hover{border-color:var(--qz-primary);color:var(--qz-primary)}
.qz-header-search input:focus-visible,.qz-header-search button:focus-visible,.qz-404-search input:focus-visible,.qz-404-search button:focus-visible{outline:2px solid var(--qz-primary);outline-offset:2px}
@media (max-width:560px){.qz-header-search .wp-block-search__input{width:8.5rem}.qz-site-title{display:none}}

/* Inhalt */
.qz-page{padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,1.5rem) clamp(3rem,7vw,5rem);min-height:60vh}
.qz-title{font-size:clamp(2rem,5.5vw,3.1rem);line-height:1.1;margin:.3rem 0 .6rem}
.qz-lead{font-size:1.2rem;color:var(--qz-ink-soft)}
.qz-prose p,.qz-page > .wp-block-post-content p{max-width:68ch}
/* Die Widgets des Plugins nehmen die Breite des Inhaltsbereichs (wie die Vorlage), zentriert */
.qz-page{--qz-w:720px}
.qz-quiz,.qz-deck{--qz-w:760px}
.qz-topic{--qz-w:1000px}
.qz-page .qa-app{max-width:var(--qz-w);margin:0 auto !important;padding:0}
.qz-lesson .qa-lesson-body{font-size:1.0625rem}
.qz-lesson .qa-lesson-hero{border-radius:1rem;max-width:100%;height:auto;margin:0 0 1.5rem}
.qz-page .wp-block-post-content > *{margin-block:1rem}

/* Brotkrumen */
.qz-crumbs ol{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .4rem;font-size:.85rem;color:var(--qz-muted)}
.qz-crumbs li{display:inline-flex;align-items:center;gap:.4rem}
.qz-crumbs li + li::before{content:"›";color:var(--qz-muted)}
.qz-crumbs a{color:var(--qz-muted);text-decoration:none}
.qz-crumbs a:hover{color:var(--qz-primary);text-decoration:underline}
.qz-crumbs [aria-current]{color:var(--qz-ink-soft);font-weight:600}

/* Meta unter dem Titel */
.qz-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;margin:0 0 1.75rem;font-size:.9rem;color:var(--qz-muted)}
.qz-meta .qz-dot{opacity:.6}
.qz-kind{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--qz-primary)}
.qz-topic-pill{--c:var(--qz-primary);display:inline-flex;align-items:center;gap:.4rem;padding:.15rem .65rem;border:1px solid var(--qz-ui);border-radius:999px;color:var(--qz-ink);text-decoration:none;font-size:.85rem}
.qz-topic-pill i,.qz-topic-list i{width:.6rem;height:.6rem;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 28%,transparent)}
.qz-topic-pill:hover{border-color:var(--c)}

/* Zurück/Weiter, Üben, Zurück zum Thema */
.qz-pager{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:3rem 0 0}
.qz-pager a{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1.1rem;border:1px solid var(--qz-line);border-radius:1rem;text-decoration:none;color:var(--qz-ink);
	background:var(--qz-glass);transition:border-color .2s,transform .2s}
.qz-pager a:hover{border-color:var(--qz-primary);transform:translateY(-2px)}
.qz-pager .qz-next{text-align:right;grid-column:2}
.qz-pager-l{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--qz-muted)}
.qz-pager-t{font-weight:600;line-height:1.3}
@media (max-width:560px){.qz-pager{grid-template-columns:1fr}.qz-pager .qz-next{grid-column:auto}}
.qz-related{margin:2.5rem 0 0}
.qz-related h2{font-size:1.15rem;margin:0 0 .8rem}
.qz-related ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.qz-related a{display:flex;align-items:baseline;gap:.7rem;padding:.65rem .9rem;border:1px solid var(--qz-line);border-radius:.8rem;color:var(--qz-ink);text-decoration:none}
.qz-related a:hover{border-color:var(--qz-primary)}
.qz-back{margin:1.75rem 0 0;font-weight:600}

/* 404 */
.qz-404 .qz-404-search{margin:1.5rem 0 1.25rem}
.qz-404-search .wp-block-search__input{width:min(24rem,100%)}
.qz-button{background:var(--qz-primary);color:var(--qz-on-primary) !important;border-color:var(--qz-primary) !important}
.qz-button:hover{filter:brightness(1.08);color:var(--qz-on-primary) !important}
.qz-404-h{font-size:1.15rem;margin:2.5rem 0 .8rem}
.qz-topic-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.qz-topic-list a{--c:var(--qz-primary);display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border:1px solid var(--qz-ui);border-radius:999px;color:var(--qz-ink);text-decoration:none}
.qz-topic-list a:hover{border-color:var(--c)}

/* Fuß */
.qz-site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;
	padding:1.4rem clamp(1rem,3vw,2rem);border-top:1px solid var(--qz-line);font-size:.88rem;color:var(--qz-muted)}
.qz-site-footer p{margin:0}
.qz-legal ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.qz-legal a{color:var(--qz-muted);text-decoration:none}
.qz-legal a:hover,.qz-legal a:focus-visible{color:var(--qz-primary);text-decoration:underline}
@media (prefers-reduced-motion:reduce){.qz-pager a,.qz-home-link{transition:none}.qz-pager a:hover{transform:none}}

/* ---- Marke: Zeichen und Wortmarke (inc/brand.php, assets/brand/) ---- */
.qz-brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--qz-ink);text-decoration:none;min-width:0}
.qz-brand svg{display:block;height:auto}
.qz-brand--lockup svg{height:34px;width:auto}
.qz-brand--mark svg{height:40px;width:40px}
.qz-brand-name{font-weight:650;letter-spacing:-.01em}
.qz-brand:focus-visible{outline:2px solid var(--qz-primary);outline-offset:3px;border-radius:.5rem}
.qz-home .qz-brand{flex:none;margin:0;max-width:40%}
.qz-brand--text .qz-brand-name{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qz-home .qz-brand--custom img{display:block;height:auto;max-width:40px}
@media (max-width:560px){.qz-brand--lockup svg{height:30px}}

/* ---- Beleuchtung pro Hierarchieebene ----
   Oberthemen (lv-0) leuchten am stärksten, jede tiefere Ebene etwas schwächer, Inhalte (lv-leaf) nur noch leicht.
   Die Lichthöfe tragen die Themenfarbe (--c) und folgen der Deckkraft des Knotens (ausgegraut = Licht aus). Beim Hover und
   bei Tastaturfokus wird der Lichthof des Knotens und seiner Nachbarn heller. */
.qz-halo{fill:var(--c);pointer-events:none;opacity:calc(var(--h1,.1) * var(--qz-halo-k,1));transition:opacity .5s ease}
.qz-halo-2{opacity:calc(var(--h2,.04) * var(--qz-halo-k,1))}
.qz-node.lv-0{--h1:.26;--h2:.11}
.qz-node.lv-1{--h1:.2;--h2:.085}
.qz-node.lv-2{--h1:.15;--h2:.065}
.qz-node.lv-3{--h1:.11;--h2:.048}
.qz-node.lv-4{--h1:.09;--h2:.04}
.qz-node.lv-leaf{--h1:.14;--h2:0}
@media (prefers-color-scheme:light){.qz-halo{mix-blend-mode:multiply}}
.qz-node:hover .qz-halo-1,.qz-node.is-near .qz-halo-1,.qz-node:focus-visible .qz-halo-1,.qz-node.is-focus .qz-halo-1{opacity:calc(var(--h1) * 2.2 * var(--qz-halo-k,1));transition-duration:.15s}
.qz-node:hover .qz-halo-2,.qz-node.is-near .qz-halo-2,.qz-node:focus-visible .qz-halo-2,.qz-node.is-focus .qz-halo-2{opacity:calc(var(--h2) * 2.4 * var(--qz-halo-k,1));transition-duration:.15s}
#quizzie-graph svg.is-dragging .qz-halo{transition:none}
@media (prefers-reduced-motion:reduce){.qz-halo{transition:none !important}}

/* Hell/Dunkel-Schalter: erst sichtbar, wenn theme-toggle.js ihn befüllt hat (ohne JS kein toter Knopf). */
.qz-theme-btn[hidden]{display:none}
.qz-theme-btn:not([hidden]){display:inline-grid}
body.qz-no-theme-toggle .qz-theme-btn{display:none !important}
/* Logo für dunkle Darstellung (Anpassen → Marke & Texte) */
.qz-logo-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-qa-theme="light"]) .qz-logo-light{display:none}:root:not([data-qa-theme="light"]) .qz-logo-dark{display:inline-block}}
:root[data-qa-theme="dark"] .qz-logo-light{display:none}
:root[data-qa-theme="dark"] .qz-logo-dark{display:inline-block}

/* ---- Schmale Bildschirme: einklappbare Filterleiste ----
   Zugeklappt bleiben nur Suche, Filter-Knopf und Menü sichtbar; der Knopf klappt Typ-Schalter und Auswahlfelder
   (Dropdown je Ebene statt Chips) darunter auf. Der Rest des Netzes bleibt bedienbar. */
.qz-filter-btn,.qz-select{display:none}
.qz-filter-btn{position:relative}
.qz-badge{position:absolute;top:-.35rem;right:-.35rem;min-width:1.1rem;height:1.1rem;padding:0 .25rem;border-radius:.6rem;background:var(--qz-primary);color:var(--qz-on-primary);font-size:.68rem;font-weight:700;line-height:1.1rem;text-align:center}
.qz-badge[hidden]{display:none}
.qz-filter-btn[aria-expanded="true"]{color:var(--qz-primary);border-color:var(--qz-primary)}
.qz-select{flex:1;min-width:0;height:2.4rem;padding:0 .7rem;font:inherit;font-size:.95rem;color:var(--qz-ink);background:color-mix(in srgb,var(--qz-bg) 75%,transparent);border:1px solid var(--qz-ui);border-radius:.6rem}
@media (max-width:1024px){
	.qz-filter-btn{display:inline-grid}
	.qz-main{flex-wrap:nowrap}
	.qz-search{flex:1 1 0;min-width:0}
	.qz-tools.is-open .qz-main{flex-wrap:wrap}
	.qz-tools:not(.is-open) .qz-filters,
	.qz-tools:not(.is-open) .qz-reset,
	.qz-tools:not(.is-open) .qz-help-btn,
	.qz-tools:not(.is-open) .qz-acct-group,
	.qz-tools:not(.is-open) .qz-acct,
	.qz-tools:not(.is-open) .qz-theme-btn{display:none !important}
	.qz-tools.is-open .qz-search{flex:1 1 100%}
	.qz-tools.is-open .qz-main{justify-content:flex-end}
	.qz-tools.is-open .qz-brand{margin-right:auto}
	.qz-chips{display:none}
	.qz-select{display:block;flex:none;width:100%;height:2.6rem}
	.qz-fgroup{flex-wrap:nowrap}
	.qz-flabel{min-width:4.6rem}
}

/* Akkordeon der Filtergruppen (nur schmale Bildschirme): ein Kopf je Gruppe, höchstens eine offen. */
.qz-fhead{display:none}
@media (max-width:1024px){
	.qz-flabel{display:none}
	.qz-fgroup{flex-direction:column;align-items:stretch;gap:.35rem}
	.qz-fhead{display:flex;align-items:center;gap:.5rem;width:100%;padding:.55rem .75rem;font:inherit;font-size:.9rem;color:var(--qz-ink);background:color-mix(in srgb,var(--qz-bg) 75%,transparent);border:1px solid var(--qz-line-strong);border-radius:.6rem;cursor:pointer;text-align:left}
	.qz-fhead-t{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--qz-muted);flex:none}
	.qz-fhead-v{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
	.qz-fhead svg{flex:none;transition:transform .2s}
	.qz-fhead[aria-expanded="true"]{border-color:var(--qz-primary)}
	.qz-fhead[aria-expanded="true"] svg{transform:rotate(180deg)}
	.qz-fgroup:not(.is-open) > :not(.qz-fhead){display:none !important}
}
@media (prefers-reduced-motion:reduce){.qz-fhead svg{transition:none}}

/* Startseite: Der Blockabstand des Layouts (margin-block-start) schob Werkzeugleiste, Netz und Skip-Link nach unten. */
.qz-home > *{margin-block:0 !important}

/* ---- Seitennavigation am Fuß: Links zu Kindknoten ([qz_children]) ---- */
.qz-children{margin:3rem 0 0;padding-top:1.5rem;border-top:1px solid var(--qz-line)}
.qz-children h2{font-size:1.15rem;margin:0 0 .6rem}
.qz-children h3{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--qz-muted);margin:1.1rem 0 .5rem}
.qz-children-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.qz-children-list a{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border:1px solid var(--qz-ui);border-radius:.8rem;color:var(--qz-ink);text-decoration:none;line-height:1.3}
.qz-children-list a:hover,.qz-children-list a:focus-visible{border-color:var(--c,var(--qz-primary));background:color-mix(in srgb,var(--c,var(--qz-primary)) 10%,transparent)}
.qz-children-topics i{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--c,var(--qz-primary))}
@media (max-width:560px){.qz-children-list{flex-direction:column}.qz-children-list a{display:flex}}

/* ---- Mitgleitendes Inhaltsverzeichnis (assets/toc.js) ----
   Desktop ab 1200 px: rechts neben dem 720-px-Artikel, per position:sticky. Das Hüllelement hat die Artikelbreite und
   Höhe 0, die Box hängt absolut rechts daneben. Schmaler: aus; mit Körperklasse qz-toc-mobile ein Akkordeon am Anfang. */
.qz-toc{display:none}
.qz-page :is(h2,h3)[id]{scroll-margin-top:5rem}
.qz-toc-list ol{list-style:none;margin:0;padding:0}
.qz-toc-list li{margin:0}
.qz-toc-list a{display:block;padding:.3rem .6rem;border-left:2px solid var(--qz-line);color:var(--qz-ink-soft);text-decoration:none;font-size:.88rem;line-height:1.35}
.qz-toc-list .qz-toc-sub a{padding-left:1.2rem;font-size:.82rem}
.qz-toc-list a:hover,.qz-toc-list a:focus-visible{color:var(--qz-ink);border-left-color:var(--qz-primary)}
.qz-toc-list a[aria-current]{color:var(--qz-primary);border-left-color:var(--qz-primary);font-weight:600}
.qz-toc-t{margin:0 0 .5rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--qz-muted)}
@media (min-width:1200px){
	.qz-toc{display:block;position:sticky;top:5.5rem;height:0;z-index:2}
	.qz-toc-box{position:absolute;top:0;left:calc(100% + 1.5rem);width:210px;max-height:calc(100vh - 8rem);overflow-y:auto;overscroll-behavior:contain}
	.qz-toc-btn{display:none !important}
}
@media (max-width:1199px){
	/* Mobil: gleitet oben mit (sticky) und liegt über dem Text; am Artikelende blendet toc.js es aus */
	body.qz-toc-mobile .qz-toc{display:block;position:sticky;top:.5rem;z-index:20;margin:0 0 1.25rem}
	body.admin-bar.qz-toc-mobile .qz-toc{top:calc(46px + .5rem)}
	body.qz-toc-mobile .qz-toc-box{background:var(--qz-bg);border-radius:.7rem;box-shadow:var(--qz-glow)}
	.qz-toc-t{display:none}
	.qz-toc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.65rem .9rem;font:inherit;font-weight:600;color:var(--qz-ink);background:color-mix(in srgb,var(--qz-bg) 75%,transparent);border:1px solid var(--qz-ui);border-radius:.7rem;cursor:pointer}
	.qz-toc-btn svg{transition:transform .2s}
	.qz-toc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
	.qz-toc-btn:focus-visible{outline:2px solid var(--qz-primary);outline-offset:2px}
	.qz-toc-list{padding:.5rem .5rem .6rem;max-height:min(60vh,22rem);overflow-y:auto;overscroll-behavior:contain}
	.qz-toc-list[data-closed]{display:none}
}
@media (prefers-reduced-motion:reduce){.qz-toc-btn svg{transition:none}}
@media (min-width:783px) and (max-width:1199px){body.admin-bar.qz-toc-mobile .qz-toc{top:calc(32px + .5rem)}}
/* Am Ende des Artikels ausgeblendet; im Artikel wieder da */
.qz-toc{transition:opacity .25s ease,visibility 0s}
.qz-toc--away{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s .25s}
@media (prefers-reduced-motion:reduce){.qz-toc,.qz-toc--away{transition:none}}

/* ---- Kartenansicht der Startseite (Variante der Seitennavigation am Seitenende) ---- */
.qz-view-btn[aria-pressed="true"]{color:var(--qz-primary);border-color:var(--qz-primary)}
.qz-cards-view{position:absolute;inset:0;z-index:3;overflow:auto;padding:calc(var(--qz-tools-h,150px) + 1.25rem) 1rem 4rem;background:var(--qz-bg)}
.qz-cards-view[hidden]{display:none}
.qz-cards-in{max-width:1100px;margin:0 auto}
.qz-cards-crumbs{display:flex;flex-wrap:wrap;gap:.25rem;margin:0 0 .6rem}
.qz-crumb{font:inherit;font-size:.85rem;padding:.25rem .6rem;border:1px solid var(--qz-line-strong);border-radius:999px;background:none;color:var(--qz-ink-soft);cursor:pointer}
.qz-crumb:hover{border-color:var(--qz-primary);color:var(--qz-ink)}
.qz-crumb[aria-current]{background:color-mix(in srgb,var(--qz-primary) 14%,transparent);border-color:var(--qz-primary);color:var(--qz-ink);font-weight:600}
.qz-cards-h{font-size:1.6rem;margin:.4rem 0 .3rem;line-height:1.2}
.qz-cards-h:focus{outline:none}
.qz-cards-open{display:inline-block;margin:0 0 1rem;font-weight:600}
.qz-card-grid{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.qz-card-grid .qz-card{--c:var(--qz-primary);display:flex;flex-direction:column;height:100%;border:1px solid var(--qz-line);border-top:4px solid var(--c);border-radius:1rem;background:color-mix(in srgb,var(--c) 6%,var(--qz-bg));transition:transform .15s,border-color .15s}
.qz-card-grid .qz-card:hover,.qz-card-grid .qz-card:focus-within{transform:translateY(-2px);border-color:var(--c)}
.qz-card-btn{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:.3rem;flex:1;padding:1rem 1rem .6rem;cursor:pointer;color:var(--qz-ink)}
.qz-card-btn:focus-visible{outline:2px solid var(--qz-primary);outline-offset:-2px;border-radius:.9rem}
.qz-card-name{font-weight:700;font-size:1.05rem;line-height:1.25}
.qz-card-meta{font-size:.82rem;color:var(--qz-muted)}
.qz-card-link{padding:.4rem 1rem .8rem;font-size:.85rem;font-weight:600}
.qz-cards-sub{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--qz-muted);margin:1.6rem 0 .5rem}
.qz-cards-empty{color:var(--qz-muted);margin:1.5rem 0}
.qz-cards-view .qz-children-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.qz-cards-view .qz-children-list a{display:inline-flex;padding:.45rem .9rem;border:1px solid var(--qz-ui);border-radius:.8rem;color:var(--qz-ink);text-decoration:none;line-height:1.3}
.qz-cards-view .qz-children-list a:hover,.qz-cards-view .qz-children-list a:focus-visible{border-color:var(--qz-primary);background:color-mix(in srgb,var(--qz-primary) 10%,transparent)}
.qz-view-cards .qz-zoom{display:none}
@media (max-width:560px){.qz-card-grid{grid-template-columns:1fr}.qz-cards-view .qz-children-list{flex-direction:column}.qz-cards-view .qz-children-list a{display:flex}}
@media (prefers-reduced-motion:reduce){.qz-card-grid .qz-card{transition:none}}
.qz-cards-foot{margin:3rem 0 0;text-align:center;font-size:.78rem;color:var(--qz-muted)}

.qz-cards-count{margin:.2rem 0 .4rem;font-size:.9rem;color:var(--qz-muted)}
.qz-cards-view .qz-children-list li{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.qz-hit-ctx{font-size:.75rem;color:var(--qz-muted)}
.qz-hit-topic{border-left:4px solid var(--c,var(--qz-primary)) !important}

/* Mobil: Der Ansichts-Umschalter bleibt auch zugeklappt in der Zeile; der Titel gibt dafür Platz ab. */
@media (max-width:1024px){.qz-home .qz-brand{flex:0 1 auto;max-width:30%}.qz-main{gap:.4rem}}

/* Der Umschalter zeigt das Ziel: Kacheln im Netz, Knotennetz in der Kartenansicht */
.qz-view-btn .qz-i-net{display:none}
.qz-view-btn[aria-pressed="true"] .qz-i-grid{display:none}
.qz-view-btn[aria-pressed="true"] .qz-i-net{display:block}

/* ---- 404: füllt den Bildschirm, großzügig, mit abgedunkeltem rotierendem Netz im Hintergrund (assets/net404.js) ---- */
body.error404 .wp-site-blocks{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.error404 .wp-site-blocks > main{flex:1}
.qz-404{position:relative;display:flex;flex-direction:column;justify-content:center;gap:0;overflow:hidden;isolation:isolate;
	padding:clamp(1.5rem,6vh,5rem) clamp(1.25rem,5vw,3rem) clamp(2rem,6vh,5rem)}
.qz-404 > *:not(.qz-404-net){box-sizing:border-box;position:relative;z-index:1;width:100%;max-width:780px;margin-left:auto;margin-right:auto}
.qz-404-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9;
	mask-image:radial-gradient(ellipse at center,#000 35%,transparent 92%);-webkit-mask-image:radial-gradient(ellipse at center,#000 35%,transparent 92%)}
.qz-404 .qz-title{font-size:clamp(2.6rem,7vw,5rem);line-height:1.05;letter-spacing:-.02em;margin:.4rem 0 1.2rem}
.qz-404 .qz-lead{font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.5;color:var(--qz-ink-soft);margin-top:0;margin-bottom:0;padding-right:min(18%,7rem)}
body.admin-bar.error404 .wp-site-blocks{min-height:calc(100vh - 32px);min-height:calc(100dvh - 32px)}
@media (max-width:782px){body.admin-bar.error404 .wp-site-blocks{min-height:calc(100vh - 46px);min-height:calc(100dvh - 46px)}}
.qz-404 .qz-404-search{margin:1.8rem 0 1.4rem}
.qz-404 .qz-404-h{font-size:1.2rem;margin:2.4rem 0 .9rem}
.qz-404 .qz-button{padding:.85rem 1.5rem;font-size:1.05rem}

/* ---- Geschützte Angaben ([qz_protect], [qz_mail]): Text wird erst per CSS aus Stücken zusammengesetzt ---- */
.qz-p::before{content:attr(data-c);white-space:pre-wrap}
.qz-protect{font-style:normal}
.qz-protect-mail{text-decoration:underline;text-underline-offset:.15em}

/* ---- Gesperrte Inhalte (Mitgliederstufe reicht nicht) ---- */
.qz-node.is-locked circle:not(.qz-ring):not(.qz-halo){stroke-dasharray:3 2}
.qz-node.is-locked{--qz-lock:1}
a.qz-locked::after{content:"\00a0· Mitglieder";font-size:.75em;color:var(--qz-muted)}

/* Konto-Knöpfe (Anmelden / Profil / Abmelden) */
a.qz-acct{text-decoration:none}
.qz-acct-group{display:inline-flex;gap:.35rem}
.qz-header-actions .qz-acct-group,.qz-header-actions a.qz-acct{flex:none}

/* ---- Ladeanimation des Netzes (Anpassen → Themen-Netz → Ladeanimation; assets/graph.js beginLoading) ---- */
#quizzie-graph{transition:opacity .5s ease}
#quizzie-graph.is-loading{opacity:0;pointer-events:none}
.qz-loader{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;background:var(--qz-bg);color:var(--qz-primary);transition:opacity .5s ease}
.qz-loader.is-done{opacity:0;pointer-events:none}
.qz-loader svg{overflow:visible}
.qz-loader-orbit{transform-origin:32px 30px;animation:qz-orbit 3.2s linear infinite;fill:currentColor}
.qz-loader-orbit circle{animation:qz-pulse-dot 1.6s ease-in-out infinite}
.qz-loader-orbit circle:nth-of-type(2){animation-delay:.25s}.qz-loader-orbit circle:nth-of-type(3){animation-delay:.5s}
.qz-loader-core{fill:var(--qz-found);animation:qz-pulse-dot 1.6s ease-in-out infinite}
.qz-loader-t{margin:.4rem 0 0;font-weight:650;color:var(--qz-ink)}
.qz-loader-s{margin:0;font-size:.85rem;color:var(--qz-muted)}
@keyframes qz-orbit{to{transform:rotate(360deg)}}
@keyframes qz-pulse-dot{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.qz-loader-orbit,.qz-loader-orbit circle,.qz-loader-core{animation:none}#quizzie-graph,.qz-loader{transition:none}}

/* ---- 3D-Ansicht (assets/graph.js, Abschnitt „3D-Ansicht“) ---- */
.qz-3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:0}
.qz-3d[hidden]{display:none}
.qz-3d:focus-visible{outline:2px solid var(--qz-primary);outline-offset:-4px}
#quizzie-graph.is-3d svg{display:none}
.qz-zoom #qz-3d-btn[aria-pressed="true"]{color:var(--qz-primary);border-color:var(--qz-primary)}

/* Hinweis auf verborgene Inhalte (Mitglieder): ein Satz mit Anmelde-Links, ohne Titel und Zahl */
.qz-member-hint{position:absolute;z-index:3;left:1rem;bottom:2.7rem;max-width:min(32rem,calc(100% - 7rem));margin:0;padding:.45rem .8rem;border:1px solid var(--qz-line);border-radius:.8rem;background:var(--qz-glass);backdrop-filter:blur(10px);font-size:.82rem;color:var(--qz-ink-soft)}
.qz-member-hint a{color:var(--qz-primary);font-weight:600}
.qz-children .qa-gate-note{margin:1rem 0 0}
.qz-member-hint{transition:opacity .6s ease,transform .6s ease}
.qz-member-hint.is-gone{opacity:0;transform:translateY(6px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.qz-member-hint{transition:none}}
.qz-member-hint{padding-right:2.2rem}
.qz-member-hint-x{position:absolute;top:.3rem;right:.3rem;display:grid;place-items:center;width:1.6rem;height:1.6rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--qz-muted);cursor:pointer}
.qz-member-hint-x:hover,.qz-member-hint-x:focus-visible{color:var(--qz-ink);background:color-mix(in srgb,var(--qz-ink) 8%,transparent)}
.qz-member-hint-x:focus-visible{outline:2px solid var(--qz-primary);outline-offset:1px}

/* Tablet und schmaler (≤ 1024 px): Die eingeklappte Leiste ist hier breit genug für den Panel-Inhalt, aber nicht für die ganze Seite */
@media (min-width:641px) and (max-width:1024px){.qz-tools.is-open .qz-filters{max-width:44rem}}