/* Räumliche Netzwerkansicht mit gleichwertigem SVG-Fallback und HTML-Bedienung. */
.home-state-network {
  /* Weißabstufungen des Marken-Grüns #2a7955: 14 / 24 / 30 / 46 Prozent. */
  --network-land: #e1ece7;
  --network-land-active: #ccdfd6;
  --network-land-side: #bfd7cc;
  --network-boundary: #9dc1b1;
  padding-block: 96px; background: transparent; scroll-margin-top: 95px;
}
.home-state-network__heading { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 64px; padding-bottom: 38px; }
.home-state-network__heading .fc-kicker { margin-bottom: 21px; }
.home-state-network__heading h2 { font-size: clamp(44px, 4.6vw, 66px); line-height: 1.02; }
.home-state-network__heading > p { max-width: 29em; color: var(--fc-text-soft); font-size: 17px; line-height: 1.7; }
.home-state-network__layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 70px); align-items: start; margin-top: 20px; border-top: 1px solid var(--fc-line); padding-top: 36px; }
.home-state-network__figure { position: sticky; top: 108px; align-self: start; margin: 0; min-width: 0; }
.home-state-network__canvas { position: relative; height: min(740px, calc(100svh - 140px)); min-height: 300px; background: transparent; transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .9s ease; }
.home-state-network.is-map-ready:not(.is-map-visible) .home-state-network__canvas { transform: translate3d(0, 18px, 0) scale(.97); opacity: .7; }
.home-state-network__map, .home-state-network__fallback, .home-state-network__webgl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; object-fit: contain; overflow: hidden; }
.home-state-network__webgl { pointer-events: none; overflow: visible; }
.home-state-network__webgl canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(4px 10px 6px rgba(26, 81, 63, .08)) drop-shadow(16px 30px 20px rgba(26, 81, 63, .17)); }
.home-state-network__map { overflow: visible; }
.home-state-network__land { fill: var(--network-land); fill-rule: evenodd; stroke: var(--network-boundary); stroke-width: .6; vector-effect: non-scaling-stroke; transition: fill .65s ease; }
.home-state-network__land.is-involved { fill: var(--network-land-active); }
.home-state-network__land-side { fill: var(--network-land-side); stroke: var(--network-land-side); stroke-width: .6; }
.home-state-network.is-3d [data-network-geography] { visibility: hidden; }
.home-state-network__route { fill: none; stroke: var(--fc-green-800); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: .85; transition: opacity .7s cubic-bezier(.22, 1, .36, 1) .16s; }
.home-state-network__route.is-coordination { stroke: var(--fc-green-600); stroke-dasharray: 4 5; stroke-width: 1.4; }
.home-state-network__route.is-case { stroke-width: .8; opacity: .4; }
.home-state-network__route.is-case.is-pending { opacity: 0; }
.home-state-network__route.is-pending { opacity: 0; transition: opacity .3s ease; }
.home-state-network__route.is-support { stroke-width: 2; opacity: 1; }
.home-state-network__route.is-support.is-pending { opacity: 0; }
.home-state-network__arrow { fill: var(--fc-green-800); }
.home-state-network__node { cursor: pointer; outline: none; opacity: 1; transition: opacity .65s cubic-bezier(.22, 1, .36, 1) .1s, visibility 0s; }
.home-state-network__node.is-pending { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
.home-state-network__node:hover, .home-state-network__node:focus-visible { opacity: 1; }
.home-state-network__node-hit { fill: transparent; }
.home-state-network__node-halo { fill: rgba(95, 255, 167, .24); stroke: var(--fc-green-300); stroke-opacity: .4; stroke-width: .75; }
.home-state-network__node-ring { fill: var(--fc-white); stroke: var(--fc-green-800); stroke-width: 1.5; }
.home-state-network__node-core { fill: var(--fc-green-800); }
.home-state-network__claim-mark { fill: var(--fc-white); stroke: var(--fc-green-800); stroke-width: 1.8; }
.home-state-network__node:focus-visible .home-state-network__claim-mark { stroke: var(--fc-green-600); stroke-width: 3; }
.home-state-network__key { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding: 14px 0; color: var(--fc-text-soft); font-size: 11px; }
.home-state-network__key span { display: inline-flex; align-items: center; gap: 8px; }
.home-state-network__key i { display: block; width: 8px; height: 8px; border: 1.5px solid var(--fc-green-800); border-radius: 50%; }
.home-state-network__key i.is-expert { background: var(--fc-green-800); box-shadow: 0 0 0 3px rgba(42, 121, 85, .15); }
.home-state-network__key i.is-support { position: relative; width: 20px; height: 0; border: 0; border-top: 1.5px solid var(--fc-green-800); border-radius: 0; }
.home-state-network__key i.is-support::after { position: absolute; right: 0; top: -3.5px; content: ''; width: 5px; height: 5px; border-top: 1.5px solid var(--fc-green-800); border-right: 1.5px solid var(--fc-green-800); transform: rotate(45deg); }
.home-state-network__node.is-fairly .home-state-network__node-core { fill: var(--fc-green-300); }
.home-state-network__node.is-fairly .home-state-network__node-ring { fill: var(--fc-green-800); }
.home-state-network__node:focus-visible .home-state-network__node-halo { stroke-opacity: 1; stroke-width: 2; }
.home-state-network__stem, .home-state-network__leader { stroke: var(--fc-green-600); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.home-state-network__label-bg { fill: var(--fc-white); fill-opacity: .95; stroke: var(--fc-line); stroke-width: .8; }
.home-state-network__node.is-active .home-state-network__label-bg { stroke: var(--fc-green-600); stroke-opacity: .6; }
.home-state-network__label-role { fill: var(--fc-green-950); font-family: var(--fc-font-body); font-size: 12px; font-weight: 500; }
.home-state-network__label-task { fill: var(--fc-text-soft); font-family: var(--fc-font-body); font-size: 10px; }
.home-state-network__panel { min-width: 0; padding-block: 12px 24px; }
.home-state-network__eyebrow { color: var(--fc-green-800); font-family: var(--v3-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.home-state-network__panel h3 { margin-top: 20px; font-size: 40px; line-height: 1.08; max-width: 13em; }
.home-state-network__panel-copy { margin-top: 18px; color: var(--fc-text-soft); font-size: 14px; line-height: 1.7; max-width: 30em; }
.home-state-network__steps { margin-top: 30px; padding: 0; list-style: none; border-bottom: 1px solid var(--fc-line); }
.home-state-network__steps li { display: flex; flex-direction: column; justify-content: center; min-height: clamp(220px, 32vh, 290px); border-top: 1px solid var(--fc-line); }
.home-state-network__steps button, .home-state-network__steps li:not(:has(button)) { display: grid; grid-template-columns: 27px 1fr; gap: 14px; width: 100%; padding: 28px 16px 28px 0; text-align: left; }
.home-state-network__steps button { border-radius: 0; transition: background .2s; }
.home-state-network__steps button[aria-pressed="true"] { background: rgba(42, 121, 85, .055); }
.home-state-network__steps button:hover { background: rgba(42, 121, 85, .035); }
.home-state-network__steps button > span, .home-state-network__steps li > span { padding-top: 3px; font-family: var(--v3-font-mono); font-size: 10px; color: var(--fc-green-600); text-align: center; }
.home-state-network__steps strong { display: block; color: var(--fc-green-950); font-size: 16px; font-weight: 500; }
.home-state-network__steps p { margin-top: 10px; color: var(--fc-text-soft); font-size: 14px; line-height: 1.7; }
.home-state-network__step-links { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 10px 22px 41px; }
.home-state-network__step-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--fc-green-800); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.home-state-network__steps li:not(:has(button)) .home-state-network__step-links { grid-column: 2; padding: 0; }
.home-state-network__service-link { display: inline-flex; align-items: center; min-height: 48px; margin-top: 26px; padding: 13px 17px; color: var(--fc-white); background: var(--fc-green-800); border-radius: 4px; font-size: 12px; line-height: 1.5; transition: background .2s; }
.home-state-network__service-link:hover { background: var(--fc-green-950); }
.home-state-network__map-info { position: absolute; bottom: 0; right: 0; width: min(280px, 100%); z-index: 2; pointer-events: none; }
.home-state-network__map-info summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; cursor: pointer; list-style: none; color: var(--fc-text-soft); pointer-events: auto; }
.home-state-network__map-info summary::-webkit-details-marker { display: none; }
.home-state-network__map-info summary span { display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; border: 1px solid var(--fc-line-strong); border-radius: 50%; font-size: 11px; }
.home-state-network__map-info > div { position: absolute; bottom: 44px; right: 0; width: 100%; padding: 16px; border: 1px solid var(--fc-line); border-radius: 4px; background: var(--fc-white); color: var(--fc-text-soft); font-size: 11px; line-height: 1.7; pointer-events: auto; }
.home-state-network__map-info p + p { margin-top: 9px; }
.home-state-network__map-info a { text-decoration: underline; text-underline-offset: 3px; }
.home-state-network button:focus-visible, .home-state-network a:focus-visible, .home-state-network summary:focus-visible { outline: 2px solid var(--fc-green-800); outline-offset: 3px; }
.home-state-network [hidden] { display: none; }
@media (max-width: 991px) {
  .home-state-network { padding-block: 72px; }
  .home-state-network__heading { gap: 36px; }
  .home-state-network__heading > p { font-size: 15px; }
  .home-state-network__layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; }
  .home-state-network__canvas { height: min(580px, calc(100svh - 140px)); }
  .home-state-network__panel h3 { font-size: 34px; }
}
@media (max-width: 767px) {
  .home-state-network { padding-block: 56px; }
  .home-state-network__heading { grid-template-columns: 1fr; gap: 24px; padding-bottom: 28px; }
  .home-state-network__heading h2 { font-size: 46px; }
  .home-state-network__layout { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; padding-top: 24px; }
  .home-state-network__panel { padding-block: 14px 0; }
  .home-state-network__panel h3 { font-size: 34px; margin-top: 14px; }
}
@media (max-width: 479px) {
  .home-state-network__heading h2 { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-state-network * { transition: none !important; }
  .home-state-network.is-map-ready .home-state-network__canvas { transform: none; opacity: 1; }
  .home-state-network .home-state-network__figure { position: relative; top: auto; }
  .home-state-network__steps li { min-height: 0; }
}

/* Kleine, feste Einsatzmarker statt mehrfacher konzentrischer Ringe. */
.home-state-network__expert-mark { fill: var(--fc-white); stroke: var(--fc-green-800); stroke-width: 1.3; }
.home-state-network__route.is-case { stroke-width: 1; stroke-dasharray: 2 3; opacity: .35; }
.home-state-network__route.is-case.is-pending { opacity: 0; }
.home-page .home-state-network__key i.is-expert { border-radius: 2px; background: var(--fc-white); }

/* Unaufdringliche Verbindungen: keine Einsatzpfeile oder Logo-Plaketten. */
.home-page .home-state-network__route { stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .68; }
.home-page .home-state-network__route.is-coordination { stroke: var(--fc-green-800); stroke-width: 1; stroke-dasharray: none; opacity: .38; }
.home-page .home-state-network__route.is-support { stroke-width: 2.4; opacity: .95; } /* Regionale Routen sind seit 22.10.2026 die Hauptaussage der Karte. */
.home-page .home-state-network__route.is-case { stroke-width: .8; stroke-dasharray: none; opacity: .32; }
.home-page .home-state-network__route.is-pending { opacity: 0; }
.home-page .home-state-network__key i.is-expert { border-radius: 50%; background: var(--fc-white); box-shadow: none; }
.home-page .home-state-network__key i.is-support::after { content: none; }
.home-page .home-state-network__node.is-fairly .home-state-network__node-core { fill: var(--fc-white); }

/* Mobil steht die Karte oben (skala.css), der Text scrollt darunter durch. */
@media (max-width: 991px) {
  .home-state-network.is-map-ready .home-state-network__canvas { transform: none; opacity: 1; transition: none; }
}
.home-page .home-state-network__expert-mark { fill: var(--fc-green-800); stroke: var(--fc-white); }

/* Karte seit 22.10.2026 (Bastian): eine Bildsprache für alle drei Schritte.
   Gefüllt = Experte am Standort, Ring = Schadenort, Bogen = Fahrt, gestrichelt = Innendienst Hamburg. */
.home-page .home-state-network__route.is-drive { stroke: var(--fc-green-800); stroke-width: 2.6; stroke-linecap: round; opacity: 1; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1) .2s, opacity .25s ease; }
.home-page .home-state-network__route.is-drive.is-pending { opacity: 0; stroke-dashoffset: 1; transition: opacity .2s ease, stroke-dashoffset 0s linear .2s; }
.home-page .home-state-network__route.is-desk { stroke: var(--fc-green-600); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .9; transition: opacity .6s ease .5s; }
.home-page .home-state-network__route.is-desk.is-pending { opacity: 0; transition: opacity .2s ease; }
.home-page .home-state-network__claim-mark { fill: var(--fc-white); stroke: var(--fc-green-800); stroke-width: 2; }
.home-page .home-state-network__expert-mark { fill: var(--fc-green-800); stroke: var(--fc-white); stroke-width: 1.5; }
.home-state-network__specialist-ring { fill: none; stroke: var(--fc-green-800); stroke-width: 1.4; }
.home-state-network__tag { fill: var(--fc-green-950); font-family: var(--fc-font-body); font-size: 11.5px; font-weight: 500; paint-order: stroke; stroke: rgba(255, 255, 255, .92); stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; transition: opacity .3s ease; }
.home-state-network__tag.is-zone { fill: var(--fc-green-800); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.home-state-network__tag.is-tag-hidden { opacity: 0; }
.home-page .home-state-network__land.is-involved { fill: var(--network-land-side); }
.home-page .home-state-network__key i.is-claim { background: var(--fc-white); }
.home-page .home-state-network__key i.is-expert { background: var(--fc-green-800); border-color: var(--fc-green-800); }
.home-page .home-state-network__key i.is-drive { width: 20px; height: 0; border: 0; border-top: 2.5px solid var(--fc-green-800); border-radius: 2px; }
.home-page .home-state-network__key i.is-desk { width: 20px; height: 0; border: 0; border-top: 2px dotted var(--fc-green-600); border-radius: 0; }
/* Einsatzgebiet (Kumul) deutlich eingefärbt, auch im 3D-Renderer (liest --network-land-active). */
/* Legende als helle Leiste in Kartenfarbe, damit die Zeichen genauso aussehen wie auf der Karte. */
.home-page .home-state-network__key { width: fit-content; margin: 8px auto 0; padding: 10px 20px; border-radius: 999px; background: var(--network-land); color: var(--fc-green-950); }
.home-page .home-state-network__key i.is-claim { border: 2px solid var(--fc-green-800); background: var(--fc-white); width: 10px; height: 10px; }
.home-page .home-state-network__key i.is-expert { width: 10px; height: 10px; border: 0; background: var(--fc-green-800); box-shadow: none; }