<script>
/**
 *  @name Strassennetz
 *  ------------------------------------------------------
 *  Komponente für die Hauptgrafik
 * @author DigS-Gov Projekt
 *  ------------------------------------------------------
 *
 *  Enthält SVGs für die Straßen, sowie für die Kacheln der Einrichtungen, der Fahrzeug-Symbole und Popups.
 *  Hier werden die Eigenschaften der einzelnen Elemente (Name, Position, etc.) hauptsächlich festgelegt.
 */
import BehoerdeItem from "./BehoerdeItem.vue";
import Icon_Zuzugsmeldebehoerde from "./icons/Icon_Zuzugsmeldebehoerde.vue";
import TruckAndStopsign from "./TruckAndStopsign.vue";
import Popup from "./Popup.vue";
import Icon_Close from "./icons/Icon_Close.vue";
import { store } from "../store.js";

export default {
  data() {
    return {
      store,
      truck_original_parent: null, // DOM-Element
      // currentPath: window.location.hash,
    };
  },
  mounted() {
    this.truck_original_parent = document.getElementById("TruckAndStopsigns");
  },
  props: {
    page2_active: {
      type: Boolean,
      required: false,
    },
    page3_active: {
      type: Boolean,
      required: false,
    },
  },
  methods: {
    /**
     * Schließt offenes Popup
     */
    closePopup() {
      if (store.aufloesung_popup != "") {
        this.truck_original_parent.append(
          document.getElementById(
            "TruckAndStopsign_" + store.id_table[store.aufloesung_popup]
          )
        );
      }
      store.aufloesung_popup = "";
      store.info_popup = "";
    },
    // #region Methoden für Computed CSS-Klassen für Straßen
    // (VARIANTEN A - C-- > VERALTET)
    greenStreet(amt) {
      return (
        store.config.variante_C &&
        this.$route.path.includes(store.config.route_aufloesung) &&
        store.checked_values[amt] &&
        !store.correct_values[amt].warnung
      );
    },
    yellowStreet(amt) {
      return (
        store.config.variante_C &&
        this.$route.path.includes(store.config.route_aufloesung) &&
        store.correct_values[amt].warnung
      );
    },
    redStreet(amt) {
      return (
        store.config.variante_C &&
        this.$route.path.includes(store.config.route_aufloesung) &&
        !store.checked_values[amt] &&
        !store.correct_values[amt].warnung
      );
    },
    // #endregion
  },
  computed: {
    /**
     * Gibt den Namen der Einrichtung zurück, für die das aktuelle Popup angezeigt werden soll.
     */
    currentPopup() {
      if (store.aufloesung_popup != "") {
        return store.aufloesung_popup;
      }
      if (store.info_popup != "") {
        return store.info_popup;
      }
      return "";
    },
    // #region Computed CSS-Klassen für Straßen
    CSS_street_statistik() {
      return {
        gray_street:
          this.$route.path.includes(store.config.route_eingabe) || !store.config.variante_C,
        green_street: this.greenStreet("landesamt_fuer_statistik"),
        yellow_street: this.yellowStreet("landesamt_fuer_statistik"),
        red_street: this.redStreet("landesamt_fuer_statistik"),
      };
    },
    CSS_street_steuern() {
      return {
        gray_street:
          this.$route.path.includes(store.config.route_eingabe) || !store.config.variante_C,
        green_street: this.greenStreet("bundeszentralamt_fuer_steuern"),
        yellow_street: this.yellowStreet("bundeszentralamt_fuer_steuern"),
        red_street: this.redStreet("bundeszentralamt_fuer_steuern"),
      };
    },
    CSS_street_auslaender() {
      return {
        gray_street:
          this.$route.path.includes(store.config.route_eingabe) || !store.config.variante_C,
        green_street: this.greenStreet("auslaenderbehoerde"),
        yellow_street: this.yellowStreet("auslaenderbehoerde"),
        red_street: this.redStreet("auslaenderbehoerde"),
      };
    },
    CSS_street_gez() {
      return {
        gray_street:
          this.$route.path.includes(store.config.route_eingabe) || !store.config.variante_C,
        green_street: this.greenStreet("gez"),
        yellow_street: this.yellowStreet("gez"),
        red_street: this.redStreet("gez"),
      };
    },
    CSS_street_religion() {
      return {
        gray_street:
          this.$route.path.includes(store.config.route_eingabe) || !store.config.variante_C,
        green_street: this.greenStreet("religionsgemeinschaft"),
        yellow_street: this.yellowStreet("religionsgemeinschaft"),
        red_street: this.redStreet("religionsgemeinschaft"),
      };
    },
    CSS_street_krankenkasse() {
      return {
        gray_street:
          this.$route.path.includes(store.config.route_eingabe) || !store.config.variante_C,
        green_street: this.greenStreet("krankenkasse"),
        yellow_street: this.yellowStreet("krankenkasse"),
        red_street: this.redStreet("krankenkasse"),
      };
    },
    CSS_street_parteien() {
      return {
        gray_street:
          this.$route.path.includes(store.config.route_eingabe) || !store.config.variante_C,
        green_street: this.greenStreet("parteien"),
        yellow_street: this.yellowStreet("parteien"),
        red_street: this.redStreet("parteien"),
      };
    },
    CSS_street_bundeswehr() {
      return {
        gray_street:
          this.$route.path.includes(store.config.route_eingabe) || !store.config.variante_C,
        green_street: this.greenStreet("bundeswehr"),
        yellow_street: this.yellowStreet("bundeswehr"),
        red_street: this.redStreet("bundeswehr"),
      };
    },
    CSS_street_wegzug() {
      return {
        gray_street:
          this.$route.path.includes(store.config.route_eingabe) || !store.config.variante_C,
        green_street: this.greenStreet("wegzugsmeldebehoerde"),
        yellow_street: this.yellowStreet("wegzugsmeldebehoerde"),
        red_street: this.redStreet("wegzugsmeldebehoerde"),
      };
    },
    CSS_street_jubilaeen() {
      return {
        gray_street:
          this.$route.path.includes(store.config.route_eingabe) || !store.config.variante_C,
        green_street: this.greenStreet("jubilaeen"),
        yellow_street: this.yellowStreet("jubilaeen"),
        red_street: this.redStreet("jubilaeen"),
      };
    },
    CSS_street_rente() {
      return {
        gray_street:
          this.$route.path.includes(store.config.route_eingabe) || !store.config.variante_C,
        green_street: this.greenStreet("deutsche_rentenversicherung"),
        yellow_street: this.yellowStreet("deutsche_rentenversicherung"),
        red_street: this.redStreet("deutsche_rentenversicherung"),
      };
    },
    CSS_street_bva() {
      return {
        gray_street:
          this.$route.path.includes(store.config.route_eingabe) || !store.config.variante_C,
        green_street: this.greenStreet("bundesverwaltungsamt"),
        yellow_street: this.yellowStreet("bundesverwaltungsamt"),
        red_street: this.redStreet("bundesverwaltungsamt"),
      };
    },
    // #endregion
  },
  components: {
    BehoerdeItem,
    Icon_Zuzugsmeldebehoerde,
    TruckAndStopsign,
    Popup,
    Icon_Close,
  },
};
</script>

<template>
  <!-- Gesamte Grafik -->
  <svg id="Strassennetz" xmlns="http://www.w3.org/2000/svg" viewBox="0 -15 1100 700">
    <!-- Straßen -->
    <g id="Strassen" class="streets_base">
      <g
        id="Strasse_LandesamtFuerStatistik"
        :class="{
          blurred:
            (currentPopup != 'landesamt_fuer_statistik' && currentPopup != '') ||
            store.info_popup != '',
        }"
        v-if="
          store.config.variante_A ||
          store.values.landesamt_fuer_statistik ||
          $route.path.includes(store.config.route_aufloesung)
        "
      >
        <rect :class="CSS_street_statistik" x="541.4" y="94.57" width="13" height="178" />
        <line class="cls-2" x1="548.15" y1="94.57" x2="548.15" y2="98.28" />
        <line class="cls-3" x1="548.15" y1="105.69" x2="548.15" y2="265.15" />
        <line class="cls-2" x1="548.15" y1="268.86" x2="548.15" y2="272.57" />
      </g>
      <g
        id="Strasse_Bundesverwaltungsamt"
        :class="{
          blurred:
            (currentPopup != 'bundesverwaltungsamt' && currentPopup != '') ||
            store.info_popup != '',
        }"
        v-if="
          store.config.variante_A ||
          store.values.bundesverwaltungsamt ||
          $route.path.includes(store.config.route_aufloesung)
        "
      >
        <path
          :class="CSS_street_bva"
          d="M868.78,344.5h52.16l1.9.08a26.73,26.73,0,0,1,7.62,1.57,27.37,27.37,0,0,1,6.93,3.74,24.64,24.64,0,0,1,5.55,5.83,22.45,22.45,0,0,1,3.37,7.54,23.06,23.06,0,0,1,.58,4.14l.05,1.05V478h-13V368.49l0-.44a9.33,9.33,0,0,0-.24-1.75,9.53,9.53,0,0,0-1.48-3.27,11.68,11.68,0,0,0-2.63-2.77,14.7,14.7,0,0,0-3.52-1.89,14.38,14.38,0,0,0-4-.82l-1.08-.05H868.78Z"
          transform="translate(-432.71 -205.43)"
        ></path>
        <line class="cls-2" x1="507.49" y1="272.57" x2="507.49" y2="268.59" />
        <path
          class="cls-3"
          d="M940.2,466.08V370a19.92,19.92,0,0,0-.49-5.24,15.9,15.9,0,0,0-2.08-4.8,18.37,18.37,0,0,0-7.88-6.77,20.48,20.48,0,0,0-5-1.57,29,29,0,0,0-5.28-.33H876.73"
          transform="translate(-432.71 -205.43)"
        />
        <line class="cls-2" x1="440.05" y1="145.82" x2="436.08" y2="145.82" />
      </g>
      <g
        id="Strasse_BundeszentralamtFuerSteuern"
        :class="{
          blurred:
            (currentPopup != 'bundeszentralamt_fuer_steuern' && currentPopup != '') ||
            store.info_popup != '',
        }"
        v-if="
          store.config.variante_A ||
          store.values.bundeszentralamt_fuer_steuern ||
          $route.path.includes(store.config.route_aufloesung)
        "
      >
        <path
          :class="CSS_street_steuern"
          d="M1092.46,357.78h-52.15l-1.08.05a14.06,14.06,0,0,0-7.54,2.72,11.83,11.83,0,0,0-2.63,2.76,9.58,9.58,0,0,0-1.48,3.28,9.23,9.23,0,0,0-.24,1.74l0,.44V478.28h-13V368.73l.05-1.05a21.5,21.5,0,0,1,.58-4.14,22.62,22.62,0,0,1,3.37-7.54,24.83,24.83,0,0,1,5.55-5.83,26.94,26.94,0,0,1,14.54-5.31l1.91-.08h52.15Z"
          transform="translate(-432.71 -205.43)"
        />
        <line class="cls-2" x1="587.85" y1="272.85" x2="587.85" y2="268.88" />
        <path
          class="cls-3"
          d="M1020.55,466.36V370.24a20.69,20.69,0,0,1,.5-5.36,16.89,16.89,0,0,1,2.14-4.95,19,19,0,0,1,8.1-6.95,21.47,21.47,0,0,1,5.14-1.61,30.33,30.33,0,0,1,5.37-.33h42.72"
          transform="translate(-432.71 -205.43)"
        ></path>
        <line class="cls-2" x1="655.78" y1="145.6" x2="659.76" y2="145.6" />
      </g>
      <g
        id="Strasse_Parteien"
        :class="{
          blurred:
            (currentPopup != 'parteien' && currentPopup != '') || store.info_popup != '',
        }"
        v-if="
          store.config.variante_A ||
          store.values.parteien ||
          $route.path.includes(store.config.route_aufloesung)
        "
      >
        <rect
          :class="CSS_street_parteien"
          x="541.78"
          y="396.09"
          width="13"
          height="178"
        />
        <line class="cls-2" x1="548.03" y1="574.09" x2="548.03" y2="570.38" />
        <line class="cls-3" x1="548.03" y1="562.97" x2="548.03" y2="403.51" />
        <line class="cls-2" x1="548.03" y1="399.8" x2="548.03" y2="396.09" />
      </g>
      <g
        id="Strasse_Bundeswehr"
        :class="{
          blurred:
            (currentPopup != 'bundeswehr' && currentPopup != '') ||
            store.info_popup != '',
        }"
        v-if="
          store.config.variante_A ||
          store.values.bundeswehr ||
          $route.path.includes(store.config.route_aufloesung)
        "
      >
        <path
          :class="CSS_street_bundeswehr"
          d="M869.16,722h52.16l1.07,0a13.89,13.89,0,0,0,4-.82,14.35,14.35,0,0,0,3.52-1.89,11.68,11.68,0,0,0,2.64-2.76,9.86,9.86,0,0,0,1.48-3.28,9.22,9.22,0,0,0,.23-1.74l0-.45V601.52h13V711.08l-.05,1a22.21,22.21,0,0,1-3.95,11.69,25.23,25.23,0,0,1-5.55,5.83A27,27,0,0,1,923.22,735l-1.9.07H869.16Z"
          transform="translate(-432.71 -205.43)"
        />
        <line class="cls-2" x1="508.36" y1="396.09" x2="508.36" y2="400.07" />
        <path
          class="cls-3"
          d="M941.07,613.45v96.12a20.69,20.69,0,0,1-.5,5.36,16.74,16.74,0,0,1-2.14,5,19,19,0,0,1-8.1,7,21.47,21.47,0,0,1-5.14,1.61,30.16,30.16,0,0,1-5.36.33H877.11"
          transform="translate(-432.71 -205.43)"
        ></path>
        <line class="cls-2" x1="440.43" y1="523.34" x2="436.45" y2="523.34" />
      </g>
      <g
        id="Strasse_Krankenkasse"
        :class="{
          blurred:
            (currentPopup != 'krankenkasse' && currentPopup != '') ||
            store.info_popup != '',
        }"
        v-if="
          store.config.variante_A ||
          store.values.krankenkasse ||
          $route.path.includes(store.config.route_aufloesung)
        "
      >
        <path
          :class="CSS_street_krankenkasse"
          d="M1092.84,734.74h-52.16l-1.9-.08a26.67,26.67,0,0,1-7.61-1.57,27.26,27.26,0,0,1-6.94-3.74,24.84,24.84,0,0,1-5.55-5.83,22.89,22.89,0,0,1-3.37-7.53,23.3,23.3,0,0,1-.58-4.15l-.05-1.05V601.24h13V710.75l0,.44a9.32,9.32,0,0,0,.23,1.75,9.86,9.86,0,0,0,1.48,3.28,11.88,11.88,0,0,0,2.64,2.76,14.7,14.7,0,0,0,3.52,1.89,14.23,14.23,0,0,0,4,.82l1.07,0h52.16Z"
          transform="translate(-432.71 -205.43)"
        />
        <line class="cls-2" x1="588.72" y1="395.81" x2="588.72" y2="399.78" />
        <path
          class="cls-3"
          d="M1021.43,613.16v96.12a19.92,19.92,0,0,0,.48,5.24,15.9,15.9,0,0,0,2.08,4.8,18.46,18.46,0,0,0,7.89,6.77,21,21,0,0,0,5,1.58,29.91,29.91,0,0,0,5.28.32h42.72"
          transform="translate(-432.71 -205.43)"
        ></path>
        <line class="cls-2" x1="656.16" y1="522.56" x2="660.13" y2="522.56" />
      </g>
      <g
        id="Strasse_Auslaenderbehoerde"
        :class="{
          blurred:
            (currentPopup != 'auslaenderbehoerde' && currentPopup != '') ||
            store.info_popup != '',
        }"
        v-if="
          store.config.variante_A ||
          store.values.auslaenderbehoerde ||
          $route.path.includes(store.config.route_aufloesung)
        "
      >
        <path
          :class="CSS_street_auslaender"
          d="M1307.08,432l-67,0a12.6,12.6,0,0,0-9.57,4.85,12.77,12.77,0,0,0-2.36,5,12.48,12.48,0,0,0-.24,1.36c-.06.46,0,.93-.09,1.39v39.86c0,.3,0,.8,0,1.27l-.08,1.4c-.07.93-.25,1.85-.39,2.78s-.44,1.82-.71,2.72a25.85,25.85,0,0,1-5.63,9.63,25.42,25.42,0,0,1-9.16,6.36,26.23,26.23,0,0,1-5.41,1.52,20.33,20.33,0,0,1-2.79.3l-1.4.07H1100.39v-13H1202.2l.69,0a7.88,7.88,0,0,0,1.38-.16,12.38,12.38,0,0,0,7.18-3.88,12.71,12.71,0,0,0,2.78-4.74l.35-1.34c.05-.46.16-.91.19-1.37l0-.7a6.14,6.14,0,0,0,0-.82V444.52c.05-.93.06-1.87.17-2.8s.24-1.86.48-2.77a25.9,25.9,0,0,1,4.8-10.08A25.61,25.61,0,0,1,1239.7,419l67.38,0Z"
          transform="translate(-432.71 -205.43)"
        />
        <line class="cls-2" x1="667.69" y1="298.32" x2="673.29" y2="298.32" />
        <path
          class="cls-3"
          d="M1117.19,503.75h82.75c1.25,0,2.51,0,3.74-.08A18.89,18.89,0,0,0,1221,487a32.71,32.71,0,0,0,.13-3.72V449.46a63.6,63.6,0,0,1,.22-7.55,19.41,19.41,0,0,1,14.4-16,28.52,28.52,0,0,1,7.53-.62h52.66"
          transform="translate(-432.71 -205.43)"
        ></path>
        <line class="cls-2" x1="868.78" y1="219.82" x2="874.38" y2="219.82" />
      </g>
      <g
        id="Strasse_Religionsgemeinschaft"
        :class="{
          blurred:
            (currentPopup != 'religionsgemeinschaft' && currentPopup != '') ||
            store.info_popup != '',
        }"
        v-if="
          store.config.variante_A ||
          store.values.religionsgemeinschaft ||
          $route.path.includes(store.config.route_aufloesung)
        "
      >
        <path
          :class="CSS_street_religion"
          d="M1307.08,661.5l-67.38,0a25.61,25.61,0,0,1-19.41-9.84,25.9,25.9,0,0,1-4.8-10.08c-.24-.91-.33-1.85-.48-2.77s-.12-1.87-.17-2.8V596.05a6.14,6.14,0,0,0,0-.82l0-.7c0-.46-.14-.91-.19-1.37l-.35-1.34a12.71,12.71,0,0,0-2.78-4.74,12.38,12.38,0,0,0-7.18-3.88,7.88,7.88,0,0,0-1.38-.16l-.69,0H1100.39V570h101.84l1.4.07a20.33,20.33,0,0,1,2.79.3,26.23,26.23,0,0,1,5.41,1.52,25.42,25.42,0,0,1,9.16,6.36,25.85,25.85,0,0,1,5.63,9.63c.27.9.5,1.81.71,2.72s.32,1.85.39,2.78l.08,1.4c0,.47,0,1,0,1.27v39.86c0,.46,0,.93.09,1.39a12.48,12.48,0,0,0,.24,1.36,12.77,12.77,0,0,0,2.36,5,12.6,12.6,0,0,0,9.57,4.85l67,0Z"
          transform="translate(-432.71 -205.43)"
        />
        <line class="cls-2" x1="667.69" y1="370.82" x2="673.29" y2="370.82" />
        <path
          class="cls-3"
          d="M1117.19,576.25h82.75c1.25,0,2.5,0,3.78.08a19.06,19.06,0,0,1,3.74.67,19.49,19.49,0,0,1,11.65,9.2,19.16,19.16,0,0,1,2.33,7.21,34.3,34.3,0,0,1,.14,3.78V631a64,64,0,0,0,.21,7.48,18.89,18.89,0,0,0,14,15.62,27.32,27.32,0,0,0,7.41.61h52.66"
          transform="translate(-432.71 -205.43)"
        />
        <line class="cls-2" x1="868.78" y1="449.32" x2="874.38" y2="449.32" />
      </g>
      <g
        id="Strasse_GEZ"
        :class="{
          blurred:
            (currentPopup != 'gez' && currentPopup != '') || store.info_popup != '',
        }"
        v-if="
          store.config.variante_A ||
          store.values.gez ||
          $route.path.includes(store.config.route_aufloesung)
        "
      >
        <rect :class="CSS_street_gez" x="667.69" y="328.23" width="245.61" height="13" />
        <line class="cls-2" x1="667.69" y1="334.49" x2="672.8" y2="334.49" />
        <line class="cls-3" x1="683.04" y1="334.49" x2="903.06" y2="334.49" />
        <line class="cls-2" x1="908.18" y1="334.49" x2="913.29" y2="334.49" />
      </g>
      <g
        id="Strasse_DeutscheRentenversicherung"
        :class="{
          blurred:
            (currentPopup != 'deutsche_rentenversicherung' && currentPopup != '') ||
            store.info_popup != '',
        }"
        v-if="
          store.config.variante_A ||
          store.values.deutsche_rentenversicherung ||
          $route.path.includes(store.config.route_aufloesung)
        "
      >
        <path
          :class="CSS_street_rente"
          d="M654.61,418.67l67.38,0a25.64,25.64,0,0,1,19.41,9.84,25.9,25.9,0,0,1,4.8,10.08c.24.91.32,1.84.48,2.77s.12,1.86.17,2.8v39.92c0,.4,0,.6,0,.83l0,.7c0,.46.14.91.19,1.37l.34,1.34a12.87,12.87,0,0,0,2.79,4.74,12.45,12.45,0,0,0,4.52,3.14,12.28,12.28,0,0,0,2.65.74,8.09,8.09,0,0,0,1.38.15l.7,0h101.8v13H759.46l-1.4-.06a20.18,20.18,0,0,1-2.79-.31,25.71,25.71,0,0,1-20.2-17.5c-.27-.9-.5-1.81-.71-2.73s-.32-1.85-.39-2.78l-.08-1.4c0-.46,0-1,0-1.27V444.26c-.05-.46,0-.93-.09-1.39s-.1-.92-.24-1.36a12.65,12.65,0,0,0-11.94-9.82l-67,0Z"
          transform="translate(-432.71 -205.43)"
        />
        <line class="cls-2" x1="428.59" y1="298.48" x2="422.99" y2="298.48" />
        <path
          class="cls-3"
          d="M844.5,503.92H761.75c-1.25,0-2.51,0-3.78-.08a20.5,20.5,0,0,1-3.74-.67A19.52,19.52,0,0,1,742.57,494a19.1,19.1,0,0,1-2.32-7.2,32.17,32.17,0,0,1-.14-3.79V449.12a63.89,63.89,0,0,0-.22-7.47,18.64,18.64,0,0,0-2.45-7A19,19,0,0,0,725.87,426a27.72,27.72,0,0,0-7.41-.6H665.8"
          transform="translate(-432.71 -205.43)"
        />
        <line class="cls-2" x1="227.5" y1="219.98" x2="221.9" y2="219.98" />
      </g>
      <g
        id="Strasse_Wegzugsmeldebehoerde"
        :class="{
          blurred:
            (currentPopup != 'wegzugsmeldebehoerde' && currentPopup != '') ||
            store.info_popup != '',
        }"
        v-if="
          store.config.variante_A ||
          store.values.wegzugsmeldebehoerde ||
          $route.path.includes(store.config.route_aufloesung)
        "
      >
        <path
          :class="CSS_street_wegzug"
          d="M654.61,648.17l67,0a12.66,12.66,0,0,0,11.94-9.81c.14-.44.14-.91.24-1.37s0-.92.09-1.39V595.72c0-.3,0-.8,0-1.27l.08-1.4c.07-.93.25-1.86.39-2.78s.44-1.83.71-2.73a25.87,25.87,0,0,1,5.63-9.63,25.4,25.4,0,0,1,9.16-6.35,26.23,26.23,0,0,1,5.41-1.52,20.18,20.18,0,0,1,2.79-.31l1.4-.06H861.29v13H759.49l-.7,0a9.24,9.24,0,0,0-1.38.15,12.88,12.88,0,0,0-2.65.74,12.36,12.36,0,0,0-4.52,3.15,12.87,12.87,0,0,0-2.79,4.74l-.34,1.33c-.05.46-.16.91-.19,1.38l0,.69c0,.24,0,.43,0,.83v39.93c-.05.93-.06,1.87-.17,2.79s-.24,1.87-.48,2.77A25.66,25.66,0,0,1,722,661.13l-67.38,0Z"
          transform="translate(-432.71 -205.43)"
        />
        <line class="cls-2" x1="428.59" y1="370.98" x2="422.99" y2="370.98" />
        <path
          class="cls-3"
          d="M844.5,576.42H761.75c-1.26,0-2.51,0-3.74.07a18.89,18.89,0,0,0-17.27,16.64,35.47,35.47,0,0,0-.14,3.73v33.85a63.66,63.66,0,0,1-.22,7.55,19.13,19.13,0,0,1-2.51,7.13,19.4,19.4,0,0,1-11.88,8.9,28.11,28.11,0,0,1-7.53.63H665.8"
          transform="translate(-432.71 -205.43)"
        />
        <line class="cls-2" x1="227.5" y1="449.48" x2="221.9" y2="449.48" />
      </g>
      <g
        id="Strasse_Jubilaeen"
        :class="{
          blurred:
            (currentPopup != 'jubilaeen' && currentPopup != '') || store.info_popup != '',
        }"
        v-if="
          store.config.variante_A ||
          store.values.jubilaeen ||
          $route.path.includes(store.config.route_aufloesung)
        "
      >
        <rect
          :class="CSS_street_jubilaeen"
          x="182.98"
          y="327.9"
          width="245.61"
          height="13"
        />
        <line class="cls-2" x1="428.59" y1="334.65" x2="423.47" y2="334.65" />
        <line class="cls-3" x1="413.24" y1="334.65" x2="193.22" y2="334.65" />
        <line class="cls-2" x1="188.1" y1="334.65" x2="182.98" y2="334.65" />
      </g>
    </g>
    <!-- Fahrzeuge -->
    <g id="Symbole" class="symbols_base">
      <g id="TruckAndStopsigns">
        <TruckAndStopsign
          id="TruckAndStopsign_LandesamtFuerStatistik"
          :class="{
            blurred:
              (currentPopup != 'landesamt_fuer_statistik' && currentPopup != '') ||
              store.info_popup != '',
          }"
          x="513"
          y="168"
          view="up"
          value_name="landesamt_fuer_statistik"
          :page2_active="page2_active"
          :page3_active="page3_active"
        ></TruckAndStopsign>
        <TruckAndStopsign
          id="TruckAndStopsign_BundeszentralamtFuerSteuern"
          :class="{
            blurred:
              (currentPopup != 'bundeszentralamt_fuer_steuern' && currentPopup != '') ||
              store.info_popup != '',
          }"
          x="598"
          y="95"
          view="right"
          value_name="bundeszentralamt_fuer_steuern"
          :page2_active="page2_active"
          :page3_active="page3_active"
        ></TruckAndStopsign>
        <TruckAndStopsign
          id="TruckAndStopsign_Auslaenderbehoerde"
          :class="{
            blurred:
              (currentPopup != 'auslaenderbehoerde' && currentPopup != '') ||
              store.info_popup != '',
          }"
          x="698"
          y="249"
          view="right"
          value_name="auslaenderbehoerde"
          :page2_active="page2_active"
          :page3_active="page3_active"
        ></TruckAndStopsign>
        <TruckAndStopsign
          id="TruckAndStopsign_GEZ"
          :class="{
            blurred:
              (currentPopup != 'gez' && currentPopup != '') || store.info_popup != '',
          }"
          x="823"
          y="285"
          view="right"
          value_name="gez"
          :page2_active="page2_active"
          :page3_active="page3_active"
        ></TruckAndStopsign>
        <TruckAndStopsign
          id="TruckAndStopsign_Religionsgemeinschaft"
          :class="{
            blurred:
              (currentPopup != 'religionsgemeinschaft' && currentPopup != '') ||
              store.info_popup != '',
          }"
          x="698"
          y="321"
          view="right"
          value_name="religionsgemeinschaft"
          :page2_active="page2_active"
          :page3_active="page3_active"
        ></TruckAndStopsign>
        <TruckAndStopsign
          id="TruckAndStopsign_Krankenkasse"
          :class="{
            blurred:
              (currentPopup != 'krankenkasse' && currentPopup != '') ||
              store.info_popup != '',
          }"
          x="598"
          y="473"
          view="right"
          value_name="krankenkasse"
          :page2_active="page2_active"
          :page3_active="page3_active"
        ></TruckAndStopsign>
        <TruckAndStopsign
          id="TruckAndStopsign_Parteien"
          :class="{
            blurred:
              (currentPopup != 'parteien' && currentPopup != '') ||
              store.info_popup != '',
          }"
          x="513"
          y="433"
          view="down"
          value_name="parteien"
          :page2_active="page2_active"
          :page3_active="page3_active"
        ></TruckAndStopsign>
        <TruckAndStopsign
          id="TruckAndStopsign_Bundeswehr"
          :class="{
            blurred:
              (currentPopup != 'bundeswehr' && currentPopup != '') ||
              store.info_popup != '',
          }"
          x="448"
          y="473"
          view="left"
          value_name="bundeswehr"
          :page2_active="page2_active"
          :page3_active="page3_active"
        ></TruckAndStopsign>
        <TruckAndStopsign
          id="TruckAndStopsign_Wegzugsmeldebehoerde"
          :class="{
            blurred:
              (currentPopup != 'wegzugsmeldebehoerde' && currentPopup != '') ||
              store.info_popup != '',
          }"
          x="350"
          y="321"
          view="left"
          value_name="wegzugsmeldebehoerde"
          :page2_active="page2_active"
          :page3_active="page3_active"
        ></TruckAndStopsign>
        <TruckAndStopsign
          id="TruckAndStopsign_Jubilaeen"
          :class="{
            blurred:
              (currentPopup != 'jubilaeen' && currentPopup != '') ||
              store.info_popup != '',
          }"
          x="228"
          y="285"
          view="left"
          value_name="jubilaeen"
          :page2_active="page2_active"
          :page3_active="page3_active"
        ></TruckAndStopsign>
        <TruckAndStopsign
          id="TruckAndStopsign_DeutscheRentenversicherung"
          :class="{
            blurred:
              (currentPopup != 'deutsche_rentenversicherung' && currentPopup != '') ||
              store.info_popup != '',
          }"
          x="350"
          y="249"
          view="left"
          value_name="deutsche_rentenversicherung"
          :page2_active="page2_active"
          :page3_active="page3_active"
        ></TruckAndStopsign>
        <TruckAndStopsign
          id="TruckAndStopsign_Bundesverwaltungsamt"
          :class="{
            blurred:
              (currentPopup != 'bundesverwaltungsamt' && currentPopup != '') ||
              store.info_popup != '',
          }"
          x="448"
          y="98"
          view="left"
          value_name="bundesverwaltungsamt"
          :page2_active="page2_active"
          :page3_active="page3_active"
        ></TruckAndStopsign>
      </g>
    </g>
    <!-- 'PopupItems' referenzieren Elemente aus dem SVG, um sie erneut in das Template zu laden, sodass sie über dem restlichen Straßennetz liegen, sobald ein Popup erscheint. -->
    <g id="PopupItems">
      <g id="Popups_LandesamtFuerStatistik">
        <use
          href="#Strasse_LandesamtFuerStatistik"
          v-if="store.info_popup == '' && currentPopup == 'landesamt_fuer_statistik'"
        />
      </g>
      <g id="Popups_BundeszentralamtFuerSteuern">
        <use
          href="#Strasse_BundeszentralamtFuerSteuern"
          v-if="store.info_popup == '' && currentPopup == 'bundeszentralamt_fuer_steuern'"
        />
      </g>
      <g id="Popups_Auslaenderbehoerde">
        <use
          href="#Strasse_Auslaenderbehoerde"
          v-if="store.info_popup == '' && currentPopup == 'auslaenderbehoerde'"
        />
      </g>
      <g id="Popups_GEZ">
        <use href="#Strasse_GEZ" v-if="store.info_popup == '' && currentPopup == 'gez'" />
      </g>
      <g id="Popups_Religionsgemeinschaft">
        <use
          href="#Strasse_Religionsgemeinschaft"
          v-if="store.info_popup == '' && currentPopup == 'religionsgemeinschaft'"
        />
      </g>
      <g id="Popups_Krankenkasse">
        <use
          href="#Strasse_Krankenkasse"
          v-if="store.info_popup == '' && currentPopup == 'krankenkasse'"
        />
      </g>
      <g id="Popups_Parteien">
        <use
          href="#Strasse_Parteien"
          v-if="store.info_popup == '' && currentPopup == 'parteien'"
        />
      </g>
      <g id="Popups_Bundeswehr">
        <use
          href="#Strasse_Bundeswehr"
          v-if="store.info_popup == '' && currentPopup == 'bundeswehr'"
        />
      </g>
      <g id="Popups_Wegzugsmeldebehoerde">
        <use
          href="#Strasse_Wegzugsmeldebehoerde"
          v-if="store.info_popup == '' && currentPopup == 'wegzugsmeldebehoerde'"
        />
      </g>
      <g id="Popups_Jubilaeen">
        <use
          href="#Strasse_Jubilaeen"
          v-if="store.info_popup == '' && currentPopup == 'jubilaeen'"
        />
      </g>
      <g id="Popups_DeutscheRentenversicherung">
        <use
          href="#Strasse_DeutscheRentenversicherung"
          v-if="store.info_popup == '' && currentPopup == 'deutsche_rentenversicherung'"
        />
      </g>
      <g id="Popups_Bundesverwaltungsamt">
        <use
          href="#Strasse_Bundesverwaltungsamt"
          v-if="store.info_popup == '' && currentPopup == 'bundesverwaltungsamt'"
        />
      </g>
      <use
        href="#Knoten_Zuzugsmeldebehoerde"
        v-if="currentPopup != '' && store.info_popup == ''"
      />
    </g>
    <!-- Alle Einrichtungen -->
    <g id="Einrichtungen" class="nodes_base">
      <!-- Haupt-Knoten "Zuzugsmeldebehoerde" -->
      <BehoerdeItem
        id="Knoten_Zuzugsmeldebehoerde"
        :class="{
          blurred: store.info_popup != '',
        }"
        field_name="Zuzugsmeldebehörde"
        value_name="zuzugsmeldebehoerde"
        icon_name="Icon_Zuzugsmeldebehoerde"
        is_main_node="true"
        width="267"
        height="145"
        x="415"
        y="262"
      />
      <!-- Alle weiteren Einrichtungen -->
      <g id="BehoerdeItems">
        <BehoerdeItem
          id="Knoten_LandesamtFuerStatistik"
          :class="{
            blurred: currentPopup != 'landesamt_fuer_statistik' && currentPopup != '',
          }"
          field_name="Landesamt für Statistik"
          value_name="landesamt_fuer_statistik"
          icon_name="Icon_LandesamtFuerStatistik"
          x="447"
          y="-15"
        />
        <BehoerdeItem
          id="Knoten_BundeszentralamtFuerSteuern"
          :class="{
            blurred:
              currentPopup != 'bundeszentralamt_fuer_steuern' && currentPopup != '',
          }"
          field_name="Bundeszentralamt für Steuern"
          value_name="bundeszentralamt_fuer_steuern"
          icon_name="Icon_BundeszentralamtFuerSteuern"
          x="650"
          y="86"
        />
        <BehoerdeItem
          id="Knoten_Auslaenderbehoerde"
          :class="{
            blurred: currentPopup != 'auslaenderbehoerde' && currentPopup != '',
          }"
          field_name="Ausländerbehörde"
          value_name="auslaenderbehoerde"
          icon_name="Icon_Auslaenderbehoerde"
          x="864"
          y="158"
        />
        <BehoerdeItem
          id="Knoten_GEZ"
          :class="{
            blurred: currentPopup != 'gez' && currentPopup != '',
          }"
          field_name="Beitragsservice"
          value_name="gez"
          icon_name="Icon_GEZ"
          x="903"
          y="276"
        />
        <BehoerdeItem
          id="Knoten_Religionsgemeinschaft"
          :class="{
            blurred: currentPopup != 'religionsgemeinschaft' && currentPopup != '',
          }"
          field_name="Religionsgemeinschaft"
          value_name="religionsgemeinschaft"
          icon_name="Icon_Religionsgemeinschaft"
          x="864"
          y="390"
        />
        <BehoerdeItem
          id="Knoten_Krankenkasse"
          :class="{
            blurred: currentPopup != 'krankenkasse' && currentPopup != '',
          }"
          field_name="Krankenkasse"
          value_name="krankenkasse"
          icon_name="Icon_Krankenkasse"
          x="650"
          y="465"
        />
        <BehoerdeItem
          id="Knoten_Parteien"
          :class="{
            blurred: currentPopup != 'parteien' && currentPopup != '',
          }"
          field_name="Parteien"
          value_name="parteien"
          icon_name="Icon_Parteien"
          x="449"
          y="564"
        />
        <BehoerdeItem
          id="Knoten_Bundeswehr"
          :class="{
            blurred: currentPopup != 'bundeswehr' && currentPopup != '',
          }"
          field_name="Bundeswehr"
          value_name="bundeswehr"
          icon_name="Icon_Bundeswehr"
          x="247"
          y="465"
        />
        <BehoerdeItem
          id="Knoten_Wegzugsmeldebehoerde"
          :class="{
            blurred: currentPopup != 'wegzugsmeldebehoerde' && currentPopup != '',
          }"
          field_name="Wegzugsmeldebehörde"
          value_name="wegzugsmeldebehoerde"
          icon_name="Icon_Wegzugsmeldebehoerde"
          x="33"
          y="390"
        />
        <BehoerdeItem
          id="Knoten_Jubilaeen"
          :class="{
            blurred: currentPopup != 'jubilaeen' && currentPopup != '',
          }"
          field_name="Mandatsträger/Zeitungen für Jubiläen"
          value_name="jubilaeen"
          icon_name="Icon_Jubilaeen"
          x="-6"
          y="276"
        />
        <BehoerdeItem
          id="Knoten_DeutscheRentenversicherung"
          :class="{
            blurred: currentPopup != 'deutsche_rentenversicherung' && currentPopup != '',
          }"
          icon_name="Icon_DeutscheRentenversicherung"
          value_name="deutsche_rentenversicherung"
          field_name="Deutsche Rentenversicherung"
          x="33"
          y="158"
        />
        <BehoerdeItem
          id="Knoten_Bundesverwaltungsamt"
          :class="{
            blurred: currentPopup != 'bundesverwaltungsamt' && currentPopup != '',
          }"
          field_name="Bundesverwaltungsamt"
          value_name="bundesverwaltungsamt"
          icon_name="Icon_Bundesverwaltungsamt"
          x="246"
          y="86"
        />
      </g>
    </g>

    <!-- Popup auf Auflösungs-Seite -->
    <g id="Popups">
      <Popup v-if="store.aufloesung_popup != '' || store.info_popup != ''"></Popup>
    </g>
    <!-- Rahmen bei Popup-Ansicht -->
    <g id="Popup_Frame" v-if="store.aufloesung_popup != '' || store.info_popup != ''">
      <rect id="frame" @click="closePopup"/>
      <Icon_Close id="close_icon" @click="closePopup" x="980" y="10" />
    </g>
  </svg>
</template>

<style>
#Strassennetz {
  max-height: 700px;
}
#frame {
  stroke: gray;
  width: 99%;
  height: 99%;
  fill: transparent;
  rx: 50;
  x: 4;
  y: -12;
  stroke-width: 2;
}
.blurred {
  filter: blur(15px);
  pointer-events: none;
}
/** --- Anfang Straßen-Styles --- */
.gray_street {
  fill: var(--street-color);
}
.green_street {
  fill: rgb(156, 209, 156);
}
.yellow_street {
  fill: rgb(235, 226, 148);
}
.red_street {
  fill: rgb(241, 186, 163);
}
.cls-2,
.cls-3 {
  fill: none;
  stroke: #f2f2f2;
  stroke-width: 1.5px;
}
.cls-2,
.cls-3,
.cls-6 {
  stroke-miterlimit: 10;
}
.cls-3 {
  stroke-dasharray: 7.5 7.5;
}
/** --- Ende Straßen-Styles --- */
</style>
