/* ── Kapsel ── */
.nav-wrap{background:transparent!important;border-bottom:none!important;
  padding:10px 16px 0!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important}
.nav-wrap > .nav{background:var(--bg-2)!important;border-radius:20px!important;
  border:1px solid var(--border)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.10)!important;
  padding-left:18px!important;padding-right:18px!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
[data-theme="dark"] .nav-wrap > .nav{
  box-shadow:0 8px 28px rgba(0,0,0,.45)!important}

/* ── Fortschrittsleiste auf der Unterkante der Kapsel ──
   Einzug gerechnet: bei 20 Pixeln Eckradius ist die Silhouette der Kapsel
   auf Hoehe von 3 Pixeln ueber dem Boden um 20 - sqrt(20^2 - 17^2), also
   rund 10 Pixel nach innen gewandert. Zusammen mit den 16 Pixeln
   Kapselabstand ergibt das 26.

   Wichtig ist die Breite: das Seitenskript setzt sie in Prozent, und
   Prozente beziehen sich auf die volle Fensterbreite, nicht auf die Kapsel.
   Mit einer blossen max-width-Deckelung waere der Balken deshalb schon
   optisch voll, bevor die Seite zu Ende gescrollt ist, auf schmalen
   Geraeten bereits bei rund 87 Prozent. Deshalb wird die vorgegebene Breite
   verworfen und der Fortschritt ueber scaleX abgebildet: der Balken spannt
   fest ueber die Kapselbreite und wird anteilig gestaucht. */
.nav-wrap .scroll-progress{
  left:calc(var(--nav-l,16px) + 10px)!important;
  right:calc(var(--nav-r,16px) + 10px)!important;
  bottom:0!important;width:auto!important;max-width:none!important;
  /* Duenner und gedaempfter: die Leiste soll den Fortschritt zeigen, nicht
     mit den Diagrammen um Aufmerksamkeit konkurrieren. */
  height:2px!important;border-radius:0 0 2px 2px!important;
  opacity:.55!important;box-shadow:none!important;transform-origin:left center;
  transform:scaleX(var(--ti-scroll,0))!important;
  will-change:transform}

/* ── mobiles Suchfeld als Kapsel ── */
@media(max-width:860px){
  .ti-navbar-search-panel{left:16px!important;right:16px!important;
    top:10px!important;border-radius:20px!important;
    border:1px solid var(--border)!important;
    background:var(--bg-2)!important;
    box-shadow:0 8px 28px rgba(0,0,0,.16)!important;
    padding:10px 14px!important}
  .ti-navbar-search-panel.is-open,
  .ti-navbar-search-panel[aria-hidden="false"]{transform:translateY(0)!important}
  .ti-navbar-search-dropdown{border-radius:14px!important;margin-top:8px!important}
}
/* Kapsel liegt IMMER ueber dem Menue, nicht erst im geoeffneten Zustand.
   Sonst deckt das geschlossene Menue, das deckungsgleich auf der Kapsel
   liegt, deren Inhalt als weisse Flaeche ab. */
.nav-wrap{z-index:101!important}
.mobile-menu-backdrop{z-index:98!important}
.mobile-menu{z-index:100!important}

/* Geschlossen ist das Menue nicht bedienbar und fuer Screenreader
   unsichtbar, sonst faengt es Beruehrungen auf der Kapsel ab. */
.mobile-menu:not(.active){pointer-events:none!important;visibility:hidden!important}
/* Frueher stand hier pointer-events:none auf dem geoeffneten Menue, damit
   Klicks auf den Hamburger durchkommen. Das hat aber auch das Wischen
   verhindert, weil der Scroll-Container selbst keine Beruehrungen mehr
   annahm. Nicht mehr noetig, seit der Klick in der Erfassungsphase am
   Dokument abgefangen wird. */
.mobile-menu.active{visibility:visible!important;pointer-events:auto!important;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}

.mobile-menu{
  top:var(--cap-top,10px)!important;left:var(--cap-left,16px)!important;
  right:var(--cap-right,16px)!important;bottom:auto!important;
  width:auto!important;
  background:var(--bg-2)!important;
  border:1px solid var(--border)!important;border-radius:20px!important;
  box-shadow:0 8px 28px rgba(0,0,0,.10)!important;
  transform:none!important;opacity:1;overflow:hidden!important;
  height:var(--cap-h,60px)!important;
  padding:calc(var(--cap-h,60px) + 8px) 18px 18px!important;
  transition:height .34s cubic-bezier(.22,1,.36,1),
             left .34s cubic-bezier(.22,1,.36,1),
             right .34s cubic-bezier(.22,1,.36,1),
             box-shadow .34s ease!important}
[data-theme="dark"] .mobile-menu{
  box-shadow:0 8px 28px rgba(0,0,0,.45)!important}

.mobile-menu.active{
  height:var(--cap-open,70vh)!important;
  left:8px!important;right:8px!important;
  overflow-y:auto!important;
  box-shadow:0 20px 52px rgba(0,0,0,.28)!important}

/* Der Menuekopf entfaellt: Logo und Bedienung stehen in der Kapsel darueber */
.mobile-menu-header{display:none!important}

/* Inhalt erst, wenn die Bewegung fast durch ist */
.mobile-menu.active > *{animation:mm4In .26s both cubic-bezier(.22,1,.36,1);
  animation-delay:.2s}
.mobile-menu.active > *:nth-child(3){animation-delay:.24s}
.mobile-menu.active > *:nth-child(4){animation-delay:.28s}
.mobile-menu.active > *:nth-child(5){animation-delay:.32s}
.mobile-menu.active > *:nth-child(6){animation-delay:.36s}
.mobile-menu.active > *:nth-child(7){animation-delay:.40s}
@keyframes mm4In{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Die Staedteliste klappte hart um (display none/block), waehrend Branchen
   und Standorte weich aufgehen. Gleiche Mechanik: Hoehe animieren. */
.mobile-menu .nav-bl-cities{display:block!important;max-height:0;
  overflow:hidden;transition:max-height .25s ease}
.mobile-menu .nav-bl-wrap.open .nav-bl-cities{max-height:520px}
.mobile-menu .nav-bl-chev{transition:transform .25s ease}
.mobile-menu .nav-bl-wrap.open .nav-bl-chev{transform:rotate(180deg)}

/* Der Knopfinhalt wird getauscht, nicht ueberlagert. Das Symbol darf keine
   Klicks annehmen, damit der Knopf sie zuverlaessig bekommt. */
.nav-toggle svg{pointer-events:none;
  animation:ntIn .22s cubic-bezier(.22,1,.36,1)}
@keyframes ntIn{from{opacity:0;transform:rotate(-60deg) scale(.75)}
  to{opacity:1;transform:none}}
/* Der Rahmen kommt vollstaendig aus dem Bestand: .modal-overlay bringt
   Weichzeichner und Abdunklung, .modal die Karte, .modal-close das X oben
   rechts, und mobil greift dieselbe Regel, die das Fenster als Blatt von
   unten einfahren laesst. Hier steht nur, was die Skala braucht. */
.fb-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px;
  text-align:center}
#fb-overlay .modal{text-align:center}
#fb-overlay .modal h3{margin:0 0 8px}
.fb-sub{font-size:13px;color:var(--text-2);line-height:1.6;margin:0 0 22px;
  opacity:.8}
.fb-scale-row{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-bottom:20px}
.fb-pol{font-size:11px;color:var(--text-3);white-space:nowrap;flex:0 0 auto}
.fb-scale{display:flex;gap:10px;justify-content:center}
.fb-dot{width:54px;height:54px;border-radius:50%;
  border:1px solid var(--border);background:transparent;padding:9px;
  color:var(--text);cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s}
.fb-dot svg{width:100%;height:100%;display:block}
/* Die runde Box faerbt sich beim Ueberfahren und bei Auswahl. Jede Stufe
   hat ihre feste Farbe aus der Rampe der Detailseiten, uebergeben als
   --fb-farbe. Das Gesicht selbst bleibt unberuehrt. */
.fb-dot:hover{transform:translateY(-2px);border-color:var(--fb-farbe)}
.fb-dot.is-on{border-color:var(--fb-farbe);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--fb-farbe) 28%,transparent)}
.fb-note{width:100%;box-sizing:border-box;border:1px solid var(--border);
  border-radius:12px;background:var(--bg);color:var(--text);padding:12px 14px;
  font-family:inherit;font-size:14px;resize:vertical;min-height:84px;
  margin-bottom:14px;display:none;outline:none;transition:border-color .15s}
/* Gleiche Fokusfarbe wie im Newsletter-Modal */
.fb-note:focus,.fb-note:hover{border-color:var(--primary)}
.fb-note.is-open{display:block}
.fb-send{display:none}
.fb-send.is-open{display:inline-block}
@media(max-width:640px){
  /* Auf schmalen Bildschirmen laufen die Pole sonst ueber den Rand. Sie
     rutschen deshalb unter die Skala und stehen dort an den Aussenkanten.
     Die Ueberschrift bekommt rechts Platz, damit sie nicht unter das
     Schliesskreuz laeuft. */
  #fb-overlay .modal{padding-top:22px}
  #fb-overlay h3{font-size:19px!important;line-height:1.25;
    padding:0 42px 0 6px;margin-bottom:6px}
  .fb-sub{font-size:13px;margin-bottom:18px}
  .fb-scale-row{flex-direction:column;gap:8px;margin-bottom:18px}
  .fb-scale{gap:8px;width:100%;justify-content:space-between}
  .fb-pol{display:none}
  .fb-pol-mobil{display:flex;justify-content:space-between;width:100%;
    font-size:11px;color:var(--text-3);padding:0 4px}
  .fb-dot{width:52px;height:52px;padding:8px}
}
.fb-pol-mobil{display:none}