:root{--page-title-display:none;}/* Start custom CSS *//* =========================================================
   Borromäischer Knoten – Aufbau-Animation
   Reihenfolge: Rot (Mitte) → Grau → Grün, kurz halten, ausblenden, neu aufbauen.
   Pfade im SVG (borr-knotenElement-8.svg), Reihenfolge im <g id="Seilknoten">:
   1 weiß/grau-lang, 2 weiß/grün-lang, 3 weiß/rot-lang, 4 grau-lang, 5 grün-lang, 6 rot-lang,
   7 weiß/rot-kurz, 8 rot-kurz, 9 weiß/grau-kurz, 10 grau-kurz, 11 weiß/grün-kurz, 12 grün-kurz
   (die weißen Pfade erzeugen die Über-/Unterkreuzungen und laufen mit ihrer Farbe mit)
   ========================================================= */
.hero-bild svg path {
  stroke-dasharray: var(--knoten-len) var(--knoten-len);
  stroke-dashoffset: var(--knoten-len);
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.hero-bild svg path:nth-child(-n+6) { --knoten-len: 352px; }
.hero-bild svg path:nth-child(n+7) { --knoten-len: 160px; }
.hero-bild svg path:nth-child(3), .hero-bild svg path:nth-child(6), .hero-bild svg path:nth-child(7), .hero-bild svg path:nth-child(8) { animation-name: knoten-rot; }
.hero-bild svg path:nth-child(1), .hero-bild svg path:nth-child(4), .hero-bild svg path:nth-child(9), .hero-bild svg path:nth-child(10) { animation-name: knoten-grau; }
.hero-bild svg path:nth-child(2), .hero-bild svg path:nth-child(5), .hero-bild svg path:nth-child(11), .hero-bild svg path:nth-child(12) { animation-name: knoten-gruen; }
@keyframes knoten-rot {
  0%, 6% { stroke-dashoffset: var(--knoten-len); opacity: 1; }
  26%, 88% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes knoten-grau {
  0%, 26% { stroke-dashoffset: var(--knoten-len); opacity: 1; }
  46%, 88% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes knoten-gruen {
  0%, 46% { stroke-dashoffset: var(--knoten-len); opacity: 1; }
  66%, 88% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
/* Pause-Button (Klasse knoten-pause, Logik im Snippet "Mega Menu – …") */
.hero-bild.ist-pausiert svg path { animation-play-state: paused; }
.hero-bild .knoten-pause::before {
  content: ""; display: block; width: 12px; height: 14px;
  background: linear-gradient(currentColor 0 0) left / 4px 100% no-repeat, linear-gradient(currentColor 0 0) right / 4px 100% no-repeat;
}
.hero-bild .knoten-pause.ist-pausiert::before {
  width: 0; height: 0; margin-left: 4px; background: none;
  border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor;
}
.hero-bild .knoten-pause:focus-visible { outline: 2px solid var(--anthrazit); outline-offset: 3px; }
/* Barrierefreiheit: bei reduzierter Bewegung fertiger Knoten ohne Animation, kein Pause-Button nötig */
@media (prefers-reduced-motion: reduce) {
  .hero-bild svg path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .hero-bild .knoten-pause { display: none; }
}/* End custom CSS */