/* Vom CMS erzeugt am 05.08.2026 17:17 — Änderungen hier werden beim nächsten
   Publizieren überschrieben. Wird nach evr-innovation.webflow.css geladen. */

/* --- Punkt-Stile ------------------------------------------------------- */
/* «standard» braucht keine Klasse, «spark» kennt der Export bereits.       */

.map_dot_circle.gastro { background-color: #57b7d9; }
.dot_number.gastro { color: #fff; }

/* --- Überfahren -------------------------------------------------------- */
/* Ersetzt die Webflow-Interaktion, die an einzelnen Element-IDs hing und    */
/* deshalb bei neu angelegten Punkten nicht mehr gegriffen hätte.           */

/* Der Plan trägt seine Masse als Attribute, damit der Browser die Höhe schon
   vor dem Laden kennt. Ohne «height: auto» würde die Zahl aus dem Attribut
   als tatsächliche Höhe genommen und das Bild verzerrt — das Stylesheet gibt
   nur die Breite vor. */
.map_image { height: auto; }

.map_dot_circle { transition: transform .3s ease; }
.map_dot:hover .map_dot_circle { transform: scale(1.4); }
.close-icon { transition: transform .3s ease; display: inline-block; }
.close-linkbox:hover .close-icon { transform: scale(1.2); }

/* Die runde Karte einer Stand-Seite (.div-block-10) hat im Export
   overflow:visible. Der native Scrollbalken von .content_box darin — selbst
   ungerundet — malt am rechten Rand eine eckige Fläche über genau die Stelle,
   an der die Rundung sichtbar sein sollte; wie stark das auffällt, hängt vom
   Scrollbalken-Stil des Browsers ab. overflow:hidden schneidet den
   Scrollbalken auf die Rundung der Karte zu, unabhängig vom Browser. Der
   Schliessen-Knopf bleibt sichtbar, weil er innerhalb dieser Fläche liegt. */
.div-block-10 { overflow: hidden; }

/* Die rote Hervorhebung (Knopf «Fett» im Texteditor) einen Pixel grösser als
   ihr Umfeld — nicht als fester Wert, weil die Grösse der Umgebung selbst
   responsiv ist (20 / 19 / 18 px je nach Breite). «em» bezieht sich bei
   font-size auf die geerbte Grösse des Elternelements, calc(1em + 1px) trifft
   damit auf jeder Breite automatisch «Umgebung plus 1». */
.bold-text-2 { font-size: calc(1em + 1px); }

/* Punkt und Legendeneintrag heben sich gemeinsam hervor. */
body:has([data-dot="dot-1"]:hover) [data-dot="dot-1"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-2"]:hover) [data-dot="dot-2"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-3"]:hover) [data-dot="dot-3"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-4"]:hover) [data-dot="dot-4"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-5"]:hover) [data-dot="dot-5"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-6"]:hover) [data-dot="dot-6"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-7d"]:hover) [data-dot="dot-7d"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-7a"]:hover) [data-dot="dot-7a"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-7b"]:hover) [data-dot="dot-7b"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-7c"]:hover) [data-dot="dot-7c"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-9"]:hover) [data-dot="dot-9"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-10"]:hover) [data-dot="dot-10"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-11"]:hover) [data-dot="dot-11"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-12"]:hover) [data-dot="dot-12"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-13"]:hover) [data-dot="dot-13"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-1784883350210"]:hover) [data-dot="dot-1784883350210"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-15"]:hover) [data-dot="dot-15"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-16"]:hover) [data-dot="dot-16"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-1784883603352"]:hover) [data-dot="dot-1784883603352"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-8"]:hover) [data-dot="dot-8"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-c"]:hover) [data-dot="dot-c"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-1785927214966"]:hover) [data-dot="dot-1785927214966"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-a"]:hover) [data-dot="dot-a"] .map_dot_circle { transform: scale(1.4); }
body:has([data-dot="dot-b"]:hover) [data-dot="dot-b"] .map_dot_circle { transform: scale(1.4); }

/* Der Hinweispunkt hebt alle Spark-Stände mit hervor. */
body:has([data-dot="dot-i"]:hover) [data-style="spark"] .map_dot_circle { transform: scale(1.4); }

/* Umgekehrt hebt jeder Spark-Stand den Hinweispunkt mit hervor. */
body:has([data-style="spark"]:hover) [data-dot="dot-i"] .map_dot_circle { transform: scale(1.4); }


/* --- Textblöcke der Startseiten ---------------------------------------- */
/* Der Export kannte dort nur einfache Absätze. Setzt die Redaktion einen     */
/* Zwischentitel oder eine Aufzählung, sollen die dazu passen.               */

.content-wrapper h3, .content-wrapper h4,
.content-wrapper ul, .content-wrapper li {
  color: #000;
  font-family: Nexaevr, Arial, sans-serif;
}

.content-wrapper h3 { font-size: 1.5rem; font-weight: 700; margin: 1.2em 0 .3em; }
.content-wrapper h4 { font-size: 1.25rem; font-weight: 700; margin: 1.2em 0 .3em; }
.content-wrapper ul { font-size: 1.5rem; font-weight: 300; padding-left: 1.2em; max-width: 800px; }
.content-wrapper li { margin-bottom: .4em; }
.content-wrapper a { color: #000; }

@media screen and (max-width: 767px) {
  .content-wrapper h3 { font-size: 1.25rem; }
  .content-wrapper h4 { font-size: 1.1rem; }
  .content-wrapper ul { font-size: 1.15rem; }
}

/* --- Karte auf Tablet und Handy ---------------------------------------- */
/*
   Im Export stand der Plan unterhalb von 992 Pixeln fest (position: fixed)
   und die Legende scrollte darüber hinweg; der Abstand dazwischen war von
   Hand auf das damalige Planformat abgezählt. Ein höheres Planbild liess
   seinen unteren Teil dauerhaft unter der Legende verschwinden — scrollen
   half nicht, weil der Plan ja fest stand.

   Statt dessen bekommt der Plan hier ein eigenes Fenster:
     · Schieben  = ganz normales Scrollen innerhalb des Fensters
     · Vergrössern = drei Schalter, die die Planbreite umstellen
     · Legende   = eingeklappt, öffnet sich auf Fingertipp

   Beim Vergrössern wachsen die Abstände zwischen den Punkten, die Punkte
   selbst bleiben gleich gross — gerade die dicht beieinander liegenden
   Spark-Stände lassen sich so bequem treffen.

   Alles über Formularfelder gelöst, damit die Seite ohne JavaScript bleibt.
   «:not(.fixed)» lässt den Plan als Hintergrund der Stand-Seiten in Ruhe.
*/

.fp-ctl, .fp-zoom, .fp-tab { display: none; }

/* Auf der grossen Breite verschwinden die beiden Hüllen aus dem Aufbau —
   sonst unterbräche das Blatt die Flex-Kette der Legende, und deren
   «justify-content: flex-end» käme nicht mehr an: die Legende stünde links
   statt rechts angedockt. */
.fp-scroll, .fp-sheet { display: contents; }

@media screen and (max-width: 991px) {
  .fp-ctl {
    display: block; position: absolute;
    width: 1px; height: 1px; opacity: 0; pointer-events: none;
  }

  /* Der Plan steht auf dieser Breite im Fluss statt fest im Fenster. Damit
     die Seite trotzdem bis zum unteren Rand reicht — und die Fusszeile nicht
     kurz unter dem Bild in der Luft hängt — füllt die Plan-Seite die
     Fensterhöhe, und das Sichtfenster des Plans nimmt sich den Rest davon.
     «:has» trifft nur die Plan-Seite; auf den Stand-Seiten ist der Plan
     «.fixed» und bleibt unangetastet. */
  body:has(.map_wrapper:not(.fixed)) {
    display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100dvh;
  }
  /* display: flex fehlt im Export — die Flex-Angaben darin liefen bisher ins
     Leere. Erst damit teilen sich Plan und Zoom-Leiste die Höhe.
     Kopf- und Fusszeile sind fest positioniert und damit aus dem Fluss; ohne
     diese Aussparung liefe der Plan unter ihnen durch und rechnete mit der
     ganzen Fensterhöhe. Die beiden Masse misst das Skript, die Werte hier
     sind nur die Rückfallebene. */
  .map_wrapper:not(.fixed) {
    display: flex; flex: 1; min-height: 0;
    padding: var(--fp-header, 70px) 0 var(--fp-footer, 56px);
  }

  .fp-scroll {
    display: block;
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .map_container:not(.fixed) { position: relative; width: 100%; }
  #fp-zoom-2:checked ~ .fp-scroll .map_container:not(.fixed) { width: 200%; }
  #fp-zoom-3:checked ~ .fp-scroll .map_container:not(.fixed) { width: 330%; }

  /* Grössere Trefferfläche für den Finger, ohne den Punkt zu vergrössern. */
  .map_container .map_dot::after { content: ''; position: absolute; inset: -9px; }

  /* Schalter für die Vergrösserung */
  .fp-zoom {
    display: flex; align-items: center; gap: 6px;
    width: 100%; padding: 10px 20px 0; box-sizing: border-box;
    justify-content: flex-end;
  }
  /* Die Beschriftung gehört zu den Schaltern und steht deshalb direkt
     daneben, nicht am anderen Ende der Leiste. */
  .fp-zoom__label {
    color: #fffc;
    font-family: Nexaevr, Arial, sans-serif; font-size: 14px;
  }
  .fp-zoom__btn {
    min-width: 42px; padding: 7px 10px; border-radius: 8px;
    border: 1px solid #ffffff5c; color: #fff; background: #ffffff1a;
    font-family: Nexaevr, Arial, sans-serif; font-size: 15px; font-weight: 700;
    text-align: center; cursor: pointer; user-select: none;
  }
  #fp-zoom-1:checked ~ .fp-zoom .fp-zoom__btn[for="fp-zoom-1"],
  #fp-zoom-2:checked ~ .fp-zoom .fp-zoom__btn[for="fp-zoom-2"],
  #fp-zoom-3:checked ~ .fp-zoom .fp-zoom__btn[for="fp-zoom-3"] {
    background: #fff; border-color: #fff; color: #e40045;
  }

  /* Die Legende als ein Blatt, das von unten heraufkommt.
     Fähnchen und Liste sind eine einzige Fläche: das Fähnchen ist die
     Kopfzeile des Blatts — gleiche Breite, gleiche Farbe, und die Rundung
     sitzt am Blatt statt an beiden Teilen einzeln. Zugeklappt schaut nur
     diese Kopfzeile heraus. Das Blatt klebt bündig am rechten Rand und ruht
     auf der Fusszeile, damit die nie verdeckt wird. */

  .legend_wrapper {
    position: fixed; left: 0; right: 0; z-index: 300;
    bottom: var(--fp-footer, 56px);       /* steht auf der Fusszeile */
    display: flex; justify-content: flex-end;
    width: 100%; margin: 0; padding: 0;   /* bündig am Rand, kein Abstand */
    box-sizing: border-box;
    pointer-events: none;                 /* nur das Blatt selbst fängt Tipps */
    /* Schneidet ab, was unter die Hülle hinausgeschoben wird. Zugeklappt
       liegt der ganze Rest des Blatts dort — ohne das läge er über der
       Fusszeile. Nach oben schneidet nichts: weiter als bis an die Oberkante
       der Hülle lässt sich das Blatt nicht ziehen. */
    overflow: hidden;
  }

  /* Nur so breit wie der Inhalt. Passt die längste Beschriftung nicht,
     bricht sie um statt überzulaufen. Das Blatt selbst hat keine Farbe —
     die tragen Kopfzeile und Liste, damit zugeklappt nur die Kopfzeile
     hereinragt und nicht ein Streifen über die ganze Blattbreite. */
  .fp-sheet {
    --fp-tab: 46px;
    pointer-events: auto;
    display: flex; flex-direction: column;
    width: auto; max-width: 100%;
    max-height: 78vh; max-height: 78dvh;
    transform: translateY(calc(100% - var(--fp-tab)));
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  }
  #fp-legend:checked ~ .fp-sheet { transform: translateY(0); }

  /* Die Kopfzeile ist nur so breit wie ihre Beschriftung und sitzt rechts
     oben auf der Liste. Gleiche Farbe, keine Trennlinie, kein Abstand:
     beides ist eine Form. */
  .fp-tab {
    align-self: flex-end;
    display: inline-flex; align-items: center; gap: 12px;
    height: var(--fp-tab); padding: 0 20px;
    /* Webflow gibt jedem label 5px Abstand nach unten. Die zögen hier einen
       Spalt zwischen Kopfzeile und Liste — die beiden sind eine Fläche. */
    margin: 0;
    background: #fff; color: #e40045;
    border-radius: 14px 0 0 0;
    cursor: grab; user-select: none; white-space: nowrap;
    font-family: Nexaevr, Arial, sans-serif; font-size: 18px; font-weight: 700;
  }
  .fp-tab__sign {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: #e400451f; font-size: 19px; line-height: 1;
  }
  .fp-tab__sign::after { content: '+'; }
  #fp-legend:checked ~ .fp-sheet .fp-tab__sign::after { content: '–'; }
  #fp-legend:focus-visible ~ .fp-sheet .fp-tab { outline: 2px solid #fff; outline-offset: -4px; }

  .legend_container {
    display: block; flex: 1; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff; padding: 0;
    border-radius: 22px 0 0 0;
  }

  /* Einzeilig: ein Eintrag je Zeile, unabhängig von der Bildschirmbreite. */
  .fp-sheet .legend {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    background: none; border-radius: 0;
    padding: 20px;                   /* oben gleich viel Luft wie an den Seiten */
  }

  /* Auf Weiss trägt die Schrift Schwarz. Und die weissen Kreise der
     Spark-Stände verschwänden sonst im Hintergrund — sie bekommen hier
     einen feinen Ring in ihrer eigenen Schriftfarbe. */
  .fp-sheet .map_dot_label { color: #000; }
  .fp-sheet .map_dot_circle.spark { box-shadow: inset 0 0 0 1px #00509b; }

  /* Mit Skript wird das ganze Blatt gezogen — nicht die Liste darin.
     Es ist dann so hoch wie sein Inhalt, und wer es hochschiebt, holt damit
     die weiteren Einträge herauf. Genau eine Geste für beides.
     Ohne Skript bleibt es bei Blatt in Bildschirmhöhe und scrollbarer Liste. */
  .fp-drag .fp-sheet {
    max-height: none;
    touch-action: none;                   /* Ziehen bewegt das Blatt, nicht die Seite */
  }
  .fp-drag .legend_container { overflow: visible; }

  /* Mit Skript wird der Plan mit zwei Fingern vergrössert und mit einem
     geschoben. Die Schalter 1× / 2× / 3× braucht es dann nicht mehr — sie
     bleiben aber im Markup, weil sie ohne Skript die einzige Vergrösserung
     sind. Anders als sie vergrössert das Zusammenziehen den ganzen Plan
     samt Punkten und Beschriftungen. */
  .fp-pinch .fp-zoom { display: none; }
  .fp-pinch .fp-scroll {
    overflow: hidden;
    touch-action: none;                   /* die Gesten gehören dem Plan */
  }
  .fp-pinch .map_container:not(.fixed) {
    transform-origin: 0 0;
    will-change: transform;
  }

  /* Die Punkte wachsen langsamer als der Plan. Sie sitzen dicht beieinander —
     die Spark-Stände fast auf demselben Fleck —, und wüchsen sie im gleichen
     Mass mit, überdeckten sie einander beim Vergrössern nur weiter. Der Wert
     ist der Gegenzug zur Vergrösserung des Plans: das Skript setzt ihn so,
     dass die Punkte der Wurzel davon folgen. */
  .fp-pinch .map_container:not(.fixed) .map_dot {
    transform: translate(-50%, -50%) scale(var(--fp-dot, 1));
  }

  /* Die Fusszeile bleibt fest am unteren Rand — auch wenn die Leiste des
     Browsers auftaucht und wieder verschwindet. Sie liegt damit über dem
     Plan; die eigene Fläche hält die Schrift lesbar, wo unter ihr helle
     Hallenflächen durchkämen. Die Legende bleibt darüber (z-index 300). */
  body:has(.map_wrapper:not(.fixed)) .footer_wrapper {
    position: fixed; inset: auto 0 0; z-index: 200;
    background: #e40045;
    padding-bottom: 0;
  }
}

/* --- Legende ----------------------------------------------------------- */
/* Im Export war die Zeilenzahl je Bildschirmbreite von Hand auf genau 21    */
/* Einträge abgezählt, und jeder Eintrag steckte in einer Hülle mit fester   */
/* Pixelbreite. Beides ist hier durch eine mitwachsende Regel ersetzt:       */
/* die Einträge tragen ihre Breite selbst, die Zeilenzahl folgt der Anzahl.  */

/* max-width und minmax(0, …) halten die Legende im Container. Ohne das      */
/* wächst sie über den linken Bildschirmrand hinaus, sobald die Beschriftungen */
/* zusammen breiter werden als der Platz — im Export passierte das bereits    */
/* bei 1280 Pixel Fensterbreite.                                             */

.legend {
  grid-template-columns: repeat(3, minmax(0, auto));
  grid-template-rows: repeat(9, auto);
  justify-content: start;
  max-width: 100%;
}

.map_dot.legend_dot {
  --dot: 40px;
  width: auto;
  height: auto;
  min-height: var(--dot);
  justify-content: flex-start;
  padding-right: 6px;
}

/* Auf der grossen Breite ist alles eine Spur kleiner als im Export:
   Beschriftung 20 statt 22 Pixel, Punkte und Zahlen im selben Verhältnis
   (Faktor 0.9). Karte und Legende teilen sich dieselben Werte, damit ein
   Punkt an beiden Orten gleich aussieht. Nur hier — die schmaleren Breiten
   hatten ohnehin eigene, kleinere Werte und bleiben unberührt.

   Der Zeilenabstand ergibt sich aus der Punktgrösse: beim Überfahren wächst
   ein Punkt auf das 1.4-fache, also um 40 % seines Durchmessers. Genau so
   viel plus ein Pixel Luft — enger geht nicht, ohne dass sich zwei
   übereinander liegende Punkte im Hover-Zustand berühren. */

/* Auf der grossen Breite liegt die Legende fest über der unteren Planhälfte.
   Damit man den Plan darunter hervorholen kann, braucht die Seite Scrollweg —
   der kommt hier aus dem Stylesheet und nicht mehr aus leerer Fläche im
   Planbild. Das Bild darf dadurch eng um die Zeichnung geschnitten sein: es
   wird auf gleicher Breite grösser dargestellt, und die Prozentwerte der
   Punkte beziehen sich auf die Zeichnung statt auf Zeichnung plus Leerraum.

   Das Mass richtet sich nach der Legende selbst — Zeilenhöhe mal Zeilenzahl,
   plus ihr Innenabstand und der Abstand zum unteren Rand. Der Anteil an der
   Fensterhöhe ist die Untergrenze, falls Beschriftungen umbrechen und die
   Legende dadurch höher wird. */

@media screen and (min-width: 992px) {
  .map_wrapper { padding-bottom: max(593px, 45vh); }

  .map_dot { width: 36px; height: 36px; }
  .dot_number { font-size: 17px; }
  .dot_number.info, .dot_number.spark.info { font-size: 23px; }

  .legend {
    --legend-dot: 36px;
    grid-row-gap: calc(var(--legend-dot) * .4 + 1px);
  }

  .map_dot.legend_dot { --dot: var(--legend-dot); }
  .map_dot.legend_dot .map_dot_label { font-size: 20px; }
}

.map_dot.legend_dot .map_dot_circle {
  position: relative;
  flex: 0 0 var(--dot);
  width: var(--dot);
  height: var(--dot);
  inset: auto;
}

.map_dot.legend_dot .dot_number {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--dot);
  text-align: center;
  transform: translateY(-50%);
}

/* Die Beschriftung darf umbrechen. Solange Platz ist, bleibt sie einzeilig — */
/* wird es eng, bricht sie um, statt aus dem Bild zu laufen.                  */
.map_dot.legend_dot .map_dot_label {
  position: static;
  margin-top: 0;
  margin-left: 10px;
  white-space: normal;
  hyphens: auto;
}

@media screen and (max-width: 991px) {
  .legend {
    grid-template-columns: repeat(2, minmax(0, auto));
    grid-template-rows: repeat(13, auto);
  }
  .map_dot.legend_dot { --dot: 27px; }
}

@media screen and (max-width: 767px) {
  .legend {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(25, auto);
  }
  .map_dot.legend_dot { --dot: 24px; }
}

@media screen and (max-width: 479px) {
  .map_dot.legend_dot { --dot: 18px; }
}

/* --- Fusszeile ---------------------------------------------------------- */
/* Sie soll auf einer Zeile bleiben. Bricht sie um, wächst sie in die Höhe,   */
/* schiebt die Legende hoch und nimmt dem Plan Platz weg. Statt umzubrechen   */
/* folgt die Schrift deshalb der Breite. Die Zahl im Nenner ist die           */
/* geschätzte Breite des Textes in em — beim Publizieren aus dem tatsächlich  */
/* eingetragenen Text errechnet, nicht geraten.                              */

@media screen and (max-width: 991px) {
  .footer_text      { white-space: nowrap; font-size: min(13px, calc((100vw - 40px) / 27.92)); }
  .footer_text-_home { white-space: nowrap; font-size: min(13px, calc((100vw - 40px) / 11.24)); }
}

@media screen and (max-width: 479px) {
  .footer_text      { white-space: nowrap; font-size: min(14px, calc((100vw - 40px) / 27.92)); }
  .footer_text-_home { white-space: nowrap; font-size: min(14px, calc((100vw - 40px) / 11.24)); }
}