/* =============================================================
   Growen — Hero-Netzwerk (dekorativer, interaktiver Hintergrund)
   Nur auf der Startseite geladen (siehe functions.php).
   Sichtbar/aktiv nur ab 901px — darunter rutscht die "Gefunden"-
   Karte unter den Fließtext, siehe @media weiter unten und die
   Breakpoint-Prüfung in hero-network.js.
   ============================================================= */

.hero-bg{
	position:absolute; inset:0; z-index:0;
	opacity:0.6;
	-webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 45%, black 58%);
	        mask-image:linear-gradient(to right, transparent 0%, transparent 45%, black 58%);
}
.hero-bg svg{display:block; width:100%; height:100%; overflow:hidden;}
.hero-bg, .hero-bg *{pointer-events:none;}
.net-node, .net-node *{pointer-events:auto; cursor:pointer;}
.net-node .ripple{pointer-events:none;}

.cursor-glow{
	position:absolute; left:0; top:0; z-index:0;
	width:260px; height:260px; margin:-130px 0 0 -130px;
	border-radius:50%; pointer-events:none;
	background:radial-gradient(circle, rgba(15,110,86,0.14), transparent 70%);
	opacity:0; transition:opacity .3s ease;
	will-change:transform;
}
.hero:hover .cursor-glow{opacity:1;}

.hero-network-blob{position:absolute; z-index:0; border-radius:50%; pointer-events:none; filter:blur(46px);}
.hero-network-blob.b1{width:340px; height:340px; right:4%; top:-8%; background:radial-gradient(circle, rgba(15,110,86,0.14), transparent 70%);}
.hero-network-blob.b2{width:260px; height:260px; right:2%; bottom:-12%; background:radial-gradient(circle, rgba(99,153,34,0.12), transparent 70%);}

/* Unter 901px steht die Ergebnis-Karte nicht mehr neben dem Text, sondern
   darunter (siehe .hero-inner-Breakpoint in content.css) — das Netzwerk hat
   dann nichts mehr, neben dem es stehen könnte. Kein Layout, kein Paint. */
@media (max-width:900px){
	.hero-bg, .cursor-glow{display:none;}
}

.net-node circle.core{transform-box:fill-box; transform-origin:center; animation:growenNetPulse 5.5s ease-in-out infinite;}
.net-edge{animation:growenNetFlicker 6s ease-in-out infinite;}
.ripple{fill:none; stroke:#639922; stroke-width:2; transform-box:fill-box; transform-origin:center; opacity:0;}
.leaflabel{opacity:0; transition:opacity .18s ease; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11px; fill:var(--text-mute);}
.pillarlabel{font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px; fill:var(--text-mute);}
.pillarlabel.emph{font-size:15px; font-weight:700; fill:var(--teal-deep);}
.pillarlabel.emph-mid{font-size:13.5px; font-weight:600; fill:var(--teal-deep);}

@keyframes growenNetPulse{ 0%,100%{transform:scale(1); opacity:0.75;} 50%{transform:scale(1.18); opacity:1;} }
@keyframes growenNetFlicker{ 0%,100%{opacity:0.16;} 50%{opacity:0.45;} }

.net-node:hover circle.core{
	transform:scale(1.55);
	opacity:1;
	animation-play-state:paused;
	filter:brightness(1.2);
}

.net-wrap:has(.net-node:hover) .net-edge{ transition:stroke-opacity .15s ease, stroke .15s ease; }

.net-wrap:has(#node-c:hover)  .edge[data-a="c"],  .net-wrap:has(#node-c:hover)  .edge[data-b="c"],
.net-wrap:has(#node-bk:hover) .edge[data-a="bk"], .net-wrap:has(#node-bk:hover) .edge[data-b="bk"],
.net-wrap:has(#node-g:hover)  .edge[data-a="g"],  .net-wrap:has(#node-g:hover)  .edge[data-b="g"],
.net-wrap:has(#node-lo:hover) .edge[data-a="lo"], .net-wrap:has(#node-lo:hover) .edge[data-b="lo"],
.net-wrap:has(#node-st:hover) .edge[data-a="st"], .net-wrap:has(#node-st:hover) .edge[data-b="st"],
.net-wrap:has(#node-l1:hover) .edge[data-a="l1"], .net-wrap:has(#node-l1:hover) .edge[data-b="l1"],
.net-wrap:has(#node-l2:hover) .edge[data-a="l2"], .net-wrap:has(#node-l2:hover) .edge[data-b="l2"],
.net-wrap:has(#node-l3:hover) .edge[data-a="l3"], .net-wrap:has(#node-l3:hover) .edge[data-b="l3"],
.net-wrap:has(#node-l4:hover) .edge[data-a="l4"], .net-wrap:has(#node-l4:hover) .edge[data-b="l4"],
.net-wrap:has(#node-l5:hover) .edge[data-a="l5"], .net-wrap:has(#node-l5:hover) .edge[data-b="l5"],
.net-wrap:has(#node-l6:hover) .edge[data-a="l6"], .net-wrap:has(#node-l6:hover) .edge[data-b="l6"],
.net-wrap:has(#node-l7:hover) .edge[data-a="l7"], .net-wrap:has(#node-l7:hover) .edge[data-b="l7"],
.net-wrap:has(#node-l8:hover) .edge[data-a="l8"], .net-wrap:has(#node-l8:hover) .edge[data-b="l8"],
.net-wrap:has(#node-l9:hover) .edge[data-a="l9"], .net-wrap:has(#node-l9:hover) .edge[data-b="l9"],
.net-wrap:has(#node-l10:hover) .edge[data-a="l10"], .net-wrap:has(#node-l10:hover) .edge[data-b="l10"],
.net-wrap:has(#node-l11:hover) .edge[data-a="l11"], .net-wrap:has(#node-l11:hover) .edge[data-b="l11"],
.net-wrap:has(#node-l12:hover) .edge[data-a="l12"], .net-wrap:has(#node-l12:hover) .edge[data-b="l12"],
.net-wrap:has(#node-l13:hover) .edge[data-a="l13"], .net-wrap:has(#node-l13:hover) .edge[data-b="l13"],
.net-wrap:has(#node-l14:hover) .edge[data-a="l14"], .net-wrap:has(#node-l14:hover) .edge[data-b="l14"],
.net-wrap:has(#node-l15:hover) .edge[data-a="l15"], .net-wrap:has(#node-l15:hover) .edge[data-b="l15"],
.net-wrap:has(#node-l16:hover) .edge[data-a="l16"], .net-wrap:has(#node-l16:hover) .edge[data-b="l16"],
.net-wrap:has(#node-l17:hover) .edge[data-a="l17"], .net-wrap:has(#node-l17:hover) .edge[data-b="l17"],
.net-wrap:has(#node-l18:hover) .edge[data-a="l18"], .net-wrap:has(#node-l18:hover) .edge[data-b="l18"],
.net-wrap:has(#node-l19:hover) .edge[data-a="l19"], .net-wrap:has(#node-l19:hover) .edge[data-b="l19"],
.net-wrap:has(#node-l20:hover) .edge[data-a="l20"], .net-wrap:has(#node-l20:hover) .edge[data-b="l20"],
.net-wrap:has(#node-l21:hover) .edge[data-a="l21"], .net-wrap:has(#node-l21:hover) .edge[data-b="l21"],
.net-wrap:has(#node-l22:hover) .edge[data-a="l22"], .net-wrap:has(#node-l22:hover) .edge[data-b="l22"],
.net-wrap:has(#node-l23:hover) .edge[data-a="l23"], .net-wrap:has(#node-l23:hover) .edge[data-b="l23"],
.net-wrap:has(#node-l24:hover) .edge[data-a="l24"], .net-wrap:has(#node-l24:hover) .edge[data-b="l24"]
{ stroke:var(--pop); stroke-opacity:.95; stroke-width:2px; animation-play-state:paused; }

.net-wrap:has(#node-bk:hover)  #label-bk,
.net-wrap:has(#node-l1:hover)  #label-l1,  .net-wrap:has(#node-l2:hover)  #label-l2,
.net-wrap:has(#node-l3:hover)  #label-l3,  .net-wrap:has(#node-l4:hover)  #label-l4,
.net-wrap:has(#node-l5:hover)  #label-l5,  .net-wrap:has(#node-l6:hover)  #label-l6,
.net-wrap:has(#node-l7:hover)  #label-l7,  .net-wrap:has(#node-l8:hover)  #label-l8,
.net-wrap:has(#node-l9:hover)  #label-l9,  .net-wrap:has(#node-l10:hover) #label-l10,
.net-wrap:has(#node-l11:hover) #label-l11, .net-wrap:has(#node-l12:hover) #label-l12,
.net-wrap:has(#node-l13:hover) #label-l13, .net-wrap:has(#node-l14:hover) #label-l14,
.net-wrap:has(#node-l15:hover) #label-l15, .net-wrap:has(#node-l16:hover) #label-l16,
.net-wrap:has(#node-l17:hover) #label-l17, .net-wrap:has(#node-l18:hover) #label-l18,
.net-wrap:has(#node-l19:hover) #label-l19, .net-wrap:has(#node-l20:hover) #label-l20,
.net-wrap:has(#node-l21:hover) #label-l21, .net-wrap:has(#node-l22:hover) #label-l22,
.net-wrap:has(#node-l23:hover) #label-l23, .net-wrap:has(#node-l24:hover) #label-l24
{ opacity:1; }

@media (prefers-reduced-motion: reduce){
	.net-node circle.core, .net-edge{animation:none !important; opacity:0.5;}
	.net-node:hover circle.core{transform:none;}
}

/* Sanftes Auszoomen/Ausblenden beim Verlassen des Hero-Bereichs — reines CSS,
   ohne Unterstützung passiert einfach nichts (kein Fallback-Code nötig). */
@supports (animation-timeline: view()){
	@media (prefers-reduced-motion: no-preference){
		.hero-bg{
			animation:growenNetExit linear forwards;
			animation-timeline:view();
			animation-range:exit 0% exit 100%;
		}
	}
}
@keyframes growenNetExit{ to{ transform:scale(1.1) translateY(-18px); opacity:0.15; } }