/* Systemplan (#system): acht Bausteine in drei Ebenen. Gemeinsame Grundlage für Startseite und Über uns.
   Seitenabstände: Startseite in css/home-navy.css, Über uns in css/page-ueber.css. JS: js/systemplan.js */
#system { --usp-acc: #2b8aff; --usp-line: rgba(255,255,255,.14); --usp-mut: rgba(255,255,255,.66); color: #fff; }
#system .usp-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
#system .eyebrow { color: #9fd3ff; }
#system h2 { color: #fff; margin: 0 0 18px; }
#system .usp-lead { color: rgba(255,255,255,.8); font-size: 17px; line-height: 1.55; margin: 0; max-width: 34em; }
#system .usp-map { position: relative; border: 1px solid var(--usp-line); border-radius: 22px; padding: 20px 24px 0; background: rgba(8,20,40,.28); }
/* Plan behält auf schmalen Schirmen das Desktop-Layout in fester Breite und wird per JS (transform: scale) verkleinert */
#system .usp-plan { position: relative; min-width: 0; }
#system .usp-scale { transform-origin: 0 0; }
#system .usp-maphead { display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--usp-mut); padding-bottom: 12px; border-bottom: 1px solid var(--usp-line); }
#system .usp-hint { display: none; }
#system .usp-tiers { position: relative; }
/* Linien: ruhige Grundlinien, nur die aktiven Verbindungen deutlich */
#system .usp-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#system .usp-svg path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#system .usp-svg .base path { stroke: rgba(255,255,255,.09); }
#system .usp-svg .hot path { stroke: var(--usp-acc); stroke-width: 2; opacity: 0; transition: opacity .35s; }
#system .usp-svg .hot circle { fill: var(--usp-acc); opacity: 0; transition: opacity .35s; }
#system .usp-svg .hot .on { opacity: 1; }
#system .usp-tier { position: relative; display: grid; grid-template-columns: 156px 1fr; align-items: center; padding: 30px 0; }
#system .usp-tier + .usp-tier { border-top: 1px dashed rgba(255,255,255,.07); }
#system .usp-tl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--usp-mut); }
#system .usp-tl b { display: block; color: #fff; font-size: 12px; letter-spacing: .1em; margin-bottom: 2px; }
#system .usp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#system .usp-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Bausteine im Ton der Kacheln aus „Das macht uns aus“ (Startseite): gleiche Fläche, Rand, Radius, Schriftfarben */
#system { --usp-card: rgba(120,170,255,.09); --usp-card-line: rgba(255,255,255,.10); --usp-sub: rgba(232,234,238,.78); }
#system .usp-node { position: relative; z-index: 1; text-align: left; padding: 16px 18px; border-radius: 24px; border: 1px solid var(--usp-card-line); background: var(--usp-card); color: #fff; font: inherit; cursor: pointer; transition: transform .25s, color .25s, background-color .25s, border-color .25s; }
#system .usp-node strong { display: block; overflow-wrap: break-word; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
#system .usp-node small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--usp-sub); margin-top: 3px; }
@media (hover: hover) { #system .usp-node:hover { transform: translateY(-2px); } }
#system .usp-node:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#system .usp-map[data-active] .usp-node { color: rgba(255,255,255,.55); border-color: var(--usp-card-line); }
#system .usp-map[data-active] .usp-node small { color: rgba(255,255,255,.62); }
#system .usp-map .usp-node.is-link { color: #fff; border-color: var(--usp-acc); }
#system .usp-map .usp-node.is-link small { color: var(--usp-sub); }
#system .usp-map .usp-node.is-on { background: #fff; color: #0b1c3d; border-color: #fff; }
#system .usp-map .usp-node.is-on small { color: #43506a; }
#system .usp-node.is-on::after { content: ""; position: absolute; inset: -5px; border-radius: 28px; border: 1px solid var(--usp-acc); animation: uspPulse 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes uspPulse { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
/* Lange Namen (seit 15.10.): Knopf unter dem Text statt daneben, sonst quetscht er den Text (Yusuf 16.10.) */
#system .usp-info { display: grid; grid-template-columns: 156px minmax(0, 1fr); align-items: start; column-gap: 16px; row-gap: 12px; border-top: 1px solid var(--usp-line); padding: 16px 0 18px; min-height: 78px; }
#system .usp-info-k { padding-top: 4px; overflow-wrap: anywhere; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9fd3ff; }
#system .usp-info-t { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.88); margin: 0; }
#system .usp-link { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; color: #0b1c3d !important; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .2s; }
#system .usp-link::after { content: "→"; margin-left: 6px; }
@media (hover: hover) { #system .usp-link:hover { transform: translateY(-1px); } }
#system .usp-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 1100px) {
  #system .usp-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
/* Handy: derselbe Plan wie am Desktop, verkleinert (js/systemplan.js). Erklärzeile bleibt normal groß. */
@media (max-width: 760px) {
  #system .usp-map { padding: 14px 14px 0; border-radius: 20px; }
  #system .usp-hint { display: block; font-size: 13px; color: var(--usp-mut); margin: 0 0 8px; }
  #system .usp-info { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 12px 0 16px; min-height: 150px; align-content: start; }
  #system .usp-link { grid-column: 1; justify-self: start; white-space: normal; padding-top: 10px; padding-bottom: 10px; }
  /* Erklärzeile gut lesbar (2026-10-02); Bausteine im verkleinerten Plan mit größerer Trefferfläche nach oben/unten */
  #system .usp-info-k { font-size: 13px; letter-spacing: .1em; }
  #system .usp-info-t { font-size: 16px; }
  #system .usp-node::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  #system .usp-node.is-on::after { animation: none; opacity: .7; }
  #system .usp-node, #system .usp-svg .hot path, #system .usp-svg .hot circle, #system .usp-link { transition: none; }
  #system .usp-node:hover, #system .usp-link:hover { transform: none; }
}